CODEWITHSUNDEEP
androidcssmaterial-design
iWayan
iWayan

Reputation: 109

How to create Shadow on Android Button (Material Design)

Here i want to ask a simple question that make me so confuse, i have developing an android app that i want to use material design theme.

But when i try to code the Shadow under the RaisedButton, it's doesn't work. I mean it just make a stroke around the button and not the shadow.

Please master, help me is there any simple way to make this shadow?? Thanks

NB. This is my custon_button.xml

<item android:state_pressed="true" >
    <shape>
        <solid
            android:color="@color/solidpress"
            />
        <stroke
            android:width="1dp"
            android:color="@color/strokepress" />
        <corners
            android:radius="2dp" />
        <padding
            android:left="5dp"
            android:top="10dp"
            android:right="1dp"
            android:bottom="10dp" />
    </shape>
</item>

<item android:state_focused="true" > //focused fuck shit man
    <shape>
        <solid
            android:color="@color/solidfocus"
            />
        <stroke
            android:width="3dp"
            android:color="@color/strokefocus" />
        <corners
            android:radius="2dp" />
        <padding
            android:left="5dp"
            android:top="10dp"
            android:right="5dp"
            android:bottom="10dp" />
    </shape>
</item>

<item> // normal

    <shape>
        <solid
            android:color="@color/solidnormal" />
        <stroke
            android:width="1dp"
            android:color="@color/strokenormal" />
        <corners
            android:radius="2dp" />
        <padding
            android:left="5dp"
            android:top="10dp"
            android:right="1dp"
            android:bottom="10dp" />
    </shape>
</item>

and i apply that code to my activity with 

android:background="@drawable/custom_button

Upvotes: 0

Views: 1745

Answers (3)

Rajan Kali
Rajan Kali

Reputation: 12953

shadow.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 Add this code to your Button 

android:background="@drawable/shadow"

Have a look at this for Material Kind of Shadow: Shadow Background Android

Upvotes: 1

Ashish Agrawal
Ashish Agrawal

Reputation: 1977

Please look this

    <selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="false"><layer-list>
            <item><shape>
                    <gradient android:angle="270" android:centerColor="#00c0f0" android:endColor="#036b86" android:startColor="#01bff3"></gradient>

                    <corners android:radius="5dp" />
                </shape></item>
            <item android:bottom="3dp"><shape>
                    <gradient android:angle="270" android:centerColor="#00c0f0" android:endColor="#01bff3" android:startColor="#01bff3"></gradient>

                    <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />

                    <corners android:radius="5dp" />
                </shape></item>
        </layer-list></item>

    <item android:state_pressed="true"><layer-list>
            <item ><shape>
                    <gradient android:angle="270" android:centerColor="#00c0f0" android:endColor="#01bff3" android:startColor="#036b86"></gradient>

                    <corners android:radius="5dp" />
                </shape></item>
            <item android:top="3dp"><shape>
                    <gradient android:angle="270" android:centerColor="#00c0f0" android:endColor="#01bff3" android:startColor="#01bff3"></gradient>

                    <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />

                    <corners android:radius="5dp" />
                </shape></item>
        </layer-list></item>

</selector>

Upvotes: 2

Aditya Naique
Aditya Naique

Reputation: 1158

If rajan ks' answer does't work, you can try wrapping the button in a CardView (android.support.v7.widget.CardView), and give the CardView some elevation using its app:cardElevation attribute. 

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardElevation="4dp"
    app:cardPreventCornerOverlap="false">

    <Button />

</android.support.v7.widget.CardView>

Upvotes: 1

Related Questions