Best way to create a bottom toolbar in android.

Question

Sample Toolbar

Looking for a good approach to achieve a similar toolbar. Should I use image buttons ??

the one with the rewards and palces ? ToolBar is a viewgroup so you can put your imageButtons in it and give them gravity — Elltz, May 05 '15 at 21:23
Yes. I tried using toolbar but couldn't achieve similar result — Ved Agarwal, May 05 '15 at 21:24
Thanks Elltz I was successful using your approach. I had to use Buttons with drawable top instead of ImageButtons and also had to use toolbar.setContentInsetsAbsolute(0,0); to set the inner views properly. — Ved Agarwal, May 10 '15 at 20:24
well if it was helpful you can upvote, if it did solve what you want you can accept. & im glad you solved it. — Elltz, May 10 '15 at 21:19

score 12 · Answer 1 · edited May 09 '18 at 19:58

<android.support.v7.widget.Toolbar  xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/actionbarT"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/thebackgroundimageyouwant"
android:minHeight="?attr/actionBarSize"
app:theme="@style/Base.Theme.AppCompat.CompactMenu" >

    <LinearLayout
        android:id="@+id/toolbarmenucontainer"
        android:layout_width="match_parent"
        android:weightSum="3"
        android:layout_height="match_parent"
        android:orientation="horizontal" >

        <ImageButton
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="@drawable/preferedbackground"
            android:clickable="true"
            android:scaleType="fitXY"
            android:layout_weight = "1"
            android:src="@drawable/preferredimage" />

         <ImageButton
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="@drawable/preferedbackground"
            android:clickable="true"
            android:scaleType="fitXY"
            android:layout_weight = "1"
            android:src="@drawable/preferredimage" />

        <ImageButton
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="@drawable/preferedbackground"
            android:clickable="true"
            android:scaleType="fitXY"
            android:layout_weight = "1"
            android:src="@drawable/preferredimage" />

    </LinearLayout>

</android.support.v7.widget.Toolbar>

the idea is they will lay out horizontally like the one you want, also then do not do ToolBar.setTitle() or setnagivation on the ToolBar also you don't have to add optionsMenu to it. so it will be bare like the one you want.

try it and see if it fits your requirement, remember to add the background and image src to the ImageButtons

But how to change image grammatically ? Please provide suggestion — Anand Savjani, Jul 02 '15 at 10:04
the `ImageButton` in your toolbar? you can add id for the `ImageButton` and get a reference to it by `Toolbar.findViewById()` then you can change the image of the `ImageButton` grammatically (:- i mean programmatically, hope it helps sir — Elltz, Jul 02 '15 at 13:24
You should use `android:layout_weight="1"` instead of `android:weight="1"` — florian-do, Dec 13 '15 at 00:26
Why `android:layout_width="0dp"`? Is there any reason for that? — vojta, Oct 07 '16 at 07:54
@AnkitSinghaniya if you want to add text you use Button and the text will be your text and the Image will be your `drawableTop=""` — Elltz, Oct 07 '16 at 09:16
@vojta yes if you want the `LinearLayout` to position the children based on ratio you set the width of the children to `0dp` and the parent will do the rest. If the `LinearLayout` had an orientation of vertical, and you wanted ratio positioning your height will be 0dp, cool? — Elltz, Oct 07 '16 at 09:17

score 6 · Answer 2 · answered Sep 06 '17 at 23:47

6

I know this question is super old, but I figure it's never too late to answer for other peoples sake who are searching for the same thing. I just found this tutorial and these official docs on the subject now that bottom navs are officially supported by Android and are a part of the material design guidelines if your app has 3 to 5 top level navigation locations. I hope this helps someone else, because I spent a good bit of time looking around for this.

answered Sep 06 '17 at 23:47

AlexW.H.B.

1,781
3
25
50

2

Thank you for the links, i knew Android had support for the Bottom Toolbar but I couldn't easily find it. – se22as Jan 09 '18 at 14:53

score 2 · Answer 3 · answered Nov 26 '15 at 13:05

2

I shared my solution on GitHub. It is for Xamarin but the layouts are the same.

http://behsaadramez.com/2015/11/26/androidbottomtoolbar/

answered Nov 26 '15 at 13:05

Behsaad Ramez

31
2

score 1 · Answer 4 · answered Sep 20 '16 at 17:39

1

I came to this question sometime back. I was unable to add text below the buttons. I have written an article how I solved the problem with code snippet and screenshot here, create goolge plus like toolbar in android

answered Sep 20 '16 at 17:39

aks

8,796
11
50
78

score 1 · Answer 5 · answered Feb 18 '20 at 19:55

This works for me in 2020, Android Studio 3.5.3 is how to set a Toolbar (the second half of the accepted answer). How do I align views at the bottom of the screen? You can use a Toolbar layout/widget in androidx.appcompat.widget.Toolbar

Set the alignParentBottom property to "true" (Place the elements Inside a RelativeLayout).

score 0 · Answer 6 · edited May 05 '15 at 21:35

Well, last time I tried to do this I've used Buttons at the bottom of the layout wrapped by a LinearLayout, something like this:

<LinearLayout>
// The other stuff on the view
(...)
</LinearLayout>
// (This is the part you can try to use as a toolbar)
<LinearLayout
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        style="?android:attr/borderlessButtonStyle"
        android:textStyle="bold"
        android:background="@drawable/button_tab"
        android:textColor="#ffffffff"
        android:text="@string/bt_orders"
        android:id="@+id/bt_orders"
        android:layout_weight="1" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        style="?android:attr/borderlessButtonStyle"
        android:textStyle="bold"
        android:background="@drawable/button_tab"
        android:textColor="#ffffffff"
        android:text="@string/bt_credit"
        android:id="@+id/bt_credit"
        android:layout_weight="1" />
</LinearLayout>

And if you're curious about the style and background I've used, here it is:

// button_tab.xml
<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <stroke
                android:width="1dp"
                android:color="@color/button_pressed" />
            <solid android:color="@color/button_pressed" />
        </shape>
    </item>
    <item android:state_focused="true" >
        <shape android:shape="rectangle">
            <stroke
                android:width="1dp"
                android:color="@color/button_focus" />
            <solid android:color="@color/button_focus" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <stroke
                android:width="1dp"
                android:color="@color/button_normal" />
            <solid android:color="@color/button_normal" />
        </shape>
    </item>
</selector>

Best way to create a bottom toolbar in android.

6 Answers6

Linked