What I want to achieve is like this layout:
I have tried to use this code, to achieve like that image, but unfortunately, I failed. This is the snippet of my 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 orange background) is clipped through the parent bound. I have set the android:clipChildren="false"
, but still it is clipped. Can somebody help me?
A single RelativeLayout is the way to go. Remember to keep things as simple as possible. In RelativeLayout the last declared elements are rendered on top of the others. The XML below should (kinda) fit your needs, just adjust images and margins and sizes as you 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>
Have you thought about using FrameLayout?? That makes the overlaying of image easier... (making one layout/view appear on top of another)... Here is a good tutorial...
http://mobile.tutsplus.com/tutorials/android/android-sdk_frame-layout/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.