Android Screen-size and Screen-density Image Selection

Question

I am having problems when trying to use multiple horizontal images on different size devices. I have 7 separate Ratingbars, each using a different custom image. I have scaled all the images and placed them into their respective dpi drawable folders. The problem I'm having is that on the xlarge mdpi screen (top left of the image below), they fit perfectly, but when I'm viewing them on a smaller screens, the entire 7 ratingbars are too wide to fit within the bounds of the device, as shown below:

I have followed the correct scaling for the images (based on the original base size of the mdpi) as stated 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

Based on the scaling above, the following are all my drawable folders, showing the dimensions of each of the images within their respective dpi folders (all based off the mdpi ratio):

Then in order to display each of the Ratingbars, I set up a selector for each rating bar which will use a default grey image and a coloured image based on the rating value. The following shows the code I use to display each of the Ratingbars using the layout. NOTE: I have based the width and height from the base mdpi values.

<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:numStars="1"
        android:rating="1"
        android:stepSize="0.01"
        android:isIndicator="true"
        android:layout_width="75dp"
        android:layout_height="77dp"
        android:layout_gravity="bottom"
        android:gravity="bottom"                                                          
        android:progressDrawable="@drawable/selector_a" />

    <RatingBar            
        android:numStars="1"
        android:rating="0.5"
        android:stepSize="0.01"
        android:isIndicator="true"
        android:layout_width="73dp"
        android:layout_height="114dp"
        android:layout_gravity="bottom"
        android:gravity="bottom"                                                          
        android:progressDrawable="@drawable/selector_b" />

    <RatingBar            
        android:numStars="1"
        android:rating="0.5"
        android:stepSize="0.01"
        android:isIndicator="true"
        android:layout_width="63dp"
        android:layout_height="132dp"
        android:layout_gravity="bottom"
        android:gravity="bottom"                                                          
        android:progressDrawable="@drawable/selector_c" />

    <RatingBar            
        android:numStars="1"
        android:rating="0.5"
        android:stepSize="0.01"
        android:isIndicator="true"
        android:layout_width="79dp"
        android:layout_height="145dp"
        android:layout_gravity="bottom"
        android:gravity="bottom"                                                          
        android:progressDrawable="@drawable/selector_d" />

    <RatingBar            
        android:numStars="1"
        android:rating="0.5"
        android:stepSize="0.01"
        android:isIndicator="true"
        android:layout_width="79dp"
        android:layout_height="161dp"
        android:layout_gravity="bottom"
        android:gravity="bottom"                                                          
        android:progressDrawable="@drawable/selector_e" />

    <RatingBar            
        android:numStars="1"
        android:rating="0.5"
        android:stepSize="0.01"
        android:isIndicator="true"
        android:layout_width="108dp"
        android:layout_height="168dp"
        android:layout_gravity="bottom"
        android:gravity="bottom"                                                          
        android:progressDrawable="@drawable/selector_f" />

    <RatingBar            
        android:numStars="1"
        android:rating="0.5"
        android:stepSize="0.01"
        android:isIndicator="true"
        android:layout_width="147dp"
        android:layout_height="189dp"
        android:layout_gravity="bottom"
        android:gravity="bottom"                                                          
        android:progressDrawable="@drawable/selector_g" />

</LinearLayout>

Would anyone be able to help me ensure that no matter what screen the Ratingbars are displayed on and no matter what density the device is, it will always look the same (the way it looks on the 10.1 mdpi screen which is displayed top left of the image showing all the different screens? Any help would be greatly appreciated.

Thanks very much for taking the time to read through this question. I have placed the code on Github at the following location: https://github.com/gbayo1/RatingBarScalingIssue.git

Answer 1

You can equally distribute Views across the Screen by using a LinearLayout and layout_weight . For layout_weight to work you have to set layout_width to 0dp . That is normal don't let yourself be confused by that. If you wanted to equally distribute vertically you would have to set layout_height to 0dp . The layout_weight tells the LinearLayout how big a View should be compared to the other ones. In your case we want all Views to be equally distributed so they all need to have the same width. That's the reason why we assign all Views the same layout_weight - 1 . You can do a lot more with layout_weight , for example if you had two Views and you wanted the left view to take up two thirds of the screen and the right one to take up one third of the screen you would assign the left one a layout_weight of 2, and the right one a layout_weight of 1.

I have modified your layout accordingly:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent">


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

        <RatingBar
                android:numStars="1"
                android:rating="1"
                android:stepSize="0.01"
                android:isIndicator="true"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:progressDrawable="@drawable/selector_a"/>

        <RatingBar
                android:numStars="1"
                android:rating="0.5"
                android:stepSize="0.01"
                android:isIndicator="true"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:progressDrawable="@drawable/selector_b"/>

        <RatingBar
                android:numStars="1"
                android:rating="0.5"
                android:stepSize="0.01"
                android:isIndicator="true"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:progressDrawable="@drawable/selector_c"/>

        <RatingBar
                android:numStars="1"
                android:rating="0.5"
                android:stepSize="0.01"
                android:isIndicator="true"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:progressDrawable="@drawable/selector_d"/>

        <RatingBar
                android:numStars="1"
                android:rating="0.5"
                android:stepSize="0.01"
                android:isIndicator="true"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:progressDrawable="@drawable/selector_e"/>

        <RatingBar
                android:numStars="1"
                android:rating="0.5"
                android:stepSize="0.01"
                android:isIndicator="true"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:progressDrawable="@drawable/selector_f"/>

        <RatingBar
                android:numStars="1"
                android:rating="0.5"
                android:stepSize="0.01"
                android:isIndicator="true"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:progressDrawable="@drawable/selector_g"/>

    </LinearLayout>
</RelativeLayout>

I assume there will eventually be something else in the layout besides the Ratingbars , that's why I already wrapped everything in a RelativeLayout . Because of your custom progressDrawable you might have a few issues with the height of the rating bars since I changed layout_height to wrap_content . If it doesn't work or you want them to have different heights you can set a fixed height for the RatingBars but leave the layout_width as it is.

On a side note: All those layout_gravity and gravity elements you had in your original layout were essentially useless. To align all the RatingBars to the bottom you would only have needed android:gravity="bottom" on the LinearLayout itself.