06. advanced widgetict.edu.mn/uploaded/file_manager/files/06 widget.pdf · project name :...

DKU-MUST Mobile ICT Education Center

06. Advanced Widget

Goal

• Learn how to deal with advanced widget.

• Learn how the View Container and its applications

• Learn how to set the AndroidManiFest.xml

Analog clock, Digital clock

XML Code Example of the Analog/Digital clock

1. Advanced Widget ▶ Date/Time Widget

Chronometer

XML Code Example of the Chronometer


TimePicker,DatePicker,CalendarView

XML Code Example of TimePicker, DatePicker, CalendarView

캘린더뷰는허니콤(3.0)부터지원됨


[Practice 6-1] Create a Date/Time booking App(1/8)

Create a Date/Time Booking(Reservation) App

Using the Date/Time Widget

Project Info.

Project Name : Project6_1

Package Name : com.cookandroid.project6_1

Build SDK : Goolge API 15 or 16

Minimum Required SDK : API 15 or 16

Activity Name : Project6_1Activity

Layout Name : main


Design Screen (1/2)

• LinearLayout

Chronometer 1, Button 1

Widget id : chronometer1, btnStart

• RadioGroup

RadioButton 2

RaioButton Widget id : rdoCal, rdoTime

• LinearLayout

CalendarView 1, TimePicker 1 in the FrameLayout

LinearLayout, layout_weight is 1

Widget id : calendarView1, timePicker1

• LinearLayout

Button 1, TextView 10

Button id : btnEnd

TextView id(Odd number of times): tvYear, tvMonth, tvDay, tvHour, tvMinute



Design the Screen (2/2)



Java Coding 1



Java Coding 2

12 widgets on the widget variable assignment.

First, CalendarView, TimePicker Invisible



Java Coding 3

When you click RadioButton, write the Click Event(Show the eather CalendarView or TimePicker)



Java Coding 4

Write the Click Listener(event)

When you click the “Reservation Start”, start the Chronometer.

When you click the “Reservation End”, end the Chronometer.



Java Coding 5

When you click the “Reservation End”,show the TextView(Date, Month, Year – CalenderView setting) and TimePicker(Hour, Minute – TimePicker setting)



Change the <Practice 6-1>

Change the CalendarView to DatePicker

Delete the “Reservation Start” and “Reservation End”When you click the “chronometer”,reservation start.When you long click the year,acction the reservation end.

Before you click on the Chronometer, RadioButton, DatePicker, TimePickeris not set to visible.When you click the Chronometer,RadioButton visible.When you long click the year,RadioButton, DatePicker, TimePickerinvisible.

[Self Test 6-1]


AutoCompleteTextView, MultiAutoCompleteTextView

AutoCompleteTextView

An editable text view that shows completion suggestions automatically while the user is typing. The list of suggestions is displayed in a drop down menu from which the user can choose an item to replace the content of the edit box with.

The drop down can be dismissed at any time by pressing the back key or, if no item is selected in the drop down, by pressing the enter/dpad center key.

The list of suggestions is obtained from a data adapter and appears only after a given number of characters defined by the threshold.

1. Advanced Widget ▶ Other related widget

AutoCompleteTextView, MultiAutoCompleteTextView

MultiAutoCompleteTextView

An editable text view, extending AutoCompleteTextView, that can show completion suggestions for the substring of the text where the user is typing instead of necessarily for the entire thing.

You must provide a MultiAutoCompleteTextView.Tokenizer to distinguish the various substrings.


XML Code Example of AutoCompleteTextView, MultiAutoCompleteTextView


Java Code of AutoCompleteTextView, MultiAutoCompleteTextView


ProgressBar, SeekBar, RatingBar


XML Code Example of ProgressBar, SeekBar, RatingBar


ScrollView

