How to achieve Android UI like this image layout? About android: clipChildren

Question

What I want to achieve looks like this layout:

I tried to use this code to achieve the same image, but unfortunately I failed. This is a piece of code:

<RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginBottom="10dp" android:clipChildren="false" > <RelativeLayout android:id="@+id/text_area_third" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/round_corner_background" android:focusable="false" android:paddingBottom="5dp" android:paddingLeft="5dp" android:paddingRight="5dp" android:paddingTop="5dp" > <TextView android:id="@+id/text_download_purch_third" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignRight="@+id/acron_icon" android:layout_marginLeft="5dp" android:layout_marginRight="30dp" android:layout_marginTop="10dp" android:gravity="left" android:maxLines="2" android:text="1asdasdasdasdadsasdasdadasdasdasdasdasdasdasdasd" android:textColor="@color/black" android:textSize="10sp" android:textStyle="normal" /> <ImageView android:id="@+id/acron_icon" android:layout_width="20dp" android:layout_height="20dp" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_margin="5dp" android:layout_marginTop="10dp" android:background="@drawable/acron" android:scaleType="fitCenter" /> </RelativeLayout> <LinearLayout android:layout_alignTop="@+id/text_area_third" android:layout_alignLeft="@+id/text_area_third" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@color/orange" android:layout_marginLeft="-10dp" android:layout_marginTop="-10dp" android:padding="3dp" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="GET" android:textColor="@color/white" android:textSize="13sp" android:textStyle="bold" /> </LinearLayout> </RelativeLayout> 

You can see that the “GET” label (with an orange background) is cropped across the parent border. I set android:clipChildren="false" , but still it is cropped. Can someone help me?

Answer 1

One RelativeLayout is the way to go. Remember to keep everything as simple as possible. In RelativeLayout, the most recently declared items are displayed on top of the rest. The XML below should (kinda) fit your needs, just adjust the images and fields and sizes as needed.

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="180dp" android:layout_height="60dp" android:background="#DDD" > <TextView android:id="@+id/text_download_purch_third" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginBottom="3dp" android:layout_marginLeft="12dp" android:layout_marginRight="8dp" android:layout_marginTop="10dp" android:background="@drawable/round_corner_background" android:maxLines="2" android:paddingLeft="4dp" android:paddingRight="25dp" android:paddingTop="16dp" android:text="1asdasdasdasdadsasdasdadasdasdasdasdasdasdasdasd" android:textColor="@color/black" android:textSize="10sp" android:textStyle="normal" /> <ImageView android:id="@+id/acron_icon" android:layout_width="20dp" android:layout_height="20dp" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_margin="5dp" android:layout_marginTop="10dp" android:background="@drawable/acron" android:scaleType="fitCenter" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="8dp" android:layout_marginTop="4dp" android:background="#FFA0A0" android:padding="2dp" android:text="GET!" android:textColor="@color/white" android:textSize="13sp" android:textStyle="bold" /> </RelativeLayout> 

Answer 2

Have you considered using FrameLayout? This makes it easy to overlay the image ... (by making one layout / view from above on top of another) ... Here is a good tutorial ...

http://mobile.tutsplus.com/tutorials/android/android-sdk_frame-layout/