Выравнивание значка элемента меню переполнения с заголовком панели инструментов

Question

РЕДАКТИРОВАТЬ: теперь у меня есть пользовательский Toolbar в отдельном макете (toolbar.xml) от моего activity_main.xml. Новый макет теперь содержит только один TextView для заголовка. Однако Toolbar имеет overflow menu, который содержит только один элемент (значок настроек), и для него установлено значение showAsAction="always". Однако в предварительном просмотре макета я не вижу значок фактических настроек, поэтому я не могу align мой заголовок TextView со значком, чтобы избежать любых смещений (см. Изображение). Есть идеи?

toolbar.xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="70dp"
    android:background="@drawable/toolbar_gradient"
    android:elevation="4dp"
    app:titleTextColor="@android:color/white"
    app:layout_scrollFlags="scroll|enterAlways">

    <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="@string/toolbar_title_placeholder"
        android:fontFamily="@font/montserrat_semibold"
        android:textColor="@android:color/white"
        android:textSize="20sp" />
</androidx.appcompat.widget.Toolbar>

Как вы можете видеть на изображении ниже, мой заголовок TextView смещен относительно overflow menu item (значок настроек). Есть ли способ, как я могу это исправить?

Answer 1

70dp - это нестандартная высота панели инструментов, которая является основной проблемой вашего макета.Если вы останетесь с высотой панели инструментов 70dp, вам нужно будет внести коррективы в макет панели инструментов.

Вот один из способов, который просто изменяет макет XML.7dp отступ на панели инструментов сместит значок вниз.Соответствующие изменения в текстовом представлении сохраняют его выравнивание.

<androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="70dp"
    android:background="@android:color/holo_blue_light"
    android:elevation="4dp"
    android:paddingTop="7dp"
    app:layout_scrollFlags="scroll|enterAlways"
    app:titleTextColor="@android:color/white">

    <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="wrap_content"
        android:layout_height="?attr/actionBarSize"
        android:layout_gravity="center_horizontal|top"
        android:gravity="center"
        android:text="@string/toolbar_title_placeholder"
        android:textColor="@android:color/white"
        android:textSize="20sp" />
</androidx.appcompat.widget.Toolbar>

Чтобы понять, что происходит, внесите изменения и запустите приложение.В Android Studio перейдите в Инструменты-> Инспектор макетов и выберите свое устройство и приложение.То, что вы увидите, это дамп макета, который вы можете проверить.

Этот метод работает с тем, что вы опубликовали.Это может иметь побочные эффекты при размещении других видов, поэтому будьте настороже.

Альтернативный код включает в себя код для получения вида, соответствующего значку настроек.Насколько я помню, это не красиво.

Кстати, вы не видите значок настроек в Android Studio, потому что элементы меню добавляются во время выполнения.

Answer 2

Добавить CoordinatorLayout & AppBarLayout с app:elevation="0dp".

    <?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"
        >
        <com.google.android.material.appbar.AppBarLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:theme="@style/AppTheme.AppBarOverlay"
                app:elevation="0dp">

                <androidx.appcompat.widget.Toolbar
                  android:id="@+id/toolbar"
                  android:layout_width="match_parent"
                  android:layout_height="?attr/actionBarSize"
                  android:background="?attr/colorPrimary"
                  app:popupTheme="@style/AppTheme.PopupOverlay"
                  app:titleTextAppearance="@style/Toolbar.TitleText"
                  app:layout_scrollFlags="scroll|enterAlways"
                    > 
                 //Your work
                </androidx.appcompat.widget.Toolbar>

            </com.google.android.material.appbar.AppBarLayout>

     <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
       >

      //Your work
    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Answer 3

Как мы знаем, в Android есть определенные правила в шаблоне дизайна, такие как размер панели инструментов, размер значков и т. Д.

Android предпочитает использовать actionBarSize на панели инструментов.

?android:attr/actionBarSize

В вашем случае, если вам нужна панель инструментов нестандартного размера, вам следует создать свою собственную панель инструментов, как показано ниже:

 <android.support.design.widget.AppBarLayout
            android:id="@+id/app_bar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="70dp"
                android:background="@color/colorWhite"
                android:contentInsetLeft="0dp"
                android:contentInsetStart="0dp"
                android:elevation="0.1dp"
                android:paddingEnd="10dp"
                android:paddingStart="10dp"
                app:contentInsetLeft="0dp"
                app:contentInsetStart="0dp"
                app:layout_scrollFlags="scroll|enterAlways|snap"
                tools:targetApi="lollipop">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:orientation="horizontal">


                    <LinearLayout
                        android:id="@+id/search_layout"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:gravity="start"
                        android:orientation="horizontal">


                        <ImageView
                            android:id="@+id/toolbar_start_image_view"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:padding="5dp"
                            android:src="@drawable/ic_search_black_24dp"

                            />


                    </LinearLayout>


                    <TextView
                        android:id="@+id/toolbar_title"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:fontFamily="@font/bold"
                        android:gravity="center"
                        android:text="Visit Tulsipur"
                        android:textColor="@color/colorBlack"
                        android:textSize="18sp" />

                    <LinearLayout
                        android:id="@+id/notification_layout"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:gravity="end"
                        android:orientation="horizontal">


                        <ImageView
                            android:id="@+id/toolbar_end_image_view"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:padding="5dp"
                       android:src="@drawable/ic_notifications_none_black_24dp"

                            />


                    </LinearLayout>

                </LinearLayout>

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

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

Теперь вы можете установить щелчок в определенном ImageView / Layout.

OUTPUT