Background overlapsing notification bar while using custom toolbar with AppBarLayout

Question

I've created custom toolbar layout because I wanted to have a centered title on bar. The code looks like this:

main_activity.xml

<android.support.constraint.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/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".mainactivity.MainActivity">

<!-- Appbar -->

<android.support.design.widget.AppBarLayout
    android:id="@+id/appBarLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <!-- Toolbar -->

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary">

        <TextView
            android:id="@+id/toolbar_title"
            style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="@string/app_name"
            android:textColor="@android:color/white" />
    </android.support.v7.widget.Toolbar>

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

MainActivity.java

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mToolbar = findViewById(R.id.toolbar);
    setSupportActionBar(mToolbar);
    getSupportActionBar().setDisplayShowTitleEnabled(false);

    mTitle = mToolbar.findViewById(R.id.toolbar_title);

These gives me that:

But I want it to be like standard behavior:

I tried a lot of solution, like transparency styles for bar etc. Bo I cannot figure it out.

Could you help me?

You need to use `android.support.design.widget.CoordinatorLayout` as your rootlayout https://stackoverflow.com/questions/52639958/gradient-status-bar-with-bottomnavigationview — AskNilesh, Nov 22 '18 at 10:15

score 1 · Answer 1 · answered Nov 22 '18 at 10:31

Using ConstraintLayout is not a good idea in there since maybe you'll need to hide or give the layout some effects later.

Instead, use CoordinatorLayout as the root of the layout and remove ConstraintLayout with it's attributes:

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Appbar -->

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme">

        <!-- Toolbar -->

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary">

            <TextView
                android:id="@+id/toolbar_title"
                style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="@string/app_name"
                android:textColor="@android:color/white" />
        </android.support.v7.widget.Toolbar>

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

AndroidX (Newer versions):

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Appbar -->

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme">

        <!-- Toolbar -->

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary">

            <TextView
                android:id="@+id/toolbar_title"
                style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="@string/app_name"
                android:textColor="@android:color/white" />
        </androidx.appcompat.widget.Toolbar>

    </com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Output:

Thank you. Sorry for so late answer, but I has something come around and I hadn't time to answer you. If in my main `ConstraintLayout ` I also have an `include` view and `BottomNavigationView`, should I still be using `CoordinatorLayout`? 'Code': ` ` — northenofca, Nov 26 '18 at 08:40

Background overlapsing notification bar while using custom toolbar with AppBarLayout

1 Answers1