材料ボタンの丸い角

Question

材料デザインで提案されているようなボタンスタイルを作成するには、thisのような質問のヒントに従っています。

しかし、私は、角の丸みを変更する必要があるとWidget.AppCompat.Button.Coloredスタイルを継承し、半径パラメータを設定することで、そうすることができていません。

同じスタイルを使用できますが、どのように角を丸くしますか？

Answer 1

このスタイルを継承する必要があります。

あなたのstyles.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> 

そして最後に：

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

は、ファイルの描画可能/ rounded_shape.xmlを追加

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

編集：更新された答えをハードコードされたものではなく、テーマの色を使用する。

Answer 2

はまた別の簡単な方法は、cardViewのまわりでそれを包むwrap_contentするcardViewのlayout_widthとlayout_heightを設定することを忘れないでくださいある、また、ボタンは必要なすべての必要なマージンが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

Iに適用されなければなりませんこのための私の正確な解決策を教えてくれます。セレクタタグ内では、アイテムを配置できます（ボタンの機能）

セレクタタグの2番目の項目の動作は逆です。背景=「描画可能/この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>