Android Material Design Buttons - Pre Lutscher

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

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

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.

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.

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 .

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"

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!

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

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>