web-dev-qa-db-fra.com

Comment créer un bouton personnalisé dans Android à l'aide de styles XML

Je veux faire ce genre de couleurs de bouton [même fond et texte] en utilisant des styles XML

enter image description here

c'est juste pour un exemple, je veux écrire d'autres textes, comme: À propos de moi

J'utilise toujours le bouton créé par le concepteur 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 type de bouton dans toutes les tailles et formes.

Je ne souhaite utiliser aucune image dans mon application Android. Je souhaite uniquement utiliser XML.

androidandroid-widget
49
Sneha

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

Vérifiez ceci ci-dessous:

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

enter image description here

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

Android:src="@drawable/Twitter"

Maintenant, créez simplement une forme de ImageButton pour avoir un fond noir.

Android:background="@drawable/button_shape"

et le button_shape est le fichier XML dans la ressource drawable:

    <?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 le mettre en œuvre avec cela. Vous devrez peut-être modifier la valeur de la couleur selon vos besoins.

Faites-moi savoir si cela ne fonctionne pas.

66
iDroid Explorer

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

1. Créer un fichier XML représentant les états des boutons

Créez un fichier xml en dessin appelé "button.xml" pour nommer les états du 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 fichier button.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 représentant le style du bouton

Une fois que vous avez créé les fichiers mentionnés ci-dessus, il est temps de créer 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), dans lequel vous pouvez inclure davantage 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. Notez que l'une de ces fonctionnalités, l'arrière-plan de votre nouveau style, doit être définie avec une référence au bouton (button.xml) que vous pouvez dessiner et qui a été créé à la première étape. Pour faire référence au nouveau style de bouton, nous utilisons l'attribut name.

L'exemple ci-dessous montre le contenu du fichier styles.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é themes.xml (si vous ne l'avez pas encore), dans le répertoire des valeurs et remplacer le style de bouton Android par défaut.

L'exemple ci-dessous montre le contenu du themes.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 cela, lorsque je cherchais des boutons personnalisés. Prendre plaisir.

82
Gramowski

Jetez un coup d'œil à Styled Button cela vous aidera sûrement . Il y a beaucoup d'exemples, veuillez chercher 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

point rouge:

<?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" />
18
Siddhesh
<?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.ajouter ceci dans votre drawable 

2.set comme fond à votre bouton 

5
Gru

<gradient Android:startColor="#ffdd00"
    Android:endColor="@color/colorPrimary"
    Android:centerColor="#ffff" />

<corners Android:radius="33dp"/>

<padding
    Android:bottom="7dp"
    Android:left="7dp"
    Android:right="7dp"
    Android:top="7dp"
    />

0
Rajneesh Shukla