Android RatingBar Screen Scaling Issue

Question

I'm wondering would someone be able to help me please. I'm having a scaling issue when working with a custom RatingBar when displaying on different screen densities. I've set up a quick sample project to explain my issue. This is just a very basic project that is just concerned with large screen sizes for the moment, regardless of densities .

As you can see from the image, I have selectors to be used for the RatingBar and then I have a default and full image for two seperate RatingBars in each of the large density drawable folders (all images the same size for the moment). In order to show this custom RatingBar. I have tried to get these RatingBars to display correctly and have tried two seperate ways, as outlined below. The first way I have tried to specify the width and height of the RatingBars in the layout file, as shown below:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <RatingBar 
        android:id="@+id/rb_test_1"           
        android:numStars="1"
        android:rating="0.5"
        android:stepSize="0.01"
        android:isIndicator="true"
        android:layout_width="150dp"
        android:layout_height="111dp"
        android:layout_gravity="bottom"
        android:gravity="bottom"                                                          
        android:progressDrawable="@drawable/selector_rb_test_1" />

    <RatingBar 
        android:id="@+id/rb_test_2"           
        android:numStars="1"
        android:rating="0.5"
        android:stepSize="0.01"
        android:isIndicator="true"
        android:layout_width="200dp"
        android:layout_height="154dp"
        android:layout_gravity="bottom"
        android:gravity="bottom"                                                          
        android:progressDrawable="@drawable/selector_rb_test_2" />

</LinearLayout>

When looking at the GUI Graphical Layout, this produces the following output displayed on a basic 10.1 screen size vs Nexus 10. It seems to be duplicating and stretcching the image.

Now when I try the second way, which is more like the way I would like to do it (by not having to specify the exact size of each of the RatingBars, by just setting the layout width and height to wrap, the following is the code:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <RatingBar 
        android:id="@+id/rb_test_1"           
        android:numStars="1"
        android:rating="0.5"
        android:stepSize="0.01"
        android:isIndicator="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:gravity="bottom"                                                          
        android:progressDrawable="@drawable/selector_rb_test_1" />

    <RatingBar 
        android:id="@+id/rb_test_2"           
        android:numStars="1"
        android:rating="0.5"
        android:stepSize="0.01"
        android:isIndicator="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:gravity="bottom"                                                          
        android:progressDrawable="@drawable/selector_rb_test_2" />

</LinearLayout>

When looking at the GUI Graphical Layout, this produces the following output displayed on a basic 10.1 screen size vs Nexus 10. This cuts off the bottom of the image for the RatingBar.

All I'm looking to be able to do is display the multiple RatingBars without a problem regardless of the density of the screen. Can anyone help me figure out why it's displaying differently on the Nexus10 screen and how to fix it? I have been stuck on this for a while now and would be very greatful if anyone would be able to shed some light. Thank you very much in advance.

Answer 1

Following @Xavers comments above, this problem was due to the scaling of the images not being correct. The solution to this is to follow the scale ratios, as presented in the following answer - https://stackoverflow.com/a/11581786/1634369

ldpi | mdpi | tvdpi | hdpi | xhdpi | xxhdpi | xxxhdpi
0.75 | 1    | 1.33  | 1.5  | 2     | 3      | 4

Thanks for your help @Xaver