We have developed the above layout using the following xml code:
1: <RelativeLayout
2: android:id="@id/productHeader"
3: android:layout_width="wrap_content"
4: android:layout_height="wrap_content"
5: android:layout_below="@id/whiteView"
6: android:background="@drawable/product_detail_item_bg"
7: android:paddingBottom="5dp"
8: android:paddingLeft="14dp"
9: android:paddingRight="14dp"
10: android:paddingTop="5dp" >
11:
12: <LinearLayout
13: android:id="@id/productMainImage"
14: android:layout_width="wrap_content"
15: android:layout_height="wrap_content"
16: android:layout_alignParentRight="true"
17: android:orientation="vertical"
18: android:paddingBottom="5dp"
19: android:paddingLeft="14dp"
20: android:paddingRight="14dp"
21: android:paddingTop="5dp" >
22:
23: <ImageView
24: android:id="@id/primaryImageProduct"
25: android:layout_width="wrap_content"
26: android:layout_height="wrap_content"
27: android:layout_marginBottom="8dp"
28: android:src="@drawable/ic_launcher_icon" />
29:
30: <TextView
31: android:id="@id/productMainImageTitle"
32: style="@style/SubTitleBold"
33: android:layout_width="wrap_content"
34: android:layout_height="wrap_content"
35: android:text="Exhibitor"
36: android:textSize="12sp" />
37: </LinearLayout>
38:
39: <RelativeLayout
40: android:id="@+id/productInfoLayout"
41: android:layout_width="wrap_content"
42: android:layout_height="wrap_content"
43: android:layout_alignParentLeft="true"
44: android:layout_alignParentTop="true" >
45:
46: <TextView
47: android:id="@id/productTitle"
48: style="@style/ListTextStyleHeading"
49: android:layout_width="wrap_content"
50: android:layout_height="wrap_content"
51: android:text="Samsung Galaxy SII"
52: android:textSize="14dp" />
53:
54: <TextView
55: android:id="@id/productPriceLabel"
56: style="@style/SubTitleBold"
57: android:layout_width="wrap_content"
58: android:layout_height="wrap_content"
59: android:layout_below="@id/productTitle"
60: android:text="Price: " />
61:
62: <TextView
63: android:id="@id/productPriceValue"
64: style="@style/SubTitleBold"
65: android:layout_width="wrap_content"
66: android:layout_height="wrap_content"
67: android:layout_below="@id/productTitle"
68: android:layout_toRightOf="@id/productPriceLabel"
69: android:text="Rs.199" />
70:
71: <TextView
72: android:id="@id/productStallLabel"
73: style="@style/SubTitleBold"
74: android:layout_width="wrap_content"
75: android:layout_height="wrap_content"
76: android:layout_below="@id/productPriceLabel"
77: android:text="Stall No: " />
78:
79: <TextView
80: android:id="@id/productStallValue"
81: style="@style/SubTitleBold"
82: android:layout_width="wrap_content"
83: android:layout_height="wrap_content"
84: android:layout_below="@id/productPriceValue"
85: android:layout_toRightOf="@id/productStallLabel"
86: android:text="# 201" />
87:
88: <RatingBar
89: android:id="@id/productRatingBar"
90: style="@style/starRatingBar"
91: android:layout_width="wrap_content"
92: android:layout_height="wrap_content"
93: android:layout_below="@id/productStallLabel"
94: android:layout_marginBottom="8dp"
95: android:layout_marginTop="2dp"
96: android:numStars="5"
97: android:stepSize="1.0" />
98: </RelativeLayout>
99: </RelativeLayout>
We have another class which can use the same layout. But with slight modification. The image must be at the right hand side of the screen and the details must be at the left hand side of the screen . The modified layout must look as follows:
It would be very ineffective if we create another layout file for such a small purpose. We can change our layout dynamically through codes. The given code snippet will switch the position of the view
1:
2: Boolean layoutNeedsModification = true;
3: LinearLayout productMainImage = (LinearLayout) viewGroup
4: .findViewById(R.id.productMainImage);
5: RelativeLayout productInfoLayout = (RelativeLayout) viewGroup
6: .findViewById(R.id.productInfoLayout);
7:
8:
9: if (layoutNeedsModification) {
10: RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
11: RelativeLayout.LayoutParams.WRAP_CONTENT,
12: RelativeLayout.LayoutParams.WRAP_CONTENT);
13: params.addRule(RelativeLayout.ALIGN_PARENT_LEFT,
14: RelativeLayout.TRUE);
15:
16: productMainImage.setLayoutParams(params);
17:
18: params = new RelativeLayout.LayoutParams(
19: RelativeLayout.LayoutParams.WRAP_CONTENT,
20: RelativeLayout.LayoutParams.WRAP_CONTENT);
21: params.addRule(RelativeLayout.ALIGN_PARENT_RIGHT,
22: RelativeLayout.TRUE);
23:
24: productInfoLayout.setLayoutParams(params);
25:
26: }
As you can see, this is what you have to do:
- Create a RelativeLayout.LayoutParams object.
- Use addRule(int) or addRule(int, int) to set the rules. The first method is used to add rules that don’t require values.
- Set the parameters to the view (in this case, to each button).
References:
Reference No. 1
Prativa's Blog 