06. android basic widget and container
TRANSCRIPT
![Page 1: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/1.jpg)
06. Widget and ContainerOum Saokosal
Master of Engineering in Information Systems, South Korea855-12-252-752
![Page 2: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/2.jpg)
Agenda
• Widget (View)• Container (Layout)
![Page 3: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/3.jpg)
Recalling main.xml
![Page 4: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/4.jpg)
<?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
![Page 5: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/5.jpg)
main.xml - Layout tool
Container/Layout
Widgets/ViewOutline of Layout
and View Component
Property of the Layout or View Component
![Page 6: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/6.jpg)
Widget
![Page 7: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/7.jpg)
Basic Widgets
• TextView• ImageView• Button• EditText• CheckBox• DigitalClock
![Page 8: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/8.jpg)
TextView
![Page 9: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/9.jpg)
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.
![Page 10: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/10.jpg)
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)
![Page 11: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/11.jpg)
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); }}
![Page 12: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/12.jpg)
![Page 13: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/13.jpg)
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."
![Page 14: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/14.jpg)
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"/>
![Page 15: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/15.jpg)
![Page 16: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/16.jpg)
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.
![Page 17: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/17.jpg)
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); }}
![Page 18: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/18.jpg)
![Page 19: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/19.jpg)
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
![Page 20: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/20.jpg)
ImageView
![Page 21: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/21.jpg)
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
![Page 22: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/22.jpg)
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;
}…
}
![Page 23: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/23.jpg)
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>
![Page 24: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/24.jpg)
![Page 25: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/25.jpg)
ImageView (4) – Using Layout tool
1
2
3
4
![Page 26: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/26.jpg)
Button
![Page 27: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/27.jpg)
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>
![Page 28: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/28.jpg)
![Page 29: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/29.jpg)
EditText
![Page 30: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/30.jpg)
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>
![Page 31: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/31.jpg)
![Page 32: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/32.jpg)
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>
![Page 33: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/33.jpg)
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>
![Page 34: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/34.jpg)
![Page 35: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/35.jpg)
Container
![Page 36: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/36.jpg)
Basic Containers
• LinearLayout• RelativeLayout• TableLayout
• More examples at:http://mobiforge.com/designing/story/understanding-user-interface-android-part-1-layouts
![Page 37: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/37.jpg)
LinearLayout
![Page 38: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/38.jpg)
<?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
![Page 39: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/39.jpg)
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>
![Page 40: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/40.jpg)
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.
![Page 41: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/41.jpg)
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.
![Page 42: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/42.jpg)
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.
![Page 43: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/43.jpg)
LinearLayout (4) android:padding• android:padding="50dp" : To make a
whitespace between widgets. Here the space all corners (top, bottom, left, right) is 50dp.
![Page 44: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/44.jpg)
RelativeLayout
![Page 45: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/45.jpg)
<?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>
![Page 46: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/46.jpg)
![Page 47: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/47.jpg)
TableLayout
![Page 48: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/48.jpg)
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>
![Page 49: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/49.jpg)
<?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>
![Page 50: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/50.jpg)
<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>
![Page 51: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/51.jpg)
![Page 52: 06. Android Basic Widget and Container](https://reader033.vdocuments.us/reader033/viewer/2022051707/58edf5ec1a28abf0658b46b7/html5/thumbnails/52.jpg)
Go on to the next slide