Android如何实现背景圆角的文字效果？

Question

本人新手，美工的设计图有如图所示的文本效果，黔驴技穷，希望sf的朋友们能指点迷津，谢谢啦

Answer 1

Actually, just catch the artist girl and beat her up.

---

Main topic: 用.9比较简单。。。就是画一个图定义为背景。。

---

Although it can all be implemented using xml, it is a bit of a curve to save the country. . .
The effect is as follows:

txt_left.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape
            android:shape="rectangle">
            <gradient
                android:angle="0"
                android:startColor="#00f874"
                android:endColor="#2fe9a5"
                android:type="linear" />
            <corners android:radius="20dp"/>

        </shape>
    </item>

    <item android:left="30dp"
        >
        <shape
            android:shape="rectangle">
            <gradient
                android:angle="0"
                android:startColor="#00f874"
                android:endColor="#2fe9a5"
                android:type="linear" />
            <padding
                android:left="15dp"
                android:right="15dp"
                android:top="10dp"
                android:bottom="10dp"/>
        </shape>
    </item>
</layer-list>  

txt_right.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape
            android:shape="rectangle">
            <gradient
                android:angle="0"
                android:startColor="#F00"
                android:endColor="#F55"
                android:type="linear" />
            <corners android:radius="20dp"/>

        </shape>
    </item>
    <item android:right="20dp">
        <shape
            android:shape="rectangle">
            <gradient
                android:angle="0"
                android:startColor="#F00"
                android:endColor="#F55"
                android:type="linear" />
            <padding
                android:left="15dp"
                android:right="15dp"
                android:top="10dp"
                android:bottom="10dp"/>
        </shape>
    </item>
</layer-list>  

---

TextView Layout

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/txt_left"
        android:text="总"
        android:textSize="32sp"
        android:textColor="#FFF"
        android:id="@+id/tv_total_voltage_title" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/txt_right"
        android:text="400v"
        android:textSize="32sp"
        android:textColor="#000"
        android:id="@+id/tv_total_voltage_value"
        android:layout_toEndOf="@+id/tv_total_voltage_title" />

Answer 2

Define a drawable, set shape corners, and set this drawable as background. Or cut the .9 picture, it will be a more worry-free solution.

Answer 3

If the text length is like in the picture and you let the design cut the background to you, you do it with a linear layout. If the text length is variable, you can use drawable or point-nine pictures to achieve it

Answer 4

http://shapes.softartstudio.com/ Design the background style on this website, click GETCODE, save it as an xml file and put it in the drawable folder, set it as background

Answer 5

It feels like it can be achieved using clipDrawable

Answer 6

canvas.drawRect(Rect,Paint)
Using Android’s own drawing class can solve this problem.

Answer 7

See that the length of the design text will not change, just ask for the background image