Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

01 09 - graphical user interface - basic widgets


Published on

Android graphical user interface - basic widgets

Published in: Technology
  • Be the first to comment

  • Be the first to like this

01 09 - graphical user interface - basic widgets

  1. 1. Android Graphical User Interface
  2. 2. Agenda Basic Widgets Labels Buttons Edit Text Check Box Spinner RadioGroup
  3. 3. Basic Widgets
  4. 4. Android Basics: Main components of Interest • the control file-tells the system what to do with the top- level componentsAndroidManifest.xml: • an object that has a life cycle and is a chunk of code that does some work. Corresponds to a single screen.Activity: • an object that knows how to draw itself to the screenView: • a simple message object that represents an "intention" to do something. Consider an intent received when an event is triggered (e.g., a phone ring) Intent:
  5. 5. Basic Widgets: Labels •A label is called in android a TextView. •TextViews are typically used to display a caption. •TextViews are not editable, therefore they take no input. <?xml version="1.0" encoding="utf-8"?> <AbsoluteLayout android:id="@+id/absLayout" android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android=" droid”> <TextView android:id="@+id/myTextView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#ff0000ff" android:padding="3px" android:text="Enter User Name" android:textSize="16sp” android:textStyle="bold" android:gravity="center“ android:layout_x="20px" android:layout_y="22px“ > </TextView> </AbsoluteLayout>
  6. 6. Basic Widgets: Buttons •A Button widget allows the simulation of a clicking action on a GUI. •Button is a subclass of TextView. Therefore formatting a Button’s face is similar to the setting of a TextView. <?xml version="1.0" encoding="utf-8"?> <AbsoluteLayout android:id="@+id/absLayout" android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android=" droid”> <Button android:id="@+id/btnExitApp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="10px" android:layout_marginLeft="5px" android:text="Exit Application" android:textSize="16sp" android:textStyle="bold" android:gravity="center" android:layout_gravity="center_horizontal”> </Button> </AbsoluteLayout>
  7. 7. Basic Widgets: Images Image View and Image Button are two Android widgets that allow embedding of images in your applications. Both are image-based widgets analogue to TextView and Button, respectively. Each widget takes an android:src or android:background attribute (in an XML layout) to specify what picture to use. Pictures are usually reference a drawable resource. You can also set the image content based on a URI from a content provider via setImageURI(). ImageButton, is a subclass of Image View. It adds the standard Button behavior for responding to click events. ... <ImageButton android:id="@+id/myImageBtn1" android:background="@drawable/defa ult_wallpaper" android:layout_width="125px" android:layout_height="131px“ > </ImageButton> <ImageView android:id="@+id/myImageView1" android:background="@drawable/ic_l auncher_android" android:layout_width="108px" android:layout_height="90px“> </ImageView>
  8. 8. Basic Widgets: Edit Text The EditText(or textBox) widget is an extension of TextView that allows updates. The control configures itself to be editable. Important Java methods are: txtBox.setText(“someValue”) and txtBox.getText().toString() 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
  9. 9. Basic Widgets: Edit Text
  10. 10. Edit Text  <EditText android:id="@+id/edittext" android:layout_width="fill_parent" android:layout_height="wrap_content"/>  final EditText edittext = (EditText) findViewById(; edittext.setOnKeyListener(new OnKeyListener() { public boolean onKey(View v, int keyCode, KeyEvent event) { // If the event is a key-down event on the "enter" button if ((event.getAction() == KeyEvent.ACTION_DOWN) && (KeyEvent.KEYCODE_ENTER)) { // Perform action keyCode == on key press Toast.makeText(HelloFormStuff.this, edittext.getText(), Toast.LENGTH_SHORT).show(); return true; } return false; } });
  11. 11. Basic Widgets: Check Box 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 <CheckBox android:id="@+id/chkCream" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Cream" android:textStyle="bold" > </CheckBox> <CheckBox android:id="@+id/chkSugar" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Sugar" android:textStyle="bold" > </CheckBox>
  12. 12. Check Box  <CheckBox android:id="@+id/checkbox" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="check it out" />  final CheckBox checkbox = (CheckBox) findViewById(; checkbox.setOnClickListener(new OnClickListener() { public void onClick(View v) { // Perform action on clicks, depending on whether it's now checked if (((CheckBox) v).isChecked()) { Toast.makeText(HelloFormStuff.this, "Selected", Toast.LENGTH_SHORT).show(); } else { Toast.makeText(HelloFormStuff.this, "Not selected", Toast.LENGTH_SHORT).show(); } } });
  13. 13. Basic Widgets: Spinner [listbox] A view that displays one child at a time and lets the user pick among them. The items in the Spinner come from the Adapter associated with this view. <Spinner android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/State"/>
  14. 14. Basic Widgets: RadioGroup A view that displays one child at a time and lets the user pick among them. The items in the Spinner come from the Adapter associated with this view. <RadioGroup android:layout_height="wrap_content" android:layout_width="fill_parent" android:orientation="vertical"> <RadioButton android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="Veg" android:id="@+id/radio_veg"/> <RadioButton android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="Non-Veg" android:id="@+id/radio_nonveg"/> </RadioGroup>
  15. 15. Basic Widgets: Radio Buttons  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.
  16. 16. Radio Button <RadioGroup android:layout_width="fill_parent" android:layout_height="wrap_cont ent” android:orientation="vertical"> <RadioButton android:id="@+id/radio_red“ android:layout_width="wrap_content“ android:layout_height="wrap_content“ android:text="Red" /> <RadioButton android:id="@+id/radio_blue“ android:layout_width="wrap_content“ android:layout_height="wrap_content“ android:text="Blue" /> </RadioGroup>
  17. 17. UI –Other Features  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()
  18. 18. Questions?