Кнопка дизайна материала с рамкой

Вы также можете использовать материальные компоненты для Android. .

Добавьте зависимость к ваш build.gradle:

dependencies { implementation 'com.google.android.material:material:1.3.0' }

В этом случае вы можете использовать < strong>MaterialButton в файле макета:

<com.google.android.material.button.MaterialButton
   ....
   style="@style/Widget.MaterialComponents.Button.OutlinedButton"
   app:cornerRadius=".."
   app:strokeColor="@color/colorPrimary"/>

Примените стиль @style/Widget.MaterialComponents.Button.OutlinedButton.

В вашем случае используйте атрибут app:cornerRadius, чтобы изменить размер радиуса угла. Это закруглит углы с заданными размерами.
Используйте атрибуты app:strokeColor и app:strokeWidth, чтобы изменить цвет и ширину границы.
< a href="https://i.stack.imgur.com/o5Jdm.png" rel="nofollow noreferrer">

Вы также можете настроить углы с помощью ShapeApperance (требуется версия 1.1.0)

<style name="MyButton" parent="Widget.MaterialComponents.Button.OutlinedButton">
    <item name="shapeAppearanceOverlay">@style/MyShapeAppearance</item>
</style>
<style name="MyShapeAppearance" parent="">
    <item name="cornerFamilyTopLeft">rounded</item>
    <item name="cornerFamilyBottomLeft">rounded</item>
    <item name="cornerFamilyTopRight">cut</item>
    <item name="cornerFamilyBottomRight">cut</item>
    <item name="cornerSize">8dp</item>
</style>

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

С созданием реактивного ранца 1.0.0 вы можете использовать OutlinedButton:

    OutlinedButton(
        onClick = { },
        border = BorderStroke(1.dp, Color.Blue),
        shape = RoundedCornerShape(8.dp) 
    ) {
        Text(text = "Save")
    }

СТАРЫЙ (вспомогательная библиотека)

С новой библиотекой поддержки 28.0.0 библиотека дизайна теперь содержит файл Material Button.

Вы можете добавить эту кнопку в наш файл макета с помощью:

<android.support.design.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="XXXX"
    android:textSize="18sp"
    app:icon="@drawable/ic_android_white_24dp" />

Вы можете настроить кнопку со следующими атрибутами:

• app:backgroundTint: Используется для применения оттенка к фону кнопки. Если вы хотите изменить цвет фона кнопки, используйте этот атрибут вместо фона.

• app:strokeColor: цвет, который будет использоваться для обводки кнопки.

• app:strokeWidth: Ширина, используемая для обводки кнопки

Также

Вот как это сделать правильно.

Что вам нужно сделать, это

1 – Создать фигуру, которую можно рисовать с помощью обводки
2 – Создать рябь, которую можно рисовать
3 – Создать селектор, который можно рисовать для версии менее 21
4 – Создать новый стиль для кнопки с рамкой
5 – Применить стиль на кнопке

1 – Создать фигуру с обводкой btn_outline.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <stroke
        android:width="2dp"
        android:color="@color/colorAccent">
    </stroke>
    <solid android:color="@color/colorTransparent"/>
    <corners
        android:radius="5dp">
    </corners>

</shape>

2 – Создать рипл-рисунок drawable-v21/bg_btn_outline.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="@color/colorOverlay">
    <item>
        <shape>
            <stroke
                android:width="2dp"
                android:color="@color/colorAccent"/>
            <corners android:radius="5dp"/>
        </shape>
    </item>
    <item android:id="@android:id/mask">
        <shape>
            <stroke
                android:width="2dp"
                android:color="@color/colorAccent"/>
            <solid android:color="@android:color/white"/>
            <corners android:radius="5dp"/>
        </shape>
    </item>

</ripple>

android:id="@android:id/mask" требуется, чтобы на кнопке была пульсирующая обратная связь. Слой, помеченный как маска, не виден на экране, он предназначен только для сенсорной обратной связи.

3 – Создать селектор, доступный для рисования до версии 21 drawable/bg_btn_outline.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/btn_outline" android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorOverlay"/>
        </shape>
    </item>
    <item android:drawable="@drawable/btn_outline" android:state_focused="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorOverlay"/>
        </shape>
    </item>

    <item android:drawable="@drawable/btn_outline"/>

</selector>

4 – Создайте новый стиль для кнопки с рамкой Все ресурсы, необходимые для создания стиля, приведены выше, вот как должен выглядеть ваш стиль

<style name="ButtonBorder" parent="Widget.AppCompat.Button.Colored"/>

<style name="ButtonBorder.Accent">
        <item name="android:background">@drawable/bg_btn_outline</item>
        <item name="android:textColor">@color/colorAccent</item>
        <item name="android:textAllCaps">false</item>
        <item name="android:textSize">16sp</item>
        <item name="android:singleLine">true</item>
    </style>

4 – Применить стиль к кнопке

<Button
   style="@style/ButtonBorder.Accent"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"/>

Вот и все. Вот пример того, как теперь выглядят кнопки.

Вы можете сделать это довольно легко, установив атрибут style кнопки Material Design на @style/Widget.MaterialComponents.Button.OutlinedButton и установив значение атрибута app:strokeColor на предпочитаемый цвет.

пример:

<com.google.android.material.button.MaterialButton
                android:text="Rounded outlined button"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:id="@+id/btnRound"
                style="@style/Widget.MaterialComponents.Button.OutlinedButton"
                app:strokeColor="@color/colorPrimaryDark"/>

