Android - Draw a ribbon shape

Question

I am trying not to use image view. This is because, later, I will generate many objects with the same shape but different colors, so I wouldn't need to keep adding image views but simply adding colors on my code.

How can I create those images on Android Studio? I looked over Paint, onDraw, Canvas, etc, but this looks difficult to me.

Take one white triangle image, keep it on left, and change the background of the rest view as you need — Bills, Jul 03 '17 at 05:39
there are many ways to do this, but best way would probably be to use vector drawable — Sarthak Mittal, Jul 03 '17 at 05:48
how to do that from top to bottom, it is from right to left, how can we do it from top to bottom — Jeyaseelan, Jul 22 '20 at 06:09

score 4 · Accepted Answer · answered Jul 03 '17 at 06:08

4

If you want to use from 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

answered Jul 03 '17 at 06:08

Aditya Vyas-Lakhan

13,409
16
61
96

is that possible to remove that white color? – Sunisha Guptan Jul 03 '17 at 06:11
The second rectangle you have given white color that one..i tried to with transparent...but that time it will look like rectangle – Sunisha Guptan Jul 03 '17 at 06:13
keep it white please – Aditya Vyas-Lakhan Jul 03 '17 at 06:14
Ya i understood what u done..even its great work only..but sometime the background will like image..that time we can't give set this white color tha'ts why i asked – Sunisha Guptan Jul 03 '17 at 06:16
did you try with same color? – Aditya Vyas-Lakhan Jul 03 '17 at 06:17
ya..that time its working...am asking about when the background as image then we cant set this color code na?so we have to give transparent one. – Sunisha Guptan Jul 03 '17 at 06:19

humazed · Answer 2 · 2017-07-03T05:43:18.093

1

You can create vector image using any vector program like Adobe Illustrator or convert it using a conversion tool like vectormagic or find already existing one then import it to android studio.

it will be imported as xml file where you can change the colors as you want

edited Jul 03 '17 at 05:43

answered Jul 03 '17 at 05:36

humazed

74,687
32
99
138

score 1 · Answer 3 · answered Jul 03 '17 at 06:17

Create a drawable file as named 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>

Now, create a view layout to create this type of stripes or image like this, here is the below code:-

<?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" />

This above layout creates the required arrow stripe as a layout.

Now add this layout to your required layout where you wan't to show this stripes. For example,

<?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>

Now, you are able to also use OnClickListener by using "llMain". Hope it will help.

score 0 · Answer 4 · answered Aug 23 '17 at 08:47

0

You could use the white png image you already have and use the setColorFilter method on the image view class to tint it with any color you desire

answered Aug 23 '17 at 08:47

Ismail Iqbal

2,774
1
25
46

Android - Draw a ribbon shape

4 Answers4