CODEWITHSUNDEEP
androidandroid-drawable
kadir
kadir

Reputation: 1417

Scaling selector drawable

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?

Upvotes: 1

Views: 1690

Answers (1)

Phant&#244;maxx
Phant&#244;maxx

Reputation: 38098

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.

Upvotes: 2

Related Questions