Почему AppBar добавляет квадраты на фон моей панели приложений

Всем доброго дня,

Я долго копался в этом, и пришло время обратиться за помощью.

У меня есть следующий AppBar

<?xml version = "1.0" encoding = "utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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/app_bar_constrained"
    android:layout_height = "?android:attr/actionBarSize"
    android:layout_width = "match_parent"
    android:background = "@drawable/appbar_background_2020">

    <com.google.android.material.appbar.AppBarLayout
        android:id = "@+id/app_bar"
        android:elevation = "0dp"
        android:background = "@drawable/appbar_background_2020"
        android:layout_width = "match_parent"
        android:layout_height = "wrap_content"
        app:layout_constraintTop_toTopOf = "@id/app_bar_constrained">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id = "@+id/app_bar_collapsing"
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content"
            android:elevation = "0dp">

            <androidx.appcompat.widget.Toolbar
                android:id = "@+id/toolbar_2020"
                android:layout_width = "match_parent"
                android:layout_height = "wrap_content"
                android:elevation = "0dp">

                <LinearLayout
                    android:layout_width = "wrap_content"
                    android:layout_height = "wrap_content"
                    android:orientation = "vertical">

                    <TextView
                        android:id = "@+id/toolbar_title"
                        android:layout_width = "wrap_content"
                        android:layout_height = "wrap_content"
                        tools:text = "Title" />

                    <TextView
                        android:id = "@+id/toolbar_sub_title"
                        android:layout_width = "wrap_content"
                        android:layout_height = "wrap_content"
                        android:visibility = "gone"
                        tools:text = "Subtitle"
                        tools:visibility = "visible" />
                </LinearLayout>
            </androidx.appcompat.widget.Toolbar>

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

        <com.google.android.material.tabs.TabLayout
            android:id = "@+id/tab_bar"
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content"
            android:fadingEdge = "horizontal"
            android:fadingEdgeLength = "24dp"
            android:visibility = "gone"
            android:layout_marginStart = "24dp"
            android:layout_marginEnd = "@24dp"
            android:elevation = "0dp"
            android:background = "@drawable/appbar_background_2020"
            app:tabBackground = "?attr/selectableItemBackground"
            app:tabGravity = "start"
            app:tabIndicator = "@drawable/tab_indicator"
            app:tabIndicatorColor = "@color/colorPrimary"
            app:tabIndicatorHeight = "1dp"
            app:tabMode = "scrollable"
            app:tabPaddingEnd = "2dp"
            app:tabPaddingStart = "2dp"
            app:tabRippleColor = "@color/colorAccent"
            app:tabSelectedTextColor = "@color/colorAccent"
            app:tabTextAppearance = "@style/Widget.AppCompat.Light.ActionBar.TabBar"
            app:tabTextColor = "@color/colorPrimary"
            tools:layout_conversion_absoluteHeight = "48dp"
            tools:layout_conversion_absoluteWidth = "0dp" />

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

</androidx.constraintlayout.widget.ConstraintLayout>

Макет отображается с небольшим артефактом в нижнем правом и нижнем левом углу панели инструментов, где фон искривлен и обрезан:

Раньше я избавлялся от этого, используя ConstraintLayout вместо AppBar, но это не работает с анимациями CoordinatorLayout, которые мы очень хотим использовать.

Обратите внимание: по корпоративным соображениям мне пришлось изменить цвета в приведенном выше примере кода.

Обновлено: в ответ на приведенные ниже вопросы фоновый файл

<?xml version = "1.0" encoding = "utf-8"?>
<shape xmlns:android = "http://schemas.android.com/apk/res/android"
android:shape = "rectangle">

<corners
    android:bottomLeftRadius = "24dp"
    android:bottomRightRadius = "24dp"
    android:topLeftRadius = "0dp"
    android:topRightRadius = "0dp" />

<solid android:color = "@color/white" />

Вы могли бы попробовать установить высоту на 0?

MakinTosH 16.12.2020 08:41

Да, я пробовал это. Кажется, проблема связана с AppBarLayout - если я уберу его, я смогу избавиться от этих маленьких углов.

skooter 16.12.2020 09:43

Вы можете попробовать установить форму фона на панель инструментов и сделать AppBarLayout прозрачным или невидимым?

MakinTosH 16.12.2020 09:48

Нет игральных костей. Установка видимости на невидимый скрывает все компоненты, а установка прозрачного цвета не имеет значения.

skooter 17.12.2020 00:50

Что appbar_background_2020 можно добавить с вопросом.

ADM 31.12.2020 05:57
3
5
273
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Проблема в том, что вы используете android:elevation="0dp" вместо app:elevation="0dp" в своем AppBarLayout.

Добавьте также в свою деятельность следующий код:

findViewById(R.id.campfire_app_bar).bringToFront(); 

Когда я меняю android:elevation на app:elevation, z-порядок удаляется (вместе с теневым артефактом), что приводит к прокрутке карточек под верхней частью панели инструментов.

