Закругленная кнопка в 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>