Как сделать углы кнопки круглыми?


457

Я хочу сделать углы buttonраунда. Есть ли простой способ добиться этого в Android?


2
проверить это: nishantvnair.wordpress.com/2010/11/09/...
Lavanya

material.io/develop/android/components/material-button просто установите угловой радиус
Swagger 68

11
это не широкий вопрос, это абсолютно точно. пометить его как "слишком широкий" - это просто ТАК менталитет, который необходимо изменить. Перестань быть диктаторами.
user734028

2
согласен с user734028: какого черта, почему закрыли за то, что он слишком широк? единственный способ, которым это могло бы быть более конкретным, если бы ОП спросил, как установить радиус угла в N пикселей. Давай!
Нихолку

Ответы:


679

Если вы хотите что-то подобное

Предварительный просмотр кнопки

вот код

1. Создайте xml-файл в папке для рисования, например mybutton.xml, и вставьте следующую разметку:

<?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="3dip" />
            <stroke android:width="1dip" android:color="#5e7974" />
            <gradient android:angle="-90" android:startColor="#345953" android:endColor="#689a92"  />            
        </shape>
    </item>
    <item android:state_focused="true">
        <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="#5e7974" />
            <solid android:color="#58857e"/>       
        </shape>
    </item>  
    <item >
       <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="#5e7974" />
            <gradient android:angle="-90" android:startColor="#8dbab3" android:endColor="#58857e" />            
       </shape>
    </item>
</selector>

2. Теперь используйте этот drawable для фона вашего взгляда. Если представление является кнопкой, то что-то вроде этого:

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:textColor="#ffffff"
    android:background="@drawable/mybutton"
    android:text="Buttons" />

произошел сбой: вызвано: org.xmlpull.v1.XmlPullParserException: строка двоичного XML-файла # 24: тегу <item> требуется атрибут
drawable

3
мы можем сделать это программно.
Убийца

В нем говорится, что селектор элементов должен быть объявлен РЕДАКТИРОВАТЬ: Извините, файл был внутри папки значений, а не отрисовки. Когда я перенес это, это сработало.
F0r3v3r-A-N00b

что создает тень при клике? я пытаюсь уменьшить ширину тени внизу ... не повезло
Невилл Назеран

Я не вижу, что показ того, как кодируются селекторы, связан с объяснением того, как должны кодироваться углы кнопок.
TavernSenses

345

Создайте XML-файл в папке Drawable, как показано ниже

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" android:padding="10dp">
    <!-- you can use any color you want I used here gray color-->
    <solid android:color="#ABABAB"/> 
    <corners android:radius="10dp"/>
</shape>

Примените это как фон к кнопке, которую вы хотите сделать углы круглыми.

Или вы можете использовать отдельный радиус для каждого угла, как показано ниже

android:bottomRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp"

57
Можно просто укоротить углы до андроида: radius = "10dp", который будет применяться ко всем
Бен Симпсон,

22
Это не полное решение, так как оно не поддерживает различные состояния кнопок (нажатие, фокус, по умолчанию). Для лучшего решения см stackoverflow.com/questions/9334618/rounded-button-android
JosephL

3
@ BenSimpson, вы увидите, что есть разница в форме, если вы поместите только одну линию вместо определения каждого из угловых радиусов индивидуально.
Гарима Тивари

это работает лучше, чем выделенный ответ. спасибо миллион!
Дан Лин

37

Создайте файл XML, как показано ниже. Установите его в качестве фона для кнопки. Измените атрибут radius по вашему желанию, если вам нужна дополнительная кривая для кнопки.

button_background.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/primary" />
    <corners android:radius="5dp" />
</shape>

Установить фон для вашей кнопки:

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/button_background"/>

30

создать shape.xml в папке для рисования

как shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
  <stroke android:width="2dp"
    android:color="#FFFFFF"/>
  <gradient 
    android:angle="225"
    android:startColor="#DD2ECCFA"
    android:endColor="#DD000000"/>
<corners
    android:bottomLeftRadius="7dp"
    android:bottomRightRadius="7dp"
    android:topLeftRadius="7dp"
   android:topRightRadius="7dp" />
</shape>

и в myactivity.xml

ты можешь использовать

<Button
    android:id="@+id/btn_Shap"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:text="@string/Shape"
    android:background="@drawable/shape"/>

16

Создать файл myButton.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorButton"/>
    <corners android:radius="10dp"/>
</shape>

добавить к вашей кнопке

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

16

Есть ли простой способ добиться этого в Android?

Да, сегодня есть, и это очень просто.
Просто используйте MaterialButtonв библиотеке компонентов материалов с app:cornerRadiusатрибутом.

Что-то вроде:

    <com.google.android.material.button.MaterialButton
        android:text="BUTTON"
        app:cornerRadius="8dp"
        ../>

