Materialdesign-Knopf mit Rand

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

Sie können diese Schaltfläche zu unserer Layout-Datei hinzufügen mit:

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

Sie können die Schaltfläche mit diesen Attributen anpassen:

• app:backgroundTint: Dient zum Anwenden eines Farbtons auf den Hintergrund der Schaltfläche. Wenn Sie die Hintergrundfarbe der Schaltfläche ändern möchten, verwenden Sie dieses Attribut anstelle des Hintergrunds.

• app:strokeColor: Die Farbe für den Tastenanschlag

• app:strokeWidth: Die Breite, die für den Tastenanschlag verwendet werden soll

Ebenfalls 

Sie können dies ganz einfach tun, indem Sie das Attribut style von Material Design Button auf @style/Widget.MaterialComponents.Button.OutlinedButton Und den Attributwert app:strokeColor Auf Ihre bevorzugte Farbe setzen.

beispiel:

<com.google.Android.material.button.MaterialButton
                Android:text="Rounded outlined button"
                Android:layout_height="wrap_content"
                Android:layout_width="wrap_content"
                Android:id="@+id/btnRound"
                style="@style/Widget.MaterialComponents.Button.OutlinedButton"
                app:strokeColor="@color/colorPrimaryDark"/>

Verweise:

• https://material.io/develop/Android/docs/getting-started/
• https://material.io/develop/Android/components/material-button/

Dank an @NomanRafique für die ausführliche Antwort! Aufgrund des benutzerdefinierten Hintergrunds haben wir jedoch ein paar wichtige Dinge verloren:

1. Die Höhe der Schaltfläche ist größer als der Standard Widget.AppCompat.Button
2. Füllungen
3. Zustände aktivieren/deaktivieren

Falls Sie sich fragen, sieht der Standardhintergrund folgendermaßen aus: https://Android.googlesource.com/platform/frameworks/support/+/a7487e7/v7/appcompat/res/drawable-v21/abc_btn_colored_material. xml

Durch die Wiederverwendung der ursprünglichen Einfügungen, Auffüllungen und Farbselektoren können wir in einem einfachen Fall auf Folgendes (alle Werte sind Standardwerte) und stammen aus der Android-Support-/Materialbibliothek):

drawable-v21/bg_btn_outlined.xml

<inset xmlns:Android="http://schemas.Android.com/apk/res/Android"
       Android:insetLeft="@dimen/abc_button_inset_horizontal_material"
       Android:insetTop="@dimen/abc_button_inset_vertical_material"
       Android:insetRight="@dimen/abc_button_inset_horizontal_material"
       Android:insetBottom="@dimen/abc_button_inset_vertical_material">
    <ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
            Android:color="?attr/colorControlHighlight">
        <item>
            <shape>
                <stroke
                    Android:width="2dp"
                    Android:color="@color/abc_btn_colored_borderless_text_material"/>
                <corners Android:radius="@dimen/abc_control_corner_material"/>
                <padding
                    Android:bottom="@dimen/abc_button_padding_vertical_material"
                    Android:left="@dimen/abc_button_padding_horizontal_material"
                    Android:right="@dimen/abc_button_padding_horizontal_material"
                    Android:top="@dimen/abc_button_padding_vertical_material"/>
            </shape>
        </item>
        <item Android:id="@Android:id/mask">
            <shape>
                <stroke
                    Android:width="2dp"
                    Android:color="@color/abc_btn_colored_borderless_text_material"/>
                <solid Android:color="@Android:color/white"/>
                <corners Android:radius="@dimen/abc_control_corner_material"/>
            </shape>
        </item>
    </ripple>
</inset>

styles.xml

<style name="Button.Outlined" parent="Widget.AppCompat.Button.Borderless.Colored">
    <item name="Android:background">@drawable/bg_btn_outlined</item>
</style>

An dieser Stelle sollten wir eine umrandete Schaltfläche haben, die auf Berührungen reagiert, den enabled="false"-Status und die gleiche Höhe wie der Standard Widget.AppCompat.Button berücksichtigt:

Jetzt können Sie mit dem Anpassen der Farben beginnen, indem Sie Ihre eigene Implementierung des Farbwählers @color/abc_btn_colored_borderless_text_material bereitstellen. 

So mache ich Knöpfe nur mit einem Rand und dem Ripple-Effekt auf Lollipop und darüber. Genau wie die AppCompat-Schaltflächen wirken sich diese auch auf untergeordnete APIs durch einen Fallback-Effekt aus (wenn Sie bei niedrigeren APIs Welligkeiten benötigen, müssen Sie eine externe Bibliothek verwenden). Ich benutze FrameLayout, weil es billig ist. Die Farbe des Textes und der Umrandung ist schwarz, Sie können sie jedoch mit einer benutzerdefinierten Farbe ändern:

<FrameLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_margin="20dp"
    Android:background="@drawable/background_button_ghost">

    <TextView
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:background="?android:selectableItemBackground"
        Android:gravity="center"
        Android:padding="14dp"
        Android:textSize="16sp"
        Android:textAllCaps="true"
        Android:textStyle="bold"
        Android:textColor="@Android:color/black"
        Android:text="Text"/>
</FrameLayout>

drawable/background_button_ghost.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <stroke
        Android:width="2dp"
        Android:color="@Android:color/black"/>
    <solid Android:color="@color/transparent"/>
</shape>

Wenn ich etwas verpasst habe, bitte einen Kommentar hinterlassen und ich werde die Antwort aktualisieren.

Verwenden Sie dies in Ihrem XML,

            <com.google.Android.material.button.MaterialButton
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:text="Its a button"
                Android:textColor="@Android:color/white"
                Android:textSize="@dimen/_12ssp"
                app:backgroundTint="@Android:color/transparent"
                app:strokeColor="@Android:color/white"
                app:strokeWidth="@dimen/_1sdp" />

wo

1. app: backgroundTint wird für die Hintergrundfarbe verwendet
2. app: strokeColor ist die Rahmenfarbe
3. app: strokeWidth ist die Randbreite

Einfach Sie können diesen Code verwenden. Es sieht so gut aus.

           <LinearLayout
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:background="#ffffff"
                Android:orientation="vertical">

                <Android.support.v7.widget.AppCompatButton
                    Android:layout_width="match_parent"
                    Android:layout_height="wrap_content"
                    Android:backgroundTint="#F48025"
                    Android:text="login"
                    Android:textColor="@color/colorWhite" />

            </LinearLayout>

Hier ist die Randfarbe:

Android:background="#ffffff"

Und Hintergrundfarbe ist:

Android:backgroundTint="#F48025"