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

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

what want accomplish layout:

i have tried utilize code, accomplish image, unfortunately, failed. snippet 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, "get" label(with orange background) clipped through parent bound. have set android:clipchildren="false", still clipped. can help me?

a single relativelayout way go. remember maintain things simple possible. in relativelayout lastly declared elements rendered on top of others. xml below should (kinda) fit needs, adjust images , margins , sizes require.

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

android android-layout android-ui android-xml