CODEWITHSUNDEEP
androidandroid-buttonrounded-corners
ControlAltDelete
ControlAltDelete

Reputation: 3694

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.

Upvotes: 86

Views: 245446

Answers (10)

CSmith
CSmith

Reputation: 13458

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

Upvotes: 139

Udara Abeythilake
Udara Abeythilake

Reputation: 1213

Try below code Create a drawable file called circular_button.xml and insert the below 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#008577" />
<corners android:bottomRightRadius="100dp"
    android:bottomLeftRadius="100dp"
    android:topRightRadius="100dp"
    android:topLeftRadius="100dp"/>
</shape>

Then change the background of the button to this drawable file

 <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/circle_button"
                android:text="Button"/>

If you want a full circle button you can use the below drawable

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

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

    <size
        android:width="120dp"
        android:height="120dp"/>
</shape>

Upvotes: 0

Ashik Azeez
Ashik Azeez

Reputation: 444

Create Drawable resource named btnOval-->then past code ;

 <?xml version="1.0" encoding="utf-8"?>
      <shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="oval"  
android:padding="10dp">   
      <solid android:color="#6E6E6E"/> 
    </shape>

and user inside button tag like,

<Button
andorid:width=""
android:hieght=""
android:background="@Drawable/btnOval"
/>

Upvotes: 2

Arnav Rao
Arnav Rao

Reputation: 6992

Rounded buttons can be creating using ring shape drawable also, see http://www.zoftino.com/android-shape-drawable-examples

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thickness="40dp"
    android:useLevel="false">
    <solid android:color="@color/colorPrimary" />
    <padding android:bottom="50dp"
        android:left="16dp"
        android:right="16dp"
        android:top="50dp"/>
</shape>

Upvotes: 2

Pir Fahim Shah
Pir Fahim Shah

Reputation: 10623

If you need a rounded button in Android, then create an XML file "RoundShapeBtn.xml" as drawable.

 <?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:padding="10dp">   
  <solid android:color="#6E6E6E"/> <!-- this one is ths color of the Rounded Button -->
  <corners
   android:bottomRightRadius="10dp"
   android:bottomLeftRadius="10dp"
   android:topLeftRadius="10dp"
   android:topRightRadius="10dp"/>
</shape>

Add this to your button code:

android:background="@drawable/RoundShapeBtn"

Upvotes: 88

Arunendra
Arunendra

Reputation: 2174

create xml file in drawable folder in android like :

rounded_button.xml

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

    <corners android:radius="20dp"/> // if you want clear round shape then make radius size is half of your  button`s height.
    <solid android:color="#EEFFFFFF"/> // Button Colour
    <padding
        android:bottom="5dp"
        android:left="10dp"
        android:right="10dp"
        android:top="5dp"/>

</shape>

Now this xml file as your buttons background.

 <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@drawable/rounded_button"
        android:text="@string/button_text"
        android:textColor="@color/black"/>

Upvotes: 20

user1793182
user1793182

Reputation:

It's much better to put the button states and shapes in 1 xml selector file. That should make your app run faster/better. Try this (courtesy of Introduction to Android Application Development). Not spamming here just showing this isn't my code.

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

    <item android:state_pressed="true" >
    <shape android:shape="rectangle"  >
     <corners android:radius="12dip" />
     <stroke android:width="1dip" android:color="#333333" />
     <gradient android:angle="-90" android:startColor="#333333"      android:endColor="#555555"  />            
    </shape>
    </item>
    <item android:state_focused="true">
    <shape android:shape="rectangle"  >
     <corners android:radius="12dip" />
     <stroke android:width="1dip" android:color="#333333" />
     <solid android:color="#58857e"/>       
    </shape>
    </item>  
    <item >
    <shape android:shape="rectangle"  >
     <corners android:radius="12dip" />
     <stroke android:width="1dip" android:color="#333333" />
     <gradient android:angle="-90" android:startColor="#333333" android:endColor="#555555" />            
    </shape>
    </item>

    </selector>

P.S.-design tip: gradients and rounded rectangles are best used when you can hardly tell they are there-use wisely.

Upvotes: 4

Rohit Goyal
Rohit Goyal

Reputation: 550

This can be done using the corner attribute. Look at the below xml.

<item>
    <shape android:shape="rectangle" >
        <stroke
            android:height="1.0dip"
            android:width="1.0dip"
            android:color="#ffee82ee" />

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

        <corners
            android:bottomLeftRadius="102.0dip"
            android:bottomRightRadius="102.0dip"
            android:radius="102.0dip"
            android:topLeftRadius="102.0dip"
            android:topRightRadius="102.0dip" />
    </shape>
</item>

Upvotes: 4

Christopher Perry
Christopher Perry

Reputation: 39225

It is recommended by Google that you do not mimic UI elements from other platforms. I wouldn't put rounded iOS style buttons in an Android application.

Upvotes: 5

Cody Caughlan
Cody Caughlan

Reputation: 32748

Extend ImageView like so:

public class RoundedImageView extends ImageView {
  private static final String TAG = "RoundedImageView";

  private float mRadius = 0f;

  public RoundedImageView(Context context) {
    super(context);
  }

  public RoundedImageView(Context context, AttributeSet attrs) {
    super(context, attrs);

    // retrieve styles attributes
    TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.RoundedView);
    mRadius = a.getDimension(R.styleable.RoundedView_radius, 0f);
    a.recycle();
  }

  @Override
  protected void onDraw(Canvas canvas) {
    // only do this if we actually have a radius
    if(mRadius > 0) {
      RectF rect = new RectF(0, 0, getWidth(), getHeight());
      Path clipPath = new Path();
      clipPath.addRoundRect(rect, mRadius, mRadius, Path.Direction.CW);
      canvas.clipPath(clipPath);
    }
    super.onDraw(canvas);
  }
}

And apply your normal background resource to it and it should be clipped with rounded corners.

Upvotes: 6

Related Questions