applications – How do I alter the elevation and the shadow shown under the material toolbar?


So this is my layout file and as you can see, instead of using the pre-included AppBars that come included with themes I am using a custom toolbar.

<?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/dice_roller_activity"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <com.google.android.material.appbar.MaterialToolbar
            android:id="@+id/activity_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:title="@string/app_name" />

    </com.google.android.material.appbar.AppBarLayout>

    <ImageView.../>

    <Button.../>

</androidx.constraintlayout.widget.ConstraintLayout>

And this is what it looks like: https://imgur.com/Otclvt5

I am extending from the Theme.MaterialComponents.Light.NoActionBar theme to be able to use my own custom ToolBar. Now the problem is that I can’t find a way to change the elevation of the toolbar. To change the elevation, I tried to use android:elevation="4dp" attribute inside the <AppBarLayout> tag like so:

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

        <com.google.android.material.appbar.MaterialToolbar.../>

    </com.google.android.material.appbar.AppBarLayout>

and it made no difference as you can see here: https://imgur.com/cuCY8io

Then I added the same android:elevation="4dp" attribute inside the child tag of <AppBarLayout>, namely the <MaterialToolbar> tag like so:

    <com.google.android.material.appbar.AppBarLayout...>

         <com.google.android.material.appbar.MaterialToolbar
              android:id="@+id/activity_toolbar"
              ...
              android:elevation="4dp"
              ... />

    </com.google.android.material.appbar.AppBarLayout>

and this resulted in a horrible mess like this: https://imgur.com/undefined
which is definitely not what I want. I don’t just wanna add more elevation or reduce the elevation, I want to be able to control it. I know that there is already enough elevation that abides by the material guidelines but I want to make it like the Google News app where there is no elevation or I might wanna make it like the settings page in stock android where there is just enough elevation to make it look both beautiful and distinguishable from the rest of the layout.

If more information is needed, you can check out the github repo for this app that I have made: https://github.com/sbeve72/diceroller/tree/unguided-development

PS: I am a beginner and you might have noticed this just the first app you make when taking the Udacity course by google. I went on to improve it to make it look better and have some functionality like dark mode and light mode. I am telling you this because I would really appreciate a beginner friendly explanation.