Android - Center image on Toolbar with menu inflated

user_1907954 0
Viewed 2831

I'm trying to center the text on Toolbar taking in consideration the menu that is being inflated on Activity. I find many solutions on SO, but didn't find anything that covers the case where a menu is also inflated.

If I only inflate an ImageView without inflating the menu, everything is ok. If I inflate the ImageView and the menu then the image doesn't get displayed in the center of Toolbar, but center on its own space (between hamburger and menu)

Conclusion:

I need to center ImageView on Toolbar, no matter if something later is inflated or not. The menu i am inflating at the moment only has one item (a switch, always visible)

Here is my current code:

 <android.support.design.widget.AppBarLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                app:elevation="0dp">

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:background="?attr/colorPrimary"
                    app:contentInsetLeft="0dp"
                    app:contentInsetStartWithNavigation="0dp"
                    app:theme="@style/ToolbarTheme">

                    <ImageView
                        android:id="@+id/toolbar_logo"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:src="@drawable/app_logo" />

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

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

Activity:

...    
@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main_toolbar_user_visibility, menu);
        return true;
    }
...

How can I center the ImageView even after a menu is inflated?

android-toolbar android-layout menu android
2 Answers

you may create separate layout which let you ignore the toolbar itself and align freely and include it after toolbar layout. remove title by getSupportActionBar().setDisplayShowTitleEnabled(false);.(this is offcurse a drawer activity and fragments but you can ignore )

activity_main.xml

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:background="@color/splashback"
    android:id="@+id/drawer_layout"
    android:layoutDirection="rtl"
    >

    <!-- your main fragment content layout -->
    <include
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        layout="@layout/content_main"/>

    <!-- your action bar (customised) layout -->
    <include
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        layout="@layout/drawer_toolbar"/>

    <!-- GO TO CENTER MORON LOGO layout -->
    <include
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        layout="@layout/toolbarlogo"/>

    <!-- drawer -->
    <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"
        app:menu="@menu/drawer_menu"
        app:headerLayout="@layout/drawer_head"
        android:fitsSystemWindows="true"

        />


</androidx.drawerlayout.widget.DrawerLayout>

drawer_toolbar.xml

<?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="?attr/actionBarSize">

    <androidx.appcompat.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimaryDark"
        android:id="@+id/toolbarx"
        android:layoutDirection="rtl"
        android:theme="@style/ThemeOverlay.AppCompat.Dark"
        />

</LinearLayout>

toolbarlogo.xml

<?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="?attr/actionBarSize" android:orientation="vertical">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:src="@drawable/logotoolbar"
        android:layout_gravity="center"
        />

</LinearLayout>
user_70281960
Related