Come arrotondare gli angoli di un pulsante?


457

Voglio fare gli angoli di un buttongiro. C'è un modo semplice per raggiungere questo obiettivo in Android?




11
questa non è una domanda ampia, è assolutamente al punto. contrassegnarlo come "troppo ampio" è solo una mentalità SO che deve essere cambiata. Smetti di essere dittatori.
user734028

2
d'accordo con l'utente734028: che diamine come mai chiuso per essere troppo ampio ?? l'unico modo in cui ciò avrebbe potuto essere più specifico se l'OP avesse chiesto come impostare il raggio dell'angolo su N pixel. Dai!
nyholku,

Risposte:


679

Se vuoi qualcosa del genere

Anteprima del pulsante

ecco il codice.

1.Crea un file xml nella tua cartella disegnabile come mybutton.xml e incolla il seguente markup:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_pressed="true" >
        <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="#5e7974" />
            <gradient android:angle="-90" android:startColor="#345953" android:endColor="#689a92"  />            
        </shape>
    </item>
    <item android:state_focused="true">
        <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="#5e7974" />
            <solid android:color="#58857e"/>       
        </shape>
    </item>  
    <item >
       <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="#5e7974" />
            <gradient android:angle="-90" android:startColor="#8dbab3" android:endColor="#58857e" />            
       </shape>
    </item>
</selector>

2.Ora usa questo disegno per lo sfondo della tua vista. Se la vista è un pulsante, allora qualcosa del genere:

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:textColor="#ffffff"
    android:background="@drawable/mybutton"
    android:text="Buttons" />

si è arrestato in modo anomalo: causato da: org.xmlpull.v1.XmlPullParserException: riga del file XML binario # 24: il tag <item> richiede un attributo 'drawable' o tag figlio che definisce un drawable
Zennichimaro

3
possiamo farlo a livello di codice.
Killer,

Dice che il selettore di elementi deve essere dichiarato EDIT: mi dispiace che il file si trovasse nella cartella dei valori anziché nel disegno. Quando l'ho trasferito, ha funzionato.
F0r3v3r-A-N00b,

cosa crea l'ombra al clic? sto cercando di ridurre la larghezza dell'ombra in basso ... nessuna fortuna
Neville Nazerane,

Non vedo cosa abbia a che fare con il modo in cui i selettori sono codificati, spiegando come dovrebbero essere codificati gli angoli dei pulsanti.
TavernSenses

345

Crea un file XML in una cartella disegnabile come di seguito

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" android:padding="10dp">
    <!-- you can use any color you want I used here gray color-->
    <solid android:color="#ABABAB"/> 
    <corners android:radius="10dp"/>
</shape>

Applicalo come sfondo al pulsante che vuoi fare arrotondare gli angoli.

Oppure puoi usare un raggio separato per ogni angolo come sotto

android:bottomRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp"

57
Puoi semplicemente accorciare gli angoli di Android: radius = "10dp", che si applicherà a tutti
Ben Simpson,

22
Questa non è una soluzione completa in quanto non supporta i vari stati dei pulsanti (premuto, focalizzato, impostazione predefinita). Per una soluzione migliore vedere stackoverflow.com/questions/9334618/rounded-button-android
JosephL

3
@BenSimpson, vedrai che c'è una differenza nella forma quando metti solo quella linea invece di definire ciascuno dei raggi degli angoli singolarmente.
Garima Tiwari,

funziona più perfettamente della risposta evidenziata. grazie mille!
Dan Linh,

37

Crea un file XML come sotto uno. Impostalo come sfondo per il pulsante. Cambia l'attributo radius secondo i tuoi desideri, se hai bisogno di più curve per il pulsante.

button_background.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/primary" />
    <corners android:radius="5dp" />
</shape>

Imposta lo sfondo del tuo pulsante:

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/button_background"/>

30

crea shape.xml nella cartella disegnabile

come shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
  <stroke android:width="2dp"
    android:color="#FFFFFF"/>
  <gradient 
    android:angle="225"
    android:startColor="#DD2ECCFA"
    android:endColor="#DD000000"/>
<corners
    android:bottomLeftRadius="7dp"
    android:bottomRightRadius="7dp"
    android:topLeftRadius="7dp"
   android:topRightRadius="7dp" />
</shape>

e in myactivity.xml

Puoi usare

<Button
    android:id="@+id/btn_Shap"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:text="@string/Shape"
    android:background="@drawable/shape"/>

16

Crea il file myButton.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorButton"/>
    <corners android:radius="10dp"/>
</shape>

aggiungi al tuo pulsante

 <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/myButton"/>

16

C'è un modo semplice per raggiungere questo obiettivo in Android?

Sì, oggi c'è ed è molto semplice.
Basta usare il MaterialButtonnella libreria Componenti materiali con l' app:cornerRadiusattributo.

