Как создать прямоугольник с двумя изогнутыми сторонами в XML-чертеже?

Я хочу, чтобы левая и правая стороны (а не углы) прямоугольника были изогнуты. Или скажите верхнюю и нижнюю стороны овальной формы прямо.

Как я могу добиться чего-то подобного?

enter image description here

Ответы

Ответ 1

Попробуйте это в текстовом режиме, для одиночного символа он покажет круг, для нескольких цифр он автоматически расширится до формы, которую вы указали выше, но если вы строго хотите, чтобы выше форма, просто дайте большую прописку слева и справа

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

Ответ 2

Я прихожу немного поздно, и ответ не должен быть полностью полным (я не считаю гибкими высотами), но, по крайней мере, если мы заранее знаем высоту в dp, трюк должен иметь радиус как половину высоты кнопки. Например, если высота будет 48dp, мы могли бы сделать что-то вроде:

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

Ответ 3

Я думаю, что одной из лучших идей является создание формы с использованием xml fiel.

Создать 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>

Теперь вы можете легко использовать этот xml instead of image. Я думаю, что это полезно для you and new SO user.

Ответ 4

Попробуйте установить радиус границы на половину высоты. В CSS border-radius:50% создает эллипс, поэтому я бы предположил, что если это всего лишь 50% от высоты, вы получите что-то подобное.

Ответ 5

Простым способом является 9-patch image (png-изображение, которое заканчивается на изображении .9.png) и имеет дополнительный пиксель границы, которая определяет, как масштабировать изображение.

Другой способ - создать файл формы в папке res/drawable именно так.

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

больше информации о фигурах здесь

Ответ 6

Похоже, что максимальный радиус, допустимый в форме, составляет половину от общей высоты в форме ниже, поэтому вы можете использовать его, чтобы иметь форму с гибкой высотой, которая поддерживает соотношение желаний:

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

Ответ 7

Определите высоту и сделайте радиус половиной высоты.

Ответ 8

Все прошло отлично!

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

Ответ 9

Вы можете увеличить размер радиуса до 200 дп и установить обратный к фону текста.

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

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

Ответ 10

Чтобы стороны всегда оставались пышными с любой высотой, я в конечном итоге должен создать форму программно, как показано ниже (код в Котлин)

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

и здесь, как я использую форму в качестве фона кнопки

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