Aligning multiple views in custom toolbar

Question

I have multiple views (2 Imagebuttons and a Button) supposed to be put properly on my custom toolbar. But the output shows only the first view.

Here is my XML for custom toolbar:

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

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <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/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/white"
        app:titleTextColor="@color/colorPrimaryDark">
        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="top|center"
            android:orientation="horizontal"
            android:paddingTop="8dp">
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:paddingTop="7dp"
                android:orientation="horizontal"
                android:gravity="left">
            </LinearLayout>
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:orientation="horizontal"
                android:paddingBottom="3dp"
                android:gravity="left">
                <ImageView
                    android:id="@+id/tool_bar_backbutton"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/logo1"
                    />


            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="40dp"
                android:paddingRight="10dp"
                android:layout_weight="1"
                android:background="@android:color/white"
                android:gravity="center"
                android:orientation="horizontal">

                <ImageButton
                    android:id="@+id/action_sos_toolbar"
                    android:background="@android:color/white"
                    android:layout_width="100dp"
                    android:layout_height="40dp"
                    android:onClick="sosClick"
                    android:scaleType="fitCenter"
                    android:src="@drawable/sos_button_copy" />


            </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="40dp"

            android:layout_weight="1"
            android:background="@android:color/white"
            android:gravity="right"
            android:orientation="horizontal">


        <Button
                android:id="@+id/action_feedback_toolbar"
                android:background="@android:color/white"
                android:layout_width="100dp"
                android:layout_height="40dp"
                android:onClick="feedbackClick"

                />
        </LinearLayout>

        </LinearLayout>
    </android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>

Only 'logo1' is getting displayed. I am supposed to put 'logo1' in the left, 'action_sos_toolbar' in the centre and 'action_feedback_toolbar' in the right of the toolbar.

Please help! Thanks!!!

What is your expected output and current output can u share screenshot for both — AskNilesh, Oct 26 '18 at 07:43
don't hardcode values for height and width, you can use layout_weight and android:weightSum for dynamic design changes. https://stackoverflow.com/questions/7452741/what-is-androidweightsum-in-android-and-how-does-it-work will help to get an idea about that. — PushpikaWan, Oct 26 '18 at 07:44

Jay Rathod · Answer 1 · 2018-10-26T07:56:01.780

Nested Linear Layouts are bad for performances. You can only do it with using Relative Layout. Below is the way you need to do it.

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

<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <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/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="#FFFFFF"
        app:titleTextColor="@color/colorPrimaryDark">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/tool_bar_backbutton"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_centerVertical="true"
                android:layout_alignParentStart="true"
                android:layout_alignParentLeft="true"
                android:layout_marginStart="15dp"
                android:layout_marginLeft="15dp"
                android:src="@mipmap/ic_launcher" />


            <ImageButton
                android:id="@+id/action_sos_toolbar"
                android:layout_width="100dp"
                android:layout_height="40dp"
                android:layout_centerHorizontal="true"
                android:background="@android:color/white"
                android:onClick="sosClick"
                android:scaleType="fitCenter"
                android:src="@mipmap/ic_launcher" />

            <Button
                android:id="@+id/action_feedback_toolbar"
                android:layout_width="100dp"
                android:layout_height="40dp"
                android:layout_alignParentRight="true"
                android:layout_alignParentEnd="true"
                android:layout_marginRight="15dp"
                android:layout_marginEnd="15dp"
                android:text="Test"
                android:textColor="#000000"
                android:background="@android:color/white"
                android:onClick="feedbackClick" />

        </RelativeLayout>

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

Below is the SS of above layout.

score 0 · Answer 2 · answered Oct 26 '18 at 07:55

I can see multiple issues in this layout like empty linear layout and setting "0dp" for layout width etc. Just try like this:

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

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    xmlns:android="http://schemas.android.com/apk/res/android">

<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/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/white"
    app:titleTextColor="@color/colorPrimaryDark">

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingTop="8dp">


        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="horizontal"
            android:gravity="left"
            android:layout_gravity="left">

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

        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="horizontal"
            android:layout_gravity="center_horizontal">

            <ImageButton
                android:id="@+id/action_sos_toolbar"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="sosClick"
                android:src="@drawable/sos_button_copy" />


        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="right"
            android:orientation="horizontal"
            android:layout_gravity="right">


        <Button
                android:id="@+id/action_feedback_toolbar"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="feedbackClick"/>

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

score 0 · Answer 3 · answered Oct 26 '18 at 08:01

You can update your layout like this,if further problem please let me know.The solution is using Relative layout you are using too many linear layouts in your layout and that turns into memory leaks.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <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/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/white"
        app:titleTextColor="@color/colorPrimaryDark">

        <RelativeLayout 

    xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                android:paddingTop="8dp">


                <ImageView
                    android:id="@+id/tool_bar_backbutton"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:src="@drawable/logo1" />


                <ImageButton
                    android:layout_width="100dp"
                    android:layout_height="40dp"
                    android:layout_centerInParent="true"
                    android:background="@android:color/white"
                    android:onClick="sosClick"
                    android:scaleType="fitCenter"
                    android:src="@drawable/sos_button_copy" />


                <Button
                    android:id="@+id/action_feedback_toolbar"
                    android:layout_width="100dp"
                    android:layout_height="40dp"
                    android:layout_alignParentRight="true"
                    android:background="@android:color/white"
                    android:onClick="feedbackClick" />


            </RelativeLayout>
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>

Aligning multiple views in custom toolbar

3 Answers3