¿Cómo redondear las esquinas de un botón?

457

Quiero hacer las esquinas de una buttonronda. ¿Hay una manera fácil de lograr esto en Android?

android  android-button  rounded-corners 
— artista
fuente
2
— Lavanya
material.io/develop/android/components/material-button solo establece el radio de la esquina
— Swagger 68
11
Esta no es una pregunta amplia, es absolutamente al punto. marcarlo como "demasiado amplio" es solo una mentalidad SO que necesita ser cambiada. Deja de ser dictadores.
— user734028
2
de acuerdo con el usuario734028: ¿qué diablos cómo se cerró por ser demasiado amplio? la única forma en que esto podría haber sido más específico si el OP hubiera preguntado cómo establecer el radio de la esquina en N píxeles. ¡Venga!
— nyholku

Respuestas:

679

Si quieres algo como esto

Vista previa del botón

Aquí está el código.

1.Cree un archivo xml en su carpeta dibujable como mybutton.xml y pegue el siguiente marcado:

<?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.Ahora use este dibujo para el fondo de su vista. Si la vista es botón, entonces algo como esto:

<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" />
— Md. Monsur Hossain Tonmoy
fuente
se estrelló: Causado por: org.xmlpull.v1.XmlPullParserException: línea de archivo XML binario # 24: la etiqueta <item> requiere un atributo 'dibujable' o una etiqueta secundaria que define un
— dibujable
3
¿Podemos hacer esto mediante programación?
— Asesino
Dice que el selector de elementos debe declararse EDITAR: lo siento, el archivo estaba dentro de la carpeta de valores en lugar del dibujable. Cuando lo transferí, funcionó.
— F0r3v3r-A-N00b
¿Qué crea la sombra al hacer clic? Estoy tratando de reducir el ancho de la sombra en la parte inferior ... sin suerte
— Neville Nazerane
No veo qué mostrar cómo se codifican los selectores tiene que ver con explicar cómo se deben codificar las esquinas de los botones.
— TavernSenses
345

Cree un archivo xml en una carpeta dibujable como a continuación

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

Aplique esto como fondo al botón que desee para redondear las esquinas.

O puede usar un radio separado para cada esquina como abajo

android:bottomRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp"
— Sandip Jadhav
fuente
57
Puede acortar las esquinas a android: radius = "10dp", que se aplicará a todos
— Ben Simpson,
22
Esta no es una solución completa, ya que no admite los diversos estados de los botones (presionado, enfocado, predeterminado). Para una mejor solución, consulte stackoverflow.com/questions/9334618/
— ronda
3
@BenSimpson, verá que hay una diferencia en la forma cuando coloca solo esa línea en lugar de definir cada uno de los radios de las esquinas individualmente.
— Garima Tiwari
Esto funciona más perfectamente que la respuesta resaltada. muchas gracias
— Dan Linh
37

Cree un archivo XML como el siguiente. Establecer como fondo para el botón. Cambie el atributo de radio a su deseo, si necesita más curva para el botón.

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>

Establezca el fondo de su botón:

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/button_background"/>
— Pavithra Purushothaman
fuente
30

crear shape.xml en una carpeta dibujable

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

y en myactivity.xml

puedes usar

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

Crear archivo 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>

agregar a su botón

 <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/myButton"/>
— Cielo
fuente
16

¿Hay una manera fácil de lograr esto en Android?

Sí, hoy la hay, y es muy simple.
Simplemente use el MaterialButtonen la biblioteca de Componentes de material con el app:cornerRadiusatributo.

Algo como:

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

ingrese la descripción de la imagen aquí

Es suficiente obtener un botón con esquinas redondeadas.

Puede usar uno de los estilos de botón Material . Por ejemplo:

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

ingrese la descripción de la imagen aquí

También a partir de la versión 1.1.0 también puede cambiar la forma de su botón. Simplemente use el shapeAppearanceOverlayatributo en el estilo del botón:

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

Entonces solo usa:

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

También puede aplicar el shapeAppearanceOverlayen el diseño xml:

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

El shapeAppearancepermite también tener diferentes formas y dimensiones para cada esquina:

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

ingrese la descripción de la imagen aquí

— Gabriele Mariotti
fuente
También requiere usar el tema Material
— Vlad
@Vlad Sí, los componentes materiales requieren un tema material.
— Gabriele Mariotti
11

La forma simple que descubrí fue hacer un nuevo archivo xml en la carpeta dibujable y luego apuntar el fondo de los botones a ese archivo xml. Aquí está el código que utilicé:

<?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>
— AntonioSanchez
fuente
3
Para restaurar el efecto dominó del tema Material en el fondo dibujable personalizado, agregue android:foreground="?attr/selectableItemBackground"en la Vista de botones. Ver stackoverflow.com/questions/38327188/…
— Mr-IDE
11

Crear archivo rounded_btn.xml en la carpeta 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>

y use este archivo .xml como fondo de botón 

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

Este enlace tiene toda la información que necesita. aquí

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>

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

Esto debería darte el resultado deseado.

La mejor de las suertes

— Deep Singh Baweja
fuente
6

botón de estilo con icono ingrese la descripción de la imagen aquí

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

— AGTHAMAYS
fuente
4

si está utilizando vectores dibujables, simplemente necesita especificar un elemento <corners> en su definición dibujable. He cubierto esto en una publicación de blog .

Si está utilizando dibujos dibujables de mapa de bits / 9 parches, deberá crear las esquinas con transparencia en la imagen de mapa de bits.

— Mark Allison
fuente
0

carpeta dibujable 

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

carpeta de diseño 

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

asegúrese de agregar estilo para evitar el fondo cuadrado

— Hamdy Abd El Fattah
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.