'How to split the screen with two equal LinearLayouts?
Wanna to split a screen for my app with two LinearLayouts. What parameters should I use to make exact splitting in two equal parts - first LinearLayout on the top and the second one is just under it.
Solution 1:[1]
I am answering this question after 4-5 years but best practices to do this as below
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:id="@+id/firstLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="@+id/secondView"
android:orientation="vertical"></LinearLayout>
<View
android:id="@+id/secondView"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_centerHorizontal="true" />
<LinearLayout
android:id="@+id/thirdLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toRightOf="@+id/secondView"
android:orientation="vertical"></LinearLayout>
</RelativeLayout>
This is right approach as use of layout_weight is always heavy for UI operations. Splitting Layout equally using LinearLayout is not good practice
Solution 2:[2]
Just putting it out there:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FF0000"
android:weightSum="4"
android:padding="5dp"> <!-- to show what the parent is -->
<LinearLayout
android:background="#0000FF"
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="2" />
<LinearLayout
android:background="#00FF00"
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="1" />
</LinearLayout>
Solution 3:[3]
In order to split the ui into two equal parts you can use weightSum of 2 in the parent LinearLayout and assign layout_weight of 1 to each as shown below
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="2">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
</LinearLayout>
</LinearLayout>
Solution 4:[4]
To Split a layout to equal parts
Use Layout Weights. Keep in mind that it is important to set layout_width as 0dp on children to make it work as intended.
on parent layout:
- Set
weightSumof parent Layout as1(android:weightSum="1")
on the child layout:
- Set
layout_widthas0dp(android:layout_width="0dp") - Set
layout_weightas0.5[half of weight sum fr equal two] (android:layout_weight="0.5")
To split layout to three equal parts:
- parent:
weightSum3 - child:
layout_weight: 1
To split layout to four equal parts:
- parent:
weightSum1 - child:
layout_weight: 0.25
To split layout to n equal parts:
- parent:
weightSumn- child:
layout_weight: 1
Below is an example layout for splitting layout to two equal parts.
<LinearLayout
android:id="@+id/layout_top"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="1">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:orientation="vertical">
<TextView .. />
<EditText .../>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:orientation="vertical">
<TextView ../>
<EditText ../>
</LinearLayout>
</LinearLayout>
Solution 5:[5]
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:layout_marginTop="16dp"
android:textSize="18sp"
android:textStyle="bold"
android:padding="4dp"
android:textColor="#EA80FC"
android:fontFamily="sans-serif-medium"
android:text="@string/team_a"
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/team_a_score"
android:text="@string/_0"
android:textSize="56sp"
android:padding="4dp"
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/team_a_fouls"
android:text="@string/fouls"
android:padding="4dp"
android:textSize="26sp"
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:text="@string/_1_points"
android:layout_width="match_parent"
android:onClick="addOnePointTeamA"
android:textColor="#fff"
android:layout_margin="6dp"
android:layout_height="wrap_content" />
<Button
android:text="@string/_2_points"
android:textColor="#fff"
android:onClick="addTwoPointTeamA"
android:layout_width="match_parent"
android:layout_margin="6dp"
android:layout_height="wrap_content" />
<Button
android:text="@string/_3_points"
android:textColor="#fff"
android:onClick="addThreePointTeamA"
android:layout_margin="6dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:text="@string/_1_point_foul"
android:textColor="#fff"
android:layout_width="match_parent"
android:onClick="addOnePointFoulTeamA"
android:layout_margin="6dp"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:text="@string/team_b"
android:textColor="#EA80FC"
android:textStyle="bold"
android:padding="4dp"
android:layout_marginTop="16dp"
android:fontFamily="sans-serif-medium"
android:textSize="18sp"
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/team_b_score"
android:text="0"
android:padding="4dp"
android:textSize="56sp"
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/team_b_fouls"
android:text="Fouls"
android:padding="4dp"
android:textSize="26sp"
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:text="@string/_1_points"
android:textColor="#fff"
android:fontFamily="sans-serif-medium"
android:layout_width="match_parent"
android:onClick="addOnePointTeamB"
android:layout_margin="6dp"
android:layout_height="wrap_content" />
<Button
android:text="@string/_2_points"
android:layout_margin="6dp"
android:fontFamily="sans-serif-medium"
android:textColor="#fff"
android:onClick="addTwoPointTeamB"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:text="@string/_3_points"
android:fontFamily="sans-serif-medium"
android:textColor="#fff"
android:onClick="addThreePointTeamB"
android:layout_margin="6dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:text="@string/_1_point_foul"
android:textColor="#fff"
android:onClick="addOnePointFoulTeamB"
android:layout_width="match_parent"
android:layout_margin="6dp"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
<Button
android:text="@string/reset"
android:layout_marginBottom="25dp"
android:onClick="resetScore"
android:textColor="#fff"
android:fontFamily="sans-serif-medium"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
Solution 6:[6]
Use android:layout_weight and android:weightSum to divide layouts into equal parts. It is important to set layout_width as 0dp on children to make it work as intended.
On parent layout:
Set weightSum of parent Layout as 2 (android:weightSum="2")
On the child layout:
Set layout_width as 0dp (android:layout_width="0dp")
Set layout_weight as 1 [half of weight sum] (android:layout_weight="1")
<!-- Parent layout -->
<LinearLayout
android:id="@+id/layout_parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2">
<!-- Child layout -->
<LinearLayout
android:id="@+id/layout_child_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
...
</LinearLayout>
<LinearLayout
android:id="@+id/layout_child_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
...
</LinearLayout>
</LinearLayout>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | |
| Solution 2 | DPP |
| Solution 3 | Njeru Cyrus |
| Solution 4 | All Іѕ Vаиітy |
| Solution 5 | Fredmanzi |
| Solution 6 | Codemaker |
