Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Rounded Button in Android

I want to create rounded buttons in an Android program. I have looked at How to create EditText with rounded corners?

What I want to achieve is:

  1. Rounded Edge Buttons
  2. Change Button background/appearance on different states (Like Onclick, Focus)
  3. Use my own PNG for the background and not create a shape.
like image 753
ControlAltDelete Avatar asked Feb 17 '12 20:02

ControlAltDelete


People also ask

How do you make a button rounded?

To create a rounded button you have to make use of the border-radius CSS property. The higher the value for that property the more rounder the corners will be. You can use any CSS unit for the boorder-radius property. It can be pixels, ems, rems, percentages etc.

What is a round button?

Detailed Description. RoundButton is identical to Button, except that it has a radius property which allows the corners to be rounded without having to customize the background.


1 Answers

You can do a rounded corner button without resorting to an ImageView.

A background selector resource, button_background.xml:

<?xml version="1.0" encoding="utf-8" ?>       <selector xmlns:android="http://schemas.android.com/apk/res/android">      <!--  Non focused states        -->        <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/button_unfocused" />        <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/button_unfocused" />       <!--  Focused states        -->        <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/button_focus" />        <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/button_focus" />       <!--  Pressed        -->        <item android:state_pressed="true" android:drawable="@drawable/button_press" />      </selector> 

For each state, a drawable resource, e.g. button_press.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">   <stroke android:width="1dp" android:color="#FF404040" />    <corners android:radius="6dp" />    <gradient android:startColor="#FF6800" android:centerColor="#FF8000" android:endColor="#FF9700" android:angle="90" />  </shape> 

Note the corners element, this gets you rounded corners!

Then set the background drawable on the button:

android:background="@drawable/button_background" 

EDIT (9/2018): The same technique can be used to create a circular button. A circle is really just a square button with radius size set to 1/2 the side of the square

Additionally, in the example above the stroke and gradient aren't necessary elements, they are just examples and ways that you'll be able to see the rounded corner shape

like image 150
CSmith Avatar answered Sep 27 '22 18:09

CSmith