Android Design - RelativeLayout (background color)

Question

I have the following RelativeLayout, but I would like to improve it. (make a nice design)

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout android:id="@+navigate/RLayout" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#ABABAB" xmlns:android="http://schemas.android.com/apk/res/android" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="10dp" android:textStyle="bold" android:id="@+id/hcorpo" android:layout_centerHorizontal="true" android:src="@drawable/hcorpo" android:layout_marginTop="15dp" />. <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="10dp" android:textStyle="bold|italic" android:textColor="#000000" android:id="@+id/hotelinfos" android:layout_below="@+id/hcorpo" android:layout_alignLeft="@+id/hcorpo" android:layout_marginTop="10dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="10dp" android:textStyle="bold" android:textColor="#000000" android:id="@+id/hotelname" android:layout_below="@+id/hotelinfos" android:layout_alignLeft="@+id/hotelinfos" android:layout_marginTop="10dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="10dp" android:textColor="#000000" android:id="@+id/hoteladdress" android:layout_below="@+id/hotelname" android:layout_alignLeft="@+id/hotelname" android:layout_marginTop="10dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="10dp" android:id="@+id/hotelphone" android:layout_below="@+id/hoteladdress" android:layout_alignLeft="@+id/hoteladdress" android:layout_marginTop="10dp" android:textColor="#12C" android:textStyle="bold|italic" android:onClick="onClick" android:clickable="true" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="10dp" android:textColor="#12C" android:onClick="onClick" android:clickable="true" android:textStyle="bold|italic" android:id="@+id/hotelemail" android:layout_below="@+id/hotelphone" android:layout_alignLeft="@+id/hotelphone" android:layout_marginTop="10dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="10dp" android:textColor="#000000" android:textStyle="bold|italic" android:id="@+id/bookinginfos" android:layout_below="@+id/hotelemail" android:layout_alignLeft="@+id/hotelemail" android:layout_marginTop="20dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="10dp" android:textColor="#000000" android:id="@+id/pnr" android:layout_below="@+id/bookinginfos" android:layout_alignLeft="@+id/bookinginfos" android:layout_marginTop="10dp" android:layout_marginRight="10dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="10dp" android:textColor="#000000" android:id="@+id/segmentCode" android:layout_below="@+id/bookinginfos" android:layout_toRightOf="@+id/pnr" android:layout_marginTop="10dp" android:layout_marginRight="20dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="10dp" android:textColor="#000000" android:id="@+id/checkin" android:layout_below="@+id/pnr" android:layout_alignLeft="@+id/pnr" android:layout_marginTop="10dp" android:layout_marginRight="10dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="10dp" android:textColor="#000000" android:id="@+id/checkout" android:layout_below="@+id/pnr" android:layout_toRightOf="@+id/checkin" android:layout_marginTop="10dp" android:layout_marginRight="20dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="10dp" android:textColor="#000000" android:id="@+id/nights" android:layout_below="@+id/pnr" android:layout_toRightOf="@+id/checkout" android:layout_marginTop="10dp" android:layout_marginRight="20dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="10dp" android:textColor="#000000" android:id="@+id/roomType" android:layout_below="@+id/checkin" android:layout_alignLeft="@+id/checkin" android:layout_marginTop="10dp" android:layout_marginRight="10dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="10dp" android:textColor="#000000" android:id="@+id/boardBasis" android:layout_below="@+id/roomType" android:layout_alignLeft="@+id/roomType" android:layout_marginRight="10dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="10dp" android:textColor="#000000" android:id="@+id/paxNames" android:layout_below="@+id/boardBasis" android:layout_alignLeft="@+id/boardBasis" android:layout_marginTop="10dp" android:layout_marginRight="10dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="10dp" android:textColor="#000000" android:textStyle="bold|italic" android:id="@+id/forHotel" android:layout_below="@+id/paxNames" android:layout_alignLeft="@+id/paxNames" android:layout_marginTop="20dp" android:layout_marginRight="10dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="10dp" android:textColor="#000000" android:id="@+id/supplierCode" android:layout_below="@+id/forHotel" android:layout_alignLeft="@+id/forHotel" android:layout_marginTop="10dp" android:layout_marginRight="10dp" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/picture" android:layout_below="@+id/hcorpo" android:layout_alignRight="@+id/hcorpo" android:layout_marginTop="10dp"/> </RelativeLayout> 

I would like to do something like a tripadvisor application: http://hpics.li/d961aa3 Explanation:

For example, I would like to add the following detail to a beautiful white rectangle:

 <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="10dp" android:textStyle="bold|italic" android:textColor="#000000" android:id="@+id/hotelinfos" android:layout_below="@+id/hcorpo" android:layout_alignLeft="@+id/hcorpo" android:layout_marginTop="10dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="10dp" android:textStyle="bold" android:textColor="#000000" android:id="@+id/hotelname" android:layout_below="@+id/hotelinfos" android:layout_alignLeft="@+id/hotelinfos" android:layout_marginTop="10dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="10dp" android:textColor="#000000" android:id="@+id/hoteladdress" android:layout_below="@+id/hotelname" android:layout_alignLeft="@+id/hotelname" android:layout_marginTop="10dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="10dp" android:id="@+id/hotelphone" android:layout_below="@+id/hoteladdress" android:layout_alignLeft="@+id/hoteladdress" android:layout_marginTop="10dp" android:textColor="#12C" android:textStyle="bold|italic" android:onClick="onClick" android:clickable="true" /> 

Should I create a new RelativeLayout with a different background color?

Any help is appreciated!

Answer 1

To bypass rectangles as a background in any layout, you can use 9 patch PNG images or use the shape class to create custom drawings.

Just check out my sample code below, it may come in handy.

main.xml in the layout folder

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_margin="20dip" android:orientation="vertical" android:background="@drawable/bg"> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Testing white rectangle" android:textColor="#f00" android:padding="10dip" android:textSize="25dip" /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Testing white rectangle" android:textColor="#0f0" android:padding="10dip" android:textSize="25dip" /> </LinearLayout> </LinearLayout> 

bg.xml in the selected folder

 <?xml version="1.0" encoding="UTF-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="#fff"/> <corners android:bottomLeftRadius="7dip" android:topRightRadius="7dip" android:topLeftRadius="7dip" android:bottomRightRadius="7dip" /> </shape> 

Java file

 public class WhiteRectangle extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } } 

Output

Answer 2

You can create an internal linear / relative layout with the background set to white. :)

Answer 3

use this

 android:background="@drawable/img_list_background_repeater"