Android toolbar background shadow

Question

I want to make the same toolbar. Everything is perfect but can not get the shadow as the picture shows. I design the whole things but can not get the shadow. Can anyone plz guide me. I m posting my code below and attaching the image below:

layout design image

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

    <androidx.cardview.widget.CardView
        android:id="@+id/cvToolbar"
        style="@style/materialCardView"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_56"
        android:layout_marginStart="@dimen/dp_8"
        android:layout_marginTop="@dimen/dp_8"
        android:layout_marginEnd="@dimen/dp_8"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <androidx.appcompat.widget.AppCompatImageView
                android:id="@+id/ivToolbarBack"
                android:layout_width="@dimen/dp_0"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/dp_23"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/ic_arrow_back" />

            <androidx.appcompat.widget.AppCompatTextView
                android:id="@+id/tvToolbarTitle"
                style="@style/pinVerificationToolbarTextStyle"
                android:layout_width="@dimen/dp_0"
                android:layout_height="@dimen/dp_40"
                android:layout_marginStart="@dimen/dp_24"
                android:layout_marginTop="@dimen/dp_11"
                android:layout_marginEnd="@dimen/dp_8"
                android:layout_marginBottom="@dimen/dp_5"
                android:gravity="top"
                android:text="@string/pos_system"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@+id/ivToolbarBack"
                app:layout_constraintTop_toTopOf="parent" />

        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.cardview.widget.CardView>

    </androidx.constraintlayout.widget.ConstraintLayout>


        <style name="pinVerificationToolbarTextStyle">
        <item name="android:textAppearance">@style/TextAppearance.Text.Regular</item>
        <item name="android:textColor">@color/colorBlack</item>
        <item name="android:textSize">22sp</item>
        <item name="android:letterSpacing">-0.01</item>
        <item name="android:textStyle">bold</item>
        <item name="fontFamily">@font/martel_sans</item>
        </style>
    
        <style name="materialCardView">
        <item name="cardBackgroundColor">@color/colorWhite</item>
        <item name="cardCornerRadius">26dp</item>
        <item name="cardElevation">1dp</item>
        <item name="elevation">1dp</item>
        <item name="android:translationZ">3dp</item>
        </style>

can somebody please help me to resolve.

Post also your screen. But where is the toolbar in your layout? — Gabriele Mariotti, Jul 21 '20 at 05:51

score 0 · Answer 1 · answered Jul 21 '20 at 05:03

0

you can use android:background="@android:drawable/dialog_holo_light_frame" to get shadow also you can make a background drawable using any drawing software like photoshop ,xd etc you can see this as a reference Android View shadow

answered Jul 21 '20 at 05:03

Jyotish Biswas

674
5
11

score 0 · Answer 2 · answered Jul 21 '20 at 05:38

0

Just add android:elevation=“6dp” in your toolbar

answered Jul 21 '20 at 05:38

Anas Nadeem

779
6
10

Shreemaan Abhishek · Answer 3 · 2020-07-21T08:48:24.340

In your onCreate method of your activity code add the following code:

kotlin code:

supportActionBar?.elevation = 8F

java code:

getSupportActionBar().setElevation(8);

------------------------OR-----------------

kotlin code:

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        actionBar?.elevation = 8F
    }

java code:

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        getActionBar().setElevation(8);
    }

to achieve 8dp of elevation in your app bar. (adding elevation is going to add shadow)

You can change the numeric value to achieve the desired elevation(shadow)

Android toolbar background shadow

3 Answers3