Come fare un pulsante rotondo?


Risposte:


265

Crea un file XML chiamato roundedbutton.xmlnella cartella disegnabile

<?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>

Infine impostare tale da sfondo alla vostra Buttoncomeandroid:background = "@drawable/roundedbutton"

Se vuoi renderlo completamente arrotondato, modifica il raggio e accontentati di qualcosa che va bene per te.


Ti serve il suffisso .xml? Ne ho visto un esempio senza
Neil,

@Neil non hai bisogno di aggiungere il suffisso xml, l'ho fatto a scopo dimostrativo e chiara comprensione del concetto in modo che il lettore non prenda l'esempio sbagliato, l'auto-assistenza eclipse dovrebbe aiutarti a trovare se .xml è necessario o no, ho l'abitudine di usare ctrl + spazio sul mio computer Windows per il completamento automatico dei comandi XML.
Arif Nadeem,

2
Non hai bisogno di un simbolo "@" prima della parola disegnabile?
shim

Questa soluzione ha un risultato diverso rispetto al semplice utilizzo di un'immagine rotonda come sfondo?
Siavash,

6
Inoltre, perché non usare android: shape = "oval"
Siavash,

39

Se usi Android Studio puoi semplicemente usare:

<?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>

questo funziona bene per me, spero che questo aiuti qualcuno.


2
quella dovrebbe essere la risposta accettata, usando i valori degli angoli non va oltre gli angoli arrotondati e questa domanda riguarda un cerchio. Grazie Shaun per questa risposta
don

12
L'uso ringnon mostra nulla. Meglio usare oval.
CopsOnRoad,

31
  1. Crea un file drawable / button_states.xml contenente:

    <?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. Usalo nel tag pulsante in qualsiasi file di layout

    <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"
    />

funziona perfettamente, grazie. mi potete aiutare a disegnare un rettangolo dal centro verso l'esterno del cerchio sembra una 'Q'
CLIFFORD PY

Funziona bene, ma perché abbiamo messo il raggio a 1000dp? puoi spiegare per favore?
Jamshaid Kamran,

@JamshaidKamran 1000dp è una dimensione arbitraria abbastanza grande da far girare il pulsante.
rraallvv,

Esiste una risorsa dimensione Android che possiamo usare al posto di 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 -->

e aggiungilo al codice del pulsante

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

5

Usata la forma come ovale. Questo rende il pulsante 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>

Impostalo sulle tue risorse di disegno XML e sul pulsante di utilizzo e immagine semplice con un'immagine rotonda, usando il tuo disegno come sfondo.



3

usa ImageButton invece di Button ....

e crea un'immagine rotonda con sfondo trasparente


3

Se vuoi un pulsante circolare dall'aspetto FAB e stai utilizzando la libreria ufficiale dei componenti materiali, puoi farlo facilmente in questo modo:

<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" />

Risultato:

inserisci qui la descrizione dell'immagine

Se si modifica la dimensione del pulsante, fare solo attenzione a utilizzare metà della dimensione del pulsante come app:cornerRadius.


2

Per un pulsante rotondo crea una forma:

<?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" />

usalo come sfondo del link del tuo pulsante




0

Puoi utilizzare FloatingActionButton di 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" />

Giava:

  @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. Usa i pulsanti immagine e crea lo sfondo come l'immagine che desideri.
  2. Crea le immagini dal link di 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 "

e scaricalo, oltre a quello, all'interno di quella cartella mipmap-hdpi.

  1. copia l'immagine dalla cartella mipmap-hdpi e incollala nella cartella trascinabile del tuo progetto Android.

  2. Ora imposta lo sfondo come quell'immagine.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.