Align text left and right in Android

Question

I currently have a problem with aligning text(Left & Right) in Android... I want to make a receipt that looks like below format.

Nasi Putih RM 1.00

Nasi Tomato RM 1.20

Nasi Hujan Panas RM 1.50

Total Price : RM 3.70

Below is my code:

      if(nsPutih==true)
      {

          tvOutput1.setText("Nasi Putih RM 1.00");
          tvOutput1.setVisibility(View.VISIBLE);

          price+=1;
      }
      else
      {
          tvOutput1.setVisibility(View.GONE);
      }

      if (nsTomato==true)
      {
          tvOutput2.setText("Nasi Tomato RM 1.20");
          tvOutput2.setVisibility(View.VISIBLE);
          price+=1.2;
      }
      else
      {
          tvOutput2.setVisibility(View.GONE);
      }

      if(nsHjanPanas==true)
      {
          tvOutput3.setText("Nasi Hujan Panas RM 1.50");
          tvOutput3.setVisibility(View.VISIBLE);
          price+=1.5;
      }
      else
      {
          tvOutput3.setVisibility(View.GONE);
      }

I want the receipt to be like IN A TABLE which is very well aligned (In manner, that all those Nasi elements are aligned left and the price is right aligned.) Help me please!

Below is the code for xml.

 <?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"
android:padding="40dp" >

<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent" >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >



<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:layout_alignLeft="@+id/textB"
    android:layout_below="@+id/textB"
    android:textAppearance="?android:attr/textAppearanceMedium" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignRight="@+id/textView1"
    android:textAppearance="?android:attr/textAppearanceMedium" />

<TextView
    android:id="@+id/textView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/textView2"
    android:textAppearance="?android:attr/textAppearanceMedium" />



   </LinearLayout>


   </ScrollView></RelativeLayout>

Answer 1

You XML, you need to add two textview in a row, one for the Nasi elements and another for the price elements.

Try something like this,

<?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"
    android:padding="40dp" >

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:orientation="horizontal"
                android:weightSum="2" >

                <TextView
                    android:id="@+id/textView1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:textAppearance="?android:attr/textAppearanceMedium" />

                <TextView
                    android:id="@+id/textView2"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:textAppearance="?android:attr/textAppearanceMedium" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:orientation="horizontal"
                android:weightSum="2" >

                <TextView
                    android:id="@+id/textView3"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:textAppearance="?android:attr/textAppearanceMedium" />

                <TextView
                    android:id="@+id/textView4"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:textAppearance="?android:attr/textAppearanceMedium" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:orientation="horizontal"
                android:weightSum="2" >

                <TextView
                    android:id="@+id/textView5"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:textAppearance="?android:attr/textAppearanceMedium" />

                <TextView
                    android:id="@+id/textView6"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:textAppearance="?android:attr/textAppearanceMedium" />
            </LinearLayout>
        </LinearLayout>
    </ScrollView>

</RelativeLayout>

And change your java code to match the names of the widgets set in the XML. Something like below, just watch-out and make necessary changes wherever required.

if(nsPutih==true)
      {

          tvOutput1.setText("Nasi Putih");
          tvOutput2.setText("RM 1.00");
          tvOutput1.setVisibility(View.VISIBLE);
          tvOutput2.setVisibility(View.VISIBLE);

          price+=1;
      }
      else
      {
          tvOutput1.setVisibility(View.GONE);
          tvOutput2.setVisibility(View.GONE);
      }

      if (nsTomato==true)
      {
          tvOutput3.setText("Nasi Tomato");
          tvOutput3.setVisibility(View.VISIBLE);
          tvOutput4.setText("RM 1.20");
          tvOutput4.setVisibility(View.VISIBLE);

          price+=1.2;
      }
      else
      {
          tvOutput3.setVisibility(View.GONE);
          tvOutput4.setVisibility(View.GONE);
      }

      if(nsHjanPanas==true)
      {
          tvOutput5.setText("Nasi Hujan Panas");
          tvOutput5.setVisibility(View.VISIBLE);
          tvOutput6.setText("RM 1.50");
          tvOutput6.setVisibility(View.VISIBLE)

          price+=1.5;
      }
      else
      {
          tvOutput5.setVisibility(View.GONE);
          tvOutput6.setVisibility(View.GONE);
      }

I hope it helps. Still have doubts with the code, please comment below.

Answer 2

codePG's answer won't align the items on the right. This will:

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

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="end"/>
</LinearLayout>