Table text align right

Question

I am trying to create a table in Android. I got really far, but I have problems with the HeadLineSum and BodySum not horizontal floating to the far right. I made a Excel layout to show what I really wanted.

And this is what I have managed to create.

My Android Layout code:

    <!-- Breakfast -->
        <TableLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">

            <TableRow
                android:id="@+id/tableRowHeadlineBreakfast"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content">

                <ImageView
                    android:id="@+id/imageViewAddBreakfast"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:srcCompat="@drawable/ic_menu_add" />

                <TextView
                    android:id="@+id/textViewHeadlineBreakfast"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="80"
                    android:text="@string/breakfast"
                    android:textSize="18sp" />

                <TextView
                    android:id="@+id/textViewEnergyBreakfast"
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent"
                    android:layout_weight="10"
                    android:text="@string/energy"
                    android:textSize="18sp" />
            </TableRow>
        </TableLayout>
    <TableLayout
        android:id="@+id/tableLayoutBreakfastItems"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">

        <TableRow
            android:id="@+id/tableRowBreakfastItems"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/textViewBreakfastItemsName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="80"
                android:text="@string/name"
                android:textSize="18sp" />

            <TextView
                android:id="@+id/textViewBreakfastItemsEnergy"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_weight="10"
                android:text="@string/energy"
                android:textSize="18sp" />
        </TableRow>

        <TableRow
            android:id="@+id/tableRowBreakfastItemsSub"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/textViewBreakfastItemsSub"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/name" />

        </TableRow>

    </TableLayout>
    <!-- //Breakfast -->

Answer 1

Table Layout is too old technique to achieve this type of design you should use LinearLayout for same.

If you want still achieve this type of design using TableLayout Just Copy Paste my code

Here is my code

First create border.xml file in to drawable folder

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">

    <stroke android:width="1dp" android:color="#fff" />

</shape>

then copy paste this code main_activity.xml

    <?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:id="@+id/activity_table_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    android:orientation="vertical"
    tools:context="com.example.dhruv.demovolleyjson.TableLayout">


    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:layout_width="40dp"
                android:layout_height="40dp"

                android:background="@drawable/border"
                android:padding="5dp"
                android:src="@mipmap/ic_launcher" />

            <TextView
                android:id="@+id/textViewHeadlineBreakfast"
                android:layout_width="match_parent"

                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/border"
                android:gravity="center_vertical"
                android:padding="5dp"
                android:text="Breakfast"
                android:textColor="#fff"
                android:textSize="20sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"

                android:layout_gravity="right"
                android:background="@drawable/border"
                android:gravity="center"
                android:padding="5dp"
                android:text="Energy"
                android:textColor="#fff"
                android:textSize="20sp" />

        </TableRow>

    </TableLayout>

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="40dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="40dp"

                android:layout_weight="1"
                android:background="@drawable/border"
                android:gravity="center_vertical"
                android:padding="5dp"
                android:text="Name"
                android:textColor="#fff"
                android:textSize="20sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"

                android:layout_gravity="right"
                android:background="@drawable/border"
                android:gravity="center"
                android:padding="5dp"
                android:text="Energy"
                android:textColor="#fff"
                android:textSize="20sp" />
        </TableRow>
    </TableLayout>

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="40dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="40dp"
                android:background="@drawable/border"
                android:gravity="center_vertical"
                android:padding="5dp"
                android:text="Name"
                android:textColor="#fff"
                android:textSize="20sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="right"
                android:layout_weight="1"
                android:background="@drawable/border"
                android:gravity="center"
                android:padding="5dp"
                android:textColor="#fff"
                android:textSize="20sp" />
        </TableRow>
    </TableLayout>


</LinearLayout>