创建具有2种不同背景颜色的胶囊状布局

时间:2018-06-25 12:28:17

标签: android

我想创建一个与此图像相似的视图。

enter image description here

是否存在类似的tagView或drawable资源文件? 里面的文本可以有任何长度,因此不能选择以其图像作为背景。

2 个答案:

答案 0 :(得分:0)

使用类似这样的内容:

public function behaviors()
{
    return [
        'authenticator' => [
            'class' => CompositeAuth::className(),
            'optional' => ['*'],
            // ...
        ]
    ];
}

<?xml version="1.0" encoding="utf-8"?>

这是灰色背景的底部可绘制对象,并且

<corners android:radius="18dp" />

<size
    android:width="200dp"
    android:height="20dp" />
<solid android:color="#808080" />

<?xml version="1.0" encoding="utf-8"?>

白色的。接下来,使用ConstraintLayout或RecyclerView将其放置在布局中。

答案 1 :(得分:0)

尝试以下代码。首先,您需要像这样为左右胶囊创建背景。

左胶囊背景

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

        <corners
            android:topLeftRadius="30dp"
            android:topRightRadius="0dp"
            android:bottomLeftRadius="30dp"
            android:bottomRightRadius="0dp"
            />
        <gradient
            android:angle="45"
            android:centerX="35%"
            android:centerColor="#f2efef"
            android:startColor="#f4efef"
            android:endColor="#faf6f6"
            android:type="linear"
            />
        <padding
            android:left="0dp"
            android:top="0dp"
            android:right="0dp"
            android:bottom="0dp"
            />
        <size
            android:width="270dp"
            android:height="60dp"
            />
        <stroke
            android:width="3dp"
            android:color="#878787"
            />
    </shape>

右胶囊背景

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
    android:topLeftRadius="0dp"
    android:topRightRadius="30dp"
    android:bottomLeftRadius="0dp"
    android:bottomRightRadius="30dp"
    />
<gradient
    android:angle="45"
    android:centerX="35%"
    android:centerColor="#b1b1b1"
    android:startColor="#cec9c9"
    android:endColor="#b9b3b3"
    android:type="linear"
    />
<padding
    android:left="0dp"
    android:top="0dp"
    android:right="0dp"
    android:bottom="0dp"
    />
<size
    android:width="270dp"
    android:height="60dp"
    />
<stroke
    android:width="3dp"
    android:color="#878787"
    />

最终将这样的胶囊给这样的textview背景。

  <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            >
            <TextView
                android:gravity="center"
                android:text="Hibernate"
                android:textColor="@color/imagepicker_black"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="6"
                android:background="@drawable/capsule_background_left"/>
            <TextView
                android:gravity="center"
                android:text="1 Yr"
                android:textColor="@color/imagepicker_black"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="4"
                android:background="@drawable/capsule_background_right"/>
        </LinearLayout>