06. Widget and ContainerOum Saokosal

Master of Engineering in Information Systems, South Korea855-12-252-752

oum_saokosal@yahoo.com

Agenda

• Widget (View)• Container (Layout)

Recalling main.xml

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

xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" >

<TextView android:id="@+id/textView01"

android:layout_width="fill_parent" android:layout_height="wrap_content"

android:text="@string/hello" />

<ImageView android:id="@+id/ImageView01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ferrari"

/></LinearLayout>

Container/Layout

Widgets/View

Widgets/View

End of Container/Layout

main.xml - code

main.xml - Layout tool

Container/Layout

Widgets/ViewOutline of Layout

and View Component

Property of the Layout or View Component

Widget

Basic Widgets

• TextView• ImageView• Button• EditText• CheckBox• DigitalClock

TextView

TextView (1)<TextView

android:id="@+id/textView01" android:layout_width="fill_parent" android:layout_height="wrap_content"

android:text="@string/hello"/>

• What is @+id/? It represents a unique id. In @+id/textView01, the textView01 is the id.

TextView (2)

• Why you need the id, @+id/textView01?- Actually many widgets and containers do not need an id. - But you need an id when you want to access it in your Java code.

• How to access a widget in Java code?- To access your widget, use findViewbyId() and pass your widget’s id. For example: findViewbyId(R.id.textView01)

TextView (3) - Access via ID in Java Codepackage com.kosalab;

import android.app.Activity;import android.graphics.Color;import android.os.Bundle;import android.widget.TextView;

public class WidgetContainer extends Activity {public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); TextView tv =

(TextView)findViewById(R.id.textView01); tv.setBackgroundColor(Color.BLUE); }}

TextView (4)<TextView android:id="@+id/textView01"

android:layout_width="fill_parent" android:layout_height="wrap_content"

android:text="@string/hello"/>

• "@string/hello" retrieves hello from string resource.• android:text is where it displays a text. Actually you can

write like this: android:text="Hi my name is Kosal."

TextView (5) - android:text

<TextView android:id="@+id/textView01"

android:layout_width="fill_parent" android:layout_height="wrap_content"

android:text="Hi my name is Kosal."android:textSize="50dp"/>

TextView (6) - layout<TextView android:id="@+id/textView01"

android:layout_width="fill_parent" android:layout_height="wrap_content"

android:text="Hi my name is Kosal."/>

• fill_parent : the view wants to be as big as its parent.

• wrap_content : the view wants to be just big enough to enclose its content.

TextView (7) - Creating it in JavaTextView can be also created in Java:

package com.kosalab;

import android.app.Activity;import android.graphics.Color;import android.os.Bundle;import android.widget.TextView;

public class WidgetContainer extends Activity { @Override

public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);TextView txt = new TextView(this);

txt.setText("This text created in Java."); setContentView(txt); }}

TextView (8) - Note

• Even though you can create TextView directly in Java code, it is not recommended to do so, because it makes your code messier.

• You should put the view in XML and your main code in Java (“loosely couple” mechanism).

project.java main.xmlR.java

ImageView

ImageView (1)1. First, you should have an image( .jpg, .gif, .png, .bmp).

Please note that the image name MUST be lowercase:Mypic.jpg -> mypic.jpg

2. And then, you drag it to res/drawable folder.

-hdpi: high dot per inch-ldpi: low dot per inch-mdpi: medium dot per inch

For more details, visit:http://developer.android.com/guide/practices/screens_support.html

ImageView (2)

3. After dragged it, you can double check in R.java:public final class R {

… public static final class drawable {

public static final int ferrari=0x7f020000;

public static final int icon=0x7f020001;

}…

}

ImageView (3) – XML-based4. In main.xml:<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" >

<ImageView android:id="@+id/ImageView01" android:layout_width="wrap_content" android:layout_height="wrap_content"

android:src="@drawable/ferrari"/>

</LinearLayout>

ImageView (4) – Using Layout tool

1

2

3

4

Button

ButtonIn main.xml:<?xml version="1.0" encoding="utf-8"?><LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" ><TextView android:id="@+id/text“   android:layout_width="wrap_content"   android:layout_height="wrap_content"   android:text="Hello, I am a TextView" /><Button android:id="@+id/button"   android:layout_width="wrap_content"   android:layout_height="wrap_content"   android:text="Hello, I am a Button" />

