Scaling selector drawable

Question

I have a drawable used in a selector. The image/drawable is a star and the selector is used by a checkbox and should represent a favorite-button.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false" android:drawable="@drawable/star" />
    <item android:state_checked="true" android:drawable="@drawable/star_faved" />
</selector>

The images are 256x256px big and dont scale when used with the checkbox. I tried to use it as a 9patch, but couldnt get it to work.

    <CheckBox android:layout_width="20dp"
              android:layout_height="20dp"
              android:text="read"
              android:button="@drawable/favorite_checkbox"
              android:focusable="false"/>

What is the standard way to approach this?

I used the icon from http://iconmonstr.com/ and thought it would not matter so much, as it would scale. My thought-process was to optimize the perfomance later by adding different drawables for different screensizes — kadir, Jun 02 '14 at 17:44
Will reduce the quality and tell if I could get it work or not :-) — kadir, Jun 02 '14 at 17:48
I understand now the concept which I couldnt grasp before. So I scaled the pictures up to 480 pixels per inch and put them in the drawable-xxhdpi folder. This helps to show more of the picture, yet it still is bigger than the checkbox itself and thus overlapping the boundaries. — kadir, Jun 02 '14 at 18:04
Dont know why it would make a difference as xxhdpi should be big enough, yet tried it and the result is the same. Only part of the image is seeable. Would you like to draft a quick answer so I can accept it? The way of the solution is clearly the right one. — kadir, Jun 02 '14 at 18:12

Phantômaxx · Accepted Answer · 2014-06-02T18:55:08.043

256x256 px seems big enough to be an xxxhdpi resource.
So, I imagine you made it at 640 dpi.

A 9 patch won't help in this case, since it will stretch the graphics.

Make sure you have AT LEAST the xxxhdpi resource at the xxxhdpi (normalized) resolution of 640 dpi

I used the icon from iconmonstr.com... Pictures from icon sites are done at the very low quality (good enough for PCs) of 72 dpi (usually / sometimes 96 dpi - very rarely, better quality).

Imagine that the lowest Android dpi (for a ldpi screen) is 120 dpi, nearly the double...
If you want QUALITY, the dpi to use are:

120 for ldpi, scale factor = 0.75
160 for mdpi, scale factor = 1.0
240 for hdpi, scale factor = 1.5
320 for xhdpi, scale factor = 2.0
480 for xxhdpi, scale factor = 3.0
640 for xxxhdpi, scale factor = 4.0

Normally, scaling DOWN will work nearly perfectly.
So, having an xxxhdpi or an xhdpi resource would be well scaled.

Now, you have to ENHANCE the quality.
72dpi => 640dpi - but leave the same size (bring it to 640 dpi, it will automatically scale to bigger sizes, then reduce the size to 256*256 again, leaving the dpi set to 640).

Save these images into the /res/drawable-xxxhdpi folder

[EDIT]

The correct picture sizes for a CheckBox should be 48*4 (192) px as the FULL ASSET (MEANING THE IMAGE + A CERTAIN PADDING, 16px per side, TRANSPARENT) and 40*4 (160) px as the graphics itself (THE "OPTICAL SQUARE"), for an xxxhdpi resolution.

[EDIT 2]

48, at mdpi resolution (160 dpi, scale factor = 1.0)
4.0 being the scale factor for the xxxhdpi resolution

Since the images will become BIG (in weight), I recommend you using OptiPNG, to reduce the overall byte count without losing quality.

Scaling selector drawable

1 Answers1