I have a bottom menu as a toolbar and I need to add another one at the top as an actionbar. here is the code ofthe activity
public class ListViewPharms extends AppCompatActivity {
public Toolbar mToolbar;
ListView mListView;
SimpleAdapter pharmAdapter;
LinearLayout searchsec;
// Search EditText
EditText inputSearch;
@Override
public void onCreate(Bundle savedInstanceState) {
requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_action_bar);
getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.activity_list_view_pharms_title);
Toolbar toolbar = (Toolbar) findViewById(R.id.mytoolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);
setupEvenlyDistributedToolbar();
inputSearch = (EditText) findViewById(R.id.search_bar);
inputSearch.addTextChangedListener(new TextWatcher() {
@Override
public void onTextChanged(CharSequence cs, int arg1, int arg2, int arg3) {
// When user changed the Text
ListViewPharms.this.pharmAdapter.getFilter().filter(cs);
}
@Override
public void beforeTextChanged(CharSequence arg0, int arg1, int arg2,
int arg3) {
// TODO Auto-generated method stub
}
@Override
public void afterTextChanged(Editable arg0) {
// TODO Auto-generated method stub
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.menu_register, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.action_home:
Intent intent = new Intent(this, ListViewPharms.class);
startActivity(intent);
break;
case R.id.action_cont:
item.setIcon(getResources().getDrawable(R.drawable.icon2_active));
Intent intent2 = new Intent(this, Contribute.class);
startActivity(intent2);
break;
case R.id.action_info:
Intent intent3 = new Intent(this, info.class);
startActivity(intent3);
break;
case R.id.action_settings:
Intent intent4 = new Intent(this, contactInfo.class);
startActivity(intent4);
break;
}
return true;
}
/**
* This method will take however many items you have in your
* menu/menu_main.xml and distribute them across your devices screen
* evenly using a Toolbar. Enjoy!!
*/
public void setupEvenlyDistributedToolbar(){
// Use Display metrics to get Screen Dimensions
Display display = getWindowManager().getDefaultDisplay();
DisplayMetrics metrics = new DisplayMetrics();
display.getMetrics(metrics);
// Toolbar
mToolbar = (Toolbar) findViewById(R.id.mytoolbar);
// Inflate your menu
mToolbar.inflateMenu(R.menu.menu_register);
// Add 10 spacing on either side of the toolbar
mToolbar.setContentInsetsAbsolute(4, 4);
// Get the ChildCount of your Toolbar, this should only be 1
int childCount = mToolbar.getChildCount();
// Get the Screen Width in pixels
int screenWidth = metrics.widthPixels;
// Create the Toolbar Params based on the screenWidth
Toolbar.LayoutParams toolbarParams = new Toolbar.LayoutParams(screenWidth, ViewGroup.LayoutParams.WRAP_CONTENT);
// Loop through the child Items
for(int i = 0; i < childCount; i++){
// Get the item at the current index
View childView = mToolbar.getChildAt(i);
// If its a ViewGroup
if(childView instanceof ViewGroup){
// Set its layout params
childView.setLayoutParams(toolbarParams);
// Get the child count of this view group, and compute the item widths based on this count & screen size
int innerChildCount = ((ViewGroup) childView).getChildCount();
int itemWidth = (screenWidth / innerChildCount);
// Create layout params for the ActionMenuView
ActionMenuView.LayoutParams params = new ActionMenuView.LayoutParams(itemWidth, ViewGroup.LayoutParams.WRAP_CONTENT);
// Loop through the children
for(int j = 0; j < innerChildCount; j++){
View grandChild = ((ViewGroup) childView).getChildAt(j);
if(grandChild instanceof ActionMenuItemView){
// set the layout parameters on each View
grandChild.setLayoutParams(params);
}
}
}
}
}
}
and here is the xml for this activity mytoolbar is the bottom toolbar:
<RelativeLayout
android:id="@+id/pharms_list"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:orientation="vertical"
android:layout_above="@+id/mytoolbar">
<ListView
android:id="@+id/list"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:drawSelectorOnTop="false"
android:layout_below="@+id/first_sec"
android:layout_alignParentEnd="true" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="@+id/mytoolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@drawable/linesup"
app:contentInsetLeft="10dp"
app:contentInsetRight="10dp"
app:contentInsetStart="10dp"
>
</android.support.v7.widget.Toolbar>
and in the manifest file I did add the android:uiOptions="splitActionBarWhenNarrow" how I could add a menu to the top as this image?
I had a similar need, the only difference being that I wanted a toolbar on top, and a sort of action bar at the bottom.
The toobar had to be material-compliant, with a title, some buttons, and possibly an action overflow, while the bottom bar had to contain some equally-spaced, always visible buttons, and nothing else.
My implementation follows, tested and working, both on Android 4.x and Android 5.x.
Here's the layout; as you can see, I'm not using Toolbar for the bottom bar, but an ActionMenuView, which is a lower-level widget, that the Toolbar itself uses internally:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="@+id/page_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentTop="true"
android:background="?attr/colorPrimary"
android:elevation="4dp"/>
<android.support.v7.widget.ActionMenuView
android:id="@+id/bottom_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentBottom="true"
android:background="?attr/colorPrimary"
android:elevation="4dp" />
<WebView
android:id="@+id/page"
android:layout_below="@id/page_toolbar"
android:layout_above="@id/bottom_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
Here's the menu for the bottom bar; nothing different, compared to a regular toolbar menu:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/action_list"
android:icon="@drawable/ic_list"
android:title="@string/action_list"
app:showAsAction="always"/>
<!-- several more items here... -->
</menu>
And here's the code in my activity, that derives from AppCompatActivity; as you can see I exploit the onCreateOptionsMenu callback of the top toolbar to inflate and initialize the bottom bar too. Unfortunately, listeners for bottom bar menu items need to be set individually. But they can share the same onOptionsItemSelected with the top toolbar:
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the toolbar menu
getMenuInflater().inflate(R.menu.web_page_menu, menu);
// Inflate and initialize the bottom menu
ActionMenuView bottomBar = (ActionMenuView)findViewById(R.id.bottom_toolbar);
Menu bottomMenu = bottomBar.getMenu();
getMenuInflater().inflate(R.menu.obj_menu, bottomMenu);
for (int i = 0; i < bottomMenu.size(); i++) {
bottomMenu.getItem(i).setOnMenuItemClickListener(new MenuItem.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
return onOptionsItemSelected(item);
}
});
}
return true;
}
A screenshot:
I am not sure this is a totally orthodox implementation, but I hope it can be useful to someone.
See the following tutorial Using the Android Toolbar (ActionBar) - Tutorial
Also you can use two toolbars if you want to have two different toolbars, just set layout_gravity of both these toolbars differently, one to have top and other to have bottom as following:
<android.support.design.widget.CoordinatorLayout
android:id="@+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- As the main content view, the view below consumes the entire
space available using match_parent in both dimensions. -->
<FrameLayout android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/circle_blue"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_margin="8dp"
android:background="@drawable/curved_div_shadow"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways">
</android.support.v7.widget.Toolbar>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar2"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_margin="8dp"
android:layout_gravity="bottom"
android:background="@drawable/curved_div_shadow"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CoordinatorLayout>
Also read this Using two toolbars with multiple menus for inflating different menus for both the toolbars.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With