2017-03-09 40 views
11

Podążam za wskazówkami z takich pytań, jak this, aby utworzyć styl przycisku sugerowany w Material Design.Zaokrąglone narożniki na przycisku materiału

Button

Jednak muszę zmienić promień narożnika i nie były w stanie to zrobić przez dziedziczenie Widget.AppCompat.Button.Colored styl i ustawienie parametru promienia.

Jak mogę mieć ten sam styl, ale z zaokrąglonymi narożnikami?

Odpowiedz

14

Musisz odziedziczyć ten styl.

Dodaj do swojej styles.xml:

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

Dodaj plik rozciągliwej/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> 

i wreszcie w układzie:

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

Edit: zaktualizowane odpowiedzi używać koloru motywu zamiast go na stałe.

+2

Jednak ta usuwa odzew z przycisku. Jak uzyskać efekt marszczenia na spersonalizowanym przycisku? – ssudaraka

+0

@SupunSudaraka http://stackoverflow.com/a/24530169/401025 –

+0

@LostinBielefeld Dzięki, spróbuję tego. – ssudaraka

0

także inny prosty sposób jest owinąć go wokół cardView, Pamiętaj, aby ustawić layout_width i layout_height z cardView do wrap_content, również wszystkie potrzebne margines przycisk będzie musiał powinny być stosowane do 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> 
0

I powie ci moje dokładne rozwiązanie. Wewnątrz znaczników wyboru można umieszczać elementy (funkcjonalność przycisków).

Drugi element znacznika selektora ma zachowanie przeciwne. Możesz dodać tyle, ile wybieraka (zachowanie przycisku) DODAJ NINIEJSZE rozciągliwej XML jako tło systemu Android przycisku: tło = „@ rozciągliwej/tego 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> 
Powiązane problemy