Android: spacing and TextView wrapping issue

Question

I want to have a layout like this:

And this is my code:

 <LinearLayout
        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:text="I. ISI PELATIHAN"/>


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

            <TextView
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="1. "
                />

            <TextView
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text=" Kejelasan tujuan dan manfaat pelatihan"
               />

            <RatingBar
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                style="?android:attr/ratingBarStyleSmall"
                android:numStars="5"
                android:stepSize="1"
                android:layout_gravity="right"/>
        </LinearLayout>

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

            <TextView
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="2. "
                />

            <TextView
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text=" Penampilan bahan/materi pelatihan"
                />

            <RatingBar
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                style="?android:attr/ratingBarStyleSmall"
                android:numStars="5"
                android:stepSize="1"
                android:layout_gravity="right"/>
        </LinearLayout>

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

            <TextView
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="3. "
                />

            <TextView
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text=" Kelengkapan bahan/materi pilihan"
                />

            <RatingBar
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                style="?android:attr/ratingBarStyleSmall"
                android:numStars="5"
                android:stepSize="1"
                android:layout_gravity="right"/>
        </LinearLayout>

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

            <TextView
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="4. "
                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text=" Metode yang digunakan membantu pemahaman isi program"
                />

            <RatingBar
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                style="?android:attr/ratingBarStyleSmall"
                android:numStars="5"
                android:stepSize="1"
                android:layout_gravity="right"/>
        </LinearLayout>

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

            <TextView
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="5. "
                />

            <TextView
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text=" Saya mengerti/memahami program/materi yang diberikan"
                />

            <RatingBar
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                style="?android:attr/ratingBarStyleSmall"
                android:numStars="5"
                android:stepSize="1"
                android:layout_gravity="right"/>
        </LinearLayout>

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

            <TextView
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="6. "
                />

            <TextView
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text=" Saya belajar sesuatu yang baru dari materi yang diberikan"
                />

            <RatingBar
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                style="?android:attr/ratingBarStyleSmall"
                android:numStars="5"
                android:stepSize="1"
                android:layout_gravity="right"/>
        </LinearLayout>

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

            <TextView
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="7. "
                />

            <TextView
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text=" Efisiensi penggunaan waktu"
                />

            <RatingBar
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                style="?android:attr/ratingBarStyleSmall"
                android:numStars="5"
                android:stepSize="1"
                android:layout_gravity="right"/>
        </LinearLayout>


    </LinearLayout>

which result is:

What I want to know is:

1. How to add padding before the line number and after the RatingBar?
2. I use wrap_content on the text. Seems OK for shorter texts, but for longer texts, it's messed up. How to set all the texts to use the same length, and if the text length exceed a certain value, it will be wrapped properly like shown by 1st pic?

Answer 1

Use Constraint layout & separate rating bars with help of guildLine

You can set all views within one layout..

Use latest beta version of dependency

compile 'com.android.support.constraint:constraint-layout:1.1.0-beta5'

Here sample tutorial

https://constraintlayout.com/basics/

Official tutorial

https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html

Here sample code for ConstraintLayout with guideLine

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp"
tools:context="android.itomerbu.layoutdemo.MainActivity">

<android.support.constraint.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.44"/>

<TextView
    android:id="@+id/btnThird"
    android:layout_width="0dp"
    app:layout_constraintHorizontal_weight="1"
    android:layout_height="wrap_content"
    android:text="@string/btnThird"
    app:layout_constraintLeft_toLeftOf="parent"
    android:layout_marginBottom="8dp"
    app:layout_constraintRight_toLeftOf="@+id/btnTwoThirds"
    app:layout_constraintBottom_toTopOf="@+id/guideline"
    android:layout_marginStart="8dp"
    android:layout_marginLeft="8dp"/>

<RatingBar
    android:id="@+id/btnTwoThirds"
    app:layout_constraintHorizontal_weight="2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="@string/btnTwoThirds"
    app:layout_constraintBottom_toBottomOf="@+id/btnThird"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintLeft_toRightOf="@+id/btnThird"/>
  </android.support.constraint.ConstraintLayout>

Answer 2

You can use RelativeLayout to achieve what you want. Insert this xml layout example in your xml layout file. You can change the id as you need and play around with the padding and margins to fit you needs. Add as many RelativeLayout groups as you need for you Activity .

Please let me know if you have any issues or questions.

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="5dp"
        >
        <TextView
            android:id="@+id/tvFirst"
            android:layout_width="25dp"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:paddingEnd="4dp"
            android:paddingStart="4dp"
            android:text="1"
            android:textAlignment="center"/>
        <TextView
            android:id="@+id/tvFirstTitle"
            android:text="@string/SomeTextString"
            android:layout_toEndOf="@id/tvFirst"
            android:layout_toStartOf="@id/rBarFirst"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            />

        <RatingBar
            android:id="@+id/rBarFirst"
            style="@style/Widget.AppCompat.RatingBar.Small"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:numStars="5"
            android:stepSize="1"
            android:layout_marginEnd="10dp"
            />
    </RelativeLayout>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="5dp"
        >
        <TextView
            android:id="@+id/tvSecond"
            android:layout_width="25dp"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:paddingEnd="4dp"
            android:paddingStart="4dp"
            android:text="2"
            android:textAlignment="center"/>
        <TextView
            android:id="@+id/tvSecondTitle"
            android:text="@string/SomeTextString"
            android:layout_toEndOf="@id/tvSecond"
            android:layout_toStartOf="@id/rBarSecond"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            />

        <RatingBar
            android:id="@+id/rBarSecond"
            style="@style/Widget.AppCompat.RatingBar.Small"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:numStars="5"
            android:stepSize="1"
            android:layout_marginEnd="10dp"
            />
    </RelativeLayout>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="5dp"
        >
        <TextView
            android:id="@+id/tvThird"
            android:layout_width="25dp"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:paddingEnd="4dp"
            android:paddingStart="4dp"
            android:text="3"
            android:textAlignment="center"/>
        <TextView
            android:id="@+id/tvThirdTitle"
            android:text="@string/SomeTextString"
            android:layout_toEndOf="@id/tvThird"
            android:layout_toStartOf="@id/rBarThird"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            />

        <RatingBar
            android:id="@+id/rBarThird"
            style="@style/Widget.AppCompat.RatingBar.Small"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:numStars="5"
            android:stepSize="1"
            android:layout_marginEnd="10dp"
            />
    </RelativeLayout>
</LinearLayout>

Please Note this:

I just noticed that you are using: style="?android:attr/ratingBarStyleSmall" You may need to change the style of the RatingBar I am using in my example to be compatible with your app!