radius - shape imageview android

¿Cómo puedo crear un rectángulo con dos lados curvos en XML dibujable?

Question

Quiero que los lados izquierdo y derecho (no las esquinas) del rectángulo estén curvados. O diga los lados superior e inferior de una forma ovalada recta.

¿Cómo puedo lograr algo como esto?

Answer 1

¡Ha funcionado bien!

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

    <solid
        android:color="@color/color_red"/>
    <corners
        android:radius="10000dp" /> 
</shape>

Answer 2

Creo que una de las mejores ideas es crear formas usando xml fiel.

Crear Drawable-> ovalshape.xml

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

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

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

    <padding
        android:bottom="5dip"
        android:left="10dip"
        android:right="10dip"
        android:top="5dip" />

</shape>

Ahora puede usar este xml instead of image fácilmente. Creo que esto es útil para you and new SO user .

Answer 3

Definir la altura y hacer la mitad del radio de la altura.

Answer 4

Intente establecer el radio del borde a la mitad de la altura. En CSS, border-radius:50% crea una elipse, así que supongo que si es solo el 50% de la altura, obtendrías algo así.

Answer 5

Intente esto en la vista de texto, para un solo carácter mostrará un círculo, para múltiples dígitos se expandirá automáticamente a la forma que mostró anteriormente, pero si desea estrictamente la forma anterior, simplemente proporcione un relleno más grande a la izquierda y a la derecha

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

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

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

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

</shape> 

Answer 6

La forma más fácil es usar una imagen de 9 parches (una imagen png que termina en image.9.png) y tener un borde de píxeles adicional que define cómo escalar la imagen.

Otra forma es crear un archivo de forma en la carpeta res / drawable así.

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

más información sobre formas here

Answer 7

Llego un poco tarde y la respuesta no debe ser totalmente completa (no considero las alturas flexibles), pero al menos si sabemos de antemano la altura en dp, el truco es tener el radio como la mitad de la altura del botón. . Por ejemplo, si la altura fuera 48dp, podríamos hacer algo como:

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

Answer 8

Para que los lados permanezcan siempre con curvas a cualquier altura, tengo que crear la forma programáticamente como se muestra a continuación (código en Kotlin)

class CurvedSidesShape : RectShape() {
    override fun draw(canvas: Canvas, paint: Paint?) {
        var path = Path()
        path.addRoundRect(rect(), rect().height(), rect().height(), Path.Direction.CW)
        canvas.drawPath(path, paint)
    }
}

y aquí es cómo uso la forma como fondo de botón

class CurvedSidesButton : Button {
    private var mHeight: Int = 0

    constructor(context: Context?) : super(context) {
        init(context, null, 0, 0)
    }

    .
    .
    .

    override fun draw(canvas: Canvas?) {
        setCurvedSidesBackground(height)
        super.draw(canvas)
    }

    private fun setCurvedSidesBackground(height: Int) {
        if (height != mHeight) {
            val curvedSidesShape = ShapeDrawable(CurvedSidesShape())
            curvedSidesShape.intrinsicWidth = width
            curvedSidesShape.intrinsicHeight = height
            curvedSidesShape.paint.color = Color.RED
            background = curvedSidesShape
            mHeight = height
        }
    }
}

Answer 9

Parece que el radio máximo permitido en la forma es la mitad de la altura total en la siguiente figura, por lo que puede usarla para tener una forma con altura flexible que mantenga la proporción deseada:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#ffffff" />
    <size android:height="@dimen/height" />
    <corners
        android:radius="@dimen/height"
        />
</shape>

Answer 10

Puede aumentar el tamaño del radio a 200dp y establecer el dibujo en el fondo de la vista de texto

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

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