android add two toolbars in the same activity ?

Question

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?

Solution 1

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.

Solution 2

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.

Comments

[Scott Cooper]

How do you get the icons to display evenly? When I use it the options all appear in an overflow menu, despite showAsAction being always.

[Scott Cooper]

Never mind, it appears that you need to the use getMenuInflator rather than creating one with a context.

[Tomin]

Inorder to prevent overflow menu, use app:showAsAction="always" in all menu items. Now all menu items should be visible on the toolbar itself

[Giorgio Barchiesi]

Recently tested on Android 8 and Android 9 too

[Erik Melkersson]

Just a note with an update: Things are in androidx.appcompat.widget.Toolbar/ActionMenuView if using recent android version.