CODEWITHSUNDEEP
androidandroid-styles
Dieter 'user1027339'
Dieter 'user1027339'

Reputation: 203

Android button styling

I am quite new to Android dev, but not Java dev, so doing the logic behind a button is no issue, but styling it is not as easy as css. I have read a couple tutorials on shapes / styles so I kind of know how to do the custom borders and round corners, but I was hoping to see some really good quality examples, like the buttons on the Twitter app https://i.sstatic.net/Gip2s.png or the 'debossed' ones on the facebook app.

What I suppose I am really interested in, are using shadows to create effects. Are these done with images, or can you style this in the app?

thanks

Upvotes: 0

Views: 4499

Answers (3)

Arnav Rao
Arnav Rao

Reputation: 7002

For rounded corner button, define inset as shown below and adjust radius.

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetLeft="4dp"
    android:insetTop="6dp"
    android:insetRight="4dp"
    android:insetBottom="6dp">
    <ripple android:color="?attr/colorControlHighlight">
        <item>
            <shape android:shape="rectangle"
                android:tint="#0091ea">
                <corners android:radius="10dp" />
                <solid android:color="#1a237e" />
                <padding android:bottom="6dp" />
            </shape>
        </item>
    </ripple>
</inset>

For more information http://www.zoftino.com/android-button

Upvotes: 0

Shailendra Singh Rajawat
Shailendra Singh Rajawat

Reputation: 8242

for rounded corners create a shape drawable eg. ronded_corner.xml and the angle must be a multiple of 45 degree

<?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shape="rectangle"> 
     <gradient android:startColor="#SomeGradientBeginColor" android:endColor="#SomeGradientEndColor" 
            android:angle="225"/> 

    <corners android:bottomRightRadius="7dp" android:bottomLeftRadius="7dp" 
     android:topLeftRadius="7dp" android:topRightRadius="7dp"/> 
</shape>

then set this Background by android:background:@drawable/ronded_corner

Upvotes: 3

Dinesh Prajapati
Dinesh Prajapati

Reputation: 9520

Whenever you create the button in the layout just set the background property of the button as XML, Put this XML file in the drawable folder. sample XML code i will post here. you can modify and learn in that only.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <gradient
            android:angle="270"
            android:startColor="#B80000" 
            android:endColor="#900405"
            android:type="linear"
     /> 
    <stroke android:width="1dp" android:color="#900405"/>
</shape>

Upvotes: 0

Related Questions