Я хочу создать пользовательскую кнопку, и мне нужно, чтобы она была круговой. Как я могу создать кнопку круга? Я не думаю, что это будет возможно с draw9patch.
Также я не знаю, как сделать пользовательскую кнопку!
Есть ли у вас предложения?
Я хочу создать пользовательскую кнопку, и мне нужно, чтобы она была круговой. Как я могу создать кнопку круга? Я не думаю, что это будет возможно с draw9patch.
Также я не знаю, как сделать пользовательскую кнопку!
Есть ли у вас предложения?
Ответы:
Используйте 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" />
Важный:
Маркуши написал виджет круговой кнопки с потрясающими эффектами. Нажмите здесь !
AngryTool для пользовательской кнопки Android
С помощью этого сайта инструментов вы можете сделать любую кнопку на заказ ... Я делаю круглую и квадратную кнопку с круглым углом с помощью этого инструмента. Посетите ее, возможно, я вам помогу
С официальной библиотекой 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>
Конечный результат:
app:iconPadding="0dp"
того, чтобы значок центрировался. Я сожрал кучу времени, пытаясь очаговать, пока не нашел это. Кажется, это недосмотр приложения: у iconGravity отсутствует значение «center».
если вы хотите использовать 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>
Для кнопки, выглядящей 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
.