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.
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>
This post helped me a lot in creating a trapezium view https://arkapp.medium.com/trapezium-view-for-android-584799c7e849
<com.arkapp.trapeziumview.TrapeziumCustomView
android:id="@+id/trapeziumCustomView"
android:layout_width="match_parent"
android:layout_height="350dp"
android:layout_margin="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:shapeColor="@color/teal_200"
app:edgeRadius="18"
app:slopeLength="88"
app:slopeType="bottomRight" />
With the help of this I was able to create a custom view with one edge as a slope
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With