Android - Draw a Ribbon

Question

I try not to use the image. This is due to the fact that later I will create many objects with the same shape, but with different colors, so I will not need to add images, but just add colors to my code.

How can I create these images in Android Studio? I looked at Paint, onDraw, Canvas, etc., but it seems difficult to me.

Answer 1

If you want to use XML, try this way, it will work

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


    <item>
        <shape android:shape="rectangle">
            <size
                android:width="100dp"
                android:height="40dp" />
            <solid android:color="#5EB888" />
            <corners android:radius="0dp"/>
        </shape>
    </item>


    <item
        android:top="-26dp"
        android:bottom="31dp"
        android:left="-90dp"
        android:right="75dp">
        <rotate
            android:fromDegrees="45">
            <shape android:shape="rectangle">
                <solid android:color="#ffffff" />
            </shape>
        </rotate>
    </item>



</layer-list>

OUTPUT

Answer 2

, Adobe Illustrator, , vectormagic -.

xml , ,

Answer 3

left_arrow.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
    <rotate
        android:fromDegrees="45"
        android:toDegrees="90"
        android:pivotX="0%"
        android:pivotY="1%" >
        <shape android:shape="rectangle" >
            <stroke
                android:width="10dp"
                android:color="#00000000" />

            <solid android:color="#ffffff" />
        </shape>
    </rotate>
</item>

, , : -

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<LinearLayout
    android:id="@+id/llMain"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="0.1"
    android:background="@color/black"
    android:orientation="horizontal">

    <ImageView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.1"
        android:background="@drawable/left_arrow"
        android:contentDescription="@string/app_name" />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.9"
        android:contentDescription="@string/app_name" />

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="0.9" />

.

, . ,

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">

<include 
android:id="@+id/llMain"
layout="@layout/xtra"/>

</LinearLayout>

OnClickListener, "llMain". , .

Answer 4

You can use the white png image that you already have and use the setColorFilter method in the image viewer class to direct it to whatever color you want