Materialdesign-Knopf mit Rand

Lesezeit: 9 Minuten

Benutzer-Avatar
jclova

Ich weiß, wie man eine Materialdesign-Schaltfläche mit Farbfüllung erstellt:

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

Und randlose transparente Schaltfläche:

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

Gibt es jedoch eine Möglichkeit, eine Materialdesign-umrandete (innen transparente) Schaltfläche zu erstellen? Etwas wie unten?

Geben Sie hier die Bildbeschreibung ein

Benutzer-Avatar
Gabriele Marotti

Sie können auch die verwenden Materialkomponenten für Android.

Hinzufügen die Abhängigkeit zu deinem build.gradle:

dependencies { implementation 'com.google.android.material:material:1.3.0' }

In diesem Fall können Sie die verwenden MaterialButton in Ihrer Layoutdatei:

<com.google.android.material.button.MaterialButton
   ....
   style="@style/Widget.MaterialComponents.Button.OutlinedButton"
   app:cornerRadius=".."
   app:strokeColor="@color/colorPrimary"/>

Wenden Sie den Stil an @style/Widget.MaterialComponents.Button.OutlinedButton.

Verwenden Sie in Ihrem Fall die app:cornerRadius -Attribut, um die Größe des Eckenradius zu ändern. Dadurch werden die Ecken mit den angegebenen Abmessungen abgerundet.
Verwenden Sie das te-Attribut app:strokeColor und app:strokeWidth um die Farbe und die Breite des Rahmens zu ändern.
Geben Sie hier die Bildbeschreibung ein

Sie können die Ecken auch mit anpassen ShapeApperance (erfordert Version 1.1.0)

<style name="MyButton" parent="Widget.MaterialComponents.Button.OutlinedButton">
    <item name="shapeAppearanceOverlay">@style/MyShapeAppearance</item>
</style>
<style name="MyShapeAppearance" parent="">
    <item name="cornerFamilyTopLeft">rounded</item>
    <item name="cornerFamilyBottomLeft">rounded</item>
    <item name="cornerFamilyTopRight">cut</item>
    <item name="cornerFamilyBottomRight">cut</item>
    <item name="cornerSize">8dp</item>
</style>

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


Mit Jetpack komponieren 1.0.x du kannst den … benutzen OutlinedButton und die border Attribut:

    OutlinedButton(
        onClick = { },
        border = BorderStroke(1.dp, Color.Blue),
        shape = RoundedCornerShape(8.dp) 
    ) {
        Text(text = "Save")
    }

Geben Sie hier die Bildbeschreibung ein


ALT (Unterstützungsbibliothek)

Mit dem Neuen Unterstützungsbibliothek 28.0.0enthält die Designbibliothek jetzt die 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="XXXX"
    android:textSize="18sp"
    app:icon="@drawable/ic_android_white_24dp" />

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

  • app:backgroundTint: Wird verwendet, um einen Farbton auf den Hintergrund der Schaltfläche anzuwenden. Wenn Sie die Hintergrundfarbe der Schaltfläche ändern möchten, verwenden Sie dieses Attribut anstelle von background.

  • app:strokeColor: Die Farbe, die für den Tastenstrich verwendet werden soll

  • app:strokeWidth: Die für den Tastenstrich zu verwendende Breite

Ebenfalls

Benutzer-Avatar
Noman Rafique

Hier erfahren Sie, wie Sie es richtig machen.

Was Sie tun müssen, ist

1 – Erstellen Sie eine Form, die mit einem Strich gezeichnet werden kann
2 – Erstellen Sie eine ziehbare Welligkeit
3 – Erstellen Sie einen Selektor, der für weniger als v21 gezeichnet werden kann
4 – Erstellen Sie einen neuen Stil für Schaltflächen 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 – Erstellen Sie eine ziehbare Welligkeit
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 ein Ripple-Touch-Feedback auf der Taste zu haben. Die als Maske markierte Ebene ist auf dem Bildschirm nicht sichtbar, sondern dient nur der Berührungsrückmeldung.

3 – Erstellen Sie einen Selektor, der für weniger als v21 gezeichnet werden kann
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 Schaltflächen mit Rahmen
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 ist ein Beispiel dafür, wie die Schaltflächen jetzt aussehen.
Geben Sie hier die Bildbeschreibung ein

  • Wo Sie erstellen btn_outline.xml in drawable oder drawable-v21 ??

    – AG-Entwickler

    21. April 2020 um 18:59 Uhr


Benutzer-Avatar
Benutzer158

Sie könnten dies ziemlich einfach tun, indem Sie Material Design Buttons festlegen style zuschreiben @style/Widget.MaterialComponents.Button.OutlinedButton und Einstellung app:strokeColor Attributwert Ihrer bevorzugten Farbe.

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:

Benutzer-Avatar
Gedeon

Credits an @NomanRafique für die ausführliche Antwort! Aufgrund des benutzerdefinierten Hintergrunds sind uns jedoch einige wichtige Dinge verloren gegangen:

  1. Die Höhe der Schaltfläche ist größer als die Standardeinstellung Widget.AppCompat.Button
  2. Polsterungen
  3. Zustände aktivieren/deaktivieren

Falls Sie sich fragen, hier ist, wie der Standardhintergrund aussieht: https://android.googlesource.com/platform/frameworks/support/+/a7487e7/v7/appcompat/res/drawable-v21/abc_btn_colored_material.xml

Durch die Wiederverwendung von Originaleinsätzen, Polsterungen und Farbwählern können wir uns in einem einfachen Fall so etwas einfallen lassen (Alle Werte sind Standardwerte und stammen von der Android-Unterstützung/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 umrissene Schaltfläche haben, die auf Berührungen reagiert, die respektiert enabled="false" Zustand und von gleicher Höhe wie die Vorgabe Widget.AppCompat.Button:

Geben Sie hier die Bildbeschreibung ein

Jetzt können Sie von hier aus mit dem Anpassen von Farben beginnen, indem Sie Ihre eigene Implementierung von bereitstellen @color/abc_btn_colored_borderless_text_material Farbauswahl.

Verwenden Sie in Ihrem XML dies,

            <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 Randfarbe
  3. app:strokeWidth ist die Randbreite

Benutzer-Avatar
Galja

So mache ich Schaltflächen nur mit einem Rand und dem Welleneffekt auf Lollipop und höher. Genau wie die AppCompat-Schaltflächen haben diese einen Fallback-Pressed-Effekt auf niedrigere APIs (wenn Sie Ripples auf niedrigeren APIs benötigen, müssen Sie eine externe Bibliothek verwenden). Ich benutze FrameLayout, weil es billig ist. Die Farbe des Textes und des Rahmens ist schwarz, aber Sie können sie durch eine benutzerdefinierte 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, hinterlassen Sie bitte einen Kommentar und ich werde die Antwort aktualisieren.

Benutzer-Avatar
Md. Shahinur Rahman

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 die Hintergrundfarbe ist:

android:backgroundTint="#F48025"

  • Ihre Lösung ist einfach, aber begrenzt. Sie können die Dicke des Randes nicht steuern und der Rand ist innen rund, aber außen kantig. Sieht nicht gut aus.

    – jclova

    8. August 2017 um 16:48 Uhr

  • In meinem Fall ist der Button transparent

    – IgniteCoders

    30. Oktober 2018 um 11:26 Uhr

1216740cookie-checkMaterialdesign-Knopf mit Rand

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy