06. Android Basic Widget and Container
•Download as PPTX, PDF•
2 likes•1,172 views
This document discusses widgets and containers in Android layouts. It provides examples of common widgets like TextView, ImageView, Button, EditText, CheckBox and DigitalClock. It also demonstrates different container layouts, including LinearLayout, RelativeLayout and TableLayout. Code snippets are given to illustrate how to declare these widgets and containers in an XML layout file named main.xml.
Report
Share
06. Android Basic Widget and Container
- 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)
- 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
- 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