Android User Interface Development for beginners
The strength of Android is to have models of devices for all needs: small screen's phones, big screen's phone, tablets,PDA,Smart TV etc. This is an advantage for users but a problem for android application developers. The problem with the screen size is a burden for web developers, and Android apps developers will not escape the rule.
To define our user interfaces we need to use layouts that make up the base class for containers of visual elements. They contain other views (buttons, lists, checkboxes, etc.) or other layouts.
Interfaces are defined using XML files. This format allows to have a graphical interface editor and to have a real separation between your Java (behavior) code and your interface. Everything that is done in XML could also be done in Java, though the code would be much more complex to maintain.
All XML layout files must be placed in the /res/layout directory of your Android project in order for the Android packaging tools to find them. Each XML file will result in a resource variable of the same name. For example, if we name our file /res/layout/main.xml, then we can access it in Java as R.layout.main.
There are several types of layouts among which we mention:
- LinearLayout
- RelativeLayout
- AbsoulteLayout
- TableLayout
Now let's talk about each Layout and it's specificities.
LinearLayout
This layout allows to place elements "one after the other" horizontally or vertically.
Several things are available to allow developers to customize the layout :
Layout Orientation
This is the first thing that you specify when you create your LinearLayout (android: orientation). This option specifies how the elements are aligned in this Layout.
Two options are available:
• Vertical: the views are placed on a verticle line one after the other.
• Horizontal: the views are placed on an horizontal line one beside the other.
Elements size
The LinearLayout and all the widgets that compose it must provide a size (height and width). So they have to set the following two properties: :
• android: layout_width
• android: layout_height
These two properties can take three types of value:
• A fixed-size eg 50px (pixels). So whatever the size of the screen, the item will occupy exactly 50px.
• fill_parent (or match_parent): we ask the component to occupy all the available space in its parent container (after the placement of other widgets).
• wrap_content: When layout has this property, its size depends directly on the size of its components.
This article is a continuation of the previous article, what we will do here is based on the project that we created the previous article : Android programming first tutorial
In this project try to put this code in your activity_main.xml file located in the "layout" folder under the "res" folder.(Click the image to see the code)
Here we have a main LinearLayout where Elements are placed vertically as it has this property android: orientation = "vertical"
In this main LinearLayout we have an other LinearLayout that contain three buttons ,those buttons will be placed horizontally although we do not specified a direction.The width of this layout will have the same width of its container (android:layout_width="match_parent") but its height will be the same with the heights of its contents. (android:layout_height="wrap_content").
So the views (Buttons in this case) will be placed horizontally in this second layout.
That's what we'll get:
RelativeLayout
The principle of RelativeLayout is to place element according to other elements of the container.
There are different ways that are available for the placement of elements in the case of a RelativeLayout:
Positioning relative to the container
In this relationship, you can link an element to its container:
• android: layout_alignParentTop (true / false): This option allows you to specify if the top of the element should be aligned with that of its container.
• The same principle applies for: android: layout_alignParentBottom, android: layout_alignParentLeft and android: layout_alignParentRight.
• android: layout_centerHorizontal : Indicates whether the item should be centered horizontally in its container.
• The same principle applies for : android: layout_centerVertical.
• android: layout_centerInParent: Allows you to indicate that the item should be centered horizontally and vertically in the container.
Position relative to other elements
In order to reference the position of one element relative to another, you have a simple and effective way:the identifiers (ID).
So that's how you can use an ID:
• A declaration of an element: android: id = "@ + id / idElem"
• In use: @ id / idElem
Now lets tlak about the available options :
• android: layout_above: Indicates that the element will be placed above that indicated by its id.
• android: layout_below: Indicates that the element will be placed below that indicated by its id.
• android: layout_toLeftOf: Indicates that the element be placed on the left of that specified by its id.
• android: layout_toRightOf: Indicates that the element will be placed to the right of that indicated by its id.
• android: layout_alignTop: Indicates that the top of our element is aligned with the top of the indicated element.
• android: layout_alignBottom: Indicates that the bottom of our element is aligned with the bottom of the indicated element.
• android: layout_alignLeft: Indicates the left side of our element is aligned with the left side of the indicated element.
• android: layout_alignRight: Indicates that the right side of our element is aligned with the right side of the specified element.
• android: layout_alignBaseLine: Indicates that the baselines of two elements are aligned.
We will take an example:
<?xml version="1.0"
encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<EditText
android:id="@+id/nomEdit"
android:hint="Enter your name "
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true" />
<EditText
android:id="@+id/prenomEdit"
android:hint="Enter your forname"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="@id/nomEdit" />
<Button
android:id="@+id/valider"
android:text="ok"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/prenomEdit"
android:layout_alignRight="@id/prenomEdit" />
<Button android:id="@+id/annuler"
android:text="cancel"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_toLeftOf="@id/valider" android:layout_alignTop="@id/valider" />
</RelativeLayout>
We will obtain this:
AbsoluteLayout
Android provides also the AbsoluteLayout container , the content is arranged according to specific coordinates - we shows it where to place an element specifying its coordinates X, Y, and the Android located it. This has the advantage of providing precise positioning; However, this also means that the views will have a correct aspect only on screens of a certain size, unless writing a lot of code to adjust the coordinates based on the screen size.
Android screens could have any size and these sizes are constantly changing, using AbsoluteLayout could become quite problematic.
Absolutelayout is deprecated because absolute positioning is not too much useful in world of various screen resolutions and aspect ratios. You'd usually leave element positioning to be computed by more flexible layouts.
TableLayout
Last basic layout , it allows you to organize the elements in a table as HTML, but without borders. Here's an example of using this layout:<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<!-- 2 columns -->
<TableRow
android:id="@+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip" >
<TextView
android:id="@+id/textView1"
android:text="Column 1"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="@+id/button1"
android:text="Column 2" />
</TableRow>
<!-- edittext span 2 column -->
<TableRow
android:id="@+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip" >
<EditText
android:id="@+id/editText1"
android:layout_span="2"
android:text="Column 1 & 2" />
</TableRow>
<!-- just draw a red line -->
<View
android:layout_height="2dip"
android:background="#FF0000" />
<!-- 3 columns -->
<TableRow
android:id="@+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip" >
<TextView
android:id="@+id/textView2"
android:text="Column 1"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="@+id/button2"
android:text="Column 2" />
<Button
android:id="@+id/button3"
android:text="Column 3" />
</TableRow>
<!-- display this button in 3rd column via layout_column(zero based) -->
<TableRow
android:id="@+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip" >
<Button
android:id="@+id/button4"
android:layout_column="2"
android:text="Column 3" />
</TableRow>
<!-- display this button in 2nd column via layout_column(zero based) -->
<TableRow
android:id="@+id/tableRow5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip" >
<Button
android:id="@+id/button5"
android:layout_column="1"
android:text="Column 2" />
</TableRow>
</TableLayout>
We will obtain this:
Commentaires
Enregistrer un commentaire
Your comment will be reviewed by moderators