How to create custom shadows for the button in Android

Question

I faced a problem creating custom shadows for buttons in Android application. I tried many ways of solving this problem but I did not manage to do it. I guess this documentation here contains solution but I did not manage to do it. My goal is to make shadows like these buttons have.

This is my XML of the activity in which I have my buttons

<android.support.constraint.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/fragment_login"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.egoregorov.payme1.LoginActivityFragment"
tools:showIn="@layout/activity_login">

<android.support.constraint.ConstraintLayout
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginStart="8dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.36">

    <ImageView
        android:id="@+id/login_app_icon"
        android:layout_width="126dp"
        android:layout_height="118dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintHorizontal_bias="0.501"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@mipmap/ic_launcher_round"/>

    <ImageView
        android:id="@+id/login_email_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        app:layout_constraintBottom_toBottomOf="@+id/login_email_inputLayout"
        app:layout_constraintLeft_toLeftOf="parent"
        app:srcCompat="@drawable/email_icon"/>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/login_email_inputLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="24dp"
        app:layout_constraintLeft_toRightOf="@+id/login_email_icon"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/login_app_icon">

        <EditText
            android:id="@+id/login_email_textbox"
            style="@style/Widget.AppCompat.EditText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:ems="10"
            android:hint="@string/email_hint"
            android:inputType="textEmailAddress"
            android:singleLine="true"
            android:textColorLink="@color/colorPrimaryDark"
            tools:layout_editor_absoluteX="8dp"
            tools:layout_editor_absoluteY="-36dp"/>
    </android.support.design.widget.TextInputLayout>

    <ImageView
        android:id="@+id/login_password_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        app:layout_constraintBottom_toBottomOf="@+id/login_password_inputLayout"
        app:layout_constraintLeft_toLeftOf="parent"
        app:srcCompat="@drawable/password_icon"/>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/login_password_inputLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="16dp"
        app:layout_constraintLeft_toRightOf="@+id/login_password_icon"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/login_email_inputLayout">

        <EditText
            android:id="@+id/login_password_textbox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:ems="10"
            android:hint="@string/password_hint"
            android:inputType="textPassword"
            tools:layout_editor_absoluteX="30dp"
            tools:layout_editor_absoluteY="300dp"/>

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


    <Button
        android:id="@+id/login_logIn_button"
        style="@style/Widget.AppCompat.Button.Colored"
        android:layout_width="0dp"
        android:layout_height="55dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:layout_weight="1"
        android:elevation="24dp"
        android:lineSpacingExtra="17sp"
        android:text="@string/button_login"
        android:textSize="17sp"
        android:translationZ="@dimen/fab_margin"
        app:backgroundTint="@color/logIn_button_color"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/login_password_inputLayout"/>


    <Button
        android:id="@+id/login_signUp_button"
        style="@style/Widget.AppCompat.Button.Colored"
        android:layout_width="0dp"
        android:layout_height="55dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:elevation="24dp"
        android:text="@string/login_signUp_button"
        android:textSize="16sp"
        app:backgroundTint="@color/signUp_button_color"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/login_logIn_button"/>

    <TextView
        android:id="@+id/login_forgotYourPassword_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="@string/login_forgotYourPassword_text"
        android:textColor="@color/colorPrimaryDark"
        app:layout_constraintHorizontal_bias="0.502"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/login_signUp_button"/>

</android.support.constraint.ConstraintLayout>

Sincerely,

Egor

[It wouldn't work](http://stackoverflow.com/a/27112143/5288316). — Nicolas, Apr 27 '17 at 11:27
@DivyeshPatel yes, elevation provides shadows on bottom side, but I need shadows also on the right side of the button — Egorov Egor, Apr 27 '17 at 11:27
@DivyeshPatel could you please tell me how to do it because I am kinda newbie in that — Egorov Egor, Apr 27 '17 at 11:31
@NicolasMaltais I tried to use it but I got many errors like {Error:(6, 47) No resource found that matches the given name (at 'duration' with value '@integer/button_pressed_animation_duration').} — Egorov Egor, Apr 27 '17 at 11:32

score 0 · Answer 1 · answered Apr 27 '17 at 11:39

0

Option 1: As someone mentioned, create a custom drawable xml in drawable folder which should have a layer-list as a root item, should contain one item as a rectangle shape with transparency and other item with padding of your shadow size in a rectangle shape.

Option 2: Create a 9 patch image with the transparent background with the shadows.

Option 3: Use a CardView with elevation

answered Apr 27 '17 at 11:39

albeee

1,452
1
12
20

Option 2 would be the best one. 1 and 3 won't create the desired effect. – RobCo Apr 27 '17 at 11:43
Could you please tell me how to create 9 patch image and how to use it? – Egorov Egor Apr 27 '17 at 11:47
https://romannurik.github.io/AndroidAssetStudio/nine-patches.html#&sourceDensity=320&name=example – albeee Apr 27 '17 at 11:52

score 0 · Answer 2 · answered Apr 27 '17 at 11:40

Not perfect solution but you can try it:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <corners android:bottomLeftRadius="3dp" android:bottomRightRadius="3dp"
                android:topLeftRadius="3dp"
                />
            <solid android:color="#50000000"/>
        </shape>
    </item>

    <item android:bottom="3dp" android:right="2dp">

        <shape android:shape="rectangle" >


            <solid android:color="@color/colorAccent" />
        </shape>
    </item>
</layer-list>

Now set that as Background of button

Now my button is completely white inside with dark borders – Egorov Egor Apr 27 '17 at 11:50 — Egorov Egor, Apr 27 '17 at 11:50
change @color/colorAccent to your button color – Divyesh Patel Apr 27 '17 at 11:50 — Divyesh Patel, Apr 27 '17 at 11:50

score 0 · Answer 3 · answered Apr 27 '17 at 11:54

0

Best site for creating a 9 patch shadow image

http://inloop.github.io/shadow4android/

answered Apr 27 '17 at 11:54

albeee

1,452
1
12
20

So after I create and download it, what should I do? – Egorov Egor Apr 27 '17 at 12:05
place it in your drawable folder and call it like Android: background="@drawable/ic_new_shadow" in button or layouts – albeee Apr 27 '17 at 12:11

score 0 · Answer 4 · answered Apr 27 '17 at 13:12

This is very usefull site for create different view element in xml format. You can easlly configure your buttons and other elements just with some check boxes

http://angrytools.com/android/button/

below this 'settings block' you will have see examples how to include this in your project.

How to create custom shadows for the button in Android

4 Answers4