Android

Android Linear Layout Example

Posted by:

Linear Layout is an android View Group that aligns all children in single oriented manner, vertically or horizontally. A Linear layout can have only one orientation, only vertical or only horizontal. The orientation can be specified by using attribute [cci]android:orientation[/cci].

Horizontal Orientation

By default, if you don’t specify the attribute [cci]android:orientation[/cci], the orientation of linear layout will be horizontal. But you can put [cci]android:orientation=”horizontal”[/cci] to set horizontal orientation. For example:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world"
         />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world1"
         />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world2"
         />
</LinearLayout>

The result of above layout is:

Linear layout example

Linear layout example

Vertical Orientation

To set the orieantation of linear layout to vertical, add [cci]android:orientation=”vertical”[/cci] to the View Group. For example:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world"
         />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world1"
         />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world2"
         />
</LinearLayout>

The result of above layout is:

Linear layout example

Linear layout example


 

Flexible Width or Hight of Children

Linear Layout support flexibility of width or height for its child to consume remaining space in the parent. Flexible width only supported in horizontal orientation and flexible height only supported in vertical orietation. Use [cci]android:layout_weight[/cci] to make a child flexible. The value of the attribute is an integer value. The larger number of [cci]android:layout_weight[/cci] of a child, it consumes more extra space in the parent. Default value of the attributes in 0.

Flexible Width in Horizontal Orientation

To make width of a child flexible, you must set it width to [cci]0dp[/cci] and layout_weight greater than 0.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

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

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="@string/button2" />

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

         />
</LinearLayout>

Here is the result:

Layout weight example

Layout weight example

Flexible Height in Vertical Orientation

To make height of a child flexible, you must set it height to [cci]0dp[/cci] and layout_weight greater than 0.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

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

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="@string/button2" />

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

         />
</LinearLayout>

Here is the result:

Layout weight example on vertical orientation

Layout weight example on vertical orientation

Setting margin to child

Linear Layout respects to margin attribute on child. To set margin, using [cci]android:layout_margin[/cci]. This attribute will apply to all 4 sides, top, right,bottom and left. If you need just apply margin with specified side, you can use [cci]android:layout_marginLeft[/cci],[cci]android:layout_marginTop[/cci],[cci]android:layout_marginRight[/cci],[cci]android:layout_marginBottom[/cci]. Note, you must put margin value in [cci]dp[/cci] unit.
Here is an example:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

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

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="@string/button2" />

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

         />
</LinearLayout>

Here is the result:

Layout margin example

Layout margin example

Setting gravity to child

Another feature of Linear Layout is gravity of a child. Gravity is an aligment of child with its parent. I will give tutorial about gravity in the next tutorial.

0

Android Relative Layout example

Posted by:

[cci]RelativeLayout[/cci] is one of android container or [cci]ViewGroup[/cci]. Like it’s name, the main feature of [cci]Relativelayout[/cci] is to place one [cci]View[/cci] relative to other [cci]View[/cci] or with it’s parent it’s self.

Place a view relative to other view

In order to make a relative position of one view to another view, an [cci]id[/cci] is must be defined in referred view. Says you have two [cci]TextView[/cci] in layout, you want second [cci]TextView[/cci] placed to the right of first [cci]TextView[/cci] but the top of second [cci]TextView[/cci] is place to bottom of first [cci]TextView[/cci]. To do this, you must define an [cci]id[/cci] to the first [cci]TextView[/cci].

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world"
         />
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/textView1"
        android:layout_below="@id/textView1"        
        android:text="@string/hay"
         />
</RelativeLayout>

In above source code, we have put 2 [cci]TextView[/cci]. The frist [cci]TextView[/cci] have an id [cci]textView1[/cci]. Now, take a look at hightlighted line of the above source code. The line [cci]android:layout_toRightOf=”@id/textView1″[/cci] means set the position of [cci]TextView[/cci] to the right of first [cci]TextView[/cci]. While [cci]android:layout_below=”@id/textView1″[/cci] means place second [cci]TextView[/cci] to the bottom of first [cci]TextView[/cci].
Here the result of above layout:

Relative layuot exampl

Relative layuot exampl

