材質按鈕上的圓角

Question

我按照類似於this這樣的問題的提示來創建材質設計上建議的按鈕樣式。

不過，我需要改變圓角半徑和一直無法通過繼承Widget.AppCompat.Button.Colored風格和設置半徑參數來這樣做。

我怎樣纔能有相同的風格，但圓角？

Answer 1

您需要繼承該樣式。

添加到您的styles.xml：

<style name="AppTheme.RoundedCornerMaterialButton" parent="Widget.AppCompat.Button.Colored"> 
     <item name="android:background">@drawable/rounded_shape</item> 
</style> 

添加文件繪製/ rounded_shape.xml：

<shape 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle" > 

    <solid 
     android:color="@color/colorAccent" > 
    </solid> 

    <corners 
     android:radius="11dp" > 
    </corners> 

</shape> 

最後，在你的佈局：

<Button 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="Test Text" 
     style="@style/AppTheme.RoundedCornerMaterialButton"/> 

編輯：更新答案使用主題的顏色而不是硬編碼。

Answer 2

也是另一種簡單的方法是將其套在cardView，一定要設置cardView的layout_width和layout_height爲wrap_content，也都需要的保證金的按鈕將需要應適用於cardView

<android.support.v7.widget.CardView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      app:cardCornerRadius="8dp" 
      android:layout_marginLeft="10dp" 
      android:layout_marginRight="10dp" 
      android:layout_marginBottom="40dp" 
      app:elevation="10dp"> 

      <android.support.v7.widget.AppCompatButton 
       android:id="@+id/login_twitter" 
       android:tag="login_twitter" 
       android:layout_width="300dp" 
       android:layout_height="60dp" 
       android:paddingLeft="10dp" 
      android:foreground="?attr/selectableItemBackgroundBorderless" 
       android:textColor="@color/blue_grey_ligthen_5" 
       android:drawableLeft="@drawable/twitter" 
       android:background="@color/twitter" 
       android:text="@string/login_with_twitter" /> 
     </android.support.v7.widget.CardView> 

Answer 3

我會告訴你我的確切解決方案。在選擇器標籤內部，您可以放置​​項目（按鈕的功能）

選擇器標籤的第二項具有相反的行爲。可以添加多達選擇器（按鈕的行爲） 添加此可繪製的XML作爲背景按鈕的Android：背景=「@繪製/此xml」

<?xml version="1.0" encoding="utf-8"?> 
<ripple xmlns:android="http://schemas.android.com/apk/res/android" 
    android:color="#ffffff"> <!-- this is the ripple color(first touch color changes into this color) --> 
    <item> 
     <selector> 
      <item android:state_enabled="true"> 
       <shape xmlns:android="http://schemas.android.com/apk/res/android" 
        android:shape="rectangle"> 
        <!-- default button color --> 

        <solid android:color="@color/colorPrimary"></solid> 

        <corners android:radius="151dp"></corners> 

       </shape> 
      </item> 
      <item> 
       <shape xmlns:android="http://schemas.android.com/apk/res/android" 
        android:shape="rectangle"> 
        <!-- button disabled color opposite behaviour --> 
        <solid android:color="#e9d204"></solid> 

        <corners android:radius="151dp"></corners> 

       </shape> 
      </item> 
     </selector> 
    </item> 
    <item> 
     <selector> 
      <item android:state_pressed="true"> 
       <shape xmlns:android="http://schemas.android.com/apk/res/android" 
        android:shape="rectangle"> 
        <!-- button first touch of your finger color --> 
        <solid android:color="#1989fa"></solid> 

        <corners android:radius="151dp"></corners> 

       </shape> 
      </item> 
     </selector> 
    </item> 
    <item> 
     <selector> 
      <item android:state_hovered="true"> 
       <shape xmlns:android="http://schemas.android.com/apk/res/android" 
        android:shape="rectangle"> 
        <!-- hovered with a note pencil --> 
        <solid android:color="#4affffff"></solid> 

        <corners android:radius="151dp"></corners> 

       </shape> 
      </item> 
     </selector> 
    </item> 

</ripple>