Как сделать круглую пуговицу?

146

Пытаюсь сделать круглую пуговицу, но не знаю, как это сделать. Я могу сделать пуговицу с закругленными углами, но как я могу скруглить круг. Это не тоже самое. Подскажите, пожалуйста, на Андроиде это возможно? Спасибо.

user1166635
источник
1
есть хорошее объяснение здесь stackoverflow.com/questions/9884202/custom-circle-button
Milon
У Google новый фреймворк, новые технологии лучше Jetpack Compose
Ucdemir

Ответы:

274

Создайте файл xml с именем roundedbutton.xmlв папке с возможностью переноса

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

Наконец, установите это в качестве фона для вашего Buttonasandroid:background = "@drawable/roundedbutton"

Если вы хотите сделать его полностью закругленным, измените радиус и выберите то, что вам подходит.

Ариф Надим
источник
Вам нужен суффикс .xml? Я видел пример без
Нил
@Neil, вам не нужно добавлять суффикс xml, я сделал это с целью демонстрации и ясного понимания концепции, чтобы читатель не ошибся в примере, автопомощь eclipse должна помочь вам определить, нужен ли .xml или нет, у меня есть привычка использовать ctrl + space на моем компьютере с Windows для автоматического выполнения команд xml.
Ариф Надим,
2
Вам не нужен символ '@' перед словом drawable?
прокладка
Дает ли это решение другой результат, чем просто использование круглого изображения в качестве фона?
Сиаваш 05
7
Кроме того, почему бы не использовать android: shape = "oval"
Сиаваш
40

Если вы используете Android Studio, вы можете просто использовать:

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

    </shape>

это отлично работает для меня, надеюсь, это кому-то поможет.

Шон Джонс
источник
2
это должен быть принятый ответ, использование значений углов не выходит за рамки закругленных углов, и этот вопрос касается круга. Спасибо, Шон, за этот ответ
Дон
14
Использование ringничего не показывает. Лучше использовать oval.
CopsOnRoad
32
  1. Создайте файл drawable / button_states.xml, содержащий:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_pressed="false"> 
            <shape android:shape="rectangle">
            <corners android:radius="1000dp" />
            <solid android:color="#41ba7a" />
            <stroke
                android:width="2dip"
                android:color="#03ae3c" />
            <padding
                android:bottom="4dp"
                android:left="4dp"
                android:right="4dp"
                android:top="4dp" />
            </shape>
        </item>
        <item android:state_pressed="true"> 
            <shape android:shape="rectangle">
            <corners android:radius="1000dp" />
            <solid android:color="#3AA76D" />
            <stroke
                android:width="2dip"
                android:color="#03ae3c" />
            <padding
                android:bottom="4dp"
                android:left="4dp"
                android:right="4dp"
                android:top="4dp" />
            </shape>
        </item>
    </selector>
    
  2. Используйте его в теге кнопки в любом файле макета

    <Button
        android:layout_width="220dp"
        android:layout_height="220dp"
        android:background="@drawable/button_states"
        android:text="@string/btn_scan_qr"
        android:id="@+id/btn_scan_qr"
        android:textSize="15dp"
    />
    
Mohit
источник
он работает отлично, спасибо. Можете ли вы помочь мне нарисовать прямоугольник от центра к внешней стороне круга, который выглядит как Q
CLIFFORD PY
Работает нормально, но почему мы поставили радиус на 1000dp? не могли бы вы объяснить?
Джамшайд Камран
@JamshaidKamran 1000dp - произвольный размер, достаточно большой, чтобы сделать кнопку круглой.
rraallvv 08
Есть ли ресурс измерения Android, который мы можем использовать вместо 1000dp?
rraallvv 08
14

Круглая кнопка Android Маркуши:

(Эта библиотека устарела, и новых разработок не ведется. Рассмотрите возможность использования вместо нее FAB.)

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

LOG_TAG
источник
5
предупреждение: УСТАРЕЛО!
dialex
6

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

<solid android:color="#6E6E6E"/> <!-- this one is ths color of the Rounded Button -->

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

    android:layout_width="50dp"
    android:layout_height="50dp"
пользователь4512768
источник
5

Использовал форму овала. Это делает кнопку овальной

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

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

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

Рохит Гоял
источник
5
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
    android:color="#ffffff"
    />
</shape>

Установите это на своих ресурсах с возможностью рисования XML, а также простое использование и кнопку изображения с круглым изображением, используя его в качестве фона.

Джованни Пиньерос
источник
4

Если вам нужна круглая кнопка в стиле FAB и вы используете официальную библиотеку компонентов материала, вы можете легко сделать это следующим образом:

<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
    app:cornerRadius="28dp"
    android:layout_width="56dp"
    android:layout_height="56dp"
    android:text="1" />

Результат:

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

Если вы измените размер кнопки, просто будьте осторожны и используйте половину размера кнопки как app:cornerRadius.

Роберто Лейнарди
источник
3

используйте ImageButton вместо Button ....

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

MAC
источник
2

Для круглой кнопки создайте форму:

<?xml version="1.0" encoding="utf-8"?>

<stroke
    android:width="8dp"
    android:color="#FFFFFF" />

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


<corners
    android:bottomLeftRadius="45dp"
    android:bottomRightRadius="45dp"
    android:topLeftRadius="45dp"
    android:topRightRadius="45dp" />

используйте его как фон для ссылки на вашу кнопку

Накаш
источник
0

Вы можете использовать Google FloatingActionButton

XMl:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/ic_dialog_email" />

Ява:

  @Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    FloatingActionButton bold = (FloatingActionButton) findViewById(R.id.fab);
    bold.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
        // Do Stuff
        }
    });
}

Gradle:

    compile 'com.android.support:design:23.4.0'
калебора
источник
0
  1. Используйте кнопки изображения и сделайте фон таким, как вы хотите.
  2. Создайте изображения по ссылке на студию ресурсов Android -

" https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html#foreground.type=image&foreground.space.trim=0&foreground.space.pad=0.25&foreColor=rgba(94%2C%20126%2C%20142% 2C% 200) & backColor = rgb (96% 2C% 20125% 2C% 20139) & crop = 1 & backgroundShape = circle & effects = none & name = ic_home "

и загрузите его, извлеките его внутри этой папки mipmap-hdpi.

  1. скопируйте изображение из папки mipmap-hdpi и вставьте его в папку drwable вашего проекта Android.

  2. Теперь установите фон как это изображение.

Нарен
источник
0

Вы можете использовать MaterialButton:

     <com.google.android.material.button.MaterialButton
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:insetTop="0dp"
            android:insetBottom="0dp"
            android:text="A"
            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.Rounded"
            />

и примените циркуляр ShapeAppearanceOverlayс:

<style name="ShapeAppearanceOverlay.App.rounded" parent="">
    <item name="cornerSize">50%</item>
</style>

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

Габриэле Мариотти
источник