введите описание изображения здесь

Достаточно получить Баттон с закругленными углами.

Вы можете использовать один из стилей кнопки Материал . Например:

<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.Button.OutlinedButton"
    .../>

введите описание изображения здесь

Также начиная с версии 1.1.0 вы также можете изменить форму своей кнопки. Просто используйте shapeAppearanceOverlayатрибут в стиле кнопки:

  <style name="MyButtonStyle" parent="Widget.MaterialComponents.Button">
    <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.MyApp.Button.Rounded</item>
  </style>

  <style name="ShapeAppearanceOverlay.MyApp.Button.Rounded" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">16dp</item>
  </style>

Тогда просто используйте:

<com.google.android.material.button.MaterialButton
   style="@style/MyButtonStyle"
   .../>

Вы также можете применить shapeAppearanceOverlayв макете XML:

<com.google.android.material.button.MaterialButton
   app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Rounded"
   .../>

shapeAppearanceПозволяет также иметь различную форму и размер для каждого угла:

<style name="ShapeAppearanceOverlay.MyApp.Button.Rounded" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerFamilyTopRight">cut</item>
    <item name="cornerFamilyBottomRight">cut</item>
    <item name="cornerSizeTopLeft">32dp</item>
    <item name="cornerSizeBottomLeft">32dp</item>
</style>

введите описание изображения здесь


Требуется также использовать материал темы
Влад

@Vlad Да, материальные компоненты требуют материальной темы.
Габриэле Мариотти

11

Я обнаружил, что простой способ - создать новый XML-файл в папке Drawable, а затем указать фон кнопок на этот XML-файл. вот код, который я использовал:

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

<solid android:color="#ff8100"/>
<corners android:radius="5dp"/>

</shape>

3
Чтобы восстановить волновой эффект «Материал-тема» на настраиваемом фоне, добавьте его android:foreground="?attr/selectableItemBackground"в представлении кнопок. См stackoverflow.com/questions/38327188/...
Mr-IDE

11

Создайте файл rounded_btn.xml в папке Drawable ...

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
     <solid android:color="@color/#FFFFFF"/>    

     <stroke android:width="1dp"
        android:color="@color/#000000"
        />

     <padding android:left="1dp"
         android:top="1dp"
         android:right="1dp"
         android:bottom="1dp"
         /> 

     <corners android:bottomRightRadius="5dip" android:bottomLeftRadius="5dip" 
         android:topLeftRadius="5dip" android:topRightRadius="5dip"/> 
  </shape>

и использовать этот файл .xml в качестве фона кнопки

<Button
android:id="@+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/rounded_btn"
android:text="Test" />

7

Эта ссылка содержит всю необходимую информацию. Вот

Shape.xml

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

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

    <corners    android:bottomLeftRadius="8dip"
                android:topRightRadius="8dip"
                android:topLeftRadius="1dip"
                android:bottomRightRadius="1dip"
                />
</shape>

и main.xml

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent">

    <TextView   android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Hello Android from NetBeans"/>

    <Button android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Nishant Nair"
            android:padding="5dip"
            android:layout_gravity="center"
            android:background="@drawable/button_shape"
            />
</LinearLayout>

Это должно дать вам желаемый результат.

Удачи


6

кнопка стиля со значком введите описание изображения здесь

   <Button
        android:id="@+id/buttonVisaProgress"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="5dp"
        android:background="@drawable/shape"
        android:onClick="visaProgress"
        android:drawableTop="@drawable/ic_1468863158_double_loop"
        android:padding="10dp"
        android:text="Visa Progress"
        android:textColor="@android:color/white" />

shape.xml

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="14dp" />
<gradient
    android:angle="45"
    android:centerColor="#1FA8D1"
    android:centerX="35%"
    android:endColor="#060d96"
    android:startColor="#0e7e1d"
    android:type="linear" />
<padding
    android:bottom="0dp"
    android:left="0dp"
    android:right="0dp"
    android:top="0dp" />
<size
    android:width="270dp"
    android:height="60dp" />
<stroke
    android:width="3dp"
    android:color="#000000" />


4

Если вы используете векторные элементы рисования, вам просто нужно указать элемент <corners> в своем определении. Я рассказал об этом в блоге .

Если вы используете растровые изображения в формате bitmap / 9-patch, вам нужно создать углы с прозрачностью в растровом изображении.


0

папка для рисования

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FFFFFF"/>
    <corners android:radius="30dp"/>
    <stroke android:width="2dp" android:color="#999999"/>
</shape>

папка макета

<Button
    android:id="@+id/button2"
    <!-- add style to avoid square background -->
    style="@style/Widget.AppCompat.Button.Borderless"
    android:background="@drawable/corner_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    />

убедитесь, что добавили стиль, чтобы избежать квадратного фона

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.