webentwicklung-frage-antwort-db.com.de

Materialdesign-Knopf mit Rand

Ich weiß, wie man den Material Design-Button mit Farbe ausfüllt:

style="@style/Widget.AppCompat.Button.Colored"

Und ohne transparente Schaltfläche:

style="@style/Widget.AppCompat.Button.Borderless.Colored"

Gibt es eine Möglichkeit, die Schaltfläche "Materialdesign umrandet" (innen transparent) zu gestalten? Etwas wie unten?

 enter image description here

15
jclova

So machen Sie es richtig. 

Was Sie tun müssen, ist

1 - Erstellen Sie eine mit Strich gezeichnete Form
2 - Ripple zeichnen zeichnen 
3 - Selektor erstellen, der für weniger als v21 gezeichnet werden kann
4 - Erstellen Sie einen neuen Stil für die Schaltfläche mit Rahmen
5 - Stil auf Schaltfläche anwenden

1 - Form mit Strich erstellen btn_outline.xml

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

    <stroke
        Android:width="2dp"
        Android:color="@color/colorAccent">
    </stroke>
    <solid Android:color="@color/colorTransparent"/>
    <corners
        Android:radius="5dp">
    </corners>

</shape>

2 - Ripple drawable erstellen drawable-v21/bg_btn_outline.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:color="@color/colorOverlay">
    <item>
        <shape>
            <stroke
                Android:width="2dp"
                Android:color="@color/colorAccent"/>
            <corners Android:radius="5dp"/>
        </shape>
    </item>
    <item Android:id="@Android:id/mask">
        <shape>
            <stroke
                Android:width="2dp"
                Android:color="@color/colorAccent"/>
            <solid Android:color="@Android:color/white"/>
            <corners Android:radius="5dp"/>
        </shape>
    </item>

</ripple>

Android:id="@Android:id/mask" ist erforderlich, um eine ripple touch feedback auf die Schaltfläche zu erhalten. Die als Maske markierte Ebene ist auf dem Bildschirm nicht sichtbar, sie dient nur zur Berührung. 

3 - Selector Drawable für weniger als v21 erstellen drawable/bg_btn_outline.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:drawable="@drawable/btn_outline" Android:state_pressed="true">
        <shape Android:shape="rectangle">
            <solid Android:color="@color/colorOverlay"/>
        </shape>
    </item>
    <item Android:drawable="@drawable/btn_outline" Android:state_focused="true">
        <shape Android:shape="rectangle">
            <solid Android:color="@color/colorOverlay"/>
        </shape>
    </item>

    <item Android:drawable="@drawable/btn_outline"/>

</selector>

4 - Erstellen Sie einen neuen Stil für die Schaltfläche mit Umrandung Alle Ressourcen, die zum Erstellen des Stils benötigt werden, sind oben angegeben. So sollte Ihr Stil aussehen

<style name="ButtonBorder" parent="Widget.AppCompat.Button.Colored"/>

<style name="ButtonBorder.Accent">
        <item name="Android:background">@drawable/bg_btn_outline</item>
        <item name="Android:textColor">@color/colorAccent</item>
        <item name="Android:textAllCaps">false</item>
        <item name="Android:textSize">16sp</item>
        <item name="Android:singleLine">true</item>
    </style>

4 - Stil auf Schaltfläche anwenden

<Button
   style="@style/ButtonBorder.Accent"
   Android:layout_width="wrap_content"
   Android:layout_height="wrap_content"/>

Das wars so ziemlich. Hier sehen Sie ein Beispiel dafür, wie die Schaltflächen jetzt aussehen.  enter image description here

22
Noman Rafique

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 

13

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:

5
user158

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:

 enter image description here

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. 

4
Ghedeon

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.

2
Galya

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
0

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"
0