Comment faire un bouton rond?


141

J'essaye de faire un bouton rond, mais je ne sais pas comment faire. Je peux faire des boutons avec des coins arrondis, mais comment puis-je arrondir le cercle. Ce n'est pas la même chose. S'il vous plaît, dites-moi, est-ce possible sur Android? Je vous remercie.


Réponses:


265

Créer un fichier xml nommé roundedbutton.xmldans un dossier dessinable

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle">
    <solid android:color="#eeffffff" />
    <corners android:bottomRightRadius="8dp"
        android:bottomLeftRadius="8dp"  
        android:topRightRadius="8dp"
        android:topLeftRadius="8dp"/>
</shape>

Enfin définir cette toile de fond à votre Buttoncommeandroid:background = "@drawable/roundedbutton"

Si vous voulez le rendre complètement arrondi, modifiez le rayon et optez pour quelque chose qui vous convient.


Avez-vous besoin du suffixe .xml? J'ai vu un exemple sans
Neil

@Neil vous n'avez pas besoin d'ajouter le suffixe xml, je l'ai fait dans un but de démonstration et de compréhension claire du concept afin que le lecteur ne prenne pas l'exemple de manière erronée, l'assistance automatique eclipse devrait vous aider à trouver si .xml est nécessaire ou pas, j'ai l'habitude d'utiliser ctrl + espace sur ma machine Windows pour compléter automatiquement les commandes xml.
Arif Nadeem

2
Vous n'avez pas besoin d'un symbole «@» avant le mot drawable?
cale du

Cette solution a-t-elle un résultat différent de celui d'utiliser simplement une image ronde comme arrière-plan?
Siavash

6
Aussi, pourquoi ne pas utiliser android: shape = "oval"
Siavash

39

Si vous utilisez Android Studio, vous pouvez simplement utiliser:

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring">
        <solid android:color="#FFFFFF"/>

    </shape>

cela fonctionne bien pour moi, j'espère que cela aide quelqu'un.


2
cela devrait être la réponse acceptée, l'utilisation de valeurs de coins ne va pas au-delà des coins arrondis, et cette question concerne un cercle. Merci Shaun pour cette réponse
Don

12
L'utilisation ringne montre rien. Mieux vaut utiliser oval.
CopsOnRoad

31
  1. Créez un fichier drawable / button_states.xml contenant:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_pressed="false"> 
            <shape android:shape="rectangle">
            <corners android:radius="1000dp" />
            <solid android:color="#41ba7a" />
            <stroke
                android:width="2dip"
                android:color="#03ae3c" />
            <padding
                android:bottom="4dp"
                android:left="4dp"
                android:right="4dp"
                android:top="4dp" />
            </shape>
        </item>
        <item android:state_pressed="true"> 
            <shape android:shape="rectangle">
            <corners android:radius="1000dp" />
            <solid android:color="#3AA76D" />
            <stroke
                android:width="2dip"
                android:color="#03ae3c" />
            <padding
                android:bottom="4dp"
                android:left="4dp"
                android:right="4dp"
                android:top="4dp" />
            </shape>
        </item>
    </selector>
  2. Utilisez-le dans une balise de bouton dans n'importe quel fichier de mise en page

    <Button
        android:layout_width="220dp"
        android:layout_height="220dp"
        android:background="@drawable/button_states"
        android:text="@string/btn_scan_qr"
        android:id="@+id/btn_scan_qr"
        android:textSize="15dp"
    />

son fonctionnement parfaitement, merci. pouvez-vous m'aider à dessiner un rectangle du centre vers l'extérieur du cercle ressemble à un 'Q'
CLIFFORD PY

Marche bien, mais pourquoi avons-nous mis le rayon à 1000dp? pouvez-vous s'il vous plaît expliquer?
Jamshaid Kamran

@JamshaidKamran 1000dp est une taille arbitraire suffisamment grande pour faire tourner le bouton.
rraallvv

Existe-t-il une ressource de dimension Android que nous pouvons utiliser au lieu de 1000dp?
rraallvv


6

<corners android:bottomRightRadius="180dip"
    android:bottomLeftRadius="180dip"
    android:topRightRadius="180dip"
    android:topLeftRadius="180dip"/>

<solid android:color="#6E6E6E"/> <!-- this one is ths color of the Rounded Button -->

et ajoutez ceci au code du bouton

    android:layout_width="50dp"
    android:layout_height="50dp"

5

Utilisé la forme comme ovale. Cela rend le bouton ovale

<item>
    <shape android:shape="oval" >
        <stroke
            android:height="1.0dip"
            android:width="1.0dip"
            android:color="#ffee82ee" />

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

        <corners
            android:bottomLeftRadius="12.0dip"
            android:bottomRightRadius="12.0dip"
            android:radius="12.0dip"
            android:topLeftRadius="12.0dip"
            android:topRightRadius="12.0dip" />
    </shape>
</item>


5
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
    android:color="#ffffff"
    />
</shape>

Définissez cela sur vos ressources dessinables XML, et une utilisation simple et un bouton d'image avec une image ronde, en utilisant votre dessinable comme arrière-plan.



3

utilisez ImageButton au lieu de Button ....

et faire une image ronde avec un fond transparent


3

Si vous voulez un bouton circulaire FAB et que vous utilisez la bibliothèque officielle de composants matériels, vous pouvez facilement le faire comme ceci:

<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
    app:cornerRadius="28dp"
    android:layout_width="56dp"
    android:layout_height="56dp"
    android:text="1" />

Résultat:

entrez la description de l'image ici

Si vous modifiez la taille du bouton, veillez simplement à utiliser la moitié de la taille du bouton comme app:cornerRadius.


2

Pour un bouton rond, créez une forme:

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

<stroke
    android:width="8dp"
    android:color="#FFFFFF" />

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


<corners
    android:bottomLeftRadius="45dp"
    android:bottomRightRadius="45dp"
    android:topLeftRadius="45dp"
    android:topRightRadius="45dp" />

utilisez-le comme arrière-plan de votre lien de bouton




0

Vous pouvez utiliser le FloatingActionButton de Google

XMl:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/ic_dialog_email" />

Java:

  @Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    FloatingActionButton bold = (FloatingActionButton) findViewById(R.id.fab);
    bold.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
        // Do Stuff
        }
    });
}

Gradle:

    compile 'com.android.support:design:23.4.0'

0
  1. Utilisez les boutons d'image et créez l'arrière-plan comme l'image que vous souhaitez.
  2. Créez les images à partir du lien Android Asset Studio -

" https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html#foreground.type=image&foreground.space.trim=0&foreground.space.pad=0.25&foreColor=rgba(94%2C%20126%2C%20142% 2C% 200) & backColor = rgb (96% 2C% 20125% 2C% 20139) & crop = 1 & backgroundShape = circle & effects = none & name = ic_home "

et téléchargez-le, extraxt, à l'intérieur de ce dossier mipmap-hdpi.

  1. copiez l'image du dossier mipmap-hdpi et collez-la dans le dossier drwable de votre projet Android.

  2. Maintenant, définissez l'arrière-plan comme cette image.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.