Draw a ribbon in android on top of an image

Question

I have one ImageView with background as an image. I want to draw a ribbon on top of the image to describe it. I have tried the following code, but the triangle shape is of black color. So it cannot be applied to a view with background image.

<item>
    <shape android:shape="rectangle">
        <size
                android:width="100dp"
                android:height="40dp"/>
        <solid android:color="@android:color/holo_orange_dark"/>
        <corners android:radius="6dp"/>
    </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="@android:color/black"/>
        </shape>
    </rotate>
</item>

Setting the triangle color as transparent is also not working. I want to mask the triangle out of the rectangle like this:

Banner sample

score 0 · Answer 1 · answered Mar 27 '19 at 08:14

As per my suggestion, you can use vector for ribbon like this and check this link for imageview on imageview

  <?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">

<path
    android:fillColor="#76c304"
    android:strokeWidth="1"
    android:pathData="M9.85 12L3.3 18.55L24 18.55L24 6.63L3.3 6.63L9.85 12Z" /></vector>

or

 <?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">

<path
    android:fillColor="#7c2a58"
    android:strokeWidth="1"
    android:pathData="M6.75 5.56L3.98 8.33L23.76 8.33L23.76 2.67L3.98 2.67L6.75 5.56Z" />
<path
    android:fillColor="#7c2a58"
    android:strokeWidth="1"
    android:pathData="M6.75 12.24L3.98 15.01L23.76 15.01L23.76 9.35L3.98 9.35L6.75 12.24Z" />
<path
    android:fillColor="#7c2a58"
    android:strokeWidth="1"
    android:pathData="M6.75 18.56L3.98 21.33L23.76 21.33L23.76 15.67L3.98 15.67L6.75 18.56Z" /></vector>

Draw a ribbon in android on top of an image

1 Answers1