Is it possible to use dropdown AND tabs as navigat

Question

Is it possible to have both, an spinner/dropdown at the top and tabs just below in the action bar? I want to use the spinner at the top of the action bar as view-switch controller (i.e. table view or chart view) while the tabs below is going to show different lists of data.

The following screen shot illustrates exactly what I want to achieve:

If it's not possible having both modes in the action bar, I could put an TabWidget at the top of my content view. However, I'm little bit unsure if I should have one fragment or one activity per tab.

Answer 1

It's possible. I was trying to achieve an identical UI to what you have shown, and was stuck until I tried something pretty simple but a bit confusing as well.

What I've done is set a Spinner as my custom view for the ActionBar, and then:

ActionBar actionBar = getActionBar(); actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

Here's an example of what I mean.

Tabs Code:

ActionBar actionBar = getActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

actionBar.addTab(actionBar.newTab().setText("Today").setTabListener(this));
actionBar.addTab(actionBar.newTab().setText("List").setTabListener(this));
actionBar.addTab(actionBar.newTab().setText("Month").setTabListener(this));

In the parent activity for this activity, I've done this:

Context contextTheme = new ContextThemeWrapper(this, R.style.ActionBarSpinner);
Spinner actionBarSpinner = new Spinner(contextTheme);

// Specify a SpinnerAdapter to populate the dropdown list.
actionBarSpinnerAdapter = new ActionBarSpinnerAdapter(actionBar.getThemedContext(), dropdownValues);
actionBarSpinner.setAdapter(actionBarSpinnerAdapter);

// Set up the dropdown list navigation in the action bar.
actionBarSpinner.setOnItemSelectedListener(this);

actionBar.setCustomView(actionBarSpinner);

This effectively makes gives me a custom view for the ActionBar, but then I can set the navigationMode to tabs to allow me to have the tabs I want. Set the appropriate event listeners on each item, and voila!

Answer 2

You can also create a custom action provider to achieve a spinner in the action bar. So there is no need to create a whole action bar. By doing this and use tabs as navigation mode your goal is fulfilled.

Answer 3

Is it possible to use dropdown AND tabs as navigation in the action bar?

Not possible in default lib using bat you can create custom action bar view and set that one possible

try this one code

action_bar.xml 

<LinearLayout
    android:id="@+id/actionbar_linearLayout_menu"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:layout_marginTop="2dip"
    android:gravity="right" >

    <ImageView
        android:id="@+id/actionbar_imageView_menu_search"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="5dip"
        android:padding="8dp"
        android:src="@drawable/button_search_selector" />

    <ImageView
        android:id="@+id/actionbar_imageView_menu_myaccount"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="5dip"
        android:padding="8dp"
        android:src="@drawable/button_myaccount_selector" />

    <ImageView
        android:id="@+id/actionbar_imageView_menu_settings"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="5dip"
        android:padding="8dp"
        android:src="@drawable/button_settings_selector" />
</LinearLayout>

<LinearLayout
    android:id="@+id/actionbar_linearLayout_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_toLeftOf="@+id/actionbar_linearLayout_menu" >

    <Spinner
        android:id="@+id/actionbar_spi_menu"
        style="@style/MenuSpinnerTextViewItem"
        android:layout_width="80dip"
        android:layout_height="34dip"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="6dip"
        android:background="@drawable/spinner_bg"
        android:paddingLeft="3dip"
        android:spinnerMode="dropdown"
        android:visibility="gone" />

    <com.smartdeal.util.SmartDealTextView
        android:id="@+id/actionbar_txt_title"
        style="@style/Style_Text_Bold"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginTop="4dip"
        android:gravity="left"
        android:padding="5dip"
        android:text="Smart Deal"
        android:textColor="@android:color/white"
        android:textSize="18dip" />
</LinearLayout>

<LinearLayout
    android:id="@+id/actionbar_linearLayout_search"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:background="@drawable/serch_bg"
    android:visibility="gone" >

    <ImageView
        android:id="@+id/actionbar_imageView_searchMenu_search"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/search_icon_selected" />

    <EditText
        android:id="@+id/actionbar_edt_searchMenu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dip"
        android:layout_weight="1"
        android:background="@null"
        android:singleLine="true"
        android:textColor="@android:color/white"
        android:textSize="18dip" >
    </EditText>

    <ImageView
        android:id="@+id/actionbar_imageView_searchMenu_cancel"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal"
        android:layout_marginLeft="5dip"
        android:src="@drawable/search_cancel" />
</LinearLayout>

BaseActivity.java

