Android Material Design Buttons - Pre Lutscher

75

Wie implementiere ich den "erhöhten Knopf" und den "flachen Knopf", wie in den Materialdesign-Richtlinien von Google beschrieben?


Erhöhte Schaltflächen verleihen meist flachen Layouts eine neue Dimension. Sie betonen> Funktionen in belebten oder weiten Räumen.

erhobene Knöpfe


Verwenden Sie flache Schaltflächen für Symbolleisten und Dialoge, um übermäßige Ebenen zu vermeiden.

flache Knöpfe

Quelle: http://www.google.com/design/spec/components/buttons.html

Rickyalbert
quelle
Beste Lösung stackoverflow.com/questions/1521640/…
AndroidGeek
1
Mögliches Duplikat von stackoverflow.com/questions/26346727/…
rds
Vielleicht sollte dies ein Duplikat sein (ich bin nicht klar). Aber dieser enge Grund ist einfach falsch.
Yishai

Antworten:

121

Dies erfordert Android 5.0

Erhöhter Knopf

Erben Sie Ihren Schaltflächenstil von Widget.Material.Button, und die Standardaktion zum Anheben und Anheben wird automatisch angewendet.

<style name="Your.Button" parent="android:style/Widget.Material.Button">
    <item name="android:background">@drawable/raised_button_background</item>
</style>

Anschließend müssen Sie eine raised_button_background.xmlDatei mit der Hintergrundfarbe Ihrer Schaltfläche in einem Ripple-Tag erstellen :

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
    <item android:drawable="@color/button_color"/>
</ripple>

Flacher Knopf

Bearbeiten: Anstelle meiner vorherigen Ratschläge für flache Tasten sollten Sie stattdessen die folgenden Ratschläge von Stephen Kaiser verwenden:

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="DONE"
    style="?android:attr/borderlessButtonStyle"
/>

Bearbeiten: Wenn Sie die Support-Bibliothek verwenden, können Sie mit Pre-Lollipop-Geräten dasselbe Ergebnis erzielen, indem Sie verwenden style="?attr/borderlessButtonStyle". (Beachten Sie das Fehlen von android:) Das obige Beispiel wird dann

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="DONE"
    style="?attr/borderlessButtonStyle"
/>
Gabriel
quelle
Vielen Dank und Entschuldigung für diese späte Antwort. Gibt es eine Möglichkeit, mit der Support Library dasselbe Ergebnis zu erzielen? Ich habe mein Thema von Theme.AppCompat.Light.DarkActionBar geerbt und in Android Studio kann ich das Erhöhte sehen, aber ich möchte, aber wenn ich die App auf meinem Telefon ausführe (API 17), sehe ich die übliche Schaltfläche
Rickyalbert
3
Gibt es eine Möglichkeit, den Raised-Button-Stil auf Pre-Lollipop anzuwenden? Sogar ein falscher Stil?
Android-Entwickler
2
Deaktivierte / Aktivierte Zustände sehen gleich aus. Wie kann man das beheben?
ViliusK
2
Warum zieht der flache (randlose) Knopf bei Verwendung des Materialdesigns nicht den Akzentfarbstil? Besser buttonBarButtonStyle verwenden?
Übersetzung
1
@lostintranslation Da im AppCompat Base Theme das auf gesetzt borderlessButtonStyleist @style/Widget.AppCompat.Button.Borderless. Wenn Sie möchten, dass die Akzentfarbe gezogen wird, setzen Sie die borderlessButtonStylein Ihrem Thema auf @style/Widget.AppCompat.Button.Borderless.Colored.
Pumpkinpie65
84

Um die Flat Buttons zu implementieren, können Sie einfach hinzufügen style="?android:attr/borderlessButtonStyle".

Beispiel:

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="DONE"
    style="?android:attr/borderlessButtonStyle"
    />

Hier ist die Referenz für das Attribut.

Stephen Kaiser
quelle
3
Fantastisch und unterstützt zurück zu API Level 11.
Gabriel
@StephenKaiser Wie wäre es mit den erhöhten Knöpfen?
Farbod Salamat-Zadeh
4
style="@style/Widget.AppCompat.Button.Borderless"bei Verwendung der AppCompat-Bibliothek
Michael Kazarian
4

Sie können MaterialDesignLibrary verwenden . Es ist eine Drittanbieter-Bibliothek.

