CODEWITHSUNDEEP
androidxmlandroid-layoutmaterial-designandroid-toolbar
Sbavert
Sbavert

Reputation: 109

How to control the elevation of the material toolbar according to my own preference?

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

Code:

<?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://i.sstatic.net/RIfA7.jpg

(Notice that there is no elevation attribute used here).

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 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 (I have tried all the values from 0dp to 4dp, it doesn't make a difference)

Then I added the same android:elevation 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 which is definitely not what I want.

Then I tried app:elevation attribute which didn't make any changes when used inside the <com.google.android.material.appbar.MaterialToolbar/> tag no matter the value I used but when I tried the same app:elevation attribute inside <com.google.android.material.appbar.AppBarLayout>, it removed the little bit of elevation that can be seen in the original screenshot (which shows the state of the app when no elevation attributes were used) and made it look like this (notice that there is no elevation in the top bar anymore).

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.

Upvotes: 0

Views: 1872

Answers (1)

Marek Macko
Marek Macko

Reputation: 927

Try to remove AppBarLayout and set android:background on your MaterialToolbar, elevation can be controlled by android:elevation then:

<com.google.android.material.appbar.MaterialToolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorPrimary"
    android:elevation="0dp" />

Check with the newest Material Design Library stable version 1.4

Upvotes: 1

Related Questions