CODEWITHSUNDEEP
androidandroid-layout
innomotion media
innomotion media

Reputation: 922

What is the correct way to have a design always look the same on each screen?

I am developing my own apps semi professionally for quite some time now, but this is always something where I never really knew the correct answer to:

As we all know, different phones have different screens. Almost all android phones are in a 16 by 9 ratio. (Except for the wonderfull s8 ... ).

Now I used to run into problems regarding the design but I found a way to make the design look 100 % the same on every 16:9 and even 21.5:9 screens.

What I basically do is design in photoshop on an xxxhdpi canvas:

2560 x 1440 with 577 in density.

I render my buttons and use a batch converter to convert each button (drawable) into 5 different sizes:

xxxhdpi = 100 % ( the size of the original )
xxhdpi = 75 %
xhdpi = 50 %
hdpi = 37.5 %
mdpi = 25 %.

I then put up 5 different folders in my android project, named:

"drawable-xxxhdpi"
"drawable-xxhdpi"
"drawable-xhdpi"
"drawable-hdpi"
"drawable-mdpi"

I insert my drawables in the correct folders and start the design.

I try to always use a linearlayout and then use android:layout_weights to determine the position on the screen.

Weights work like percents, so saysing I put up two linear layouts into my root layout, both weighing in at exactly 50 . they fill up exactly half the screen on every device.

This works very well for all devices as long as you can use a linearlayout.

If I need to use a framelayout I then go into the code of my class and init every element that cannot have weights. Especially when it comes down to padding:

I put up a new linearlayout.layoutparams for the elemens in questions in for witdh and height go "resources.dimensions.displaymetrics.height / width pixels and divide those with a hardcoded number.

Since the display metrics correspond the actual phone, the division will end in percentages, even when frame layouts are used. Same goes for margins or padding.

The result is flawless. No matter what phone is used, when it is 16:9 ratio, the design will ALWAYS look the same. Even in Scrollviews, Relative-Layouts and so one.

For phones with a different aspect ratio I set the ratio by dividing hightpixels / widthpixels which makes the design work just as well on those screens.

The result ends in much work but perfect design. I refuse to use "dpi" in my axmls, since they do work but will not ALWAYS look the same on each phone.

Now - the questions:

What is the perfect way to design an app with the least amount of affort but professional results?

What do you guys do to get it down right? I hope for some interessting input and exchange! Thanks :)

Upvotes: 0

Views: 73

Answers (1)

Ranjan
Ranjan

Reputation: 1356

You have two options.

  1. Using different layout for different screen size phone, provided by google.

  2. You can use DisplayMetrics for calculating width and height for your view items. But you have to do it in runtime.

  3. Or you can use both for best results.

Upvotes: 1

Related Questions