</LinearLayout>

EditText

EditText<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android=

"http://schemas.android.com/apk/res/android"android:layout_width="fill_parent" android:layout_height="fill_parent"

android:orientation="vertical" >

<EditText

android:layout_width="fill_parent"

android:layout_height="wrap_content" /></LinearLayout>

CheckBox<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android=

"http://schemas.android.com/apk/res/android"android:layout_width="fill_parent" android:layout_height="fill_parent"

android:orientation="vertical" >

<CheckBoxandroid:text="Check Me!" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true“/>

</LinearLayout>

DigitalClock<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android=

"http://schemas.android.com/apk/res/android"android:layout_width="fill_parent" android:layout_height="fill_parent"

android:orientation="vertical" ><DigitalClock android:layout_width="wrap_content" android:layout_height="wrap_content“/>

</LinearLayout>

Container

Basic Containers

• LinearLayout• RelativeLayout• TableLayout

• More examples at:http://mobiforge.com/designing/story/understanding-user-interface-android-part-1-layouts

LinearLayout

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

xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" >

<TextView android:id="@+id/textView01"

android:layout_width="fill_parent" android:layout_height="wrap_content"

android:text="@string/hello" />

<ImageView android:id="@+id/ImageView01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ferrari"

/></LinearLayout>

Container/Layout

End of Container/Layout

main.xml - code

LinearLayout (1)

LinearLayout is a box model, in which widgets or child containers are lined up in a column or row, one after the next.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" >

...

...</LinearLayout>

LinearLayout (2) - xmlns<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"

>

• xmlns stands for XML namespace• xmlns:android means creating a namespace android

• "http://schemas.android.com/apk/res/android" is the default path for android namespace. DO NOT MODIFIED.

LinearLayout (3) - orientation• android:orientation="vertical" : make all

widgets float vertically.• android:orientation=“horizontal" : make all

widgets float horizontally.• android:layout_width="fill_parent" : the

layout width is as big as its parent.• android:layout_height="fill_parent": the

layout height to be as big as its parent.• Note that the parent is the screen.fill_parent here means the LinearLayout is as big as the screen.

LinearLayout (4) – more options

• android:gravity="center_vertical" : just like alignment, e.g. left, right, in MS Word.– top, bottom, left, right, center, fill– center_vertical, fill_vertical– center_horizontal, fill_horizontal– clip_vertical: to squeeze a clip into the layout vertical size.– clip_horizontal: to squeeze a clip into the layout horizontal size.

LinearLayout (4) android:padding• android:padding="50dp" : To make a

whitespace between widgets. Here the space all corners (top, bottom, left, right) is 50dp.

RelativeLayout

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content"> <EditText android:id="@+id/editText01" android:layout_width="fill_parent" android:layout_height="wrap_content"/> <Button android:id="@+id/buttonOK" android:layout_width="100dp" android:layout_height="wrap_content" android:layout_below="@id/editText01" android:layout_alignParentRight="true" android:layout_marginLeft="10dip" android:text="OK" /> <Button android:id="@+id/buttonCancel" android:layout_width="100dp" android:layout_height="wrap_content" android:layout_toLeftOf="@id/buttonOK" android:layout_alignTop="@id/buttonOK" android:text="Cancel" /></RelativeLayout>

TableLayout

TableLayout (1)

• TableLayout is similar to <table> in HTML.<TableLayout

xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content"> <TableRow>

... </TableRow> <TableRow>

... </TableRow></TableLayout>

<?xml version="1.0" encoding="utf-8"?><TableLayout xmlns:android=

"http://schemas.android.com/apk/res/android" android:layout_height="fill_parent" android:layout_width="fill_parent" android:background="#000"> <TableRow> <TextView android:text="User Name:" android:width ="100px" android:gravity="right" /> <EditText android:id="@+id/txtUserName" android:width="100px" /> </TableRow> <TableRow> <TextView android:text="Password:" android:gravity="right" /> <EditText android:id="@+id/txtPassword" android:password="true" /> </TableRow>

<TableRow> <TextView /> <CheckBox android:id="@+id/chkRememberPassword" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Remember Password" /> </TableRow> <TableRow> <Button android:id="@+id/buttonSignIn" android:text="Log In" /> </TableRow></TableLayout>

Go on to the next slide