javaandroidandroid-toolbar

How to center button in toolbar Android


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"

    />

Where I want the button


Solution

  • 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.