Is it possible to change shape of Android Toolbar from the default rectangle in android?

Question

Problem : Trying to achieve Toolbar with arched bottom. The content when scrolling should go through this arc space.

• Only thing I could think of (as well as tried) is to set the background of toolbar with a drawable which has arch. Lookwise it solves things. But then when the content is scrolled up, the white space in the arch remain, since Toolbar maintains it's rectangle shape.

• I'm also trying to avoid using custom shapes instead of Toolbar because this toolbar is part of a Collapsibletoolbarlayout and Appbarlayout controlled by Coordinator layout.

Any suggestions ?

Answer 1

This can be done fairly easily.

<android.support.design.widget.CoordinatorLayout
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#0000"
        app:elevation="0dp">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/colorPrimary"
                app:layout_collapseMode="pin"/>

            <!--Other collapsing toolbar components here-->

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

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

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <!--Your content here-->

    </android.support.v4.widget.NestedScrollView>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/curve"
        app:layout_anchor="@id/appBar"
        app:layout_anchorGravity="bottom"
        android:layout_gravity="bottom"/>

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

The FrameLayout anchored to the bottom of the AppBarLayout acts as the container for the arch. I created a vector drawable that I used as the background for the FrameLayout

curve.xml

<vector android:width="100dp"
    android:height="40dp"
    android:viewportHeight="50"
    android:viewportWidth="400"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <path
        android:pathData="M0,0L400,0L400,50Q200,-50,0,50L0,0"
        android:fillColor="@color/colorPrimary"/>

</vector>

Change the android:height property of the drawable to control how high you want the arch to go

Output