问题
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:
- Rounded Edge Buttons
- Change Button background/appearance on different states (Like Onclick, Focus)
- Use my own PNG for the background and not create a shape.
回答1:
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 attribute, 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
回答2:
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"
回答3:
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"/>
回答4:
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.
回答5:
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.
回答6:
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>
回答7:
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.
回答8:
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>
回答9:
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"
/>
回答10:
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>
来源：https://stackoverflow.com/questions/9334618/rounded-button-in-android