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

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

кнопка

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

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

Источник

9 ответов

Решение

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

Добавьте в ваш файл 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"/>

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

Источник

В новой версии библиотеки поддержки 28.0.0-alpha1 библиотека проектирования теперь содержит 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" />

Вы можете установить угловой радиус с этим атрибутом:

  • app:cornerRadius: Используется для определения радиуса, используемого для углов кнопки

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

В настоящее время, чтобы использовать его, вы должны использовать Android Studio 3.1 или выше и:

android {
    compileSdkVersion 'android-P'

    defaultConfig {
        targetSdkVersion 'P'
    }
    ...
}
dependencies {
  implementation 'com.android.support:design:28.0.0-alpha1'
}

Вы также можете использовать новые компоненты материалов для Android.
В этом случае вы можете использовать в вашем файле макета:

<com.google.android.material.button.MaterialButton
    android:id="@+id/material_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="XXXXX"
    app:cornerRadius=".."/>

В настоящее время вы должны использовать Android Studio 3.2 и:

android {
    compileSdkVersion 'android-P'

    defaultConfig {
        targetSdkVersion 'P'
    }
    ...
}
dependencies {
  implementation 'com.google.android.material:material:1.0.0-alpha1'
}

Официальный документ здесь и все спецификации Android здесь.

Источник

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

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

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

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

Источник

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

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

Если вы не хотите менять тему для всего приложения, вы можете использовать тему материала специально для этого представления:

      <com.google.android.material.button.MaterialButton
    android:id="@+id/fooButon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:fontFamily="sans-serif"
    android:padding="8dp"
==> android:theme="@style/Theme.MaterialComponents.Light"
    app:backgroundTint="@color/base_white" />
Источник

просто используйте MaterialButton и радиус угла, но не устанавливайте цвет фона. чтобы установить цвет фона, используйте backgrountTint, и он должен работать правильно

      <com.google.android.material.button.MaterialButton
            android:id="@+id/post_comment"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:cornerRadius="10dp"
            android:backgroundTint="@color/blue"
            android:text="Jogapla"
            android:textAllCaps="false"
            android:textSize="14sp"
            android:textColor="@color/white"
            android:fontFamily="@font/sfpro_heavy"
            android:layout_marginHorizontal="10dp"
            android:layout_marginBottom="10dp" />
    ````
Источник

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