How to layout elements side by side on a Linear Layout and apply proper spacing and alignment

Question

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 inside a TableView but I cannot apply proper alignment to them. e.g. the TextView1 must be align left and its partner TextView2 is align right Even the Button wont align Right even if I use

android:layout_alignParentRight="true"

I am trying to create a receipt activity where the caption "SubTotal", "tax","Total" are aligned to the left and their values aligned to the right Below is my xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent"
    android:layout_height="match_parent"

    android:paddingTop="20dp"
    android:paddingLeft="20dp"
    android:paddingRight="20dp"
    android:paddingBottom="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:showIn="@layout/app_bar_main"
    tools:context=".MainActivity"
    android:elevation=".5dp"
    android:focusable="true"
    android:layout_centerHorizontal="true">
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_centerHorizontal="true"
    android:orientation="vertical"
    android:gravity="bottom">

    <TextView

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="SAN AGUSTIN MUSEUM"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/textViewTicketName"/>
    <TextView

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingBottom="20dp"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="(Comes with Audio Guide)"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/textViewTicketDesc"/>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/border"
        android:orientation="vertical"
        android:gravity="bottom">



        <TableRow
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">

        <TextView
            android:id="@+id/TblText1"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:text="Subtotal:"/>

        <TextView
            android:id="@+id/TblText11"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:text="$5.00"
            android:layout_alignParentRight="true"/>
        </TableRow>

        <TextView

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"

        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Subtotal $5.00"
        android:paddingLeft="0dp"
        android:layout_below="@+id/textViewTicketName"

        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/textSubtotal"/>




        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="Tax $0.50"
            android:paddingLeft="0dp"
            android:layout_below="@+id/textViewTicketName"

            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/textTax"/>

        <View android:background="#000" android:layout_width="match_parent" android:layout_height="1px"/>

        <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"

        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Total $5.50"
        android:paddingLeft="0dp"
        android:layout_below="@+id/textTotal"

        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/textViewTotalAmount"/>

    </LinearLayout>

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=" PURCHASE "
        android:id="@+id/hiaButton"
        android:onClick="hiaGetTicket"
        android:paddingTop="8dp"
        android:paddingBottom="8dp"
        android:layout_marginTop="10dp"
        android:layout_alignParentRight="true"

        android:textSize="18sp"
        android:textColor="@color/colorWhite"
        android:alpha="20"

        android:background="@drawable/buttonround"/>

</LinearLayout>
</ScrollView>

This is what I am aiming for. In the xml there are 2 subtotal textfields because I was trying out the TablView. It must be side by side but the caption on the right side is justified right while the values on the right side is justified right also

So far this is whats happening using the xml below

Answer 1

Use layout_weight to create a space between two views.

<!-- Subtotal row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="80dp"
orientation:"horizontal">

  <!--txt-->
  <TextView
  android: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 -->
  <View 
  android:layout_width="0dp"
  android:layout_weight="1"
  android:layout_height="1dp"/>

  <!-- price -->
  <TextView
  android: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

<LinearLayout
android:layout_width="match_parent"
android:layout_height="80dp"
orientation:"horizontal">

  <!--txt-->
  <TextView
  android:layout_width="120dp"
  android:layout_height="wrap_content"
  android:text="Subtotal"
  android:gravity="right"
  />

  <View 
  android: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>