Materialdesign Taste mit Rande

Question

Ich weiß, wie Material Design Knopf mit Farbfüllung zu machen:

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

Und keine umrandete transparente Schaltfläche:

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

Allerdings ist es eine Möglichkeit, Material zu machen Entwurf eingefasster (transparenter innerer) Knopf? Etwas wie unten?

Answer 1

Hier ist, wie es richtig zu tun.

Was Sie tun müssen, ist

1 - Form ziehbar erstellen mit Schlaganfall
2 - Erstellen Ripple ziehbar
3 - Selektor ziehbar erstellen für weniger als v21
4 - Erstellen Sie einen neuen Stil für Knopf mit
Grenze 5 - bewerben Stil auf die Schaltfläche

1 - erstellen Form mit Schlaganfall 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 - Erstellen ziehbar Ripple 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" erforderlich ist Ripple Touch-Feedback auf die Schaltfläche haben. Die Ebene, die als Maske markiert ist, ist auf dem Bildschirm nicht sichtbar, sie dient nur zur Berührungsrückmeldung.

3 - Erstellen Wähler ziehbar für weniger als 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 - Erstellen Sie einen neuen Stil für einen Knopf mit Rand Alle Ressourcen, die die benötigt werden, um den Stil zu schaffen sind oben angegeben das ist, wie Sie Ihren Stil wie

<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 aussehen sollte - App ly Stil auf die Schaltfläche

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

, dass es ziemlich viel. Hier ist ein Beispiel, wie die Buttons jetzt aussehen.

Answer 2

Dies ist, wie ich Tasten tun nur mit einem Rahmen und die sich allmählich ausbreitende Wirkung auf Lollipop und darüber. Genau wie die AppCompat-Schaltflächen haben diese einen Rückfall-Druckeffekt auf niedrigere APIs (wenn Sie bei niedrigeren APIs Ripples benötigen, müssen Sie eine externe Bibliothek verwenden). Ich benutze FrameLayout, weil es billig ist. Die Farbe des Textes und der Grenze ist schwarz, aber man kann es mit einem benutzerdefinierten ändern:

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

ziehbar/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> 

Wenn ich etwas verpasst haben, lassen Sie einen Kommentar und ich werde die Antwort aktualisieren.

Answer 3

Einfach Sie können diesen Code verwenden. Es sieht so gut aus.

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

Hier Grenzfarbe ist:

android:background="#ffffff" 

und Hintergrundfarbe ist:

android:backgroundTint="#F48025"