Dies ist eine Bibliothek mit Komponenten von Android L, die Sie in Android 2.2 verwenden können. Wenn Sie diese Bibliothek verwenden möchten, müssen Sie nur das MaterialDesign-Projekt herunterladen, es in Ihren Arbeitsbereich importieren und das Projekt als Bibliothek in Ihren Android-Projekteinstellungen hinzufügen.

Vijay Vankhede
quelle
2

Ich arbeite an einer Materialkompatibilitätsbibliothek. Die Tastenklasse ist da und unterstützt animierte Schatten und die Berührungswelligkeit. Vielleicht finden Sie es nützlich. Hier ist der Link .

Zielony
quelle
Mann, das ist großartig. Wie kann ich deine aar lib via gradle einbinden?
Kiruwka
Ich frage mich, wie stabil es für die Verwendung in der realen App ist. Hattest du Abstürze im Zusammenhang mit Schaltflächen: Schatten / Wellen? Danke
kiruwka
Ich teste es an einem echten Projekt und gebe mein Bestes, damit es funktioniert. Die Bibliothek befindet sich in einer starken Entwicklung. Ich versuche, alle gemeldeten Fehler innerhalb von 24 Stunden zu beheben. In den meisten Fällen stürzt die Bibliothek nicht ab, sondern erzeugt Animationsstörungen oder Verzögerungen. Derzeit sind zwei der größten Probleme: 1. Fehlender Rendering-Thread (eingeführt in Lollipop) und 2. Kompatibilität mit allen GPUs und Benutzeroberflächen (z. B. TouchWiz, das in der Galaxy-Serie verwendet wird). Wenn Sie weitere Fragen haben, nach einer Funktion fragen oder einen Fehler melden möchten, können Sie sich gerne an mich wenden. Ich habe gerade die Seite "Über" in meinem Blog aktualisiert, um es einfacher zu machen.
Zielony
2

Ich benutze dies als Hintergrund für eine Schaltfläche mit AppCompat und es zeigt eine erhöhte Schaltfläche (mit Wellen n allen), hoffe es hilft.

myRaisedButton.xml - im drawableOrdner:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
               android:shape="rectangle">
            <solid android:color="@color/yourColor"/>
            <corners android:radius="6dp"/>
        </shape>
    </item>
    <item android:drawable="?android:selectableItemBackground"/>
</layer-list>

styles.xml :

<resources>

    <style name="AppTheme" parent="AppTheme.Base"/>
    <style name="AppTheme.Base" parent="Theme.AppCompat">

</resources>

styles.xml (v21) :

...
<style name="AppTheme" parent="AppTheme.Base">

layout.xml :

...
android:background="@drawable/myRaisedButton"
thanosChatz
quelle
Wo benutzt du diese XML? In zeichnbarem Ordner?
Rickyalbert
Ja, nennen Sie es zum Beispiel myRaisedButton.xml und greifen Sie von Ihrem Layout mit android darauf zu: background = "@ drawable / myRaisedButton"
thanosChatz
Danke, es funktioniert! Ich musste die letzte Zeile löschen, weil ich eine Ausnahme habe. Wie kann ich das beheben? Entschuldigung, aber ich habe immer noch Probleme mit Styles in XML zu arbeiten
Rickyalbert
1
Warum haben Sie dafür gesorgt, dass die Dateien styles.xml auf denselben Stil verweisen ("AppTheme.Base")? Ich sehe die hinzugefügte Funktionalität hier nicht ...
Android-Entwickler
3
Dieser Code generiert eine Ausnahme und keine erhöhte Schaltfläche.
Steve M
1

Eine Beschreibung dazu mit dem AppCompat Libray finden Sie in meiner Antwort auf eine andere Frage: https://stackoverflow.com/a/27696134/1932522

Dies zeigt, wie Sie die erhöhten und flachen Tasten für Android 5.0 und früher (bis API-Level 11) verwenden können!

Peter
quelle
style = "? android: attr / borderlessButtonStyle" ist kein appCompat-Stil. Ihre Antwort ist nur für API> 11
Shine
0

Möglicherweise müssen Sie Ihrer Schaltfläche auch einen unteren Rand hinzufügen, um den Schatteneffekt der erhöhten Schaltfläche sehen zu können:

<item name="android:layout_marginBottom">@dimen/activity_vertical_margin</item>
<item name="android:elevation">1dp</item>
Ari Lacenski
quelle