Question

I’m making my app compatible with tablets, and I am trying to understand what the best way of doing this would be.

I have a GridView with images and text under each image. Currently the height of each image is set to 120dp rather than wrap_content so that it gets scaled and aligned properly to its height and everything looks even. The orientation change works great, and the GridView changes from 2xN to 3xN automatically.

Now that I want to put it on a tablet, the GridView ends up being 5xN and 7xN depending on orientation (on a 10″ tablet). However, to make the GridView look better, I would rather change the image height to a larger value (say 300dp) and have fewer items that are larger in size. What’s the best way of doing this?

I don’t want to pull out just the element and replicate all its values, changing just one. Ideally, I’d like to simply be able to put the height value into something like strings.xml and strings-xlarge.xml, and then reference it from the layout. Is that possible? I really hate duplicating code/resources.

Thank you.

Answer 1

What you’re looking for is the dimen tag. It works similarly to the string tag but for dimensions. You can have something like this in values/dimens.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="image_size">120dp</dimen>
</resources>

And in values-xlarge/dimens.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="image_size">300dp</dimen>
</resources>

Your XML can reference the size by @dimen/image_size and everything will be taken care of for you. You can also programatically access it with getResources().getDimension(R.dimen.image_size) from Context.

Note that as of 3.2, you can use pixel requirements (such as w720dp) in your resource names instead of “buckets” like xlarge. More info here.