There are more attributes that can be used to make relative position between views. Here are the complete list:

  • [cci]android:layout_toLeftOf[/cci] Positions the right edge of this view to the left of the given anchor view ID.
  • [cci]android:layout_toRightOf[/cci] Positions the left edge of this view to the right of the given anchor view ID.
  • [cci]android:layout_above[/cci] Positions the bottom edge of this view above the given anchor view ID.
  • [cci]android:layout_below[/cci] Positions the bottom edge of this view below the given anchor view ID.
  • [cci]android:layout_alignBaseline[/cci] Positions the baseline of this view on the baseline of the given anchor view ID.
  • [cci]android:layout_alignLeft[/cci] Makes the left edge of this view match the left edge of the given anchor view ID.
  • [cci]android:layout_alignTop[/cci] Makes the top edge of this view match the top edge of the given anchor view ID.
  • [cci]android:layout_alignRight[/cci] Makes the right edge of this view match the right edge of the given anchor view ID.
  • [cci]android:layout_alignBottom[/cci] Makes the bottom edge of this view match the bottom edge of the given anchor view ID.
  • [cci]android:layout_toStartOf[/cci] Positions the end edge of this view to the start of the given anchor view ID.
  • [cci]android:layout_toEndOf[/cci] Positions the start edge of this view to the end of the given anchor view ID.
  • [cci]android:layout_alignStart[/cci] Makes the start edge of this view match the start edge of the given anchor view ID.
  • [cci]android:layout_alignEnd[/cci] Makes the end edge of this view match the end edge of the given anchor view ID.

 

Place a view relative to it’s parent

Another relative layout capability is place a view relative to it’s parent. This means you can make bottom edge of a view match bottom edge of its parent. Just add simple attribute [cci]android:layout_alignParentBottom=”true”[/cci] to your view then your view automatically aligned to its parent. I will give an example how to do this in code.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world"
        android:layout_alignParentBottom="true"/>

</RelativeLayout>

Here the result of above layout:

Relative layout example

Relative layout example

Except [cci]android:layout_alignParentBottom=”true”[/cci], there are another attributes for aligning to parent. Here are complete list

  • [cci]android:layout_alignParentTop=”true”[/cci] If true, makes the top edge of this view match the top edge of the parent.
  • [cci]android:layout_alignParentLeft=”true”[/cci] If true, makes the left edge of this view match the left edge of the parent.
  • [cci]android:layout_alignParentRight=”true”[/cci] If true, makes the right edge of this view match the right edge of the parent.
  • [cci]android:layout_alignParentBottom=”true”[/cci] If true, makes the bottom edge of this view match the bottom edge of the parent.
  • [cci]android:layout_alignParentTop=”true”[/cci] If true, makes the top edge of this view match the top edge of the parent.
  • [cci]android:layout_alignParentStart=”true”[/cci] If true, makes the start edge of this view match the start edge of the parent.
  • [cci]android:layout_alignParentEnd=”true”[/cci] If true, makes the end edge of this view match the end edge of the parent.
0

Give an ID to your view in android xml file

Posted by:

Give an ID to your view object is very useful if you want to refer to that view later in source code. For example you want to set text of a TextView in source code. To do that, put [cci]android:id[/cci] attibute to your view.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
         />
</RelativeLayout>

In above code, you can see I have put an [cci]android:id=”@+id/textView1″[/cci]. This line defines an [cci]id[/cci] of our [cci]TextView[/cci] to [cci]textView1[/cci].

Refers view from activity

After you have defined an id, now you can refer to your [cci]TextView[/cci] in an activity like this

TextView textView = (TextView) findViewById(R.id.textView1);

Now, with your [cci]TextView[/cci] in hand, you can set text to it as you want like this

if(textView != null) textView.setText("new text");

 

Refers view in xml file

Sometimes we need to refers to our view in the xml layout file. For example you want to align top another [cci]TextView[/cci] to other. To achieve this, you can refer to our last [cci]TextView[/cci] like this [cci]@id/textView1[/cci]. Note you must replace ‘+’ sign when referring to already defined [cci]id[/cci]. Use ‘+’ sign only in first time when you define an [cci]id[/cci].

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/textView1"/>
0

