Android Basic Widget and Container By Oum Saokosal Note: This tutorial is for ADT - Eclipse

1. 06. Widget and Container
Oum Saokosal
Master of Engineering in Information Systems, South Korea
855-12-252-752
oum_saokosal@yahoo.com

2. Agenda
• Widget (View)
• Container (Layout)

3. Recalling main.xml

4. <?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

5. main.xml - Layout tool
Container/Layout
Widgets/View
Outline of Layout
and View Component
Property of the Layout or
View Component

6. Widget

7. Basic Widgets
• TextView
• ImageView
• Button
• EditText
• CheckBox
• DigitalClock

8. TextView

9. 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.

10. 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)

11. TextView (3) - Access via ID in Java Code
package 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);
}
}

13. 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."

14. 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"
/>

16. 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.

17. TextView (7) - Creating it in Java
TextView 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);
}
}

19. 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

20. ImageView

21. 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

22. 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;
}
…
}

23. ImageView (3) – XML-based
4. 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>

25. ImageView (4) – Using Layout tool
1
2
3
4

26. Button

27. Button
In 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>

29. EditText

30. 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>

32. 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" >
<CheckBox
android:text="Check Me!"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true“
/>
</LinearLayout>

33. 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>

35. Container

36. Basic Containers
• LinearLayout
• RelativeLayout
• TableLayout
• More examples at:
http://mobiforge.com/designing/story/understanding-user-
interface-android-part-1-layouts

37. LinearLayout

38. <?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

39. 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>

40. 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.

41. 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.

42. 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.

43. LinearLayout (4) android:padding
• android:padding="50dp" : To make a whitespace
between widgets. Here the space all corners (top,
bottom, left, right) is 50dp.

44. RelativeLayout

45. <?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>

47. TableLayout

48. 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>

49. <?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>

50. <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>

52. Go on to the next slide