How to correctly align buttons in an action bar with a navigation view

Question

I created a action bar with two buttons . This activity also included with a side menu . I used a navigation view for that purpose.

So , my activity looks like below,

But actually I want it like below (notice the "Cancel" button is more closer to navigation bar, and both buttons are properly aligned),

This this is my action bar code(in layout file),

<android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar_target_ranges"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay">

            <LinearLayout
                android:id="@+id/target_ranges_layout_main"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <android.support.v7.widget.AppCompatButton
                    android:id="@+id/target_ranges_cancel_btn"
                    style="@style/ButtonStyle_Med"
                    android:layout_weight="1"
                    android:text="@string/action_cancel" />

                <android.support.v7.widget.AppCompatButton
                    android:id="@+id/target_ranges_save_btn"
                    style="@style/ButtonStyle_Med"
                    android:layout_weight="1"
                    android:text="@string/action_save" />

            </LinearLayout>

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

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

How to achieve this ? Have any ideas ?

Answer 1

The problem is that your Toolbar does not set center gravity for the inner LinearLayout. You can do that by setting LayoutParams to the LinearLayout like this:

    Toolbar toolbar = (Toolbar) findViewById(R.id. toolbar_target_ranges);

    LinearLayout toolbarRow = (LinearLayout) toolbar.findViewById(R.id. target_ranges_layout_main);

    toolbarRow.setLayoutParams(new Toolbar.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.CENTER));

Answer 2

Try this,

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar_target_ranges"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
          >

            <LinearLayout
                android:id="@+id/target_ranges_layout_main"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <android.support.v7.widget.AppCompatButton
                    android:id="@+id/target_ranges_cancel_btn"
                    style="@style/TextAppearance.AppCompat.Medium"
                    android:layout_weight="1"
                    android:text="Cancel"
                    android:layout_marginLeft="40dp"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />

                <android.support.v7.widget.AppCompatButton
                    android:id="@+id/target_ranges_save_btn"
                    style="@style/TextAppearance.AppCompat.Medium"
                    android:layout_weight="1"
                    android:text="Add"
                    android:layout_marginLeft="20dp"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />

            </LinearLayout>

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

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


</LinearLayout>

Answer 3

Take RelativeLayout and adjust your Button instead of LinearLayout.

 <android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_target_ranges"
        app:popupTheme="@style/AppTheme.PopupOverlay"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary">

        <RelativeLayout
            android:id="@+id/target_ranges_layout_main"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <android.support.v7.widget.AppCompatButton
                android:id="@+id/target_ranges_cancel_btn"
                style="@style/ButtonStyle_Med"
                android:text="Cancel"
                android:layout_width="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_alignParentLeft="true"
                android:layout_height="wrap_content" />

            <android.support.v7.widget.AppCompatButton
                android:id="@+id/target_ranges_save_btn"
                style="@style/ButtonStyle_Med"
                android:layout_alignParentRight="true"
                android:text="Save"
                android:layout_marginRight="50dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

        </RelativeLayout>

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

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