Я хочу создать настраиваемую кнопку, и мне нужно, чтобы она была кругом. Как создать круглую кнопку? Я не думаю, что это возможно с 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
Вы можете создать любую пользовательскую кнопку Android с помощью этого сайта инструментов ... Я создаю круглую и квадратную кнопку с круглым углом с помощью этого инструментария. Посетите его, возможно, я вам помогу
С официальной библиотекой компонентов материала вы можете использовать _ 1_, применяя _ 2_ стиль.
Что-то типа:
<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"
/>
В настоящее время атрибуты _4 _, _ 5 _, _ 6 _, _ 7 _, _ 8_ необходимы для центрирования значка на кнопке, избегая лишних отступов.
Используйте _9 _ strong>, чтобы углы были закруглены. В этом случае у вас будет круг.
<style name="ShapeAppearanceOverlay.MyApp.Button.Rounded" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">50%</item>
</style>
Конечный результат:
С помощью Jetpack compose (1.0.0-beta03
) вы можете использовать:
Button(
onClick = { /* Do something! */ },
modifier = Modifier.width(48.dp).height(48.dp),
shape = CircleShape
) {
Icon(Icons.Filled.Add, "")
}
app:iconPadding="0dp"
для обеспечения центрирования значка. Я потратил кучу времени на попытки центра, пока не нашел это. Похоже, что в app: iconGravity отсутствует центральное значение по недосмотру.
- person scottyab; 03.04.2020
Для кнопки, выглядящей как 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
.
если вы хотите использовать 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>
Если вы хотите использовать ImageButton, используйте следующее. Он создаст круглый ImageButton с рябью материала.
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_settings_6"
android:background="?selectableItemBackgroundBorderless"
android:padding="10dp"
/>
К сожалению, использование XML-чертежа и переопределение фона означает, что вам нужно явно установить цвет вместо того, чтобы использовать цвета стиля приложения.
Вместо того, чтобы жестко кодировать цвета кнопок для каждого поведения, я решил жестко закодировать радиус угла, который кажется немного менее хакерским и сохраняет все поведение кнопки по умолчанию (изменение цвета при нажатии и другие визуальные эффекты) и по умолчанию использует цвета стиля приложения:
Установите для android:layout_height
и android:layout_width
одинаковое значение
Установите app:cornerRadius
на половину высоты / ширины
(На самом деле кажется, что все, что больше или равно половине высоты / ширины, работает, поэтому, чтобы избежать необходимости изменять радиус каждый раз, когда вы обновляете высоту / ширину, вы можете вместо этого установить его на очень высокое значение, такое как 1000dp
, риск того, что он может сломаться, если это поведение когда-либо изменится.)
Установите android:insetBottom
и android:insetTop
на 0dp
, чтобы получить идеальный круг
Например:
<Button
android:insetBottom="0dp"
android:insetTop="0dp"
android:layout_height="150dp"
android:layout_width="150dp"
app:cornerRadius="75dp"
/>
Вы можете использовать MaterialButton из библиотеки материалов AndroidX
<com.google.android.material.button.MaterialButton
android:layout_width="75dp"
android:layout_height="75dp"
android:layout_margin="10dp"
android:insetLeft="0dp"
android:insetTop="0dp"
android:insetRight="0dp"
android:insetBottom="0dp"
app:cornerRadius="50dp"
app:icon="@drawable/ic_camera"
app:iconGravity="textStart"
app:iconPadding="0dp"
app:iconSize="35dp" />
и это будет так
вот как вы можете просто выполнить, сделав файл ресурсов с возможностью рисования в drawable.xml. Скажите round_button.xml и вставьте следующий код.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="oval">
<solid
android:color="@color/button_start_gradient_color"/>
</shape>
</item>
<item
android:drawable="@drawable/microphone"/>
</layer-list>
Примечание: - используйте свой собственный цвет и ресурс для рисования, как я использовал @ drawable / микрофон
Ниже приводится результат [1]: https://i.stack.imgur.com/QyhdJ.png
Создайте новый векторный ресурс в папке для рисования.
Вы также можете импортировать изображение PNG и преобразовать файл в SVG онлайн на странице https://image.online-convert.com/convert-to-svg. Чем выше разрешение, тем лучше будет преобразование.
Затем создайте новый векторный ресурс из этого файла SVG.
Это образец векторного изображения круга, который вы можете использовать. Скопируйте код в XML-файл в папку чертежей.
ic_check.xml:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportHeight="256"
android:viewportWidth="256">
<path
android:fillColor="#2962FF"
android:pathData="M111,1.7c-7.2,1.1 -22.2,4.8 -27.9,7 -33.2,12.5 -61.3,40.3 -74.1,73.3 -8.7,22.6 -10.5,55.3 -4.4,78 10.9,40 39.7,72.4 77.4,87 22.6,8.7 55.3,10.5 78,4.4 45.3,-12.3 79.1,-46.1 91.4,-91.4 2.9,-10.7 3.9,-21.9 3.3,-37.4 -0.7,-21.2 -4.6,-35.9 -14,-54.1 -18.2,-35 -54,-60.5 -93.4,-66.4 -6.7,-1 -30.7,-1.3 -36.3,-0.4zM145,23.1c21.8,3.3 46.5,16.5 61.1,32.8 20.4,22.6 30.1,51.2 27.7,81.1 -3.5,44.4 -35.9,82.7 -79.6,94 -21.6,5.6 -46.6,3.7 -67.8,-5.1 -10.4,-4.3 -24.7,-14.1 -33.4,-22.9 -41.6,-41.5 -41.6,-108.4 0,-150 24.3,-24.3 57.6,-35.1 92,-29.9z"
android:strokeColor="#00000000" />
<path
android:fillColor="#2962FF"
android:pathData="M148.4,113c-24.6,26 -43.3,44.9 -44,44.6 -0.7,-0.3 -8.5,-6.1 -17.3,-13 -8.9,-6.9 -16.5,-12.6 -17,-12.6 -1.4,-0 -25.6,19 -25.8,20.3 -0.3,1.4 62.7,50.2 64.8,50.2 1.7,-0 108.4,-112.3 108.4,-114.1 0,-1.3 -23.8,-20.4 -25.4,-20.4 -0.6,-0 -20.2,20.3 -43.7,45z"
android:strokeColor="#00000000" />
</vector>
Используйте это изображение на своей кнопке:
<ImageButton
android:id="@+id/btn_level1"
android:layout_width="36dp"
android:layout_height="36dp"
android:background="@drawable/ic_check"
/>
Ваша кнопка будет круглой кнопкой.