CODEWITHSUNDEEP
androidandroid-layoutuser-interface
Julian Higginson
Julian Higginson

Reputation: 547

Scaling a simple UI with relative dimensions defined

What I have is a drawing of a UI layout, that I want to be able to scale up and down to fill an android screen. I know this doesn't really fit with the android UI "way" I've been reading about, but this is a very simple app for connection to an appliance - it has a couple of basic setting buttons, and a couple of realtime information display views.

In this case, the UI elements all need dimensions that are known relative to the total width and height.

I've had a play with doing a layout using a combination of linear and relative layout tags in XML, and given a fixed emulator screen setting, I can make an arrangement of interface elements with explicitly set sizes that fill it up the way I want... Of course this doesn't work when I try it on different screen sizes.

So my next step is going to be to add code to calculate the size of each element just before the activity is first created - then override the xml values I use to do the original layout. I don't mind doing this, but am a bit worried that it means the UI design will be defined in multiple places, and this isn't really ideal.

As I'm trying this, I'd really love to hear from more experienced developers if there's going to be a problem i haven't considered, and I'd be better off stopping any attempt to work with standard UI system Views and layouts, and jump straight to the 2D graphics library, or if there is a "nicer" way of setting relative sizes for objects in an XML layout related to device screen size that I've missed, despite my searching?

thanks!

Upvotes: 2

Views: 1624

Answers (2)

Simon
Simon

Reputation: 13283

You can take a look at the code of http://code.google.com/p/simpleui/ It uses a design approach where the content is embedded in a scroll view and always wills the screen width using weights:

SimpleUI screenshot

This way you can add as many UI components to the layout as you want and you could still embed the generated UIs into fragments e.g. I think this concept works great for phones and tablets as well and the user intuitively knows how to use it.

Upvotes: 1

Joris Weimar
Joris Weimar

Reputation: 4931

You can set a RelativeLayout as your main layout. Then use DisplayMetrics to determine the size of your screen. Then you can place your objects on screen in pixel coordinates (by using RelativeLayout params (margin top and left). You can also scale images. You should supply high resolution graphics and scale graphics down for smaller screens. This is what I did for one project and it worked fine.

Upvotes: 1

Related Questions