Закругленная кнопка в Android
Я хочу создать закругленные кнопки в программе Android. Я просмотрел Как создать EditText с закругленными углами?
Чего я хочу достичь:
- Кнопки с закругленными краями
- Изменить фон/внешний вид кнопки в разных состояниях (например, Onclick, Focus)
- Используйте собственный PNG для фона и не создавайте форму.
Ответы
Ответ 1
Вы можете сделать кнопку с закругленными углами, не прибегая к ImageView.
Ресурс выбора фона, 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>
Для каждого состояния - ресурс, который можно нарисовать, например 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>
Обратите внимание на атрибут corners
, это дает вам закругленные углы!
Затем установите фон для рисования на кнопку:
android:background="@drawable/button_background"
РЕДАКТИРОВАТЬ (9/2018): ту же технику можно использовать для создания круглой кнопки. Круг - это просто квадратная кнопка с размером радиуса, равным 1/2 стороны квадрата
Кроме того, в приведенном выше примере stroke
и gradient
не являются необходимыми элементами, это всего лишь примеры и способы, с помощью которых вы сможете увидеть форму закругленного угла.
Ответ 2
Если вам нужна закругленная кнопка в Android, тогда создайте XML файл "RoundShapeBtn.xml" как возможно.
<?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>
Добавьте это в код кнопки:
android:background="@drawable/RoundShapeBtn"
Ответ 3
создайте xml файл в папке с рисунком в android, например:
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>
Теперь этот xml файл станет вашим фоном кнопок.
<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
Рекомендуем Google, чтобы вы не имитировали элементы пользовательского интерфейса с других платформ. Я бы не добавил круглые кнопки стиля iOS в приложение для Android.
Ответ 5
Расширьте ImageView
следующим образом:
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);
}
}
И примените свой обычный фоновый ресурс к нему, и его нужно обрезать с закругленными углами.
Ответ 6
Это можно сделать, используя атрибут corner. Посмотрите ниже 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
Гораздо лучше поставить кнопки и фигуры кнопок в 1 селекторный файл xml. Это должно заставить ваше приложение работать быстрее/лучше. Попробуйте это (любезно предоставлено Знакомство с разработкой приложений для Android). Не спам здесь просто показывает, что это не мой код.
<?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>
Совет П. С. дизайна: градиенты и закругленные прямоугольники лучше всего использовать, когда вы едва ли можете сказать, что они есть - используйте с умом.
Ответ 8
Закругленные кнопки также можно создавать с помощью рисованной формы кольца, см. 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
Создайте Drawable ресурс с именем btnOval-->, затем мимо кода;
<?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>
и пользователь внутри кнопки тега, как,
<Button
andorid:width=""
android:hieght=""
android:background="@Drawable/btnOval"
/>
Ответ 10
Попробуйте приведенный ниже код. Создайте рисуемый файл с именем round_button.xml и вставьте следующий.
<?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>
Затем измените фон кнопки на этот нарисованный файл
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/circle_button"
android:text="Button"/>
Если вы хотите кнопку полного круга, вы можете использовать ниже рисунок
<?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>