Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set button style in android

Normal button looks like:

alt text

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)

alt text

like image 351
Paresh Mayani Avatar asked Dec 20 '10 11:12

Paresh Mayani


3 Answers

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" />
like image 93
Asaf Pinhassi Avatar answered Oct 29 '22 22:10

Asaf Pinhassi


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>
like image 25
Macarse Avatar answered Oct 29 '22 22:10

Macarse


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.

like image 4
kgiannakakis Avatar answered Oct 29 '22 21:10

kgiannakakis