Android Adaptive Layout Design Skills

Android Adaptive Layout Design Skills

Because the current app needs to adapt to mobile phones and tablets, I am studying how to build a layout that can adapt to all screen sizes.

I have a lot of experience in adaptive web layout, such as using grid streams and media queries attributes in CSS3, which can achieve adaptive web layout. So I want to try it on Android.

On Android, configuration qualifiers is used to load different resources, based on the screen size of different mobile phones or the orientation of the screen vertical or horizontal ), my biggest goal is to create a layout that can be scaled automatically without loading different layout files based on different screen sizes.

In addition to creating different layout files for each device size, I found that a simpler method is to reload the style. xml file for devices of different screen sizes.

You may think it is like a CSS style. First, you can define a basic style file, which represents the size of a common device. Its path is in values/styles. xml, then you can also define medium device sizes, in values-sw600dp/styles. xml (7-inch flat), values-sw600dp-land/styles. xml represents a screen in the horizontal direction, values-sw720dp/styles. xml indicates a 10-inch tablet.

In the Adaptive Grid System in CSS, we can deploy a 960-pixel-wide grid system. the container class does not have margin), and on the mobile phone, we can also layout a 100%-width. container does not have margin ).

We can implement the same method on Android. First, we need to create a base class style.

Res/values/styles. xml

 
 

  
  
<style name="Container"> 
  
  
    <item name="android:layout_margin">0dp</item> 
  
  
    <item name="android:padding">16dp</item> 
  
  
    <item name="android:layout_width">match_parent</item> 
  
  
    <item name="android:layout_height">match_parent</item> 
  
  
    <item name="android:orientation">vertical</item> 
  
  
    <item name="android:background">@drawable/container_background</item> 
  
  
    </style> 
 
 

For the Vertical Flat Panel), we can add some margin because the screen is large enough.

Res/values-sw600dp/styles. xml

 
 

  
  
<style name="Container"> 
  
  
    <item name="android:layout_margin">0dp</item> 
  
  
    <item name="android:padding">32dp</item> 
  
  
    <item name="android:layout_width">match_parent</item> 
  
  
    <item name="android:layout_height">match_parent</item> 
  
  
    <item name="android:orientation">vertical</item> 
  
  
    <item name="android:background">@drawable/container_background</item> 
  
  
    </style> 
 
 

The biggest difference between the vertical and horizontal la s on the tablet is that we add the margin value so that the content will not be full of the entire screen. We can also add a background image to the parent view, to fill the blank area.

Res/values-sw600dp-land/styles. xml

 
 

  
  
<style name="Container"> 
  
  
    <item name="android:layout_marginRight">130dp</item> 
  
  
    <item name="android:layout_marginLeft">130dp</item> 
  
  
    <item name="android:padding">32dp</item> 
  
  
    <item name="android:layout_width">match_parent</item> 
  
  
    <item name="android:layout_height">match_parent</item> 
  
  
    <item name="android:orientation">vertical</item> 
  
  
    <item name="android:background">@drawable/container_background</item> 
  
  
    </style> 
 
 

Then we can use the Style File on different screens:

 
 

  
  
<LinearLayout style="@style/Container"> 
  
  
    ... buttons, edit texts, text views, etc ... 
  
  
    </LinearLayout> 
 
 

This is the effect on a 4-inch screen mobile phone:

This is the effect on a 7-inch tablet:

This is the horizontal screen effect on a 7-inch tablet:

There are also some very convenient attributes in CSS, such as bootstrap), which are some help classes, such. visible-phone ,. hidden-phone ,. visible-tablet and so on. This can also be done on Android.

 
 

  
  
<!-- Device Visibility --> 
  
  
    <style name="PhoneOnly"> 
  
  
        <item name="android:visibility">gone</item> 
  
  
    </style> 
  
  
     
  
  
    <style name="TabletOnly"> 
  
  
        <item name="android:visibility">visible</item> 
  
  
    </style> 
  
  
     
  
  
    <style name="TabletPortraitOnly"> 
  
  
        <item name="android:visibility">gone</item> 
  
  
    </style> 
  
  
     
  
  
    <style name="TabletLandscapeOnly"> 
  
  
        <item name="android:visibility">visible</item> 
  
  
    </style> 
 
 

Put these styles in the corresponding configuration folder, and then you can hide the corresponding controls as needed.

 
 

  
  
<LinearLayout android:id="@+id/column_one"> 
  
  
      ... some content ... 
  
  
    </LinearLayout> 
  
  
     
  
  
    <LinearLayout android:id="@+id/column_two" 
  
  
      style="@style/TabletLandscapeOnly"> 
  
  
      ... some extra content since we have space ... 
  
  
    </LinearLayout> 
 
 

For flat horizontal), this style will display two columns, but for most devices, the second column will not be displayed.

With just a few lines of xml code, we can create a mini layout framework. We can also extend this technology to implement a general style file as needed, it can be used in projects in the future.

Unfortunately, it is difficult to package Android resources into a jar package without Gradle). Therefore, it is difficult to build a framework on Android like bootstrap. Do not be misled by these projects, for example: http://www.androidbootstrap.com/, they are not as powerful as you think). Fortunately, Android is migrating to Gradle, which makes it easier to create a layout framework for the Android front-end.