nút thiết kế Vật liệu với biên giới

Question

tôi biết làm thế nào để làm cho nút Design Material với fill màu:

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

Và không tiếp giáp với nút trong suốt:

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

Tuy nhiên, có một cách để làm nguyên liệu thiết kế giáp (trong suốt bên trong) nút? Một cái gì đó như dưới đây?

Answer 1

Dưới đây là làm thế nào để làm điều đó một cách chính xác.

Những gì bạn cần làm là

1 - Tạo hình dạng drawable với đột quỵ
2 - Tạo gợn drawable
3 - Tạo selector drawable dưới v21
4 - Tạo phong cách mới cho nút với biên giới
5 - Áp dụng phong cách trên nút

1 - Tạo hình dạng với đột quỵ 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 - Tạo gợn 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" bắt buộc phải có thông tin phản hồi cảm ứng gợn vào nút. Lớp được đánh dấu là mặt nạ không hiển thị trên màn hình, nó chỉ dành cho phản hồi cảm ứng.

3 - Tạo selector drawable dưới 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 - Tạo một phong cách mới cho nút với biên giới Tất cả các nguồn lực mà đó là cần thiết để tạo ra các phong cách được đưa ra ở trên , đó là cách phong cách của bạn trông giống như

<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 style on button

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

Khá nhiều. Dưới đây là ví dụ về cách các nút trông như thế nào.

Answer 2

Đây là cách tôi làm nút duy nhất có biên giới và tác động lan tỏa trên Lollipop trở lên. Cũng giống như các nút AppCompat, chúng có tác dụng nhấn dự phòng trên các API thấp hơn (nếu bạn cần các gợn sóng trên các API thấp hơn, bạn cần phải sử dụng một thư viện bên ngoài). Tôi sử dụng FrameLayout vì nó rẻ. Màu sắc của văn bản và biên giới là màu đen, nhưng bạn có thể thay đổi nó với một tùy chỉnh một:

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

Nếu tôi đã bỏ lỡ một cái gì đó, xin vui lòng để lại nhận xét và tôi sẽ cập nhật câu trả lời.

Answer 3

Đơn giản chỉ cần bạn có thể sử dụng mã này. Vẻ ngoài của nó rất tuyệt.

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

đây màu biên giới là:

android:background="#ffffff" 

Và màu nền là:

android:backgroundTint="#F48025"