skooter 01.01.2021 02:33

Проверьте мой обновленный ответ, добавив BringToFront() на панель приложений в сочетании с app:elevation = "0dp". Если проблема все еще существует, загрузите демонстрационный проект на github, чтобы воспроизвести проблему.

MariosP 01.01.2021 20:07

@skooter, пожалуйста, поделитесь своим полным кодом с полосой прокрутки, включая карточки

Suvajit Patra 02.01.2021 12:18

Спасибо @MariosP - это сработало. Далее я решил заняться созданием собственных теней.

skooter 04.01.2021 02:29

Вместо AppBar можно использовать только LinearLayout. Я надеюсь, что это решит вашу проблему.

<?xml version = "1.0" encoding = "utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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/app_bar_constrained"
    android:layout_height = "?android:attr/actionBarSize"
    android:layout_width = "match_parent">

    <LinearLayout
        android:id = "@+id/app_bar"
        android:elevation = "0dp"
        android:background = "@drawable/appbar_background_2020"
        android:layout_width = "match_parent"
        android:layout_height = "wrap_content"
        app:layout_constraintTop_toTopOf = "@id/app_bar_constrained"
        android:orientation = "horizontal">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id = "@+id/app_bar_collapsing"
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content"
            android:elevation = "0dp">

            <androidx.appcompat.widget.Toolbar
                android:id = "@+id/toolbar_2020"
                android:layout_width = "match_parent"
                android:layout_height = "wrap_content"
                android:elevation = "0dp">

                <LinearLayout
                    android:layout_width = "wrap_content"
                    android:layout_height = "wrap_content"
                    android:orientation = "vertical">

                    <TextView
                        android:id = "@+id/toolbar_title"
                        android:layout_width = "wrap_content"
                        android:layout_height = "wrap_content"
                        tools:text = "Title" />

                    <TextView
                        android:id = "@+id/toolbar_sub_title"
                        android:layout_width = "wrap_content"
                        android:layout_height = "wrap_content"
                        android:visibility = "gone"
                        tools:text = "Subtitle"
                        tools:visibility = "visible" />
                </LinearLayout>
            </androidx.appcompat.widget.Toolbar>

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

        <com.google.android.material.tabs.TabLayout
            android:id = "@+id/tab_bar"
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content"
            android:fadingEdge = "horizontal"
            android:fadingEdgeLength = "24dp"
            android:visibility = "gone"
            android:layout_marginStart = "24dp"
            android:layout_marginEnd = "24dp"
            android:elevation = "0dp"
            android:background = "@drawable/appbar_background_2020"
            app:tabBackground = "?attr/selectableItemBackground"
            app:tabGravity = "start"
            app:tabIndicator = "@drawable/tab_indicator"
            app:tabIndicatorColor = "@color/colorPrimary"
            app:tabIndicatorHeight = "1dp"
            app:tabMode = "scrollable"
            app:tabPaddingEnd = "2dp"
            app:tabPaddingStart = "2dp"
            app:tabRippleColor = "@color/colorAccent"
            app:tabSelectedTextColor = "@color/colorAccent"
            app:tabTextAppearance = "@style/Widget.AppCompat.Light.ActionBar.TabBar"
            app:tabTextColor = "@color/colorPrimary"
            tools:layout_conversion_absoluteHeight = "48dp"
            tools:layout_conversion_absoluteWidth = "0dp" />

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Эти артефакты исходят из тени AppBarLayout из-за ее повышения. (В вашем макете все высоты установлены на 0dp, но, возможно, это не то, что вы на самом деле используете.)

Если вам нужна высота, но не нужна тень, вы можете указать следующее для AppBarLayout:

android:outlineProvider = "none" // Eliminates the shadow for API 21+. 
                               // Below API 21, there shouldn't be a shadow
android:elevation = "2dp"        // Set elevation for API 21+

Еще одна вещь, которая может сбивать с толку: вы злоупотребляете своим рисунком appbar_background_2020. Я думаю, что вы должны найти лучшее место для него и указать его только один раз.

Вышеприведенное устранит тень, но если вам нужна тень, которая повторяет кривую вашего AppBarLayout, это то, что вы можете решить с помощью онлайн-поиска.

Спасибо @Cheticamp. Не могли бы вы расширить комментарий о фоне Drawable?

skooter 04.01.2021 02:12

решение outlineProvider не работает для AppBarLayout.

skooter 04.01.2021 02:20

@skooter Вы используете фон, который можно рисовать в трех местах. Мне было интересно, правильно ли это. Я также думал, что это было определено на панели инструментов, но это не так, поэтому, скорее всего, это не проблема. Другие вещи работали у меня, но не сейчас, поэтому не уверен, что там происходит. Я обнаружил, что установка app:elevation AppBar на любое значение избавит от артефактов, поэтому вы можете просто указать app:elevation = "4dp", чтобы установить высоту по умолчанию и устранить артефакты. Я использую материал 1.2.1.

Cheticamp 04.01.2021 04:59

Другие вопросы по теме