wake-up-neo.com

Abgerundete Ecken am Materialknopf

Ich befolge die Tipps aus Fragen wie this , um einen Schaltflächenstil zu erstellen, wie er auf Material Design vorgeschlagen wird.

 Button

Ich muss jedoch den Eckenradius ändern und konnte dies nicht, indem ich den Widget.AppCompat.Button.Colored-Stil vererbte und den Radius-Parameter festlegte.

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

androidmaterial-designandroid-support-libraryandroid-support-design
21
Juliano Nunes Silva Oliveira

Sie müssen diesen Stil erben. 

Fügen Sie in Ihre styles.xml hinzu:

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

Fügen Sie die Datei drawable/round_shape.xml hinzu:

<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 zum Schluss in Ihrem Layout:

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

Bearbeiten: Die Antwort wurde aktualisiert, um die Farbe des Themes zu verwenden, statt eine fest codierte.

30
Nikita Shaposhnik

Mit der neuen Version Support Library 28.0.0-alpha1 enthält die Design Library jetzt den Material Button.

Sie können diese Schaltfläche zu unserer Layoutdatei hinzufügen mit:

<Android.support.design.button.MaterialButton
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:text="XXXXX"
    Android:textSize="18sp"
    Android:backgroundTint="@color/colorPrimary"
    app:icon="@drawable/ic_Android_white_24dp" />

Sie können den Eckenradius mit diesem Attribut festlegen:

  • app:cornerRadius: Wird verwendet, um den Radius zu definieren, der für die Ecken der Schaltfläche verwendet wird

 enter image description here

Zur Verwendung von müssen Sie Android Studio 3.1 oder höher verwenden und:

Android {
    compileSdkVersion 'Android-P'

    defaultConfig {
        targetSdkVersion 'P'
    }
    ...
}
dependencies {
  implementation 'com.Android.support:design:28.0.0-alpha1'
}

Sie können auch die neuen Materialkomponenten für Android verwenden.
In diesem Fall können Sie in Ihrer Layoutdatei Folgendes verwenden:

<com.google.Android.material.button.MaterialButton
    Android:id="@+id/material_button"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:text="XXXXX"
    app:cornerRadius=".."/>

Zur Zeit müssen Sie Android Studio 3.2 verwenden und: 

Android {
    compileSdkVersion 'Android-P'

    defaultConfig {
        targetSdkVersion 'P'
    }
    ...
}
dependencies {
  implementation 'com.google.Android.material:material:1.0.0-alpha1'
}

Das offizielle Dokument ist hier und alle Android-Spezifikationen hier .

23
Gabriele Mariotti

Abgerundeter Materialknopf mit Ripple-Effekt

 enter image description here

Erstellen Sie eine Datei im zeichnbaren Ordner ripple.xml.

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:color="?android:attr/colorControlHighlight">
    <item Android:id="@Android:id/mask">
        <shape Android:shape="rectangle">
            <solid Android:color="@color/colorPrimary" />
            <corners Android:radius="20dp" />
        </shape>
    </item>
    <item Android:drawable="@drawable/rounded_shape" />
</ripple>

Erstellen Sie eine Datei im zeichnbaren Ordner round_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle"   >
    <solid
        Android:color="@color/colorPrimary" >
    </solid>
    <corners
        Android:radius="20dp"   >
    </corners>
</shape>

Und auf deinem Button:

<Button
Android:id="@+id/button1"
Android:background="@drawable/ripple"
Android:text="Login"/>
5
Christer

Ich werde Ihnen meine genaue Lösung dafür nennen. In Selector-Tags können Sie Elemente einfügen (Funktionalität der Schaltflächen) 

Das zweite Element des Selector-Tags verhält sich umgekehrt. Sie können so viel wie einen Selektor (Schaltflächenverhalten) hinzufügen.

    <?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>
4
Emre Kilinc Arslan

Verwenden Sie nun MaterialButton für abgerundete Buttons und vieles mehr, was Sie damit tun können. Bitte folgen Sie dem Link

und füge app:cornerRadius="8dp"für abgerundete Ecke

und vergessen Sie nicht, Google Material Libs in build.gredle hinzuzufügen

implementation "com.google.Android.material:material:1.1.0"
2
Lokesh

Versuchen Sie den folgenden Code. Erstellen Sie eine zeichnungsfähige Datei mit dem Namen circular_button.xml und fügen Sie den folgenden Code ein

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:shape="rectangle">
<solid Android:color="#008577" />
<corners Android:bottomRightRadius="100dp"
    Android:bottomLeftRadius="100dp"
    Android:topRightRadius="100dp"
    Android:topLeftRadius="100dp"/>
</shape>

Ändern Sie dann den Hintergrund der Schaltfläche in diese Zeichnungsdatei

 <Button
      Android:layout_width="wrap_content"
      Android:layout_height="wrap_content"
      Android:background="@drawable/circle_button"
      Android:text="Button"/>

Wenn Sie eine Vollkreis-Schaltfläche wünschen, können Sie die folgende Zeichenfolge verwenden

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="oval">

    <solid
        Android:color="#008577"/>

    <size
        Android:width="120dp"
        Android:height="120dp"/>
</shape>
0
Udara Abeythilake

Eine andere einfache Möglichkeit besteht darin, es um cardView zu wickeln. Denken Sie daran, layout_width und layout_height von cardView auf wrap_content zu setzen. Außerdem muss der gesamte erforderliche Rand für die Schaltfläche auf cardView angewendet werden

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