How To Layout Elements Side By Side On A Linear Layout And Apply Proper Spacing And Alignment

I am having problem with layout of a Linear layout with elements that are side by side together. I can make them go side by side within a Linear layout by putting the elements insi

Solution 1:

Use layout_weight to create a space between two views.

<!-- Subtotal row --><LinearLayoutandroid:layout_width="match_parent"android:layout_height="80dp"orientation:"horizontal"><!--txt--><TextViewandroid:layout_width="120dp"android:layout_height="wrap_content"android:text="Subtotal"android:gravity="right"
  /><!-- empty space that will fill "subtotal" and "price", using layout_weight --><Viewandroid:layout_width="0dp"android:layout_weight="1"android:layout_height="1dp"/><!-- price --><TextViewandroid:layout_width="20dp"android:layout_height="wrap_content"android:text="Subtotal"
  /></LinearLayout>

---

layout_weight allows us to organize child views based on their "weight"s. Look at those examples:

1. Example

<LinearLayout
android:layout_width="match_parent"android:layout_height="match_parent"orientation:"horizontal"android:weightSum="300" --> total sum of child's weight
>

<Button 
      android:layout_width="0dp"
      android:layout_weight="100" -> %33
      android:layout_height="1dp"
      android:text="Button1"
/>

<Button 
      android:layout_width="0dp"
      android:layout_weight="100" -> %33
      android:layout_height="1dp"
      android:text="Button2"
/>

<Button 
      android:layout_width="0dp" 
      android:layout_weight="100" -> %33
      android:layout_height="1dp"
      android:text="Button3"
/>

</LinearLayout>

Preview:

____Button1________Button2________Button3____ (equal widths, and there will be %1 space)

2. Example

<LinearLayout
android:layout_width="match_parent"android:layout_height="match_parent"orientation:"horizontal"android:weightSum="80" --> total sum of child's weight
>

<Button 
      android:layout_width="0dp"
      android:layout_weight="40" -> %50
      android:layout_height="1dp"
      android:text="Button1"
/>

<Button 
      android:layout_width="0dp"
      android:layout_weight="20" -> %25
      android:layout_height="1dp"
      android:text="Button2"
/>

<Button 
      android:layout_width="0dp" 
      android:layout_weight="20" -> %25
      android:layout_height="1dp"
      android:text="Button3"
/>

</LinearLayout>

Preview:

________Button1____________Button2________Button3____ (first one is wider)

3. Example, your case

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="80dp"orientation:"horizontal"><!--txt--><TextViewandroid:layout_width="120dp"android:layout_height="wrap_content"android:text="Subtotal"android:gravity="right"
  /><Viewandroid:layout_width="0dp"android:layout_weight="777"--> this will fill empty space, we didn't specify weightSum, so it thinks weightSum is 777.
  android:layout_height="5dp"
  android:background="#ff0000"
  />

</LinearLayout>

Solution 2:

With Relative Layout you can do it by this way,

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/main_layout"android:layout_width="match_parent"android:layout_height="match_parent" ><TextViewandroid:id="@+id/firsttext"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentLeft="true"android:text="@string/hello_world" /><TextViewandroid:id="@+id/secondtext"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentRight="true"android:text="@string/hello_world" /></RelativeLayout>

And if you want to do with LinearLayout you need to use weightsum and weight for textview.