web-dev-qa-db-fra.com

Android boutons de conception des matériaux - Pré sucette

Comment puis-je implémenter le "bouton surélevé" et le "bouton plat" comme décrit dans les directives de Google relatives à la conception des matériaux?

Les boutons en relief ajoutent de la dimension à des dispositions généralement plates. Ils soulignent les fonctions sur les espaces occupés ou larges.

raised buttons

Utilisez des boutons plats pour les barres d’outils et les boîtes de dialogue afin d’éviter une superposition excessive.

flat buttons

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

androidbuttonmaterial-design
75
rickyalbert

Ceci nécessite Android 5.0

Bouton en relief

Héritez votre style de bouton de Widget.Material.Button, et l'action d'élévation et d'élévation standard sera automatiquement appliquée.

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

Ensuite, vous devez créer un fichier raised_button_background.xml avec la couleur d'arrière-plan de votre bouton dans une balise d'ondulation:

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

Bouton plat

Edit: Au lieu de mon conseil précédent pour les boutons plats, vous devriez plutôt suivre les conseils donnés par Stephen Kaiser ci-dessous:

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

Édition: Si vous utilisez Support Library, vous pouvez obtenir le même résultat sur les appareils Pre-Lollipop en utilisant style="?attr/borderlessButtonStyle". (notez l'absence de Android:). L'exemple ci-dessus devient alors

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

Pour implémenter les boutons plats, vous pouvez simplement ajouter style="?android:attr/borderlessButtonStyle".

Exemple:

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

Voici la référence pour l'attribut.

84
Stephen Kaiser

Vous pouvez utiliser MaterialDesignLibrary . C'est une bibliothèque tierce.

Ceci est une bibliothèque avec des composants de Android L à utiliser dans Android 2.2 Si vous souhaitez utiliser cette bibliothèque, il vous suffit de télécharger le projet MaterialDesign, de l'importer dans votre espace de travail et d'ajouter le projet en tant que bibliothèque dans les paramètres de votre projet Android.

4
Vijay Vankhede

J'utilise cela comme arrière-plan pour un bouton avec AppCompat et il représente un bouton en relief (avec des ondulations n toutes), j'espère que cela aidera.

myRaisedButton.xml - dans le dossier 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

Je travaille sur une bibliothèque de compatibilité matérielle. La classe de boutons est là et supporte les ombres animées et l’ondulation tactile. Peut-être que vous le trouverez utile. Voici le lien .

2
Zielony

Vous avez demandé des boutons de conception de matériel Bibliothèque - vous l'avez - - https://github.com/navasmdc/MaterialDesignLibrary

1
Inoy

Pour savoir comment utiliser la bibliothèque appcompat, consultez ma réponse à une autre question: https://stackoverflow.com/a/27696134/1932522

Cela montrera comment utiliser les boutons surélevés et plats pour Android 5.0 et versions antérieures (jusqu'au niveau 11 de l'API)!

1
Peter

Vous devrez peut-être également ajouter une marge inférieure à votre bouton pour pouvoir voir l'effet d'ombre du bouton en relief:

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