IT Wizard

(Android phone – how-to/example)

If you just start coding for Android, you will find it a bit tricky to do your own design. For a visual basic-designer, you can consider DroidDraw

Before reading further, we recommend to browse through the official docs. Below are just a few examples and explanations.

LinearLayout example:
LinearLayout aligns all children in a single direction — vertically or horizontally, depending on how you define the orientation attribute. All children are stacked one after the other, so a vertical list will only have one child per row, no matter how wide they are, and a horizontal list will only be one row high (the height of the tallest child, plus padding).

For example, if you want to create a double-lined status bar, you should do the following:

< !-- Status text frame -->
< LinearLayout android:id="@+id/status_view"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:background="@color/status_view"
android:baselineAligned="false"
android:padding="4px">

< !-- Status text 1 -->
< TextView android:id="@+id/status_text_view1"
android:layout_width="wrap_content"
android:layout_height="20px"
android:layout_gravity="left|center_vertical"
android:layout_weight="1"
android:text="@string/msg_default_status1"
android:textColor="@color/status_text1"
android.textSize="14sp"/>

< !-- Status text 2 -->
< TextView android:id="@+id/status_text_view2"
android:layout_width="wrap_content"
android:layout_height="20px"
android:layout_gravity="left|center_vertical"
android:layout_weight="1"
android:text="@string/msg_default_status2"
android:textColor="@color/status_text2"
android.textSize="14sp"/>

< /LinearLayout>

FrameLayout example:
FrameLayout is the simplest type of layout object. It’s basically a blank space on your screen that you can later fill with a single object — for example, a picture that you’ll swap in and out.
For example, if you want to create a double-lined status bar, with some level of opacity, you should include the LinearLayout defined above in the body of the following FrameLayout:

< FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="@color/transparent"/>

< !-- INSERT LinearLayout here -->

< /FrameLayout>

RelativeLayout example:
RelativeLayout lets child views specify their position relative to the parent view or to each other (specified by ID). So you can align two elements by right border, or make one below another, centered in the screen, centered left, and so on. Elements are rendered in the order given, so if the first element is centered in the screen, other elements aligning themselves to that element will be aligned relative to screen center.

For example, if you need to create a text-editor with a status bar at the bottom, it is better to consider the RelativeLayout because:
- you do not know the height/width of the screen (you may know them, but you want to have a portable design between different phones)
- you do know the height of the status bar, so you can start drawing from the bottom, and keep the edit-text relative to this status-layout.

< RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">

< !-- Status layout -->
< LinearLayout
android:id="@+id/status_layout"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="20px"
android:layout_alignParentBottom="true">

< TextView
android:id="@+id/status_text"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="@string/status_text">
< /TextView>
< /LinearLayout>

< !-- Edit text layout -->
< LinearLayout
android:id="@+id/edit_layout"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="@id/status_layout">

< EditText
android:id="@+id/edit_text1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:editable="false"
android:visibility="visible"
android:cursorVisible="false"
android:gravity="top">
< /EditText>

< /LinearLayout>

< /RelativeLayout>

Code example: you may find useful to see an implementation of this in the Mezzofanti application – google code. The code is released under Apache License, ver 2.0, so you can freely use it free of charge in your own code. Consult the /layout directory.

Bookmark It

Hide Sites