Android hello word application

Posted by:

This tutorial will guide you to create a simple hello word application in android. Through this tutorial you will learn about the basic understanding of android activity and layout. Most common tool to create android application is Eclipse ADT plugin. You can follow step by step how to install eclipse ADT Plugin in the official developer site here.

After your eclipse ADT plugin was installed, now you’re ready to create android Hello Word project. In eclipse, select menu

File->New->Other

This will open a wizard.

android project wizard

android project wizard

On the wizard, open  Android sub tree and choose Android Applicaton Project then click Next.

android new project

android new project

The wizard will prompt you to fill below informations:

  1. Application Name: this name will shown in the google play store
  2. Project Name: name used by eclipse, must be unique in a workspace
  3. Package Name: this is your application identifier, must be unique for each application.

The next screen will allow you to put icon for your application. Choose your application icon or just click next until you see this window:

create android activity

create android activity

Activity in android just like a screen that is visible to the user. For now, just choose Blank Activity. 

create android activity

create android activity

Now you must set Activity Name and Layout Name. Activity name is a class name for your activity and layout name is your layout file name. Click finish to close the wizard. Now, you will see a HelloWord project on eclipse project explorer. Here is the folder structure of HelloWord project.

android folder structure

android folder structure

Here is basic description about  project sub folders:

  1. src: contains your java source files
  2. bin: contains your compiled java class
  3. gen: contains android generated files
  4. libs: here you can place third party library (jar file)
  5. res: contains your projects’ resources, like images, icons, layouts, strings, etc

Now open [cci]res/layout/activity_main.xml[/cci] file, it will looks like this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world"
         />

</RelativeLayout>

This file defines your layout structure. You can place your view object here. There are two categories of view in android, [cci]View[/cci] and [cci]ViewGroup[/cci] or container. [cci]View[/cci] object can be [cci]TextView, EditText, Spinner[/cci], etc while [cci]ViewGroup[/cci] acts as the [cci]View[/cci] container.

As you can see from above source code, it uses [cci]RelativeLayout[/cci] as main container. This layout places it’s childs relative to other childs. With this layout you can place any child overlapping to others.  Another most common layout is [cci]LinearLayout.[/cci] The main function of [cci]LinearLayout[/cci] is to  place their child in orientation manner, vertical or horizontal.

Either [cci]View[/cci] and [cci]ViewGroup[/cci] must have [cci]android:layout_width[/cci] and [cci]android:layout_height[/cci], these attributes respectively defines [cci]View[/cci] width and height. You can put value for both attributes using integer value in [cci]dp[/cci] such as [cci]0dp, 30dp, 100dp[/cci], etc. [cci]dp[/cci] or [cci]dip[/cci] is android unit which means [cci]density independent pixels[/cci]. Also you can put following constant value :

  1. [cci]MATCH_PARENT: [/cci]make the size of [cci]View[/cci] as big as it’s parent (container) minus padding.
  2. [cci]WRAP_CONTENT: [/cci]make the size of[cci] View [/cci]to match content size.

Now take a look inside [cci]RelativeLayout[/cci] at above code. There is one TextView inside with an attribute [cci]android:text:”@string/hello_word”[/cci], this attribute defines the text for [cci]TextView[/cci], but as you can see, the attribute value is not direct string but refers to string resources. You can find the string resource in folder [cci]res/values/string.xml[/cci].

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">HelloWord</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Hello world!</string>
</resources>

Android will search in the string resources for string that has name [cci]hello_word[/cci] and then use the value. Actually you can put direct string like this [cci]android:text:”Hello world!”[/cci], but the recommended way is using string resource to put your string.

Now how to tell android to use this layout? Goto [cci]src[/cci] folder, and open [cci]MainActivity.java[/cci],

package com.semurjengkol.helloword;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

}

To use you layout in activity, you must override [cci]onCreate[/cci] method of the [cci]Activity[/cci] class and then call [cci]setContentView(R.layout.activity_main);[/cci] now you can run your [cci]HelloWord[/cci] application, it’s will looks like this.

Android hello word app

Android hello word app

Download source code HelloWord

0
Page 2 of 2 12