How to build trapezoid shape in xml android?

Question

I want to build this shape with bottom line and text inside it i'm confused little bit how to achieve this i tired some code but don't get required thing.

so far i have tried this code

shape.xml

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

    <!-- Colored rectangle-->
    <item>
        <shape android:shape="rectangle">
            <size
                android:width="100dp"
                android:height="40dp" />
            <solid android:color="#13a89e" />
        </shape>
    </item>


    <!-- This rectangle for the right side -->
    <!-- Their color should be the same as layout's background -->
    <item
        android:right="-100dp"
        android:left="100dp"
        android:top="-100dp"
        android:bottom="-100dp">
        <rotate
            android:fromDegrees="45">
            <shape android:shape="rectangle">
                <solid android:color="#ffffff" />
            </shape>
        </rotate>
    </item>

</layer-list>

it provide the following result.

i also need yellow line below this shape.

thanks for help.

Answer 1

Here is your XML:

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

<!-- Colored rectangle-->
<item>
    <shape android:shape="rectangle">
        <padding android:top="35dp"/>
        <size android:width="200dp" android:height="40dp" />
        <solid android:color="#13a89e" />
    </shape>
</item>
<!-- Darker colored line-->
<item>
    <shape android:shape="line">
        <size android:width="100dp"/>
        <stroke android:width="4dp" android:color="#123456" />
    </shape>
</item>


<!-- This rectangle for the right side -->
<!-- Their color should be the same as layout's background -->
<item
    android:right="-200dp"
    android:left="200dp"
    android:top="-200dp"
    android:bottom="-200dp">
    <rotate android:fromDegrees="45">
        <shape android:shape="rectangle">
           <padding android:top="-35dp"/>
           <solid android:color="#ffffff" />
        </shape>
    </rotate>
</item>
<!-- This rectangle for the left side -->
<item
    android:right="200dp"
    android:left="-200dp"
    android:top="-200dp"
    android:bottom="-200dp">
    <rotate android:fromDegrees="-45">
        <shape android:shape="rectangle">
            <padding android:top="-35dp"/>
            <solid android:color="#ffffff" />
        </shape>
    </rotate>
</item>

And this is what it renders to:

Here is my TextView XML:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="io.kalabalik.tilted.MainActivity">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/box"
    android:text="Your Text!"
    android:textColor="#000000"
    android:gravity="center_horizontal|bottom"
    android:paddingBottom="10dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

Answer 2

I highly recommend create custom text view for do that it would be more flexible and under control. You need to create path object and with that object you will define your view corners. And if you want view as text you need to override onDraw(Canvas canvas) function you will call canvas.draw(path, paint) method. If you need not only for text field you should override any view group class but for view groups you should override onDispatchDraw function to do that.

You can create your shape like below example

    // you can define all points
    Point topLeft = new Point(0,0);
    Point topRight = new Point(getWidth(),0); // your view width
    //... 

    //cover your corner points
    Path path = new Path();
    path.moveTo(topLeft.x, topLeft.y);
    path.lineTo(topRight.x, topRight.y);
    path.lineTo(bottomRight.x, bottomRight.y);
    path.lineTo(shapeBottomRight.x, shapeBottomRight.y);
    path.lineTo(shapeTop.x, shapeTop.y);
    path.lineTo(shapeBottomLeft.x, shapeBottomLeft.y);
    path.lineTo(bottomLeft.x, bottomLeft.y);
    path.lineTo(topLeft.x, topLeft.y);

    canvas.draw(path, paint);