Android UI design based on screen resolution

Question

I'm looking to make an Android app that changes the look of the UI based on the device it's shown on (4 inch phone, 7inch tablet and 10inch tablet). I know you have the fragments API and it's probably that which I should use for this, but all the examples I've seen just have 2 activities sitting side by side and the code is a bit OTT for my needs (they have events passing between them etc).

Here is the comparison between a 4 inch device and a 7 inch device and how the different UI elements should move around (also note that element A can change design between the two devices).

Any ideas on how I would go about doing this, or if anyone has any sample code that would be fantastic!

Answer 1

You can use different directory for different size :

res/layout/my_layout.xml             // layout for normal screen size ("default")
res/layout-small/my_layout.xml       // layout for small screen size
res/layout-large/my_layout.xml       // layout for large screen size
res/layout-xlarge/my_layout.xml      // layout for extra large screen size
res/layout-xlarge-land/my_layout.xml // layout for extra large in landscape orientation

res/drawable-mdpi/my_icon.png        // bitmap for medium density
res/drawable-hdpi/my_icon.png        // bitmap for high density
res/drawable-xhdpi/my_icon.png       // bitmap for extra high density

and for more information :

http://developer.android.com/guide/practices/screens_support.html

Good Luck,,, :D

Answer 2

See also Fragments for Android 3.0+.

Answer 3

I think you should probably design different xml for each size. You can use the qualifier in the layout dir for different screen size. http://developer.android.com/guide/topics/resources/providing-resources.html#AliasResources