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.
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.
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!
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
}
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.