Triangle hole with drawable

Issue

The B (white) layout is over the A (image) layout, and I need to crop the background so that I get this result.

Is that possible with drawables? If not, what's the other solution?

Solution

This is the layout I used:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="@drawable/gradient_back"
    android:layout_width="match_parent"
    android:layout_height="166dp"
    >
    <TextView
        android:id="@+id/txtWhiteStripe"
        android:background="@drawable/white_stripe"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="(B) Some text here"
        android:textStyle="bold"
        android:textColor="#f00"
        android:textSize="16sp"
    />
</RelativeLayout>

To get this result - well, just a proof of a concept, here: it might not be the most appealing graphics ever... ;)

The pictures I used were:

Background (gradient_back.png) - I could have used a single line, but... well I made a full image

and the white stripe (white_stripe.9.png) - which is the most interesting part in the concept

Unfortunately, it's nearly invisible, since it's all white and transparent, on a white background.

But it really looks like this one, in the 9 patch tool:

I should have restricted the content bottom padding a bit - but, well, it's easily done by removing some of the black pixels from the right side.

Enjoy.

Answered By - Phantômaxx