it-swarm.com.ru

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

Я знаю, как сделать кнопку Material Design с цветной заливкой:

style="@style/Widget.AppCompat.Button.Colored"

И прозрачная кнопка без границ:

style="@style/Widget.AppCompat.Button.Borderless.Colored"

Тем не менее, есть ли способ сделать конструкцию Material ограниченным (прозрачным внутри) кнопкой? Что-то вроде ниже?

 enter image description here

15
jclova

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

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

1 - Создать фигуру с помощью обводки
2 - Создание рисованной пульсации 
3 - Создать селектор для рисования менее чем за v21
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 - Создать селектор для рисования менее чем за v21drawable/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"/>

Вот и все. Вот пример того, как кнопки выглядят сейчас. enter image description here

22
Noman Rafique

В новой версии Support Library 28.0.0-alpha1 , библиотека Design теперь содержит 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: ширина, которая будет использоваться для нажатия кнопки

Также 

13
Gabriele Mariotti

Кредиты @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 по умолчанию:

 enter image description here

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

4
Ghedeon

Так я делаю кнопки только с рамкой и эффектом ряби на 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>

рисуем/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>

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

2
Galya

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

           <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"
0
Md. Shahinur Rahman