Android: dibujable con esquinas redondeadas solo en la parte superior


151

Tenía esto dibujable para tener un rectángulo redondeado como fondo:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white" />
    <stroke android:width="1dp" android:color="@color/light_gray" />
    <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />
    <corners android:radius="6dp" />
</shape>

Esto está funcionando bien, como se esperaba.

Ahora, quiero cambiar esto solo para redondear las esquinas superiores, así que lo cambio a esto:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white" />
    <stroke android:width="1dp" android:color="@color/light_gray" />
    <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />
    <corners android:topLeftRadius="6dp" android:topRightRadius="6dp"
             android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp"/>
</shape>

Pero ahora ninguna de las esquinas son redondeadas y obtengo un rectángulo liso. ¿Que me estoy perdiendo aqui?


Esto realmente no es una solución, pero creo que una vez tuve un problema similar. Aumentar el Stoke a 2 píxeles ayudó, pero ya sabes, eso no es una solución.
Code Poet

Aquí hay un problema con las esquinas de las formas: code.google.com/p/android/issues/detail?id=939
Knickedi

Respuestas:


304

Intenta dar estos valores:

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

Tenga en cuenta que he cambiado 0dpa 0.1dp.

EDITAR: Vea el comentario de Aleks G a continuación para obtener una versión más limpia


131
Al explorar esto aún más, encontré una solución aún mejor: <corners android:radius="1dp" android:topLeftRadius="6dp" android:topRightRadius="6dp" android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp"/>esto produce esquinas de fondo perfectamente cuadradas sin siquiera un toque de redondeo. Sin embargo, su solución funciona más o menos.
Aleks G

¿Cómo hacerlo en código, dado un mapa de bits? ¿Y cómo agregar contorno (trazo AKA) a su alrededor?
Desarrollador de Android

@Aleks G no veo que sea necesario especificarandroid:radius="1dp"
hmac

@hmac es necesario. Lea la documentación, lo deja claro.
Aleks G

@AleksG Sí, la documentación es incorrecta, probando en Samsung 10, Android 9: "Cada esquina debe (inicialmente) tener un radio de esquina mayor que 1, o de lo contrario no se redondearán las esquinas. Si desea que las esquinas específicas no se redondeen, un la solución alternativa es usar android: radius para establecer un radio de esquina predeterminado mayor que 1, pero luego anular "- no es cierto, especifico abajo a la derecha, arriba a la derecha, arriba a la izquierda como cero e abajo a la izquierda + ve y abajo a la izquierda está correctamente curvado
hmac

14

Intenta hacer algo como esto:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:bottom="-20dp" android:left="-20dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />

            <corners android:radius="20dp" />
        </shape>
    </item>
</layer-list>

Parece que no es adecuado establecer diferentes radios de esquina del rectángulo. Entonces puedes usar este truco.


Vea mi propia respuesta: es perfectamente aceptable tener diferentes radios para diferentes esquinas.
Aleks G

Intenté este enfoque, no es aceptable, ide dice que no es apropiado tener un rsdius diferente y lo ignora
busylee

11

En mi caso debajo del código

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="10dp" android:bottom="-10dp"
        >

        <shape android:shape="rectangle">
            <solid android:color="@color/maincolor" />

            <corners
                android:topLeftRadius="10dp"
                android:topRightRadius="10dp"
                android:bottomLeftRadius="0dp"
                android:bottomRightRadius="0dp"
            />
        </shape>

    </item>
    </layer-list>

1
Las propiedades superior e inferior del elemento no son necesarias a menos que desee un relleno en la vista, pero de lo contrario esto funciona.
RominaV

9

Sobre la base de la respuesta del busylee , así es como puede hacer un drawableque solo tenga una esquina no redondeada (arriba a la izquierda, en este ejemplo):

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
            <!-- A numeric value is specified in "radius" for demonstrative purposes only,
                  it should be @dimen/val_name -->
            <corners android:radius="10dp" />
        </shape>
    </item>
    <!-- To keep the TOP-LEFT corner UNROUNDED set both OPPOSITE offsets (bottom+right): -->
    <item
        android:bottom="10dp"
        android:right="10dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
        </shape>
    </item>
</layer-list>

Tenga en cuenta que lo anterior drawablees que no se muestra correctamente en la vista previa de Android Studio (2.0.0p7). Para obtener una vista previa de todos modos, cree otra vista y úsela como android:background="@drawable/...".


66
@AleksG - Por supuesto. Es relevante hoy como lo fue entonces (como evidencia, necesitaba algo así). Debe saber que a lo largo de los años, algunas formas de hacer las cosas se vuelven obsoletas y pueden necesitar ser reemplazadas por otras más modernas. Como mencionó Busylee , el IDE se queja al definir diferentes radios de esquina, que no es el caso con el presente método. Además, dado que esta pregunta fue mi primer éxito en Google (iirc), tenía sentido para mí actualizarla. De todos modos, estoy seguro de que SO no le importará un poco más de KB de código ... :)
Dev-iL

2

Probé su código y obtuve un botón de esquina superior redondeada. Di los colores como @ffffffy trazo que di#C0C0C0 .

tratar

  1. Dar Android: bottomLeftRadius = "0.1dp" en lugar de 0. si no funciona
  2. Compruebe qué dibujable y la resolución del emulador. Creé una carpeta dibujable en res y usándola. (hdpi, mdpi ldpi) la carpeta que tiene este XML. Esta es mi salida.

ingrese la descripción de la imagen aquí


¿Qué versión de Android es esta? Mi aplicación debe ejecutarse en 1.6, y el emulador 1.6 tenía el problema.
Aleks G

1

Puede que necesites leer esto https://developer.android.com/guide/topics/resources/drawable-resource.html#Shape

y debajo hay una nota.

Nota Cada esquina debe (inicialmente) tener un radio de esquina mayor que 1, de lo contrario no se redondeará ninguna esquina. Si desea que las esquinas específicas no se redondeen, una solución alternativa es usar android: radius para establecer un radio de esquina predeterminado mayor que 1, pero luego anular cada esquina con los valores que realmente desea, proporcionando cero ("0dp" ) donde no quieres esquinas redondeadas.


1

Cree roung_top_corners.xml en drawable y copie el siguiente código

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
    android:topLeftRadius="22dp"
    android:topRightRadius="22dp"
    android:bottomLeftRadius="0dp"
    android:bottomRightRadius="0dp"
    />
<gradient
    android:angle="180"
    android:startColor="#1d2b32"
    android:centerColor="#465059"
    android:endColor="#687079"
    android:type="linear" />
<padding
    android:left="0dp"
    android:top="0dp"
    android:right="0dp"
    android:bottom="0dp"
    />
<size
    android:width="270dp"
    android:height="60dp"
    /></shape>
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.