Why is an AppBar adding squares to the background of my app bar

user_308675 0
Viewed 241

Good afternoon all,

I have been digging at this for a long time now and its time to ask for help.

I have the following 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>

The layout renders with a little artifact on the bottom right and bottom left of the toolbar, where the background is curved and clipped:

Toolbar

I've previously gotten rid of this by using a ConstraintLayout instead of an AppBar, but that does not work with the animations of a CoordinatorLayout, which we are keen to use.

Please note: due to corporate considerations I have had to change colours in the above code sample.

EDIT: In answer to the below questions, the background file is

<?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" />
appbar toolbar layout android xml
3 Answers

The problem is because you are using android:elevation="0dp" instead of app:elevation="0dp" in your AppBarLayout.

Add also in your activity the below code:

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

Instead of using AppBar you can use only LinearLayout. I hope this will resolve your problem.

<?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>
user_126207360

Those artifacts are coming from the AppBarLayout shadow due to its elevation. (Your layout has all elevations set to 0dp, but maybe this is not what you are actually using.)

If you need elevation but don't want the shadow then you can specify the following for the 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+

Another thing that may be confusing things: You are overusing your drawable appbar_background_2020. I think that you should find the best place for it and only specify it once.

The above will eliminate the shadow but, if you want a shadow that follows the curve of your AppBarLayout, that is something that you may be able to resolve with an online search.

user_62879100
Related