Qualcosa di simile a:

    <com.google.android.material.button.MaterialButton
        android:text="BUTTON"
        app:cornerRadius="8dp"
        ../>

inserisci qui la descrizione dell'immagine

È sufficiente ottenere un pulsante con angoli arrotondati.

È possibile utilizzare uno degli stili dei pulsanti Materiale . Per esempio:

<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.Button.OutlinedButton"
    .../>

inserisci qui la descrizione dell'immagine

Inoltre a partire dalla versione 1.1.0 puoi anche cambiare la forma del tuo pulsante. Usa l' shapeAppearanceOverlayattributo nello stile del pulsante:

  <style name="MyButtonStyle" parent="Widget.MaterialComponents.Button">
    <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.MyApp.Button.Rounded</item>
  </style>

  <style name="ShapeAppearanceOverlay.MyApp.Button.Rounded" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">16dp</item>
  </style>

Quindi usa solo:

<com.google.android.material.button.MaterialButton
   style="@style/MyButtonStyle"
   .../>

Puoi anche applicare il shapeAppearanceOverlaynel layout xml:

<com.google.android.material.button.MaterialButton
   app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Rounded"
   .../>

Ciò shapeAppearanceconsente anche di avere forme e dimensioni diverse per ogni angolo:

<style name="ShapeAppearanceOverlay.MyApp.Button.Rounded" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerFamilyTopRight">cut</item>
    <item name="cornerFamilyBottomRight">cut</item>
    <item name="cornerSizeTopLeft">32dp</item>
    <item name="cornerSizeBottomLeft">32dp</item>
</style>

inserisci qui la descrizione dell'immagine


Richiede anche l'uso del tema Materiale
Vlad,

@Vlad Sì, i componenti del materiale richiedono un tema materiale.
Gabriele Mariotti,

11

Il modo semplice che ho scoperto è stato quello di creare un nuovo file XML nella cartella disegnabile e quindi puntare lo sfondo dei pulsanti su quel file XML. ecco il codice che ho usato:

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

<solid android:color="#ff8100"/>
<corners android:radius="5dp"/>

</shape>

3
Per ripristinare l'effetto di ondulazione del tema del materiale nello sfondo personalizzabile personalizzato, aggiungere android:foreground="?attr/selectableItemBackground"nella vista pulsanti. Vedi stackoverflow.com/questions/38327188/…
Mr-IDE,

11

Crea il file arrotondato_btn.xml nella cartella Drawable ...

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

     <stroke android:width="1dp"
        android:color="@color/#000000"
        />

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

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

e utilizzare questo file.xml come sfondo del pulsante

<Button
android:id="@+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/rounded_btn"
android:text="Test" />

7

Questo link contiene tutte le informazioni di cui hai bisogno. Qui

Shape.xml

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

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

    <corners    android:bottomLeftRadius="8dip"
                android:topRightRadius="8dip"
                android:topLeftRadius="1dip"
                android:bottomRightRadius="1dip"
                />
</shape>

e main.xml

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent">

    <TextView   android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Hello Android from NetBeans"/>

    <Button android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Nishant Nair"
            android:padding="5dip"
            android:layout_gravity="center"
            android:background="@drawable/button_shape"
            />
</LinearLayout>

Questo dovrebbe darti il ​​risultato desiderato.

Buona fortuna


6

pulsante stile con icona inserisci qui la descrizione dell'immagine

   <Button
        android:id="@+id/buttonVisaProgress"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="5dp"
        android:background="@drawable/shape"
        android:onClick="visaProgress"
        android:drawableTop="@drawable/ic_1468863158_double_loop"
        android:padding="10dp"
        android:text="Visa Progress"
        android:textColor="@android:color/white" />

shape.xml

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="14dp" />
<gradient
    android:angle="45"
    android:centerColor="#1FA8D1"
    android:centerX="35%"
    android:endColor="#060d96"
    android:startColor="#0e7e1d"
    android:type="linear" />
<padding
    android:bottom="0dp"
    android:left="0dp"
    android:right="0dp"
    android:top="0dp" />
<size
    android:width="270dp"
    android:height="60dp" />
<stroke
    android:width="3dp"
    android:color="#000000" />


4

se si utilizzano disegni vettoriali, è sufficiente specificare un elemento <corners> nella definizione del disegno. Ho trattato questo in un post sul blog .

Se stai usando disegnabili bitmap / 9 patch allora dovrai creare gli angoli con trasparenza nell'immagine bitmap.


0

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="#FFFFFF"/>
    <corners android:radius="30dp"/>
    <stroke android:width="2dp" android:color="#999999"/>
</shape>

cartella layout

<Button
    android:id="@+id/button2"
    <!-- add style to avoid square background -->
    style="@style/Widget.AppCompat.Button.Borderless"
    android:background="@drawable/corner_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    />

assicurati di aggiungere stile per evitare lo sfondo quadrato

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.