{
final ActionBar ab = getSupportActionBar();
        ab.setDisplayHomeAsUpEnabled(true);
        final LayoutInflater inflater = (LayoutInflater) getSystemService("layout_inflater");
        ab.setDisplayShowTitleEnabled(false);
        // ab.setTitle("Settings");
        View view = inflater.inflate(R.layout.actionbar_view, null);

        linLayoutMenu = (LinearLayout) view
                .findViewById(R.id.actionbar_linearLayout_menu);
        linLayoutSearch = (LinearLayout) view
                .findViewById(R.id.actionbar_linearLayout_search);
        linLayoutTitle = (LinearLayout) view
                .findViewById(R.id.actionbar_linearLayout_title);

        txtTitle = (TextView) view.findViewById(R.id.actionbar_txt_title);
        spiMenu = (Spinner) view.findViewById(R.id.actionbar_spi_menu);

        menuSearch = (ImageView) view
                .findViewById(R.id.actionbar_imageView_menu_search);
        menuMyaccount = (ImageView) view
                .findViewById(R.id.actionbar_imageView_menu_myaccount);
        menuSettings = (ImageView) view
                .findViewById(R.id.actionbar_imageView_menu_settings);
        menuSearchCancel = (ImageView) view
                .findViewById(R.id.actionbar_imageView_searchMenu_cancel);

        menuSearch.setOnClickListener(this);
        menuMyaccount.setOnClickListener(this);
        menuSettings.setOnClickListener(this);
        menuSearchCancel.setOnClickListener(this);

        if (this instanceof HistoryActivity) {
            txtTitle.setVisibility(View.GONE);
            spiMenu.setVisibility(View.VISIBLE);

            List<String> list = new ArrayList<String>();
            list.add("History");
            list.add("Activity");

            MenuListAdapter menuList = new MenuListAdapter(this, list);
            spiMenu.setAdapter(menuList);

        } else {
            txtTitle.setVisibility(View.VISIBLE);
            spiMenu.setVisibility(View.GONE);
        }

        ab.setCustomView(view);
        ab.setDisplayShowCustomEnabled(true);
}

ViewActivity.java

TabListener {

private ListView historyList;
private ArrayList<String> list;
LinearLayout linLayoutHistory, linLayoutActivity;
private ActionBar actionBar;

@Override
public void onCreate(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onCreate(savedInstanceState);
    setContentView(R.layout.....);

    initComponent();

}

private void initComponent() {
    // setActionBarHomeUpAsEnable(true);

    linLayoutActivity = (LinearLayout) findViewById(R.id.history_activity_linLayout_activity);
    linLayoutHistory = (LinearLayout) findViewById(R.id.history_activity_linLayout_history);

    historyList = (ListView) findViewById(R.id.history_activity_listView);
    list = new ArrayList<String>();

    spiMenu.setOnItemSelectedListener(new OnItemSelectedListener() {

        @Override
        public void onItemSelected(AdapterView<?> arg0, View arg1,
                int arg2, long arg3) {
            // TODO Auto-generated method stub


        }

        @Override
        public void onNothingSelected(AdapterView<?> arg0) {
            // TODO Auto-generated method stub

        }
    });

}


@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // TODO Auto-generated method stub

    actionBar = getSupportActionBar();

    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
    ActionBar.Tab month_tab = actionBar.newTab()
            .setText(getResources().getString(R.string.tab_month))
            .setTabListener(this);
    ActionBar.Tab year_tab = actionBar.newTab()
            .setText(getResources().getString(R.string.tab_year))
            .setTabListener(this);
    ActionBar.Tab all_tab = actionBar.newTab()
            .setText(getResources().getString(R.string.tab_all))
            .setTabListener(this);

    actionBar.addTab(month_tab);
    actionBar.addTab(year_tab);
    actionBar.addTab(all_tab);

    return super.onCreateOptionsMenu(menu);

}

@Override
public void onTabSelected(Tab tab, FragmentTransaction ft) {
    // TODO Auto-generated method stub

}

@Override
public void onTabUnselected(Tab tab, FragmentTransaction ft) {
    // TODO Auto-generated method stub

}

@Override
public void onTabReselected(Tab tab, FragmentTransaction ft) {
    // TODO Auto-generated method stub

}

Answer 4

EDIT:

Is it possible to use dropdown AND tabs as navigation in the action bar?

No. The code in ActionBarView (where the setNavigationMode(int) call ends up) uses a switch statement, so the modes can't be combined.

Some combination of the action bar navigation modes and my previous answer is still a valid option though: You could use a custom view in your Action Bar and use a ViewPager for the content. Each tab in the ViewPager would be a fragment that you can update manually (change the view type) from the parent activity when the spinner is changed.

Side note, there are 3rd party libraries such as ViewPagerExtensions that give the fixed tabs appearance without having to use the ActionBar tabs.