Inconsistent RatingBar inside TableLayout

Question

I am having trouble fixing a rating bar inside my table layout. Basically what I want is to have a 5 stared rating bar spanning exactly its width irrespective of other rows alignment. But either I am getting more or less stars in the display.

Below I am explaining visually what is happening.

Trial#1: If I don't use any layout_span and linearlayout in RatingBar row, RatingBar get aligned with 2nd column which is causing 4th column to truncate a lot

Trial#2: If I use layout_span=2 or 3 for rating bar, it again get aligned with 3rd or 4th column respectively. Now whenever that happens, number of stars inside ratingBar increased

Trial#3: If I put a linearlayout with layout_span=3 and put ratingBar inside it (current code), it does not show full width even though my layout_width is wrap_cotent.

It seems like RatingBar does not have a width to force the layout to stretch beyond other rows span.

Can anybody please advice how to solve this?

IDEAL SCENARIO: Photoshopped, so some color distortion happened :)

CODE:

<ScrollView 
    xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:background="@color/bg"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        tools:context=".AddEntry" >

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
        <TableRow
            android:padding="2.5dp"
            android:background="@color/col1"
            android:gravity="center_vertical"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="test1" />

            <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:hint="test2" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="15dp"
                android:text="test3" />

            <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:hint="test4" />

        </TableRow>

        <TableRow
            android:padding="2.5dp"
            android:background="@color/col2"
            android:gravity="center_vertical"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="test5" />

            <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_span="3"
                android:hint="test6" />

        </TableRow>

        <TableRow
            android:padding="2.5dp"
            android:background="@color/col1"
            android:gravity="center_vertical"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="test7" />

            <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_span="2"
                android:layout_marginLeft="5dp"
                android:hint="test8" />

            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:src="@drawable/get_google" />

        </TableRow>

        <TableRow
            android:paddingLeft="2.5dp"
            android:background="@color/col2"
            android:gravity="center_vertical"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="test9" />
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_span="3" >
                <RatingBar
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="5dp"
                    android:numStars="5"
                    android:stepSize="1"
                    android:rating="1" />

                <TextView
                    android:layout_width="0dp"
                    android:layout_weight="1"
                    android:layout_height="wrap_content"
                    android:text="" />
            </LinearLayout>
        </TableRow>
    </TableLayout>
</ScrollView>

Answer 1

Its better to use small rating bars

 style="?android:attr/ratingBarStyleSmall"

Also see following links

How to make RatingBar to show five stars

RatingBar displays incorrectly in Android when on same TableRow as TextView