How to set button style in android

Question

Normal button looks like:

Now, please let me know, How can i make a simple button same as an attached image button (i.e. button corner shape is round and also there is no gap between two buttons)

Solution 1

9-patch would work fine here, but I try to avoid them since it's hard for me to do them :(

You can try having a selector and using a shape for each state:

The shape would look like this:

<?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shape="rectangle">

    <solid android:color="#AAFFFFFF"/>

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

Solution 2

1- create shapes (with desired colors) for pressed and released states

To create the shapes I would suggest this great website the will do it for you: http://angrytools.com/android/button/

drawable\botton_shape_pressed.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="@color/pressed_button_background"
        android:endColor="@color/pressed_button_background"
        android:angle="45"/>
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <corners android:radius="8dp" />
</shape>

drawable\botton_shape_released.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="@color/released_button_background"
        android:endColor="@color/released_button_background"
        android:angle="45"/>
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <corners android:radius="8dp" />
</shape>

2- create a selector for the two shapes

drawable\botton_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/botton_shape_pressed"
          android:state_pressed="true" />
    <item android:drawable="@drawable/botton_shape_pressed"
          android:state_selected="true" />
    <item android:drawable="@drawable/botton_shape_released" />
</selector>

3- use the selector for the button

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/test"
    android:textColor="@color/blue_text"
    android:onClick="testOnClickListener"
    android:background="@drawable/botton_selector" />

Solution 3

look for foursquared source code and look for SegmentedButton.java file, this is the file that implement these buttons shown in the image.

Solution 4

You need to create a 9-patch drawable. In order to have no gap (margin) between the buttons you need to create the appropriate layout in XML and set the margin to 0.

Solution 5

Create a Nine patch drawable which is easy with draw9patch (part of android/tools) and then apply styles and themes... the tutorial at this link (Androgames.net) should get you started.

View more solutions

Comments

[Bachi]

Here are some great-looking gradient button examples including a preview: dibbus.com/2011/02/gradient-buttons-for-android

[Paresh Mayani]

+1, thanx for the support, its also helps me to got the point.

[Paresh Mayani]

+1 Thiago Thanx for the point it out. I have already solved and implemented event better than this :) still i will check it out if it is good. :)

[Paresh Mayani]

Yes Macarse you were absolutely right about to use 9-patch image, please check my this answer below: stackoverflow.com/questions/4489069/android-button-style/…

[Nemka]

For radius, you can use this little tips if all the corners will be the same : android:radius="Xdp" . Just adding otherwise his code is good.