Abgerundete Ecken auf Material Knopf

Question

Ich befolge die Tipps von Fragen wie this, um einen Knopf Stil wie auf Material Design vorgeschlagen zu erstellen.

Ich brauche aber den Eckenradius zu ändern und nicht in der Lage, dies zu tun, indem Widget.AppCompat.Button.Colored Stil erbt und den Radius Parameter einstellen.

Wie kann ich den gleichen Stil aber mit abgerundeten Ecken haben?

Answer 1

Sie müssen diesen Stil erben.

Fügen Sie in Ihrem styles.xml:

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

Datei hinzufügen ziehbar/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> 

Und schließlich in Ihrem Layout:

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

Edit: Antwort aktualisiert die Farbe des Themas statt der hartkodierten verwenden.

Answer 2

Auch eine weitere einfache Möglichkeit, wickeln Sie es um cardView, Erinnern Sie sich die layout_width und layout_height des cardView bis auf wrap_content, die alle auch die benötigte Marge auf die Schaltfläche benötigen sollte der 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 angewendet werden Ich werde dir meine genaue Lösung dafür nennen. Innerhalb der Selektor-Tags können Sie Elemente (Funktionalität der Schaltflächen) setzen.

Das zweite Element der Selektor-Tags hat das entgegengesetzte Verhalten.

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