CODEWITHSUNDEEP
androidbuttonstyles
Paresh Mayani
Paresh Mayani

Reputation: 128428

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

Upvotes: 23

Views: 79252

Answers (8)

Samet ÖZTOPRAK
Samet ÖZTOPRAK

Reputation: 3356

button_primary.xml 

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

        <gradient
            android:angle="270"
            android:endColor="@color/background"
            android:startColor="@color/background" />

        <corners android:radius="1dp" />

        <stroke
            android:width="2px"
            android:color="@color/colorPrimary3" />

    </shape>

call style="@style/button_primary"

Upvotes: 0

Asaf Pinhassi
Asaf Pinhassi

Reputation: 15573

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" />

Upvotes: 26

Macarse
Macarse

Reputation: 93143

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>

Upvotes: 22

droopie
droopie

Reputation: 441

to style the text you can add this to the strings.xml

    <style name="ButtonText">
    <item name="android:layout_width">fill_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textColor">#ffffff</item>
    <item name="android:gravity">center</item>
    <item name="android:layout_margin">3dp</item>
    <item name="android:textSize">30dp</item>
    <item name="android:textStyle">bold</item>
    <item name="android:shadowColor">#000000</item>
    <item name="android:shadowDx">1</item>
    <item name="android:shadowDy">1</item>
    <item name="android:shadowRadius">2</item>
    </style>

and call it in the main.xml button

 style="@style/ButtonText"

and an alternative method you can play with is creating in @drawable/btn_black with the following...

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <solid
                android:color="#343434" />
            <stroke
                android:width="1dp"
                android:color="#171717" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#343434"
                android:endColor="#171717"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#171717" />
            <corners
                android:radius="4dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

Upvotes: 3

Thiago
Thiago

Reputation: 4832

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

Upvotes: 4

Mike
Mike

Reputation: 245

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.

Upvotes: 3

Burak Dede
Burak Dede

Reputation: 3743

You can also use ImageView in your xml file and than give onClickable and onFocusable true and then create onClick event method on backend code and give the name of the method on xml , so that instead of dealing with all shape or button issues you just put the imageview there and make it act like a button.Here is sample code for you

<ImageView
            android:id="@+id/test"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:clickable="true"
            android:focusable="true"
            android:onClick="testClickEvent"
            android:paddingRight="8dip"
            android:paddingBottom="8dip"
            android:src="@drawable/testImg"/>

As I said on backend side create method with sign like this and this will do the job

public void testClickEvent(View v){}

Then implement what you wanna do in this method

Upvotes: 0

kgiannakakis
kgiannakakis

Reputation: 104178

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.

Upvotes: 4

Related Questions