Wednesday, November 9, 2011

Android & its UI

 -Kalimuthu Rengaswamy
Now a days Smart Phones playing a vital role in IT industry with their innovative applications and OS updates. I am on my toes for getting Android latest version Ice-cream-sandwich which totally updated with many stunning features.
        Probably many of you might be using Android or any other smart phone, which are provided with their own App stores. When you thought of an Application, the first thing you will be expecting is good UI. Right! Android has provided developers with many widgets and necessary layouts. Android done all its part and now UI entirely depends on the developers ability.
People use the Smart mobiles for various purposes, for example security, entertainment, gaming, casual and so on. All persons may not concentrate on UI but many people do. Android is provided with both 2D and 3D graphic engines.
        Lets go little depth in this topic, every activity in the application is designed using the XML coding. As I specified previously, android is providing all the necessary widgets,layouts, composites, media&images in its framework, making developers easy.
If we go little more deeper Android is provided with these following layouts:
  • Frame Layout
  • Absolute Layout
  • Linear Layout
  • Table Layout
  • Relative Layout
Developers uses this according to their convenience and purpose. For the time being I will be explaining only about Relative layout which is most used in general.
Relative layout :
In a relative layout every element arranges itself relative to a parent control or other control.
In this relative layout control place in two way
  1. relative to their container
  2. relative to other controls 
Relative to their container 
In this type controls are relative to container place in layout. It flow some properties android:layout_alignParentTop, Bottom, Right or Left to true. This aligns the Top,Bottom,Right or Left side of the control to the Top, Bottom, Right or Left side of the container respectively.
  • android:layout_centerVertical: The control should be positioned vertically in the center of the container.
  • android:layout_centerHorizontal: The control should be positioned horizontally in the center of the container.
  • android:layout_centerInParent: The control should be positioned both vertically and horizontally in the middle of the container.

Example :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="@+id/widget30"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<Button
android:id="@+id/widget31"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">
</Button>
</RelativeLayout>
   
Position Relative to other control positions:
     In this type controls are relative to other control place in layout. It follow some properties
  • android:layout_above: the widget should be placed above the referenced widget.
  • android:layout_below: The widget should be placed below the referenced widget.
  • android:layout_toRightOf: The widget should be placed to the right of the referenced widget.
  • android:layout_toLeftOf: The widget should be placed above the referenced widget.
Example :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="@+id/widget30"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">

<Buttonandroid:id="@+id/widget34"android:text="Button3" android:layout_height="wrap_content" android:layout_width="wrap_content"android:layout_below="@+id/widget35" android:layout_alignLeft="@+id/widget35" android:layout_marginTop="165dp">
</Button>
<Buttonandroid:id="@+id/button2"android:text="Button4" android:layout_height="wrap_content" android:layout_width="wrap_content"android:layout_alignBaseline="@+id/widget34" android:layout_alignBottom="@+id/widget34"android:layout_alignLeft="@+id/button1"></Button>

<Buttonandroid:id="@+id/widget35"android:text="Button1" android:layout_height="wrap_content" android:layout_width="wrap_content"android:layout_alignParentTop="true" android:layout_alignParentLeft="true"android:layout_marginLeft="60dp" android:layout_marginTop="171dp"></Button>

<Buttonandroid:id="@+id/button1"android:text="Button2" android:layout_height="wrap_content" android:layout_width="wrap_content"android:layout_alignBaseline="@+id/widget35" android:layout_alignBottom="@+id/widget35"android:layout_alignParentRight="true" android:layout_marginRight="58dp"></Button>
</RelativeLayout>

This is just a introduction to the android application development. Hope it was helpful. Await and keep following for the next post.

2 comments:

hard drive recovery cost said...

Thank you for influencing so many readers with your great information. Your article has sparked a lot of thought for me. I will share your views and info with my friend and class fellows. Keep it up.

Kathir said...

Dear Kalimuthu,

Awesome explanation and examples. I learnt a bit from you.keep Posting some useful informations like this.. Thank you :)