android -constraintLayout how to add elevation to sticky toolbar?

Question

I have created a constraintLayout but the toolbar i am using does not have shadow elevation. i dont see any shadow. here is an image of what i have so far:

i want the green part to be elevated and a bit of a shadow. you know the material header way. so when i scroll the recyclerview it looks lke its oging under the header. pretty standard nowadays.

here is my code so far:

 <?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:layout_width="match_parent"
android:layout_height="match_parent">

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/gl_start"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_begin="76dp" />

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:contentInsetEnd="0dp"
    app:contentInsetLeft="0dp"
    app:contentInsetRight="0dp"
    app:contentInsetStart="0dp"
    app:elevation="8dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintBottom_toTopOf="@id/gl_start"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary">

        <ImageView
            android:id="@+id/iv"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:src="@android:drawable/btn_star"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.appcompat.widget.Toolbar>


<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/rv"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@android:color/white"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/gl_start"
    tools:itemCount="10"
    tools:listitem="@layout/list_item" />

note that the tool bar is meant to be sticky so it should not move, but ti just need it elevated, i tried setting elevation in xml on the toolbar but as you can see its not that pretty. how to put shadow and elevation ?

Answer 1

Either wrap you Toolbar inside AppBarLayout

<com.google.android.material.appbar.AppBarLayout
    android:id="@+id/app_bar_layout"
    ...>

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            .../>
</com.google.android.material.appbar.AppBarLayout>

Or use android:elevation with Toolbar, which require min API Level 21

android:elevation="10dp"