How to provide shadow to Button

enter image description here

As you can see in image, I want shadow behind a Button. I have created Button with rounded corners. But problem is I can’t generate a shadow behind that Button. How can I achieve this?

  • Aapt_rules.txt not found when building apk in android studio
  • Android studio adds unwanted permission after running application on real device
  • Resources & Frameworks for mobile development (iphone,android) using HTML5
  • How to inflate multiple instances of a layout with the same id inside an inflated layout
  • Android Percentage Layout Height
  • AdjustResize with animation
  • Related posts:

    Building Android Studio project with HoloEverywhere fails
    After a while of usage, my App freezes during scrolling a WebView, saying “could not lock ...
    How to use toolbar in react native android application
    ImageView scaling TOP_CROP
    Cast shadow on top of LinearLayout using android:elevation
    Facebook SDK for android download always failing
  • android.support.v7.internal.widget.ActionBarOverlayLayout could not be instantiated
  • Why was ActionBarActivity deprecated
  • Android Studio / Intellij, Gradle Error:Cause: peer not authenticated
  • Correct way to make a custom material dialog with appCompat 23+
  • How to customize the back button on ActionBar
  • Preventing Facebook Android SDK from displaying password as plain text
  • 7 Solutions collect form web for “How to provide shadow to Button”

    Use this approach to get your desired look.
    button_selector.xml :

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <layer-list>
            <item android:right="5dp" android:top="5dp">
                <shape>
                    <corners android:radius="3dp" />
                    <solid android:color="#D6D6D6" />
                </shape>
            </item>
            <item android:bottom="2dp" android:left="2dp">
                <shape>
                    <gradient android:angle="270" 
                        android:endColor="#E2E2E2" android:startColor="#BABABA" />
                    <stroke android:width="1dp" android:color="#BABABA" />
                    <corners android:radius="4dp" />
                    <padding android:bottom="10dp" android:left="10dp" 
                        android:right="10dp" android:top="10dp" />
                </shape>
            </item>
        </layer-list>
    </item>
    
    </selector>
    

    And in your xml layout:

    <Button
       android:background="@drawable/button_selector"
       ...
       ..
    />
    

    For android version 5.0 & above

    try the Elevation for other views..

    android:elevation="10dp"
    

    For Buttons,

    android:stateListAnimator="@anim/button_state_list_animator"
    

    button_state_list_animator.xmlhttps://android.googlesource.com/platform/frameworks/base/+/master/core/res/res/anim/button_state_list_anim_material.xml

    below 5.0 version,

    For all views,

     android:background="@android:drawable/dialog_holo_light_frame"
    

    My output:

    enter image description here

    If you are targeting pre-Lollipop devices, you can use Shadow-Layout, since it easy and you can use it in different kind of layouts.

    Add shadow-layout to your Gradle file:

    dependencies {
        compile 'com.github.dmytrodanylyk.shadow-layout:library:1.0.1'
    }
    

    At the top the xml layout where you have your button, add to the top:

    xmlns:app="http://schemas.android.com/apk/res-auto"
    

    it will make available the custom attributes.

    Then you put a shadow layout around you Button:

    <com.dd.ShadowLayout
            android:layout_marginTop="16dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:sl_shadowRadius="4dp"
            app:sl_shadowColor="#AA000000"
            app:sl_dx="0dp"
            app:sl_dy="0dp"
            app:sl_cornerRadius="56dp"> 
    
           <YourButton
              .... />
    
    </com.dd.ShadowLayout>
    

    You can then tweak the app: settings to match your required shadow.

    Hope it helps.

    Here my button with shadow “cw_button_shadow.xml” under drawable

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_pressed="false">
            <layer-list>
                <!-- SHADOW -->
                <item>
                    <shape>
                        <solid android:color="@color/red_400"/>
                        <!-- alttan gölge -->
                        <corners android:radius="19dp"/>
                    </shape>
                </item>
                <!-- BUTTON alttan gölge
                  android:right="5px" to make it round-->
                <item
                    android:bottom="5px"
                    >
                    <shape>
                        <padding android:bottom="5dp"/>
                        <gradient
                            android:startColor="#1c4985"
                            android:endColor="#163969"
                            android:angle="270" />
                        <corners
                            android:radius="19dp"/>
                        <padding
                            android:left="10dp"
                            android:top="10dp"
                            android:right="5dp"
                            android:bottom="10dp"/>
                    </shape>
                </item>
            </layer-list>
        </item>
    
        <item android:state_pressed="true">
            <layer-list>
                <!-- SHADOW -->
                <item>
                    <shape>
                        <solid android:color="#102746"/>
                        <corners android:radius="19dp"/>
    
                    </shape>
                </item>
                <!-- BUTTON -->
                <item android:bottom="5px">
                    <shape>
                        <padding android:bottom="5dp"/>
                        <gradient
                            android:startColor="#1c4985"
                            android:endColor="#163969"
                            android:angle="270" />
                        <corners
                            android:radius="19dp"/>
                        <padding
                            android:left="10dp"
                            android:top="10dp"
                            android:right="5dp"
                            android:bottom="10dp"/>
                    </shape>
                </item>
            </layer-list>
        </item>
    </selector>
    

    My Button xml, you size your height and weight

    <Button
                    android:text="+ add friends"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="4"
                   android:background="@drawable/cw_button_shadow" />
    

    enter image description here

    I’ve tried the code from above and made my own shadow which is little bit closer to what I am trying to achieve. Maybe it will help others too.

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item>
            <layer-list>
                <item android:left="5dp" android:top="5dp">
                    <shape>
                        <corners android:radius="3dp" />
                        <gradient
                            android:angle="315"
                            android:endColor="@android:color/transparent"
                            android:startColor="@android:color/black"
                            android:type="radial"
                            android:centerX="0.55"
                            android:centerY="0"
                            android:gradientRadius="300"/>
                        <padding android:bottom="1dp" android:left="0dp" android:right="3dp" android:top="0dp" />
                    </shape>
                </item>
                <item android:bottom="2dp" android:left="3dp">
                    <shape>
                        <corners android:radius="1dp" />
                        <solid android:color="@color/colorPrimary" />
    
    
                    </shape>
                </item>
            </layer-list>
        </item>
    
    </selector>
    

    Try this if this works for you

    enter image description here

    android:background="@drawable/drop_shadow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="3dp"
            android:paddingTop="3dp"
            android:paddingRight="4dp"
            android:paddingBottom="5dp"
    

    You can try this:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
    <layer-list>
            <item android:left="1dp" android:top="3dp">
                <shape>
                    <solid android:color="#a5040d" />
                    <corners android:radius="3dip"/>
                </shape>
            </item>
        </layer-list>
      </item>
    <item>
        <layer-list>
            <item android:left="0dp" android:top="0dp">
                <shape>
                        <solid android:color="#99080d" />
                    <corners android:radius="3dip"/>
                </shape>
            </item>
            <item android:bottom="3dp" android:right="2dp">
                <shape>
                    <solid android:color="#a5040d" />
                    <corners android:radius="3dip"/>
                </shape>
            </item>
        </layer-list>
    </item>
    

    Android Babe is a Google Android Fan, All about Android Phones, Android Wear, Android Dev and Android Games Apps and so on.