Comment créer un bouton personnalisé dans Android en utilisant des Styles XML

Je veux faire ce genre de bouton [mêmes couleurs d'arrière - plan et de texte] en utilisant des Styles XML

entrez la description de l'image ici

C'est juste pour un exemple, je veux écrire d'autres textes, comme par exemple: à Propos de Moi

J'utilise toujours le bouton créé par designer dans Photoshop

    <ImageButton
        android:id="@+id/imageButton5"
        android:contentDescription="AboutUs"
        android:layout_width="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_height="wrap_content"
        android:layout_below="@+id/view_pager"
        android:layout_centerHorizontal="true"
        android:background="@drawable/aboutus" />

Remarque: j'ai besoin de ce genre de bouton dans chaque taille et de la forme

je ne veux pas utiliser n'importe quelle image dans mon Application Android, je veux le faire en utilisant XML uniquement

47
demandé sur Sneha 2013-08-29 13:38:59

4 réponses

Avez - vous déjà essayé de créer la forme d'arrière-plan pour des boutons?

Vérifiez ceci ci-dessous:

Ci-dessous est l'image séparée de votre image d'un bouton.

entrez la description de l'image ici

Maintenant, mettez cela dans votre ImageButton pour android: src "source" comme ceci:

android:src="@drawable/twitter"

Maintenant, il suffit de créer la forme de L'ImageButton pour avoir un fond de shader noir.

android:background="@drawable/button_shape"

Et le button_shape est le fichier xml dans drawable resource:

    <?xml version="1.0" encoding="UTF-8"?>
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke 
        android:width="1dp" 
        android:color="#505050"/>
    <corners 
        android:radius="7dp" />

    <padding 
        android:left="1dp"
        android:right="1dp"
        android:top="1dp"
        android:bottom="1dp"/>

    <solid android:color="#505050"/>

</shape>

Essayez simplement de l'implémenter avec ce. Vous devrez peut-être changer la valeur de couleur selon vos besoins.

Faites-moi savoir si cela ne fonctionne pas.

62
répondu iDroid Explorer 2015-07-15 06:00:52

Copié-collé d'une recette écrite par" Adrián Santalla " sur androidcookbook.com: https://www.androidcookbook.com/Recipe.seam?recipeId=3307

1. Créez un fichier XML qui représente les États du bouton

Créez un xml dans drawable appelé ' button.xml ' pour nommer les états de bouton:

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_enabled="false"
        android:drawable="@drawable/button_disabled" />
    <item
    	android:state_pressed="true"
    	android:state_enabled="true"
        android:drawable="@drawable/button_pressed" />
    <item
    	android:state_focused="true"
    	android:state_enabled="true"
        android:drawable="@drawable/button_focused" />
    <item
    	android:state_enabled="true"
        android:drawable="@drawable/button_enabled" />
</selector>

2. Créer un fichier XML qui représente chaque État de bouton

Créez un fichier xml pour chacun des quatre états de bouton. Tous devraient être sous le dossier drawables. Suivons les noms définis dans le bouton.fichier xml.

Button_enabled.xml:

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <gradient
        android:startColor="#00CCFF"
        android:centerColor="#0000CC"
        android:endColor="#00CCFF"
        android:angle="90"/>
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <stroke
        android:width="2dip"
        android:color="#FFFFFF" />
    <corners android:radius= "8dp" />
</shape>

Button_focused.xml:

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <gradient
        android:startColor="#F7D358"
        android:centerColor="#DF7401"
        android:endColor="#F7D358"
        android:angle="90"/>
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <stroke
        android:width="2dip"
        android:color="#FFFFFF" />
    <corners android:radius= "8dp" />
</shape>

Button_pressed.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <gradient
        android:startColor="#0000CC"
        android:centerColor="#00CCFF"
        android:endColor="#0000CC"
        android:angle="90"/>
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <stroke
        android:width="2dip"
        android:color="#FFFFFF" />
    <corners android:radius= "8dp" />
</shape>

Button_disabled.xml:

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <gradient
        android:startColor="#F2F2F2"
        android:centerColor="#A4A4A4"
        android:endColor="#F2F2F2"
        android:angle="90"/>
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <stroke
        android:width="2dip"
        android:color="#FFFFFF" />
    <corners android:radius= "8dp" />
</shape>

3. Créer un fichier XML qui représente le style de bouton

Une fois que vous avez créé les fichiers mentionnés ci-dessus, il est temps de créez votre style de bouton d'application. Maintenant, vous devez créer un nouveau fichier XML, appelé styles.xml (si vous ne l'avez pas encore) où vous pouvez inclure plus de styles personnalisés, dans le répertoire de values.

Ce fichier contiendra le nouveau style de bouton de votre application. Vous devez définir vos nouvelles fonctionnalités de style de bouton en elle. Notez que l'une de ces fonctions, l'arrière-plan de votre nouveau style, doit être définie avec une référence à l' (bouton.xml) drawable qui a été créé dans la première étape. De reportez - vous au nouveau style de bouton, nous utilisons l'attribut name.

L'exemple ci-dessous montre le contenu des styles.fichier xml:

<resources>
    <style name="button" parent="@android:style/Widget.Button">
        <item name="android:gravity">center_vertical|center_horizontal</item>
        <item name="android:textColor">#FFFFFFFF</item>
        <item name="android:shadowColor">#FF000000</item>
        <item name="android:shadowDx">0</item>
        <item name="android:shadowDy">-1</item>
        <item name="android:shadowRadius">0.2</item>
        <item name="android:textSize">16dip</item>
        <item name="android:textStyle">bold</item>
        <item name="android:background">@drawable/button</item>
        <item name="android:focusable">true</item>
        <item name="android:clickable">true</item>
    </style>
</resources>

4. Créez un XML avec votre propre thème d'application personnalisé

Enfin, vous devez remplacer le style de bouton Android par défaut. Pour cela, vous devez créer un nouveau fichier XML, appelé thèmes.xml (si vous ne l'avez pas encore), dans le répertoire values et remplacez le style de bouton Android par défaut.

Le l'exemple ci-dessous montre le contenu des thèmes.xml:

<resources>
    <style name="YourApplicationTheme" parent="android:style/Theme.NoTitleBar">
        <item name="android:buttonStyle">@style/button</item>
    </style>
</resources>

J'espère que vous pourrez avoir la même chance que moi avec ça, quand je cherchais des boutons personnalisés. Profiter.

74
répondu Gramowski 2016-05-05 18:10:13

Jetez un oeil à bouton de style il va sûrement vous aider. Il y a beaucoup d'exemples veuillez rechercher sur INTERNET.

Par exemple: style

<style name="Widget.Button" parent="android:Widget">
    <item name="android:background">@drawable/red_dot</item>
</style>

Vous pouvez utiliser votre sélecteur au lieu de red_dot

Red_dot:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"  >

    <solid android:color="#f00"/>
    <size android:width="55dip"
        android:height="55dip"/>
</shape>

Bouton:

<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="49dp"
        style="@style/Widget.Button"
        android:text="Button" />
17
répondu Siddhesh 2013-08-29 09:58:48
<?xml version="1.0" encoding="utf-8"?>
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

   <solid 
       android:color="#ffffffff"/>

   <size 
       android:width="@dimen/shape_circle_width"
        android:height="@dimen/shape_circle_height"/>
</shape>

1.ajoutez ceci dans votre drawable

2.Définir comme arrière-plan sur votre bouton

5
répondu Gru 2013-08-29 09:42:44