Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Android Layouts: Learning Layout Techniques on Android

See in this article a demonstration of techniques, theory and practice of creating layouts in Android OS.

Most programmers have a certain difficulty in creating legal, beautiful layout, color matching, as in fact is not an easy task and requires a lot of effort and creativity.

A fact that very difficult to create layout is the lack of materials available to designers on the web and on Google's official documentation. Therefore, this article is intended to assist developers with little experience in layouts to create systems with modern and nice interfaces in the eyes of users.

Some Rules

  1. First step to create a good application is to know very well the platform you are working on. In our case is the Android operating system.
  2. The second step is to know the anatomy of the Android interface and how it differs from other operating systems such as iOS and Windows Phone.
  3. Do not mix different form of navigation in a single application, as this may confuse the user.
  4. Never reuse layouts the same system on other platforms. For each platform that is developing create their own layout that suits the designer's native operating system.
  5. Never use the same layout for all your applications; for each customer draw a new layout.

Multiple screens in Android

The android has support for multiple screens, depending on the layout that you will develop you will have to create individual layout for each screen, so it can fit as the device screen size. Figure 1 demonstrates how is the division of the layout for screen size.

Figure 1. Division of layouts

If you have to draw a layout for each screen type, you must create a layout folder for each type of screen that is used, an example would be "layout-small" for mobile phones with smaller screen: 426dp x 320dp. This allows the system to avoid having to worry about changes in the size of the screens. Below follows the dimensions on each screen:

  • layout-xlarge: screens of at least 960dp x 720dp
  • layout-large: screens of at least 640dp x 480dp
  • layout-standard: screens of at least 470dp x 320dp
  • layout-small: screens of at least 426dp x 320dp

If you want to go deeper on the subject of multiple screens, see the Google Android API Guide at http://developer.android.com/guide/practices/screens_support.html.

Types of Dimensions in Android

Android dimensions are measured by:

Type

Description

px (pixels)

Corresponding to screen pixel number

in (inch)

Based on the physical size of the screen

mm (millimeters)

Based on the physical size of the screen

pt(points)

1/72 of an inch, based on the physical size of the screen

dpoudip

(Density-independent Pixels) This unit is on the screen resolution. For example if the screen resolution is 160 dpi means that a DP is 1 pixel in a total of 160.

sp

(Scale-independent Pixels) Same as SD, but also considers the size of the font that you are using. It is recommended to use this unit when specifying the size of a font, so that it is automatically adjusted according to user preferences screen.

Choice of Colors

The choice of colors is very important. In Figure 2, we have a basic color table.

Figure 2. Color Table

  • Always try to match the colors of the logo in the colors of the layout.
  • Beware colors: Never mix two warm colors in the same application (eg "red with orange."). Besides leaving the aesthetics of the system heavily loaded, these colors cause headaches and nausea when the user is exposed for a long time. Try to usemore pleasant and soothing colors for system background and for details you can use stronger colors.
  • Try using colors of the same scale or same color table, and always tone on tone.

Size of objects on the screen

The size of objects on the screen is very important because mobile devices do not use features such as mouse and keyboard but the fingertips. It is important that the icons are in accordance with the size of a fingertip, which is approximately 9mm - which corresponds to about 48dp. Use this size as a basis for your layout to function properly and icons and buttons are touched with precision. So that objects do not get stuck in the corner is good to give a margin of 8DP.

Size of icons

  • LAUNCHER: Important to create a launcher in size of 512x512px to be reused in Google Play.
  • ACTION ICONS: Icons of the action bar must have 32dp.
  • CONTEXTUALICONS: Ideal size is 16dp and focal area 12DP.
  • ICONS OF NOTIFICATION: They must have 24dp, and the focal area should be 22dp.

Organize Assets

Organize files with the prefix makes it much easier to find something you want and it's a way to standardize their designs. Note Table 1.

Asset's type

Prefix

Example

Icon

ic_

ic_mrbool.png

Launcher

ic_launcher

ic_launcher_ appname.png

Action bar icons

ic_menu

ic_search_menu.png

Status bar icons

ic_stat_notificar

ic_stat_notificar_msg.png

Tabs icons

ic_tab

ic_tab_recent.png

Dialog icons

ic_dialog

ic_dialog_info.png

Table 1. Default organization.

We already know a little theory and all that, now we will go to practice.

Screen in Horizontal and Vertical

We will create an application that will have two different layouts: one for when the device is with the screen in portrait and one for when the device is with the screen in landscape. We can solve this problem by creating a main.xml (Listing 1) in the layout folder and another main.xml (Listing 2) in the layout-land folder.

Listing 1. Main.XML (portrait) - Within the Layout Portfolio

<?xml version="1.0" encoding="utf-8"?>
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical" >
        <TextView android:layout_height="0dp" android:layout_weight="1"
           android:gravity="center" android:layout_width="match_parent"
           android:text="MrBool 1" />
        <TextView android:layout_height="0dp" android:layout_weight="1"
           android:gravity="center" android:layout_width="match_parent"
           android:text=" MrBool 2" />
  </LinearLayout>

Listing 2. Main.XML (landscape) - Inside the folder layout-land

<?xml version="1.0" encoding="utf-8"?>
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="horizontal" >
     <TextView android:layout_height="match_parent" android:layout_weight="1"
         android:gravity="center" android:layout_width="0dp"
         android:text="MrBool  1" />
     <TextView android:layout_height="match_parent" android:layout_weight="1"
         android:gravity="center" android:layout_width="0dp"
         android:text="MrBool 2" />
  </LinearLayout>

Creating Degrades in Android

Degrade resources in Android are very interesting and useful for creating more robust layouts. Always create the XML file layout within the Drawable folders. Below see some types of gradients and their code for creating.

  • RADIAL (Figure 3)

Figure 3. Radial degrade

Listing 3. Radial degrade

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">


<gradient
  android:startColor="#33414b"
  android:endColor="#242424"
  android:gradientRadius="326"
  android:type="radial"/>
</shape>

  • LINEAR (Figure 4)

Figure 4. Linear Degrade

Listing 4. Linear degrade

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >


  <gradient
	  android:angle="90"
	  android:startColor="#33414b "
	  android:endColor="#242424"
	  android:type="linear" />


</shape>

Conclusion

This is just a simple piece of information regarding how to make nice designs in your android applications. You can refer to Google's official documentation to see more info and practice a bit more into this new world.



Web developer and passioned for web design, SEO and front end technologies.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login