How to make toolbar with rounded corners and elevation inside appbarlayout? Like this picture

Question

This is my code that I try to create toolbar with rounded corners shown in picture.

<android.support.design.widget.AppBarLayout
    android:id="@+id/appBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="12dp"
    android:background="@android:color/transparent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/bg_actionbar" />

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

bg_actionbar.xml

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="@color/white" />
<corners android:radius="16dp" />
</shape>

Billingsgate

Answer 1

Set app:elevation="0dp" in AppBarLayout

And set android:elevation="4dp" to Toolbar

And also set 'android:layout_margin="4dp"' to Toolbar which will help you to show shadow.

So your layout will be like this

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

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:elevation="4dp"
    android:layout_margin="4dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg_actionbar" />

Relentless

Thanks for your support, I also tried this, but it works in Api 21 and higher only, what about below api 21? – Billingsgate

If you are considering those devices then you have to create a image bg with this kind of shadow in photo shop and set as background – Relentless

Answer 2

You May Try It:

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    app:layout_constraintTop_toTopOf="parent"
    tools:layout_editor_absoluteX="0dp">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="20dp"
        app:cardCornerRadius="14dp"
        app:cardElevation="20dp">

        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="ElementApp"
                android:textSize="24sp"
                android:textStyle="bold" />
        </android.support.v7.widget.Toolbar>
    </android.support.v7.widget.CardView>
</android.support.design.widget.AppBarLayout>

And the output will be like: The output Image

Grayish

Answer 3

you can use following xml file as a back ground and give specific radius as you requirement:

shadowfile.xml

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#18000000" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#05000000" />
            <corners android:radius="7dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#10000000" />
            <corners android:radius="6dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#15000000" />
            <corners android:radius="5dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#20000000" />
            <corners android:radius="4dp" />
        </shape>
    </item>

    <!-- Background -->
    <item>
        <shape>
            <solid android:color="#FFFFFF" />
            <corners android:radius="0dp" />
        </shape>
    </item>
</layer-list>

Note : Here one item equals one layer, you can add or remove as per your requirements

Use in layout or toolbar :

android:background="@drawable/shadowfile"  

Karenkarena

Answer 4

You can use toolbar without appbarlayout

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        app:elevation="4dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/bg_actionbar" />

Airing

Answer 5

Why don't you wrap it with cardview

Maisey