How to center button in toolbar Android

Question

I am new to android app development. I am trying to create a toolbar that has 3 buttons on it, left middle and center. My left are right buttons are positioned correctly but my middle button displays in the middle of the page instead of middle of the tool bar. Wondering if anyone can help with this. Thanks

Also wondering if anyone can help with the white space above the tool bar

activity_main:

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="bottom"
        >


    <include
        android:id="@+id/app_bar_main"
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

        <include
            android:id="@+id/toolbar"
            layout="@layout/toolbarlayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <Button
            android:id="@+id/menu_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:text="Menu" />

        <Button
            android:id="@+id/add_new_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_centerInParent="true"
            android:text="Add New" />

        <Button
            android:id="@+id/home_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:text="Home" />

    </RelativeLayout>


    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#141619"
        android:fitsSystemWindows="true"
        app:itemIconTint="#141619"
        app:itemTextColor="#FFFFFF"
        app:menu="@menu/activity_main_drawer" >

    </com.google.android.material.navigation.NavigationView>
</androidx.drawerlayout.widget.DrawerLayout>

app_bar_main:

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/Theme.MPL.AppBarOverlay">
        
    </com.google.android.material.appbar.AppBarLayout>

    <include layout="@layout/content_main" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

toolbarlayout:

<androidx.appcompat.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="#141619"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

    />

Answer 1

I have fixed issue with all of your layouts.

1. for your activity_main.xml copy and paste below layout.

    <?xml version="1.0" encoding="utf-8"?> <androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:openDrawer="start"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <include android:id="@+id/app_bar_main" layout="@layout/app_bar_main" /> </RelativeLayout> <com.google.android.material.navigation.NavigationView android:id="@+id/nav_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" android:background="#141619" android:fitsSystemWindows="true" app:itemIconTint="#141619" app:itemTextColor="#FFFFFF"> </com.google.android.material.navigation.NavigationView> </androidx.drawerlayout.widget.DrawerLayout>

2. change you app_bar_main to following

   <?xml version="1.0" encoding="utf-8"?> <androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="#282941" android:fitsSystemWindows="true" android:focusable="true" android:focusableInTouchMode="true" android:minHeight="?attr/actionBarSize"> <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center_vertical" android:paddingEnd="16dp"> <Button android:id="@+id/menu_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:text="Menu" /> <Button android:id="@+id/add_new_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:layout_centerInParent="true" android:text="Add New" /> <Button android:id="@+id/home_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:text="Home" /> </RelativeLayout> </androidx.appcompat.widget.Toolbar>

That's it, you don't have to create any other layout. Now wherever you want to have this toolbar you can include your app_bar_main.xml in the layout and you will get the toolbar. Then in your activity if you want to access toolbar and button inside toolbar, do like this:

Toolbar toolbar = findViewById(R.id.account_toolbar);
setSupportActionBar(toolbar);
Button btnEdit = toolbar.findViewById(R.id.menu_button);

let me know if you have any questions. I'll try to help you out.

Answer 2

I don't know if what you are trying to do is a good idea. From a design perspective, you have only a limited space in the toolbar and you should position there only the most relevant actions to the context, all the other actions are going to be hiden in the classic "three dots" menu.

You can check what I mean here https://developer.android.com/training/appbar/actions https://material.io/components/app-bars-top#anatomy

Even thouth, to achieve what you are trying to do, I'll do it using Constraint Layout instead of Relative Layout, makes your life easier and is up to date;) https://developer.android.com/training/constraint-layout

Answer 3

First, create title_menu.xml Layout. make sure android:layout_height="wrap_content" and android:gravity="center"

<?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:gravity="center">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="Button"/>
</LinearLayout>

Second, add the following code on the onCreate method in your Activity.

getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
getSupportActionBar().setCustomView(R.layout.title_menu);