Lập trình Android tiếng Việt - Chapter 4: Android - User Interfaces Using XML Layouts

 extension of TextView that allows updates. The control configures itself to be editable. Important Java methods are: 	txtBox.setText(“someValue”) and 	txtBox.getText().toString() 42 4. Android – UI - User Interfaces Basic Widgets: EditText 42 In addition to the standard TextView properties EditText has many others features such as: • android:autoText, 	(true/false) provides automatic spelling assistance • android:capitalize, 	(words/sentences) automatic capitalization • android:digits, 	to configure the field to accept only certain digits • android:singleLine, 	is the field for single-line / multiple-line input • android:password, 	(true/false) controls field’s visibility • android:numeric, 	(integer, decimal, signed) controls numeric format • android:phonenumber, (true/false) Formatting phone numbers 43 4. Android – UI - User Interfaces Basic Widgets: EditViews 43 Example ... ... Upper case words Enter “teh” It will be changed to: “The” Suggestion (grey) 44 4. Android – UI - User Interfaces Basic Widgets: Example 1 44 In this little example we will use an AbsoluteLayout holding a label( TexView), a textBox (EditText), and a Button. We will use the view as a sort of simplified login screen. Hint Capitals & spelling A brief message box Setting text 45 4. Android – UI - User Interfaces Basic Widgets: Example 1 45 Application’s Layout: main.xml 46 4. Android – UI - User Interfaces Basic Widgets: Example 1 46 Android’s Application (1 of 2) package cis493.gui; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.EditText; import android.widget.TextView; import android.widget.Toast; //////////////////////////////////////////////////////////////////////// // "LOGIN" - a gentle introduction to UI controls public class AndDemo extends Activity { TextView labelUserName; EditText txtUserName; Button btnBegin; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); //binding the UI's controls defined in "main.xml" to Java code labelUserName = (TextView) findViewById(R.id.labelUserName); txtUserName = (EditText) findViewById(R.id.txtUserName); btnBegin = (Button) findViewById(R.id.btnBegin); 47 4. Android – UI - User Interfaces Basic Widgets: Example 1 47 Android’s Application (2 of 2) //LISTENER: wiring the button widget to events-&-code btnBegin.setOnClickListener(new OnClickListener() { 	@Override 	public void onClick(View v) { 	String userName = txtUserName.getText().toString(); 	if (userName.compareTo("Maria Macarena")==0){ 	labelUserName.setText("OK, please wait..."); 	Toast.makeText(getApplicationContext(), 	"Bienvenido " + userName, 	Toast.LENGTH_SHORT).show(); 	} 	Toast.makeText(getApplicationContext(), 	"Bienvenido " + userName, 	Toast.LENGTH_SHORT).show(); 	} 	 });// onClick }//onCreate }//class 48 4. Android – UI - User Interfaces Basic Widgets: Example 1 48 Note: Another way of defining a Listener for multiple button widgets 49 4. Android – UI - User Interfaces Basic Widgets: CheckBox 49 A checkbox is a specific type of two-states button that can be either checked or unchecked. A example usage of a checkbox inside your activity would be the following: 50 4. Android – UI - User Interfaces Example 2: CheckBox 50 Complete code for the checkBox demo (1 of 3) 51 4. Android – UI - User Interfaces Example 2: CheckBox 51 Complete code for the checkBox demo (2 of 3) 52 4. Android – UI - User Interfaces Example 2: CheckBox 52 Complete code for the checkBox demo (1 of 2) 53 4. Android – UI - User Interfaces Basic Widgets: RadioButtons 53 A radio button is a two-states button that can be either checked or unchecked. When the radio button is unchecked, the user can press or click it to check it. Radio buttons are normally used together in a RadioGroup. When several radio buttons live inside a radio group, checking one radio button unchecks all the others. RadioButton inherits from … TextView. Hence, all the standard TextView properties for font face, style, color, etc. are available for controlling the look of radio buttons. Similarly, you can call isChecked() on a RadioButton to see if it is selected, toggle() to select it, and so on, like you can with a CheckBox. 54 4. Android – UI - User Interfaces Basic Widgets: RadioButtons 54 Example 	We extend the previous example by adding a RadioGroup and three RadioButtons. Only new XML and Java code is shown:               ...   55 4. Android – UI - User Interfaces Basic Widgets: RadioButtons 55 Android Activity (1 of 3) package cis493.demoui; // example using RadioButtons import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.CheckBox; import android.widget.RadioButton; import android.widget.RadioGroup; import android.widget.Toast; public class AndDemoUI extends Activity { CheckBox chkCream; CheckBox chkSugar; Button btnPay; RadioGroup radCoffeeType; RadioButton radDecaf; RadioButton radExpresso; RadioButton radColombian; 56 4. Android – UI - User Interfaces Basic Widgets: RadioButtons 56 Android Activity (2 of 3) @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); //binding XMl controls to Java code chkCream = (CheckBox)findViewById(R.id.chkCream); chkSugar = (CheckBox)findViewById(R.id.chkSugar); btnPay = (Button) findViewById(R.id.btnPay); radCoffeeType = (RadioGroup)findViewById(R.id.radGroupCoffeeType); radDecaf = (RadioButton)findViewById(R.id.radDecaf); radExpresso = (RadioButton)findViewById(R.id.radExpresso); radColombian = (RadioButton)findViewById(R.id.radColombian); 57 4. Android – UI - User Interfaces Basic Widgets: RadioButtons 57 //LISTENER: wiring button-events-&-code btnPay.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { String msg = "Coffee "; if (chkCream.isChecked()) 	msg += " & cream "; if (chkSugar.isChecked()) 	msg += " & Sugar"; // get radio buttons ID number int radioId = radCoffeeType.getCheckedRadioButtonId(); // compare selected's Id with individual RadioButtons ID if (radColombian.getId()== radioId) msg = “Colombian " + msg; // similarly you may use .isChecked() on each RadioButton if (radExpresso.isChecked()) msg = "Expresso " + msg; Toast.makeText(getApplicationContext(), msg, Toast.LENGTH_SHORT).show(); // go now and compute cost... }// onClick }); }// onCreate }// class 58 4. Android – UI - User Interfaces Basic Widgets: RadioButtons 58 Example 	This UI uses RadioButtons and 	CheckBoxes 	to define choices RadioGroup Summary of choices UI – Other Features 59 All widgets extend View therefore they acquire a number of useful View properties and methods including: XML Controls the focus sequence: android:visibility Android:background Java methods myButton.requestFocus() myTextBox.isFocused() myWidget.setEnabled() myWidget.isEnabled() UI - User Interfaces 60 Questions ? UI - User Interfaces 61 Resource: DroidDraw www.droidDraw.org 62 Android Asset Studio – Beta (Accessed: 18-Jan-2011) AAS Link: 	  Icon Gen	  Pencil 1.2	  Video: 	 WARNING: These utilities are currently in beta. Utilities that help in the design and development of Android application user interfaces. This library currently consists of three individual tools for designers and developers: 1. UI Prototyping Stencils A set of stencils for the Pencil GUI prototyping tool, which is available as an add-on for Firefox or as a standalone download. 2. Android Asset Studio Try out the beta version: Android Asset Studio (shortlink:  A web-based set of tools for generating graphics and other assets that would eventually be in an Android application's res/ directory. Currently available asset generators area available for: Launcher icons Menu icons Tab icons Notification icons Support for creation of XML resources and nine-patches is planned for a future release. 3. Android Icon Templates A set of Photoshop icon templates that follow the icon design guidelines, complementing the official Android Icon Templates Pack. 63 Questions - Measuring Graphic Elements Q. What is dpi ? Stands for dots per inch. You can compute it using the following formula: 	 dpi = sqrt (width_pixels^2 + height_pixels^2) / diagonal_inches G1 (base device 320x480)	155.92 dpi (3.7 in diagonally) Nexus (480x800)	252.15 dpi Q. What is my Emulator’s Screen Resolution? When creating an AVD you could set the entry “Abstracted LCD density” parameter to anything. Its default value is 160 dpi (use 260 for Nexus). Q. How Android deals with screen resolutions?   Illustration of how the Android platform maps actual screen densities and sizes to generalized density and size configurations. 64 Questions - Measuring Graphic Elements Q. What do I gain by using screen densities? More homogeneous results as shown below Q. How to set different density/size screens in my application? The following manifest fragments declares support for small, normal, large, and xlarge screens in any density.         ... Examples of density independence on WVGA high density (left), HVGA medium density (center), and QVGA low density (right). 65 Questions - Measuring Graphic Elements Q. Give me an example on how to use dip units. Assume you design your interface for a G1 phone having 320x480 pixels (Abstracted LCD density is 160 – See your AVD entry) You want a button to be hand-placed in the middle of the screen. You could allocate the 320 horizontal pixels as [ 100 + 120 + 100 ]. The XML would be android:layout_height="wrap_content" android:layout_width="120dip" android:layout_x="100dip" android:layout_y=“240dip" android:text="Go" android:id="@+id/btnGo" Instead of using pixels (px) you should use dip. If the application is deployed on a higher resolution screen (more pixels in 1 dip) the button is still mapped to the middle of the screen.