Закругленные углы на кнопке материала

Я следую советам из вопросов, как это создать стиль кнопки, как предложено на Material Design.

Однако мне нужно изменить радиус угла, и я не смог этого сделать, унаследовав стиль Widget.AppCompat.Button.Colored и установив параметр radius.

Как я могу иметь такой же стиль, но с закругленными углами?

Ответы

Ответ 1

Вам нужно наследовать этот стиль.

Добавьте в свои 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"/>

Изменить: обновленный ответ, чтобы использовать цвет темы, а не жестко закодированный.

Ответ 2

Вы также можете использовать новую библиотеку компонентов для 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'
}

Ответ 3

Закругленная кнопка материала с эффектом ряби

Создайте файл в папке 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"/>

Ответ 4

Я скажу вам мое точное решение для этого. Внутри селекторных тегов можно размещать предметы (функциональность кнопок)

Второй элемент тега селектора имеет противоположное поведение. Вы можете добавить столько, сколько селектор (поведение кнопки) ДОБАВЬТЕ ЭТОТ ЧЕРТЕЖНЫЙ 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>

Ответ 5

Также еще один простой способ - обернуть его вокруг 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>

Ответ 6

Теперь используйте MaterialButton для закругленной кнопки и многое другое, что вы можете сделать с этим. перейдите по ссылке

и добавьте app:cornerRadius="8dp" для закругленного угла

и не забудьте добавить библиотеки материалов Google в build.gredle

implementation "com.google.android.material:material:1.1.0"

Ответ 7

Попробуйте приведенный ниже код. Создайте рисуемый файл с именем 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>