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

Question

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

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

И не каймой прозрачная кнопка:

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

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

Answer 1

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

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

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 - Создание селектора вытяжке менее чем v21 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 - App LY стиль на кнопку

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

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

Answer 2

Это, как я только кнопки с границей и волновой эффект на леденец и выше. Так же, как и кнопки 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> 

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

Answer 3

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

  <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"