Question

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 http://i.stack.imgur.com/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

Was it helpful?

Solution

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

OTHER TIPS

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>

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top