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.

user1166635
la source
1
avoir une bonne explication ici stackoverflow.com/questions/9884202/custom-circle-button
Milon

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.

Arif Nadeem
la source
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.

Shaun Jones
la source
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"
    />
Mohit
la source
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
14

Bouton circulaire Android de Markushi:

(Cette bibliothèque est obsolète et aucun nouveau développement n'est en cours. Pensez à utiliser un FAB à la place.)

entrez la description de l'image ici

LOG_TAG
la source
4
avertissement: DEPRECATED!
dialex
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"
utilisateur4512768
la source
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>

Rohit Goyal
la source
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.

Giovanny Piñeros
la source
3

Bouton rond sous Android

Vous pouvez créer une ImageButtonimage d'arrière-plan circulaire.

chavaone
la source
3

utilisez ImageButton au lieu de Button ....

et faire une image ronde avec un fond transparent

MAC
la source
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.

Roberto Leinardi
la source
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

Naqash
la source
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'
kalebora
la source
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.

Naren
la source