Materiał projekt przycisk z granicy

Question

wiem jak zrobić przycisk projektowania materiałów z kolorowym Wypełnienie:

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

I nikt nie graniczy przezroczysty przycisk:

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

Jednak, czy jest jakiś sposób, aby materiał przycisk z obramowaniem (przezroczysty wewnątrz)? Coś jak poniżej?

Answer 1

Oto jak to zrobić poprawnie.

Co trzeba zrobić, to

1 - Tworzenie kształtu rozciągliwej z udarem
2 - Tworzenie tętnienia odkształcalne
3 - Tworzenie selektora rozciągliwej za mniej niż V21
4 - Tworzenie nowego stylu dla przycisku z granica
5 - Zastosuj styl na przycisk

1 - Tworzenie kształtu z udarem 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 - Tworzenie tętnienia odkształcalne 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" wymagane jest posiadanie tętnienia dotykowy opinię na przycisku. Warstwa oznaczona jako maska ​​nie jest widoczna na ekranie, służy jedynie do przekazywania informacji dotykowych.

3 - Tworzenie selektora rozciągliwej za mniej niż 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 - Tworzenie nowego stylu dla przycisku przy granicy wszystkich zasobów, które są potrzebne do stworzenia stylu podano powyżej , tak powinien wyglądać Twój styl:

<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 - aplikacja ly styl na przycisku

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

To wszystko. Oto próbka wyglądu przycisków.

Answer 2

ten sposób zrobić tylko przyciski z obramowaniem i odzew na lizak i powyżej. Podobnie jak przyciski AppCompat, mają one wciśnięty efekt wciskany na niższe API (jeśli potrzebujesz ripples na niższych API, musisz użyć zewnętrznej biblioteki). Używam FrameLayout, ponieważ jest tanie. Kolor tekstu i granicy jest czarna, ale można go zmienić za pomocą jednego zwyczaju:

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

odkształcalne/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> 

Gdybym coś przeoczyć, proszę zostawić komentarz i zaktualizuję odpowiedź.

Answer 3

Po prostu możesz użyć tego kodu. Wygląda tak dobrze.

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

Tu granica kolor:

android:background="#ffffff" 

i kolor tła jest:

android:backgroundTint="#F48025"