Hi I am very new for android and in my app I want to set Textviews like my below image and for this I wrote the code below, then all Textviews widths become equal.
But I want to set Textviews like my below image.
Please help me.
code:-
<?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Color"/>
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text=":"/>
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="#android:color/holo_red_dark"
/>
</LinearLayout>
</LinearLayout>
You need to pass weightSum to Root layout.
<?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="5">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Color"/>
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text=":"/>
<TextView
android:layout_width="0dp"
android:layout_weight="3"
android:layout_height="wrap_content"
android:background="#android:color/holo_red_dark"
/>
</LinearLayout>
</LinearLayout>
A 2:1:7 ratio might work better
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Color"/>
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text=":"/>
<TextView
android:layout_width="0dp"
android:layout_weight="7"
android:layout_height="wrap_content"
android:background="#android:color/holo_red_dark"
/>
Related
Following the Udacity Android for Beginners course, I want to add an audio icon button to a list_item view. Now the list_item.xml has a parent Horizontal Linear Layout and a nested Vertical Linear Layout. The course instructor added the audio icon by changing to a Relative Layout but i want to see how I could do this with a Linear Layout.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/tan_background"
android:minHeight="#dimen/list_item_height"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView"
android:layout_width="#dimen/list_item_height"
android:layout_height="#dimen/list_item_height"/>
<LinearLayout
android:id="#+id/text_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="16dp">
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="bottom"
android:textAppearance="?android:textAppearanceMedium"
android:textColor="#android:color/white"
android:textStyle="bold"
tools:text=""/>
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="top"
android:textColor="#android:color/white"
tools:text=""/>
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/baseline_play_arrow_white_24"/>
</LinearLayout>
My problem now is that when i add any element after the nested Vertical Linear Layout, nothing will show. I'm trying different things but I just can't understand. All i can think of is that this is the cause:
android:layout_width:"match_parent"
Please let me know how i can add the audio icon to the right and in the center while keeping this a LinearLayout.
This is the output i am trying to achieve
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:background="#color/apptool"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="match_parent"
android:src="#android:drawable/btn_star"
android:tint="#color/black"
android:background="#ebed54"
android:layout_weight=".1"/>
<LinearLayout
android:id="#+id/text_container"
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/colorPrimary"
android:layout_weight=".3"
android:paddingLeft="16dp">
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="bottom"
android:textAppearance="?android:textAppearanceMedium"
android:textColor="#android:color/white"
android:textStyle="bold"
tools:text="sdfdsfdsf"/>
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="top"
android:textColor="#android:color/white"
tools:text="sdfdsfdsf"/>
</LinearLayout>
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".1"
android:background="#color/colorPrimary"
android:src="#android:drawable/ic_media_play"/>
</LinearLayout>
</LinearLayout>
output
You make width of linear layout match_parent so it consumes all remain place so you need to first change match_parent to wrap_content like below :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/tan_background"
android:minHeight="#dimen/list_item_height"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView"
android:layout_width="#dimen/list_item_height"
android:layout_height="#dimen/list_item_height"/>
<LinearLayout
android:id="#+id/text_container"
android:layout_width="wrap_conten"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="16dp">
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="bottom"
android:textAppearance="?android:textAppearanceMedium"
android:textColor="#android:color/white"
android:textStyle="bold"
tools:text=""/>
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="top"
android:textColor="#android:color/white"
tools:text=""/>
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/baseline_play_arrow_white_24"/>
</LinearLayout>
I want to build the following screen which contains app logo, success/failure icon image, information message and ok button.
Here this the code. I am using linear layout to achieve this.
<LinearLayout
android:id="#+id/statusLinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="#android:color/white"
android:weightSum="2"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
android:id="#+id/statusTopRelativeLayout"
android:background="#android:color/holo_blue_bright"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:layout_weight="1">
<ImageView
android:id="#+id/client_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/no_image_description"
android:src="#drawable/client_logo"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/statusBottomRelativeLayout"
android:background="#android:color/holo_blue_light"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<TextView
android:id="#+id/statusText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"
android:text="#string/statusText"
android:textSize="50sp"/>
<Button
android:id="#+id/btnOk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/statusText"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"
android:clickable="true"
android:focusable="true"
android:onClick="goToHomeScreen"
android:paddingBottom="15dp"
android:paddingTop="15dp"
android:text="#string/ok"
android:textColor="#ffffff"
android:textSize="40sp"/>
</RelativeLayout>
How to place success/failure icon image on top of the two layouts?
You can use constraint to make it easy
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.constraint.Guideline
android:id="#+id/center"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/center"
android:background="#ffffff"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="#id/center"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#00ffff"/>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#ff8801"
app:layout_constraintTop_toTopOf="#id/center"
app:layout_constraintBottom_toBottomOf="#id/center"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</android.support.constraint.ConstraintLayout>
Output:
Try this
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/nilu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/colorPrimary"
android:orientation="vertical"
android:paddingBottom="30dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="NILU" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="NILU" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="NILU" />
</LinearLayout>
<LinearLayout
android:id="#+id/nilu2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/nilu"
android:layout_weight="1"
android:background="#color/colorAccent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="NILU" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="NILU" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="NILU" />
</LinearLayout>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#mipmap/ic_launcher_round" />
</RelativeLayout>
</RelativeLayout>
OUTPUT
Parent RelativeLayout
add child LinearLayout as fillParent and assign weightsum 2. add two
layouts with 1 weight each. (add individual implementation for each
layout according to your requirements.)
add second child in relative
layout as imageview/button for that good sign and set it center in
parent.
This will fix your problem
I have an ImageView aligned to the right of a TextView. When the text is too long, it resizes the image... How can I keep the same size for the image and force the TextView on a new line?
Short text, good size:
Long text, bad size:
Here is the XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:background="#color/md_white_1000"
xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
android:id="#+id/btn_container_1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="#color/blue"
android:layout_weight=".50"
android:layout_marginRight="1dp">
<Button
android:id="#+id/btn_1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0"
android:onClick="searchClicked"/>
<TextView
android:id="#+id/btn_text_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textColor="#color/md_white_1000"
android:paddingEnd="10dp"
android:paddingRight="10dp"
android:text="BTN1" />
<ImageView
android:id="#+id/btn_image_1"
android:layout_width="28dp"
android:layout_height="28dp"
android:layout_centerVertical="true"
android:layout_toEndOf="#id/btn_text_1"
android:layout_toRightOf="#id/btn_text_1"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:src="#drawable/draw" />
</RelativeLayout>
</LinearLayout>
You can add a nested linear layout to do so like the following:
<RelativeLayout
android:id="#+id/btn_container_1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="#color/blue"
android:layout_weight=".50"
android:layout_marginRight="1dp">
<Button
android:id="#+id/btn_1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0"
android:onClick="searchClicked"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
>
<TextView
android:id="#+id/btn_text_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center"
android:textColor="#color/md_white_1000"
android:paddingEnd="10dp"
android:paddingRight="10dp"
android:text="BTN1" />
<ImageView
android:id="#+id/btn_image_1"
android:layout_width="28dp"
android:layout_height="28dp"
android:layout_gravity="center"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:src="#drawable/draw" />
</LinearLayout>
</RelativeLayout>
I think you should use Linear layout with horizontal orientation instead of relative layout and set weight for both textview and imageview.
Do not hard code any attribute it will create issue at later point if screen size changes try this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:weightSum="1"
android:layout_marginTop="100dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<Button
android:id="#+id/btn_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:alpha="0"
android:text="button"
android:layout_weight="0.2"
android:onClick="searchClicked"/>
<TextView
android:id="#+id/btn_text_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColor="#color/colorPrimary"
android:layout_weight="0.4"
android:text="BTN1" />
<ImageView
android:id="#+id/btn_image_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.4"
android:src="#drawable/state" />
</LinearLayout>
Can you try this, if it is not working send me you screen how you want to design.I will help you.
<?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:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="est.androidapplication.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:background="#00f"
android:weightSum="1">
<TextView
android:id="#+id/btn_text_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:layout_gravity="center"
android:gravity="center"
android:textColor="#ff0044"
android:paddingEnd="10dp"
android:paddingRight="10dp"
android:text="BTN1BTN1BTN1BTN1BTN1BTN1BTN1BTN1BTN1BTN1BTN1BTN1BTN1BTN1BTN1BTN1BTN1BTN1BTN1BTN1BTN1BTN1BTN1BTN1BTN1BTN1BTN1BTN1BTN1BTN1BTN1BTN1BTN1BTN1BTN1BTN1" />
<ImageView
android:id="#+id/btn_image_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:layout_gravity="center"
android:gravity="center"
android:src="#mipmap/ic_launcher" />
</LinearLayout>
</RelativeLayout>
use weight of textview in linear layout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_margin="10dp"
android:layout_centerVertical="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="BTN1"/>
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginLeft="10dp"
android:background="#344"/>
</LinearLayout>
</RelativeLayout>
Running the below code in ANDROID studio is not giving me the desired result: Please help? I would like the 3 TextViews to be equally spaced out vertically in the screen of the device.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="Debanshu"
android:textSize="24sp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="Chakraborty"
android:textSize="24sp"
android:layout_weight="1" />
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="Voltas"
android:textSize="24sp"
android:layout_weight="1"/>
</LinearLayout>
I believe you want this (added gravity just for the fun of it):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="Debanshu"
android:gravity="center"
android:textSize="24sp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="Chakraborty"
android:textSize="24sp"
android:gravity="center"
android:layout_weight="1" />
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="Voltas"
android:textSize="24sp"
android:gravity="center"
android:layout_weight="1"/>
</LinearLayout>
As you LinearLayout height equal to wrap_content its working but as height wrapping view you are not getting desired view
try below making LinearLayout height equal to match_parent
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="Debanshu"
android:textSize="24sp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="Chakraborty"
android:textSize="24sp"
android:layout_weight="1" />
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="Voltas"
android:textSize="24sp"
android:layout_weight="1"/>
</LinearLayout>
you can try this its work for me
<?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="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Debanshu"
android:background="#ffa905"
android:textSize="24sp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Chakraborty"
android:textSize="24sp"
android:background="#ffffff"
android:layout_weight="1" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Voltas"
android:textSize="24sp"
android:background="#008000"
android:layout_weight="1"/>
enjoy!!!
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.
Use the layout_weight attribute. The layout will roughly look like this:
<LinearLayout android:orientation="horizontal"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<LinearLayout
android:layout_weight="1"
android:layout_height="fill_parent"
android:layout_width="0dp"/>
<LinearLayout
android:layout_weight="1"
android:layout_height="fill_parent"
android:layout_width="0dp"/>
</LinearLayout>
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
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>
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>
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 weightSum of parent Layout as 1 (android:weightSum="1")
on the child layout:
Set layout_width as 0dp (android:layout_width="0dp")
Set layout_weight as 0.5 [half of weight sum fr equal two] (android:layout_weight="0.5")
To split layout to three equal parts:
parent: weightSum 3
child: layout_weight: 1
To split layout to four equal parts:
parent: weightSum 1
child: layout_weight: 0.25
To split layout to n equal parts:
parent: weightSum n
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>
<?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>