4

How to maintain consistent app layouts cross-device? Per consistency i mean to proportions, readability, usability and user comfort.

For some time I'm doing apps for android. All these applications were made for corporate clients. Each application was designed for a specific phone so i never need mastering the layouts deeply.

Recently, I received a request to build a complex application for all android 2.2 devices and up to 5.0. The requirement includes: ActionBar, Sliding Menu, Master/Detail Flows, Many Fragments, Many buttons, Maps, the list go on. So i begun research.

Research

First, to support all Views mentioned above, I decided to use appcompat_v7. Simply because Google made it. Discard ActionBarSherlock because it's a third party library.

Alternative Layouts:

Under certain conditions, you need to use an alternative layout. This is done easily with an alias.

values-large/aliases.xml

<resources>
    <item name="main_layout" type="layout">@layout/main_latyout_large</item>
</resources>

This will make this code:

setContentView(R.layout.main_layout);

Operate effectively as this one

setContentView(R.layout.main_layout_large);

So far so good, but as will be seen later something is escaping me. (see Finally)

Note: An alternative way is to place master_layout_large.xml as layout-large/master_layout.xml.

Scaffolding, proportions

A trivial example:

layout/master_layout.xml

<LinearLayout
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:weightSum="@dimen/layout_weightSum">
  <View 
     android:layout_width="match_parent"
     android:layout_height="0dp"
     android:layout_weight="@dimen/view1_weight"/>
  <View 
     android:layout_width="match_parent"
     android:layout_height="0dp"
     android:layout_weight="@dimen/view2_weight"/>
</LinearLatyout>

values/dimens.xml

<resources>
    <dimen name="layout_weightSum">1</dimen>
    <dimen name="view1_weight">0.2</dimen>
    <dimen name="view2_weight">0.8</dimen>
</resources>

This configuration allows me to easily change the proportions as follows:

For Android 2.2 to Android 3.1

values-small/dimens.xml

<resources>
    <dimen name="view1_weight">0.3</dimen>
    <dimen name="view2_weight">0.7</dimen>
</resources>

For Android 3.2 and up:

values-sh240dp/dimens.xml

<resources>
    <dimen name="view1_weight">0.3</dimen>
    <dimen name="view2_weight">0.7</dimen>
</resources>

In How to Support Multiple Screens say:

The configuration qualifiers you can use to provide size-specific resources are small, normal, large, and xlarge. For example, layouts for an extra-large screen should go in layout-xlarge/. Beginning with Android 3.2 (API level 13), the above size groups are deprecated and you should instead use the swdp configuration qualifier to define the smallest available width required by your layout resources.

Then in How Android Finds the Best-matching Resource explains (by an example) the process of resource selection. What is not said (or could find) is how it discard deprecated qualifiers. (even if do)

Q1: Should I use both methods in an application that requires work in all versions?

Q2: Can deprecated resource qualifiers (small,normal,etc) match over non deprecated resource qualifiers?

Note: This technique of scaffolding was taken from here.

Readability:

TextViews are frustrating. Nothing native that supports auto resizing. WTF?.

But suppose I use the component of this response. So i can use the same method, dimensions.

layout/other_layout.xml (relevant code)

<myns.AutoResizeTextView 
    android:id="@+id/title"
    android:textSize="@dimen/title_textSize"/>

values/dimens.xml

<resources>
    <dimen name="title_textSize">24dp</dimen>
</resources>

values-xlarge/dimens.xml

<resources>
    <dimen name="title_textSize">64dp</dimen>
</resources>

values-sw600dp/dimens.xml

<resources>
    <dimen name="title_textSize">64dp</dimen>
</resources>

Same problemas as before, event here the another problem is to show the text in an optimal size for each screen, but is more tedious, because according to my tests, I need to define many variants of the dimension to make it look consistent across devices.

Q3: How to maintain Readability in easy way?

Finally

I realize that the way I'm facing this project the need arises to create multiple value- * and becomes exponentially considering the amount of options out there. (view Providing Alternative Resources)

Q4: What I can do to minimize the amount of value- * that seems to need my application.

Any other sugestion?

Community
  • 1
  • 1
rnrneverdies
  • 13,347
  • 9
  • 57
  • 89
  • 1
    It looks like you're doing everything right to me. It is a lot of work, but as of now, 90% of devices use android 4.0 and above. To support all android devices is a lot of work and there are not very many shortcuts. – Lukos Nov 12 '14 at 17:21
  • Text should imo not be scaled to fit the screen for the sake of consistent looks. Just because I have a large screen does not mean that I want to read in a huge font. Larger screen = I want to see more content, that's at least why I like a tablet to read sometimes. And if I want larger text because I'm blind, honor my font size settings by using `sp` instead of `dp` for text sizes. – zapl Nov 12 '14 at 18:39

0 Answers0