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.
Verwenden Sie flache Schaltflächen für Symbolleisten und Dialoge, um übermäßige Ebenen zu vermeiden.
Quelle: http://www.google.com/design/spec/components/buttons.html
android
button
material-design
Rickyalbert
quelle
quelle
Antworten:
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.xml
Datei 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 vonandroid:
) Das obige Beispiel wird dann<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="DONE" style="?attr/borderlessButtonStyle" />
quelle
borderlessButtonStyle
ist@style/Widget.AppCompat.Button.Borderless
. Wenn Sie möchten, dass die Akzentfarbe gezogen wird, setzen Sie dieborderlessButtonStyle
in Ihrem Thema auf@style/Widget.AppCompat.Button.Borderless.Colored
.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.
quelle
style="@style/Widget.AppCompat.Button.Borderless"
bei Verwendung der AppCompat-BibliothekSie 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.
quelle
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 .
quelle
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
drawable
Ordner:<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"
quelle
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!
quelle
Sie haben nach Materialdesign-Schaltflächen Bibliothek gefragt - Sie haben sie erhalten - https://github.com/navasmdc/MaterialDesignLibrary
quelle
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>
quelle