You Are Here: Home » Tutoriaux » Android flat bouton

Android flat bouton

Android flat button

c’est un petit tutorial qui montre comment creer des flat button( image ci-dessous) avec android sans utiliser une image juste avec des couleurs et une petite astuce au final on aura un bouton de ce genre :

un bouton flat

l’idée derriere est de prendre deux couleurs de la meme famille(vert jaune ou autre) mais l’un plus claire que l’autre ceci pour faire un petit effet d’elevation sur le bouton en question.
y’a un site pour prendre des couleurs si vous avez pas photoshop [link http://bootflat.github.io/color-picker.html]

aprés avoir selectionné les couleurs on les ajoutes dans le fichier colors.xml(pas obligatoire mais pour une meilleure structuration de votre code c’est vivement recommandé )et ce fichier doit etre sous le dossier values.si ce fichier existe pas il faut le creer .
au final son contenu sera comme ceci:

 

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="green_light">#26C281</color>
    <color name="green_dark">#26A65B</color>
</resources>

 

aprés on fixe la taille de la bordure du bouton et le padding du bouton ceci en ajoutant les valeurs dans le fichier dimen.xml et on aura ceci dans le fichier:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="corner_radius">4dp</dimen>
    <dimen name="layer_padding">3dp</dimen>1. 
</resources>

aprés cette configuration on va crée 2 drawables (le coeur du design android) un dans le cas ou y’a pas un click sur le boutton et un autre dans le cas ou y’a un clic ceci pour avoir un effet de boutton enfoncé .la petite idée est que quand y’a pas click sur le boutton la couleur du boutton prend la couleur claire et quand y’a click prend la couleur un peu foncée pour vraiment avoir un effet de click
commencons par creer un drawable button_normal( pour le cas ou y’a pas de click) il doit ressembler a ceci:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/button_pressed"/>
    <item android:bottom="@dimen/layer_padding">
        <shape android:shape="rectangle">
            <corners android:radius="@dimen/corner_radius"/>
            <solid android:color="@color/green_light"/>
        </shape>
    </item>
</layer-list>

le code est vraiment simpliste un drawable qui utilise un layer-list(Le layer-list comprend un à N items qui vont se superposer de la couche la plus basse (premier élément déclaré) à la couche la plus haute (dernier élément déclaré).)

aprés ca on creer le deuxieme drawable dans le cas ou y’a click sur le bouton nommons le button_pressed.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <corners android:radius="@dimen/corner_radius"/>
    <solid android:color="@color/green_dark"/>
</shape>

la dans ce drawable on fait pas grand chose apart changé la couleur dans (on utilise celle qui est un peu plus foncé  )

enfin on creer notre selector qui va selectionner l’un des deux drawables dependant si y’a click ou pas le code est assez simpliste

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="@drawable/button_pressed"/>
    <item android:drawable="@drawable/button_normal"/>
</selector>

maintenant on a l’effet de flat bouton qu’il suffira d’appler comme background de notre bouton par exemple:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}">

    <Button android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:background="@drawable/button_selector"
            android:text="Flat Button"
            android:layout_marginTop="124dp" android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"/>

</RelativeLayout>

le code entier est disponible sur le github de la communauté vous pouvez le telecharger et si vous avez des questions hesitez surtout pas .a la prochaine pour un nouveau tutoriel.

About The Author

Android Programmer

Number of Entries : 6

Leave a Comment

© 2013 Mauriandroid

Scroll to top