Я следую советам из вопросов, как это создать стиль кнопки, как предложено на Material Design.
Однако мне нужно изменить радиус угла, и я не смог этого сделать, унаследовав стиль Widget.AppCompat.Button.Colored и установив параметр radius.
Как я могу иметь такой же стиль, но с закругленными углами?
Вам нужно наследовать этот стиль.
Добавьте в свои styles.xml:
<style name="AppTheme.RoundedCornerMaterialButton" parent="Widget.AppCompat.Button.Colored">
<item name="android:background">@drawable/rounded_shape</item>
</style>
Добавить файл drawable/rounded_shape.xml:
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid
android:color="@color/colorAccent" >
</solid>
<corners
android:radius="11dp" >
</corners>
</shape>
И, наконец, в вашем макете:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Test Text"
style="@style/AppTheme.RoundedCornerMaterialButton"/>
Изменить: обновленный ответ, чтобы использовать цвет темы, а не жестко закодированный.
Вы также можете использовать новую библиотеку компонентов для Android.
В стабильном выпуске компонентов материалов Android в ноябре 2018 года Google переместил компоненты материалов из пространства имен
android.support.designвcom.google.android.material.
Библиотека компонентов материалов является заменой Библиотеки поддержки дизайна Android.
Добавьте зависимость к вашему build.gradle:
dependencies { implementation ‘com.google.android.material:material:1.0.0 }
В этом случае вы можете использовать MaterialButton в файле макета:
<com.google.android.material.button.MaterialButton
....
style="@style/Widget.MaterialComponents.Button"
app:cornerRadius=".."
app:strokeColor="@color/colorPrimary"/>
Используйте атрибут app:cornerRadius, чтобы изменить размер радиуса угла. Это закруглит углы с указанными размерами.
Вы также можете настроить углы, используя атрибут shapeAppearanceOverlay (для этого требуется версия 1.1.0)
<style name="MyButton" parent="Widget.MaterialComponents.Button.OutlinedButton">
<item name="shapeAppearanceOverlay">@style/MyShapeAppearance</item>
</style>
<style name="MyShapeAppearance">
<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>
Официальный документ здесь, а все спецификации Android здесь.
Старая поддержка библиотеки:
В новой библиотеке поддержки 28.0.0 библиотека дизайна теперь содержит Material Button.
Вы можете добавить эту кнопку в наш файл макета с помощью:
<android.support.design.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="XXXXX"
android:textSize="18sp"
android:backgroundTint="@color/colorPrimary"
app:icon="@drawable/ic_android_white_24dp" />
Вы можете установить angular радиус с помощью этого атрибута:
app:cornerRadius: используется для определения радиуса, используемого для углов кнопки
dependencies {
implementation 'com.android.support:design:28.0.0'
}
Закругленная кнопка материала с эффектом ряби
Создайте файл в папке drawable ripple.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:attr/colorControlHighlight">
<item android:id="@android:id/mask">
<shape android:shape="rectangle">
<solid android:color="@color/colorPrimary" />
<corners android:radius="20dp" />
</shape>
</item>
<item android:drawable="@drawable/rounded_shape" />
</ripple>
Создайте файл в папке drawable rounded_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="@color/colorPrimary" >
</solid>
<corners
android:radius="20dp" >
</corners>
</shape>
И на твоей кнопке:
<Button
android:id="@+id/button1"
android:background="@drawable/ripple"
android:text="Login"/>
Я скажу вам мое точное решение для этого. Внутри селекторных тегов можно размещать предметы (функциональность кнопок)
Второй элемент тега селектора имеет противоположное поведение. Вы можете добавить столько, сколько селектор (поведение кнопки) ДОБАВЬТЕ ЭТОТ ЧЕРТЕЖНЫЙ XML В КАЧЕСТВЕ ФОНА КНОПКИ android: background = "@drawable/this xml"
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#ffffff"> <!-- this is the ripple color(first touch color changes into this color) -->
<item>
<selector>
<item android:state_enabled="true">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- default button color -->
<solid android:color="@color/colorPrimary"></solid>
<corners android:radius="151dp"></corners>
</shape>
</item>
<item> //first item was state enabled so this is automatically state disabled
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- button disabled color opposite behaviour -->
<solid android:color="#e9d204"></solid>
<corners android:radius="151dp"></corners>
</shape>
</item>
</selector>
</item>
<item>
<selector>
<item android:state_pressed="true">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- button first touch of your finger color -->
<solid android:color="#1989fa"></solid>
<corners android:radius="151dp"></corners>
</shape>
</item>
</selector>
</item>
<item>
<selector>
<item android:state_hovered="true">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- hovered with a note pencil -->
<solid android:color="#4affffff"></solid>
<corners android:radius="151dp"></corners>
</shape>
</item>
</selector>
</item>
</ripple>
Также еще один простой способ - обернуть его вокруг cardView, не забудьте установить layout_width и layout_height для cardView для wrap_content, также все необходимые поля, которые понадобится кнопке, должны применяться к cardView
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardCornerRadius="8dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="40dp"
app:elevation="10dp">
<android.support.v7.widget.AppCompatButton
android:id="@+id/login_twitter"
android:tag="login_twitter"
android:layout_width="300dp"
android:layout_height="60dp"
android:paddingLeft="10dp"
android:foreground="?attr/selectableItemBackgroundBorderless"
android:textColor="@color/blue_grey_ligthen_5"
android:drawableLeft="@drawable/twitter"
android:background="@color/twitter"
android:text="@string/login_with_twitter" />
</android.support.v7.widget.CardView>
Теперь используйте MaterialButton для закругленной кнопки и многое другое, что вы можете сделать с этим. перейдите по ссылке
и добавьте app:cornerRadius="8dp" для закругленного угла
и не забудьте добавить библиотеки материалов Google в build.gredle
implementation "com.google.android.material:material:1.1.0"
Попробуйте приведенный ниже код. Создайте рисуемый файл с именем round_button.xml и вставьте следующий.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#008577" />
<corners android:bottomRightRadius="100dp"
android:bottomLeftRadius="100dp"
android:topRightRadius="100dp"
android:topLeftRadius="100dp"/>
</shape>
Затем измените фон кнопки на этот нарисованный файл
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/circle_button"
android:text="Button"/>
Если вы хотите кнопку полного круга, вы можете использовать ниже рисунок
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#008577"/>
<size
android:width="120dp"
android:height="120dp"/>
</shape>