Question

I have made a design that looks like this:

The problem is the creation of the little triangle that should point to the currently selected category.
In essence, without background and stuff it looks like this:

Below the category texts, there is a transparent blue rectangle placed and to the right of it the ‘pointer’ should be made.
I imagined that this pointer is placed in a relative layout which contains the following imageview elements:

1. a transparent rectangle which fills the space from the top till imageview 2

2. the imageview containing the pointer. This is just a square image with the completely transparent pointer rectangle. Which has a fixed width and height and is position on a fixed/different location using the Top and Left margins.

3. a transparent rectangle which fills the space from 2 till the bottom

I tried creating this with the relative layout, but I can’t get it to work. It seems like only 1 element with a variable height can be used at a time.
I also tried to use a vertical layout, but that didn’t do it at all.

What is the best method to accomplish my design goal?

Answer 1

Create a 9patch png version of your image. This is an image where only certain areas can stretch. There is a tool in the android SDK have a look.
(You need to make the area to the left of the arrow the only part that stretches).

Then use a frame layout with two Layouts inside; One for the bright blue background and one for the pointer. Eg:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:layout_width/height/ect...>

    <LinearLayout android:id="BlueBackground"
                  android:background="brightblue"
                  android:layout_width/height/ect.../>

    <LinearLayout android:id="Pointer"
                  android:background="pointer9patch"
                  android:layout_width/height/ect...>
    //The List
    </LinearLayout>

 </FrameLayout>

EDIT:

If you want to the pointer menu to only take up a certain portion of the screen you can use a horizontal linearlayout to split the screen in two:

 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:layout_width/height/ect...>

    <ImageView android:id="BlueBackground"
               android:layout_width/height/ect...>
    <LinearLayout android:id="HSplitLayout"
                  orientation="horizontal">

        <LinearLayout android:id="Pointer"
                   android:layout_width/height/ect...>
        //The List
        </LinearLayout>

        <ContentOnRight...>

    </LinearLayout>


 </FrameLayout>