androidandroid-layouttext-sizedensity-independent-pixelproportions

Android: Very difficult to achieve the same layout proportions / aspect ratio between phones and tablets


When I say "the same layout proportions" I'm mainly referring to text sizes, but also to views in general.

I've always read that sp text size units are screen independent, but that's not completely true. I'll insert below two screenshots of my app welcome screen:

Welcome screen (PHONE):

Welcome Screen Phone

Welcome screen (TABLET):

Welcome Screen Tablet

You can clearly see how texts does not retain proportion / aspect ratio.

I was doing deep research on the subject and found this next very interesting / cool library:

Intuit/ssp

This library does a fantastic job letting you get a real screen independent text size unit. You can see it in my next screenshot:

Welcome Screen with ssp (TABLET):

Welcome Screen ssp Tablet

Now you can see how text sizes are much more coherent with the phone (if not exact).

All great until now, the library was a fantastic discovery, but now look my login screen:

Login (PHONE):

Login Phone

Login ssp in TextViews (TABLET):

Login ssp in TextViews Tablet

Now in login screen in tablet you can see that if apply ssp to TextViews all texts look much better according to phone proportions, but the EditTexts look small.

Then I tried applying ssp to all TextViews and EditTexts:

Login ssp to all views (TABLET):

Login ssp to all views

And you can see how, again, it looks much better.

What's the problem then?

I'm quite convinced with this last approach, applying ssp to all views text sizes, but two issues arise from this:

  1. I will have to modify all views in my app (this is not a problem, but I have quite a lot).
  2. The aspect ratio of some elements is still not retained, for example, look how the teal color background layout in a phone looks much more square than in a tablet (I'm also starting to doubt if dp, which I mostly use for padding / margin are screen independent units).

With all this, I'm a bit confused about how we, developers, should handle this in order to have a consistent layout between phones and tablets, and my main concern before going on with changing all views in my app to use ssp (a big task) is to be sure I'm going in the right direction.

In the GitHub page it clearly says:

"Use it carefully! for example, in most cases you still need to design a different layout for tablets."

So, this is also one of my concerns.

What do you have to say guys?

Is there any better approach to deal with this?

Edit: Having a different layout for tablets.

Forgot to mention that guys, but in the past I had a different layout for tablets, what in my opinion is a very bad idea / option, because you have two copies from every layout, and as any layout modification is needed you always have to remember to modify it twice, so no!

I've finally moved to only one layout trying to get the best match between both screens, and that's what leads to the origin of this post.

Edit 2:

After reading the valuable comments some of you, guys, have left, I still think that trying to achieve a consistent / good looking layout in both, phones and tablets, having only one layout file would be the best way to go, mainly in terms of maintainability, so, taking your comments definitely into account, I'll try to achieve that.

Now, after reading one comments saying the buttons in my welcome screen look huge in the tablet, a new concern arises to my mind.

Should having an exact (or quite similar) aspect ratio in a tablet compared to a phone screen, even having bigger buttons, be considered a better approach than a screen with smaller (maybe less rough) buttons but with a lot of blank (empty) space or viceversa? Which of the two is a more general approach?


Solution

  • After reading the valuable comments of @tyczj and @ianhanniballake I started to have a look at different apps and noticed that the preferred way is to keep the same size of elements over keeping the same screen proportion, even when in the first case you will most likely end with a lot of blank / empty space, so this is the approach I decided to follow with my app.

    As a tip to other developers facing the same concern, you definitely can have one same layout for both, phones and tablets, and it's the best approach in terms not only of clean code, but mainly maintainability.

    There might be specific cases where you just need a separate layout for tablets, but in general (and it ended being my case) using different dimen for each you can accomplish almost everything with a single layout.