androidandroid-layoutandroid-shapedrawable

How to build trapezoid shape in xml android?


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.

desired result

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.my attempt

i also need yellow line below this shape.

thanks for help.


Solution

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

    Result

    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>