webentwicklung-frage-antwort-db.com.de

Android Material Design Buttons - Pre Lutscher

Wie implementiere ich den "erhöhten Knopf" und den "flachen Knopf", wie in den Richtlinien für die Materialgestaltung von Google beschrieben?

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

raised buttons

Verwenden Sie flache Schaltflächen für Symbolleisten und Dialogfelder, um eine übermäßige Schichtung zu vermeiden.

flat buttons

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

androidbuttonmaterial-design
75
rickyalbert

Dies erfordert Android 5.0

Erhöhter Knopf

Erben Sie Ihren Schaltflächenstil von Widget.Material.Button, und die Standardaktion zum Erhöhen 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>

Dann 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 Schaltflächen sollten Sie stattdessen die folgenden Ratschläge von Stephen Kaiser befolgen:

<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 style="?attr/borderlessButtonStyle" Dasselbe Ergebnis auf Pre-Lollipop-Geräten erzielen. (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"
/>
121
Gabriel

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

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.

84
Stephen Kaiser

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 möchten. Wenn Sie diese Bibliothek verwenden möchten, müssen Sie nur das MaterialDesign-Projekt herunterladen und importieren in deinen Arbeitsbereich und füge das Projekt als Bibliothek in deinen Android Projekteinstellungen hinzu.

4
Vijay Vankhede

Ich benutze dies als Hintergrund für einen Button mit AppCompat und es zeigt einen erhabenen Button (mit Ripples n all), hoffe es hilft.

myRaisedButton.xml - im Ordner drawable:

<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"
2
thanosChatz

Ich arbeite an einer Materialkompatibilitätsbibliothek. Die Button-Klasse ist da und unterstützt animierte Schatten und das Touch-Ripple. Vielleicht finden Sie es nützlich. Hier ist der Link .

2
Zielony

Sie haben nach Materialdesign-Schaltflächen gefragt Bibliothek - Sie haben es - - https://github.com/navasmdc/MaterialDesignLibrary

1
Inoy

Eine Beschreibung dazu finden Sie in der Antwort auf eine andere Frage: https://stackoverflow.com/a/27696134/1932522

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

1
Peter

Möglicherweise müssen Sie auch einen unteren Rand zu Ihrer Schaltfläche 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>
0
Ari Lacenski