Всем доброго дня,
Я долго копался в этом, и пришло время обратиться за помощью.
У меня есть следующий 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" />
Да, я пробовал это. Кажется, проблема связана с AppBarLayout - если я уберу его, я смогу избавиться от этих маленьких углов.
Вы можете попробовать установить форму фона на панель инструментов и сделать AppBarLayout прозрачным или невидимым?
Нет игральных костей. Установка видимости на невидимый скрывает все компоненты, а установка прозрачного цвета не имеет значения.
Что appbar_background_2020
можно добавить с вопросом.
Проблема в том, что вы используете android:elevation="0dp" вместо app:elevation="0dp" в своем AppBarLayout.
Добавьте также в свою деятельность следующий код:
findViewById(R.id.campfire_app_bar).bringToFront();
Когда я меняю android:elevation
на app:elevation
, z-порядок удаляется (вместе с теневым артефактом), что приводит к прокрутке карточек под верхней частью панели инструментов.
Проверьте мой обновленный ответ, добавив BringToFront() на панель приложений в сочетании с app:elevation = "0dp". Если проблема все еще существует, загрузите демонстрационный проект на github, чтобы воспроизвести проблему.
@skooter, пожалуйста, поделитесь своим полным кодом с полосой прокрутки, включая карточки
Спасибо @MariosP - это сработало. Далее я решил заняться созданием собственных теней.
Вместо 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?
решение outlineProvider
не работает для AppBarLayout
.
@skooter Вы используете фон, который можно рисовать в трех местах. Мне было интересно, правильно ли это. Я также думал, что это было определено на панели инструментов, но это не так, поэтому, скорее всего, это не проблема. Другие вещи работали у меня, но не сейчас, поэтому не уверен, что там происходит. Я обнаружил, что установка app:elevation
AppBar на любое значение избавит от артефактов, поэтому вы можете просто указать app:elevation = "4dp"
, чтобы установить высоту по умолчанию и устранить артефакты. Я использую материал 1.2.1.
Вы могли бы попробовать установить высоту на 0?