design pulsante Materiale con bordo

Question

so come fare pulsante Material Design con il colore di riempimento:

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

E no delimitato-pulsante trasparente:

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

Tuttavia, c'è un modo per rendere Materiale pulsante di design bordato (trasparente all'interno)? Qualcosa come sotto?

Answer 1

Ecco come farlo correttamente.

Quello che dovete fare è

1 - Creare la forma drawable con corsa
2 - Creare ondulazione drawable
3 - Creazione di selezione drawable per meno di v21
4 - Creare un nuovo stile per pulsante con confine
5 - Applicare stile sul pulsante

1 - Creare forma con ictus 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 - Creare ondulazione drawable 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" è necessario per avere un feedback tocco ondulazione sul pulsante. Il livello contrassegnato come maschera non è visibile sullo schermo, è solo per il feedback tattile.

3 - Creazione di selezione drawable per meno di 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 - Creare un nuovo stile per il pulsante con bordo Tutte le risorse che che sono necessari per creare lo stile sono dati sopra , che è come il tuo stile dovrebbe essere simile

<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 stile LY sul pulsante

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

che è praticamente esso. Ecco un esempio di come appaiono ora i pulsanti.

Answer 2

Questo è come lo faccio pulsanti solo con un bordo e l'effetto a catena su Lollipop e al di sopra. Proprio come i pulsanti AppCompat, questi hanno un effetto di fallback sulle API inferiori (se hai bisogno di increspature su API inferiori, devi usare una libreria esterna). Io uso FrameLayout perché è economico. Il colore del testo e il bordo è nero, ma è possibile cambiarlo con uno personalizzato:

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

Se ho perso qualcosa, si prega di lasciare un commento e aggiornerò la risposta.

Answer 3

Semplicemente è possibile utilizzare questo codice. Il suo aspetto è così buono.

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

Ecco colore del bordo è:

android:background="#ffffff" 

E il colore di sfondo è:

android:backgroundTint="#F48025"