October 1, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Design an Android UI for Multiple Devices

  • December 10, 2012
  • By Jessica Thornsby
  • Send Email »
  • More Articles »

Android's increasing popularity is a mixed blessing for app developers. On the one hand, a wide range of devices running the Android OS opens up new and exciting development opportunities, but there's also the increasing headache of designing an app that runs smoothly on devices with different screen sizes, pixel densities and rotation behavior. Android does support automatic resizing and rescaling, but this is no substitute for putting the effort into ensuring your app is optimized for multiple screens.

In this tutorial, I'll introduce you to some of the core concepts of designing for different screens. I'll show you how to easily create a dedicated landscape version of your layout, before creating a custom launcher icon that supports screens with different pixel densities.

Designing a Landscape Layout

When you create an Android project, Eclipse automatically generates a folder and XML file for defining the portrait layout. This is just the starting point: you can (and should) create multiple layout layout folders in the /res directory. In this part of the tutorial, we'll create a new folder and an XML layout file that's optimized for landscape mode.

Imagine this scenario: you've been fine-tuning your UI and have finally got your buttons and textbox in exactly the right position:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#F5FFFA" >

<Button
android:id="@+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Button 1" />

<Button
android:id="@+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/button1"
android:layout_marginTop="14dp"
android:text="Button 2" />


<Button
android:id="@+id/button3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/button2"
android:layout_marginTop="18dp"
android:text="Button 3" />

<Button
android:id="@+id/button4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/button3"
android:layout_marginTop="18dp"
android:text="Button 4" />

<Button
android:id="@+id/button5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/button4"
android:layout_marginTop="14dp"
android:text="Button 5" />

<EditText
android:id="@+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/button5"
android:layout_marginTop="15dp"
android:ems="10"
android:hint="Please enter your name" />

</RelativeLayout>

You've booted up the Android Emulator, and are confident that your work is done.


Android UI Design
Click here for larger image

But, what if your app winds up on a device that defaults to landscape mode? Or, even more likely, a device that automatically rotates the UI whenever the device is tipped? You can test this scenario in the emulator by pressing Ctrl-F11.


Android UI Design
Click here for larger image

Disaster! You cannot guarantee your app will be viewed exclusively in portrait mode, so you need to create an additional layout.

The first step, is create a new folder:

  1. Right-click on the res folder.
  2. Select 'New' followed by 'Folder.'
  3. Name your new folder layout-land and click 'Ok.'

Create an Android XML file in the layout-land folder:

  1. Right-click on 'layout-land.'
  2. Select 'New' followed by 'XML File.'
  3. Give the XML file the same name as the portrait version. In this example, the path of our portrait layout file is res/layout/activity_main.xml so the landscape XML layout should be res/layout-land/activity_main.xml.

    Tip. At this point, Eclipse may warn you that "the destination file already exists" even though you are creating a file in a new (and completely empty!) folder. If this occurs, press 'Next' rather than 'Finish,' and type the layout-land path and filename in the subsequent dialog:


    Android UI Design
    Click here for larger image

  4. Click 'Finish.'

You now have two activity_main.xml layout files, and your project should be laid out like this:

Android UI Design

Open the layout_land.xml file. You are now ready to design a second layout specifically for landscape mode. In this example, we'll use the following layout:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#F5FFFA" >

<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1" />


<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="18dp"
android:layout_toRightOf="@+id/button1"
android:text="Button 2" />

<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Button 3" />

<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_toRightOf="@+id/button3"
android:text="Button 4" />

<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Button 5" />

<EditText
android:id="@+id/editText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/button1"
android:layout_marginTop="32dp"
android:ems="10"
android:hint="Please enter your name" />

</RelativeLayout>

Double-check your app displays properly in both portrait and landscape modes by running it in the Android Emulator and toggling between the different orientations.


Android UI Design
Click here for larger image

Success!


Tags: UI, Android App development



Page 1 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel