Implementing "Drilldown" navigation in Android App UI

Question

I am trying to learn how to do stuff in Android, and I'm not sure of the best way to build the interface.

I've been working on porting an iPhone app, which uses navigation controllers and table views for looking at the different sections: basically, someone touches a cell in the table, which drills down to another table. when they touch a cell on that table it drills down to a webview that displays the information.

I want to do something similar for the android app, but I don't know how, or if there is a better way native to Android. I've figured out how to use the webview to my purposes, but moving forward and backward in the table tree is unclear.

Answer 1

So on an iphone when you say drill down I guess you mean when a user touches-up on a list row and it slides a new view on from the right, most of the time it has a nav bar at the top to give the user the option to go back?

The way android handles this is simply by starting a new activity. So you would have your 'Books' ListActivity when a listItem is clicked you would define a new intent that starts your 'Chapters' ListActivity and so on. The nav bar at the top of an iphone is not standard UI in android as most people see the dedicated 'back' key as a way of getting back to the previews screen.

This is how you start an intent in case you haven't seen it before:

Intent chaptersIntent = new Intent(this, Chapters.class);
this.startActivity(chaptersIntent);

This article is worth a quick read through as it explains Activities perfectly

http://d.android.com/guide/topics/fundamentals.html

Also have a look at the android version of TableView - ListView:

http://d.android.com/reference/android/widget/ListView.html

and ListActivity:

http://d.android.com/reference/android/app/ListActivity.html

---

EDIT:: Sample Code I would do it something like this

public class Books extends ListActivity {

private String[] mBooks = new String[]{ "Book1", "Book2", "Book3", "Book4" };

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    ArrayAdapter<String> booksAdapter = new ArrayAdapter<String>(this, 
            android.R.layout.simple_list_item_1, 
            android.R.id.text1, 
            mBooks);

    this.setListAdapter(booksAdapter);

}

@Override
protected void onListItemClick(ListView l, View v, int position, long id) {
    super.onListItemClick(l, v, position, id);

    Intent mViewChaptersIntent = new Intent(this, Chapters.class);
    mViewChaptersIntent.putExtra("BookName", mBooks[position]);
    startActivity(mViewChaptersIntent);
}

}

So you pass through the id of the book as an extra to the Intent then in your Chapters Activity you get that extra in the onCreate method:

    @Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    Bundle extras = getIntent().getExtras();
    if(extras != null) {
        String bookId = extras.getString("BookName");
    }
}

Finally make sure all new activities are added to your AndroidManifest.xml file:

<activity android:name=".YourClassName"
  android:label="@string/activity_name"
  >
</activity>

Hope that helps

Answer 2

The primary way that the Android ui is created is using xml. I'm not exactly sure what you mean when you say drill down but if you want it to change views its as simple as making one set of xml elements visible and another set not. Check out the developer pages for more help.

http://developer.android.com/guide/topics/ui/index.html

Forgot to mention this is also a very good beginner resource. http://mobiforge.com/designing/story/understanding-user-interface-android-part-1-layouts