RatingBar trimmed on the last fifth star

Question

I do not understand why my fifth star of the rating is cut off and why is there such a gap between it and the textView?

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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:elevation="1dp"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/ivPhoto" android:contentDescription="@string/no" android:minWidth="130dp" android:minHeight="130dp" android:maxHeight="130dp" android:maxWidth="130dp" android:padding="10dp" android:layout_below="@+id/myToolBar" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:paddingLeft="20dp" android:paddingBottom="10dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceMedium" android:id="@+id/tvName" android:textStyle="bold" android:paddingTop="5dp" android:layout_alignParentTop="true" android:layout_toRightOf="@+id/ivPhoto" android:layout_toEndOf="@+id/ivPhoto" android:textColor="@color/primary_text" android:text="Абракадабров Абракадабр Абракадабрович" android:paddingLeft="10dp" /> <RatingBar style="@style/Widget.AppCompat.RatingBar.Small" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/ratingBar" android:numStars="5" android:rating="0" android:stepSize="0.5" android:layout_below="@+id/tvName" android:layout_toRightOf="@+id/ivPhoto" android:layout_marginLeft="10dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/tvAdditional" android:textColor="#0d580d" android:textStyle="bold" android:layout_below="@+id/ratingBar" android:layout_alignLeft="@+id/ratingBar" android:layout_alignStart="@+id/ratingBar" android:paddingTop="5dp" tools:text="Дополнительно" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/tvNumberSign" android:text="№ " android:fontFamily="sans-serif" android:textSize="18sp" android:textStyle="normal|bold" android:layout_below="@+id/tvAdditional" android:layout_alignLeft="@+id/tvAdditional" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="New Text" android:id="@+id/tvMid" android:fontFamily="sans-serif" android:textSize="18sp" android:textStyle="normal|bold" android:layout_alignBottom="@+id/tvNumberSign" android:layout_toRightOf="@+id/tvNumberSign" android:layout_toEndOf="@+id/tvNumberSign" /> </RelativeLayout>

Accepted Answer · 2016-11-28T15:33:36

For some reason, padding spoils everything. You must use layout_marginLeft

 <RatingBar style="@style/Widget.AppCompat.RatingBar.Small" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/ratingBar" android:numStars="5" android:rating="0" android:stepSize="0.5" android:layout_marginLeft="10dp" />

Increased indentation may be due to the markup curve. You can try to check on the simplest markup, in order to understand whether the markup is business, or something else:

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceMedium" android:id="@+id/tvName" android:textStyle="bold" android:textColor="@color/primary_text_color" android:text="Абракадабров Абракадабр Абракадабрович" /> <RatingBar style="@style/Widget.AppCompat.RatingBar.Small" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/ratingBar" android:numStars="5" android:rating="0" android:stepSize="0.5" /> </LinearLayout>

If it does not help, then you need to check that your Widget.AppCompat.RatingBar.Small style is not overridden. And as a last resort, you can do android:layout_height="16dp" for RatingBar . But it is somehow crooked.

In any case, I strongly recommend using RelativeLayout only in extreme cases and very carefully follow the markup. In your case, some kind of confusion with layout_alignLeft and so on. In this case, you can use 2 nested LinearLayout and greatly simplify the reading of the markup, and hence the number of possible errors.

You have some kind of container in which it is all folded, but it is not clear which one.
And there is layout_toRightOf, which is not clear with what aligns.

RatingBar trimmed on the last fifth star

1 answer 1

More articles: