Android layout with action bar and tabs

Question

I'm new to Android and I need your advice. I would like to have an activity with action bar, I need also tabs (but not tabs in actionbar) and drop down list in action bar to navigate. When I click on e.g. first tab, the navigation list in actionbar should be filled with data, when seconds tab, navigation list should be filled with another data, and etc., the action items should also be changed when the tab is changed. When I select some item from navigation list in actionbar then the view should be updated. I'm not sure how to make it.

I use ActionBarSherlock for actionbar, and I have already tabs using TabHost and TabWidget with fragments, when I click on the tab, then fragment is changed, but this is not exactly what I want, and I have no idea what to do next. Could you help me?

Here is a screen:

When I click on the Tab 1, then the navigation list in actionbar should be Tab1 List1, Tab1 List2 etc. and should be shown first time the default view from the list (e.g. first Tab1 List1) or last selected by the user view from the navigation list. When I click on the tab 2, list should be Tab2 List1, Tab2 List2 etc. and should be shown e.g. Tab2 List2 view. etc. So every tab adjust the actionbar.

Answer 1

You have two options:

1. Use list navigation in the action bar and place a TabWidget at the top of your content view.
2. Use tab navigation in the action bar and set a custom view with a Spinner

Be careful not to overload your users. Usually two types of navigation can be confusing.

Answer 2

For the action items, if you are using fragments for your different "screens" then they can register to supply action items with setHasOptionsMenu(true); and define their actions by overriding onCreateOptionsMenu(Menu menu, MenuInflater inflater). So, a good rule of design, if you can't explain it simply, you're probably doing something wrong and should change the design.

It also might be a misuse of Android design to diverge too far from the action bar pattern, meaning you have something that looks like an ActionBar with navigation, but really you have some other thing that you have made up yourself. If this is required, then you should not make something that looks like an action bar with navigation, because users will expect certain behavior and get a different response (confusion).

Finally, with what you describe, it seems that the Tabs drive the list navigation, yet the list navigation has visual precedence (being above and essentially containing the tabs). So if the tabs are consistent through selections of the list navigation, but the list changes based on selections of the tab navigation, it is represented clearer by having the tabs have visual precedence over the list navigation. So, if you keep both navigation I would reverse their order. Maybe try list navigation with a view pager instead of the list navigation. Jake has a great library for view pager too http://viewpagerindicator.com/

Answer 3

I achieved this by Setting the tab navigation in action bar and Setting Spinner in Menu for navigation list. I would explain the second part as the first one is trivial.

Define Spinner in action_bar.xml:

<item
    android:id="@+id/menu_test_spinner"
    android:actionViewClass="android.widget.Spinner"
    android:showAsAction="always"/>

Setup and bind data in Spinner in the activity:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.action_bar, menu);
    MenuItem testSpinner = menu.findItem( R.id.menu_test_spinner );
    setupTestSpinner(testSpinner);
    return true;
}

private void setupTestSpinner(MenuItem item) {
    View view = item.getActionView();
    if (view instanceof Spinner) {
        Spinner spinner = (Spinner) view;
        spinner.setAdapter(ArrayAdapter.createFromResource(this,
                R.array.test,
                android.R.layout.simple_spinner_dropdown_item));
        spinner.setOnItemSelectedListener(new OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> parentView, View selectedItemView, int position, long id) {
                //Do something on item selection
            }

            @Override
            public void onNothingSelected(AdapterView<?> arg0) {

            }
        });
    }
}

Now, override the method which would respond to tab changes, and change the navigation list items in Spinner.