How to make two different layouts of the same height?

Question

In my application XML layout, I have one Relativelayout in which there are two linear layouts. Now I am doing animation for this layout. But since the height seems to be different, I had problems with the review.

Therefore, I want to make the same height of both layouts. Below is my xml file.

<!-- ============================================================= --> <!-- BOTTLE / PEN LAYOUT --> <!-- ============================================================= --> <LinearLayout android:layout_height="wrap_content" android:layout_width="fill_parent" > <RelativeLayout android:layout_height="wrap_content" android:layout_width="fill_parent"> <!-- ============================================================= --> <!-- PEN LAYOUT --> <!-- ============================================================= --> <LinearLayout android:orientation="vertical" android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@+id/pen_layout"> <TextView android:text="EF" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_gravity="center" android:textColor="#000000" android:layout_marginTop="2dp" android:textSize="10sp"/> <ImageView android:id="@+id/save" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right" android:src="@drawable/ink_pen"/> <TextView android:text="F" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_gravity="center" android:textColor="#000000" android:layout_marginTop="2dp" android:textSize="10sp"/> <ImageView android:id="@+id/save" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right" android:src="@drawable/ink_pen"/> <TextView android:text="BOLD" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_gravity="center" android:textColor="#000000" android:layout_marginTop="2dp" android:textSize="10sp"/> <ImageView android:id="@+id/save" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right" android:src="@drawable/ink_pen"/> <TextView android:text="ITALIC" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_gravity="center" android:textColor="#000000" android:layout_marginTop="2dp" android:textSize="10sp"/> <ImageView android:id="@+id/save" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right" android:src="@drawable/ink_pen"/> </LinearLayout> <!-- ============================================================= --> <!-- BOTTLE LAYOUT --> <!-- ============================================================= --> <LinearLayout android:orientation="vertical" android:layout_height="wrap_content" android:layout_width="fill_parent" android:weightSum="4" android:id="@+id/bottle_layout"> <!-- First Row Bottle --> <LinearLayout android:orientation="horizontal" android:layout_height="wrap_content" android:layout_weight="1" android:layout_width="fill_parent" android:weightSum="2"> <ImageView android:layout_height="wrap_content" android:layout_weight="1" android:layout_width="wrap_content" android:src="@drawable/purple_bottle"/> <ImageView android:layout_height="wrap_content" android:layout_weight="1" android:layout_width="wrap_content" android:src="@drawable/red_bottle"/> </LinearLayout> <!-- Second Row Bottle --> <LinearLayout android:orientation="horizontal" android:layout_height="wrap_content" android:layout_weight="1" android:layout_width="fill_parent" android:weightSum="2"> <ImageView android:layout_height="wrap_content" android:layout_weight="1" android:layout_width="wrap_content" android:src="@drawable/gray_bottle"/> <ImageView android:layout_height="wrap_content" android:layout_weight="1" android:layout_width="wrap_content" android:src="@drawable/green_bottle"/> </LinearLayout> <!-- Third Row Bottle --> <LinearLayout android:orientation="horizontal" android:layout_height="wrap_content" android:layout_weight="1" android:layout_width="fill_parent" android:weightSum="2"> <ImageView android:layout_height="wrap_content" android:layout_weight="1" android:layout_width="wrap_content" android:src="@drawable/orange_bottle"/> <ImageView android:layout_height="wrap_content" android:layout_weight="1" android:layout_width="wrap_content" android:src="@drawable/blue_bottle"/> </LinearLayout> <!-- Forth Row Bottle --> <LinearLayout android:orientation="horizontal" android:layout_height="wrap_content" android:layout_weight="1" android:layout_width="fill_parent" android:weightSum="2"> <ImageView android:layout_height="wrap_content" android:layout_weight="1" android:layout_width="wrap_content" android:src="@drawable/black_bottle"/> <ImageView android:layout_height="wrap_content" android:layout_weight="1" android:layout_width="wrap_content" android:src="@drawable/white_bottle"/> </LinearLayout> </LinearLayout> </RelativeLayout> </LinearLayout> 

Answer 1

Delete the containing RelativeLayout (since it is the only descendant of your root LinearLayout that you don't need) or change it to LinearLayout.

Then, for both the Pen layout and the bottle layout, add the android: layout_weight attribute and set both of them to 1.

Make sure both layouts have the height set in MATCH_PARENT

Now your two layouts should share the space equally between them, thereby making them the same height.

To divide the space evenly between the children of the Pen and Bottle layouts, I suggest you set the height of each child element to WRAP_CONTENT, and the layout_weight of each of them to 1.