Использованная литература:

• https://material.io/develop/android/docs/getting-started/< /а>
• https://material.io/develop/android/components/material-button/< /а>

Спасибо @NomanRafique за подробный ответ! Однако из-за пользовательского фона мы потеряли несколько важных вещей:

1. Высота кнопки больше, чем по умолчанию Widget.AppCompat.Button
2. Прокладки
3. Включить/отключить состояния

Если вам интересно, вот как выглядит фон по умолчанию: https://android.googlesource.com/platform/frameworks/support/+/a7487e7/v7/appcompat/res/drawable-v21./abc_btn_colored_material.xml

Повторно используя исходные вставки, отступы и селекторы цветов, в простом случае мы можем получить что-то вроде этого (все значения по умолчанию и взяты из библиотеки материалов/поддержки Android):

drawable-v21/bg_btn_outlined.xml

<inset xmlns:android="http://schemas.android.com/apk/res/android"
       android:insetLeft="@dimen/abc_button_inset_horizontal_material"
       android:insetTop="@dimen/abc_button_inset_vertical_material"
       android:insetRight="@dimen/abc_button_inset_horizontal_material"
       android:insetBottom="@dimen/abc_button_inset_vertical_material">
    <ripple xmlns:android="http://schemas.android.com/apk/res/android"
            android:color="?attr/colorControlHighlight">
        <item>
            <shape>
                <stroke
                    android:width="2dp"
                    android:color="@color/abc_btn_colored_borderless_text_material"/>
                <corners android:radius="@dimen/abc_control_corner_material"/>
                <padding
                    android:bottom="@dimen/abc_button_padding_vertical_material"
                    android:left="@dimen/abc_button_padding_horizontal_material"
                    android:right="@dimen/abc_button_padding_horizontal_material"
                    android:top="@dimen/abc_button_padding_vertical_material"/>
            </shape>
        </item>
        <item android:id="@android:id/mask">
            <shape>
                <stroke
                    android:width="2dp"
                    android:color="@color/abc_btn_colored_borderless_text_material"/>
                <solid android:color="@android:color/white"/>
                <corners android:radius="@dimen/abc_control_corner_material"/>
            </shape>
        </item>
    </ripple>
</inset>

styles.xml

<style name="Button.Outlined" parent="Widget.AppCompat.Button.Borderless.Colored">
    <item name="android:background">@drawable/bg_btn_outlined</item>
</style>

На данный момент у нас должна быть обведенная кнопка, которая реагирует на прикосновения, учитывает состояние enabled="false" и имеет ту же высоту, что и Widget.AppCompat.Button по умолчанию:

Теперь вы можете приступить к настройке цветов, предоставив собственную реализацию селектора цвета @color/abc_btn_colored_borderless_text_material.

В вашем XML используйте это,

            <com.google.android.material.button.MaterialButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Its a button"
                android:textColor="@android:color/white"
                android:textSize="@dimen/_12ssp"
                app:backgroundTint="@android:color/transparent"
                app:strokeColor="@android:color/white"
                app:strokeWidth="@dimen/_1sdp" />

куда

1. app:backgroundTint используется для цвета фона
2. app:strokeColor — цвет границы.
3. app:strokeWidth — ширина границы.

Вот так я делаю кнопки только с рамкой и эффектом пульсации на Lollipop и выше. Так же, как и кнопки AppCompat, они имеют резервный эффект нажатия на более низкие API (если вам нужны пульсации на более низких API, вам нужно использовать внешнюю библиотеку). Я использую FrameLayout, потому что это дешево. Цвет текста и рамки черный, но вы можете изменить его на собственный:

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="20dp"
    android:background="@drawable/background_button_ghost">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?android:selectableItemBackground"
        android:gravity="center"
        android:padding="14dp"
        android:textSize="16sp"
        android:textAllCaps="true"
        android:textStyle="bold"
        android:textColor="@android:color/black"
        android:text="Text"/>
</FrameLayout>

Drawable/background_button_ghost.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="2dp"
        android:color="@android:color/black"/>
    <solid android:color="@color/transparent"/>
</shape>

Если я что-то упустил, оставьте комментарий, и я обновлю ответ.

Просто вы можете использовать этот код. Выглядит очень хорошо.

           <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#ffffff"
                android:orientation="vertical">

                <android.support.v7.widget.AppCompatButton
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:backgroundTint="#F48025"
                    android:text="login"
                    android:textColor="@color/colorWhite" />

            </LinearLayout>

Здесь цвет границы:

android:background="#ffffff"

И цвет фона:

android:backgroundTint="#F48025"

<Button
    android:id="@+id/btn_add_discussion"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginHorizontal="15dp"
    android:padding="8dp"
    android:layout_marginTop="10dp"
    android:layout_marginBottom="5dp"
    android:backgroundTint="#80ffffff"
    android:textColor="@color/colorPrimaryDark"
    style="@style/btn_start_new_discussion"
    android:text="Start new discussion" />

Поместите ниже код в файл Styles.xml:

<style name="btn_start_new_discussion">
    <item name="android:layout_marginTop">15dp</item>
    <item name="strokeWidth">2dp</item>
    <item name="strokeColor">@color/colorPrimary</item>
    <item name="cornerRadius">10dp</item>
</style>