Пользовательская кнопка круга


187

Я хочу создать пользовательскую кнопку, и мне нужно, чтобы она была круговой. Как я могу создать кнопку круга? Я не думаю, что это будет возможно с draw9patch.

Также я не знаю, как сделать пользовательскую кнопку!

Есть ли у вас предложения?


Вы должны расширить класс кнопки и переопределить метод onDraw.
Ашвин Н Бханушали

2
но проблема в том, что если я расширю это, и пользователь коснется круга, Onlcick будет вызван, как решить эту проблему.
Ата

почему вы просто не установите изображение круглой формы в качестве фона для вашей кнопки?
MKJParekh

Я сделал простой OnDrawn, он отображается в представлении «Дизайн», но когда я хочу запустить приложение, он создает эту проблему при загрузке: android.view.InflateException: строка двоичного XML-файла # 52: ошибка надувания класса com.inaros.magicbox._customButtonPlay
Ата

Ответы:


346

Используйте xml drawable следующим образом:

Сохраните следующее содержимое как round_button.xmlв drawableпапке

<?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="oval">
            <solid android:color="#fa09ad"/>
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="oval">
            <solid android:color="#c20586"/>
        </shape>
    </item>
</selector>

Android Материал Эффект: Хотя FloatingActionButtonэто лучший вариант, если вы хотите сделать это с помощью селектора XML, создать папку drawable-v21в resи сохранить другую round_button.xmlтам со следующим XML

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#c20586">
    <item>
        <shape android:shape="oval">
            <solid android:color="#fa09ad"/>
        </shape>
    </item>
</ripple>

И установите его в качестве фона Buttonв xml следующим образом:

<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:text="hello"
android:textColor="#fff" />

Важный:

  1. Если вы хотите, чтобы он отображал все эти состояния (включен, отключен, выделен и т. Д.), Вы будете использовать селектор, как описано здесь .
  2. Вы должны сохранить оба файла, чтобы сделать их обратно совместимыми. В противном случае вы столкнетесь со странными исключениями в предыдущей версии для Android.

Под папкой drawable вы имеете в виду открыть папку с именем drawable или сохранить ее в drawable-mdpi, hdpi и т.д ...?
Джанг

@Jjang нет, вам просто нужно сохранить его в папке «drawable», любой xml-ресурс для drawable обычно сохраняется в «drawable», а не в mdpi, hdpi и т. Д.
Adil Soomro

Чт, у меня до сих пор не было папки для рисования (только mdpi, hdpi ... и -v21) :)
Jjang

PS Как придать кнопке цвет пульсации по умолчанию? Как и серый, который по умолчанию окрашивает все кнопки в приложении.
Jjang

@ AdilSoomro Мне нужен ваш адрес электронной почты, пожалуйста , или напишите мне adilm717@gmail.com , adil from pak
Adiii

67

Маркуши написал виджет круговой кнопки с потрясающими эффектами. Нажмите здесь !

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


Как использовать это с некруглым изображением?
TomSoft

3
Просто на голову: библиотека, связанная в этом ответе, устарела. Автор (Маркуши) рекомендует использовать вместо этого кнопку с плавающим действием .
Восстановить Монику

@ABoschman Можем ли мы поместить текст в виджет кнопки круга? Или просто для
рисования

@RuchirBaronia Я думаю, вы действительно должны рассмотреть Android FAB. Сколько прозы вы хотите разместить внутри маленькой круглой кнопки? Кажется, сделан для значков. Проверьте: google.com/design/spec/components/…
восстановите Монику

@ABoschman Привет, но мне очень нравится эффект этой кнопки в этой библиотеке. Там в любом случае?
Ruchir Baronia


12

С официальной библиотекой Material Components вы можете использовать стиль MaterialButtonприменения Widget.MaterialComponents.Button.Icon.

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

   <com.google.android.material.button.MaterialButton
            android:layout_width="48dp"
            android:layout_height="48dp"
            style="@style/Widget.MaterialComponents.Button.Icon"
            app:icon="@drawable/ic_add"
            app:iconSize="24dp"
            app:iconPadding="0dp"
            android:insetLeft="0dp"
            android:insetTop="0dp"
            android:insetRight="0dp"
            android:insetBottom="0dp"
            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Rounded"
            />

В настоящее время app:iconPadding="0dp", android:insetLeft, android:insetTop, android:insetRight, android:insetBottomатрибуты необходимы для центрирования значка на кнопке , избегая дополнительную обивку пространства.

Используйте app:shapeAppearanceOverlayатрибут, чтобы получить закругленные углы. В этом случае у вас будет круг.

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

Конечный результат:

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


1
Спасибо @ Габриэле Мариотти. Стоит подчеркнуть необходимость app:iconPadding="0dp"того, чтобы значок центрировался. Я сожрал кучу времени, пытаясь очаговать, пока не нашел это. Кажется, это недосмотр приложения: у iconGravity отсутствует значение «center».
Скоттиаб

1
Спасибо @ Габриэле Мариотти. Работай нормально для меня!
Androidz

2

если вы хотите использовать VectorDrawable и ConstraintLayout

<FrameLayout
            android:id="@+id/ok_button"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:foreground="?attr/selectableItemBackgroundBorderless"
            android:background="@drawable/circle_button">
                <android.support.constraint.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">
                    <ImageView
                        android:id="@+id/icon_of_button"
                        android:layout_width="32dp"
                        android:layout_height="32dp"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintTop_toTopOf="parent"
                        app:layout_constraintRight_toRightOf="parent"
                        app:layout_constraintLeft_toLeftOf="parent"
                        app:srcCompat="@drawable/ic_thumbs_up"/>
                    <TextView
                        android:id="@+id/text_of_button"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        app:layout_constraintTop_toBottomOf="@+id/icon_of_button"
                        app:layout_constraintRight_toRightOf="parent"
                        app:layout_constraintLeft_toLeftOf="parent"
                        android:layout_marginTop="5dp"
                        android:textColor="@android:color/white"
                        android:text="ok"
                        />
                </android.support.constraint.ConstraintLayout>
            </FrameLayout>

фон круга: circle_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="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>

2

Для кнопки, выглядящей FAB, этот стиль на MaterialButton:

<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.

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