Layout container for a view hierarchy that can be scrolled by the user, allowing it to be larger than the physical display. A ScrollView is a FrameLayout, meaning you should place one child in it containing the entire contents to scroll; this child may itself be a layout manager with a complex hierarchy of objects. A child that is often used is a LinearLayout in a vertical orientation, presenting a vertical array of top-level items that the user can scroll through.

You should never use a ScrollView with a ListView, because ListView takes care of its own vertical scrolling. Most importantly, doing this defeats all of the important optimizations in ListView for dealing with large lists, since it effectively forces the ListView to display its entire list of items to fill up the infinite container supplied by ScrollView.

The TextView class also takes care of its own scrolling, so does not require a ScrollView, but using the two together is possible to achieve the effect of a text view within a larger container.

ScrollView only supports vertical scrolling. For horizontal scrolling, use HorizontalScrollView.

2. View Container▶ Simple Function of the View Container

XML Code Example of ScrollView


SlidingDrawer

SlidingDrawer hides content out of the screen and allows the user to drag a handle to bring the content on screen. SlidingDrawer can be used vertically or horizontally. A special widget composed of two children views: the handle, that the users drags, and the content, attached to the handle and dragged with it. SlidingDrawer should be used as an overlay inside layouts. This means SlidingDrawer should only be used inside of a FrameLayout or a RelativeLayout for instance. The size of the SlidingDrawer defines how much space the content will occupy once slid out so SlidingDrawer should usually use match_parent for both its dimensions. Inside an XML layout, SlidingDrawer must define the id of the handle and of the content:


SlidingDrawer

Basic Form


XML Code Example of SlidingDrawer


ViewFlipper

Simple ViewAnimator that will animate between two or more views that have been added to it. Only one child is shown at a time. If requested, can automatically flip between each child at a regular interval.

Basic Form

2. View Container▶ Simple Function of the View Container(Requires Java linkage)

XML Code Example of ViewFlipper

2. View Container▶ Simple Function of the View Container(Requires Java linkage)

Java Code Example of ViewFlipper

2. View Container▶ Complex Function of the View Container(Requires Java linkage)

TabHost

Container for a tabbed window view. This object holds two children: a set of tab labels that the user clicks to select a specific tab, and a FrameLayout object that displays the contents of that page. The individual elements are typically controlled using this container object, rather than setting values on the child elements themselves.

Basic Form


TabHost

Java Code


XML Code Example of TabHost


Java Code Example of TabHost


WebView

A View that displays web pages.

This class is the basis upon which you can roll your own web browser or simply display some online content within your Activity.

It uses the WebKit rendering engine to display web pages and includes methods to navigate forward and backward through a history, zoom in and out, perform text searches and more.

Note that, in order for your Activity to access the Internet and load web pages in a WebView, you must add the INTERNET permissions to your Android Manifest file

- <uses-permission android:name="android.permission.INTERNET" />


[Practice 6-2] Creating a simple web browser (1/8)

Creating a simple web browser

When you type a URL in the edit text, go to the URL

Project Info.

Project Name : Project6_2

Package Name : com.cookandroid.project6_2

build SDK : Goolge API 15 or 16

Minimum Required SDK : API 15 or 16

Activity Name : Project6_2Activity

Layout Name : main

Title : Project6_2


Design of Screen

Add a LinearLayout, - One EditText, Two Botton

Create a WebView at the bottom

Widget Id are edtUrl, btnGo, btnBack, webView1



AndroidManifest.xml (1/2)



AndroidManifest.xml (2/2)



Java coding 1



Java Coding 2

Automatically override the method

Position the mouse cursorin the CookWebViewClient class,Select the Eclipse menu [Source]-[Override/Implements Methods]

Select the shouldOverrideUrlLoading() method



Java coding 3



Adding Internet Permissions in the AndroidManifest.xml



DKU-MUST Mobile ICT Education Center

06. advanced widgetict.edu.mn/uploaded/file_manager/files/06 widget.pdf · project name :...

Documents