Android Bootcamp Tanzania:understanding ui in_android


Published on

The Content helps those who wish to program mobile applications using android platform. The content has been used to conduct mobile application boot camps using android platform on different regions in Tanzania

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Dimensions
    dp (device independet pixel)
    sp(scale independet pixel)
    Resource color,dimen,string,string-array
  • Android Bootcamp Tanzania:understanding ui in_android

    1. 1.  Galileo 3.5  Helios 3.6  Indigo 3.7
    2. 2.  Before using eclipse and android SDK, you need to check that the Android Developer Tools are set and corresponds to android SDK is set directory correctly.  See next slide
    3. 3.  Android Virtual Device is now set
    4. 4.  Click file – New – Android project.  Enter the project name.  Select an Emulator to use  Enter application name  Package name – e.g com.emobilis – two sections*  Activity name
    5. 5.  Naming  Project Name  Application Name  Package Name  Min SDK  Target SDK  Manifest Files  Resource files  R file  Emulator
    6. 6.  Activity      R file Android API level 8 Resource file Manifest File
    7. 7.  An Activity is an application component that provides a screen with which users can interact in order to do something.  Such as dial the phone, take a photo, send an email, or view a map.  Each activity is given a window in which to draw its user interface.
    8. 8.  All activities will implement onCreate(Bundle) to do their initial setup.  onCreate() You must implement this method. The system calls this when creating your activity.  Within your implementation, you should initialize the essential components of your activity.  Most importantly, this is where you must call setContentView() to define the layout for the activity's user interface
    9. 9.   /* AUTO-GENERATED FILE. DO NOT MODIFY. This class was automatically generated by the * aapt tool from the resource data it found. It should not be modified by hand. */                   package cs454.demo; public final class R { public static final class attr { } public static final class drawable { public static final int icon=0x7f020000; } public static final class id { public static final int textview=0x7f050000; } public static final class layout { public static final int main=0x7f030000; } public static final class string { public static final int app_name=0x7f040001; public static final int hello=0x7f040000; } }
    10. 10.  What is a Resource File?  A resource file may contain a collection of icons, xml files for UI design, strings files etc.  In android, UI design is constructed in xml files located in res – layout.  Include drawable – use it for images, icons
    11. 11.  Creating a person example
    12. 12.  The next xml Files shows a TextView with a linear layout.  Linear layout allows a developers to arrange UI components in a vertical or horizontal manner.  A TextView shows text that can be edited – it’s a label.
    13. 13. Note: Interface is designed here
    14. 14.  Android Provides several UI components including  TextViews  EditText  TextArea  RadioButton  CheckBox  List  Buttons  Tabs  Menus  Etc We look on each UI component individually
    15. 15.  Displays text to the user and optionally allows them to edit it.  A TextView is a complete text editor, however the basic component is configured to not allow editing.  In order to edit EditText for a subclass that configures the text view for editing.
    16. 16.  Accessing our TextView from the android code.  We use the id to do this;  So, in android we add;  EditText t = (EditText)findViewById(;
    17. 17.  Allows you to separate your UI with the code that is controlling.  Allows developers arrange the java codes easily  Easy understanding of the Java programming in android
    18. 18.  EditText is a thin veneer over TextView that configures itself to be editable. <EditText android:id = "@+id/txtUser" android:layout_width="100px" android:layout_height="198dp" android:gravity="center“ />
    19. 19.  Represents a push-button widget. Push- buttons can be pressed, or clicked, by the user to perform an action <Button android:id = "@+id/btnRegister" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Register“ />
    20. 20.  Edit Text can also be used to input long text, recall , text areas.  This can be done by setting the layout width and height to defined pixels <EditText android:id = "@+id/txtComment" android:layout_width="200px" android:layout_height="200px" android:gravity="center“ />
    21. 21.  Accessing the Edit Text from the android code – (Our activity)  We use findViewById method to refer from the R directory. EditText tComment = (EditText)findViewById(;
    22. 22.  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.  However, contrary to aCheckBox, a radio button cannot be unchecked by the user once checked.
    23. 23.  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.
    24. 24. <RadioGroup android:id="@+id/radNotifications" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" > <RadioButton android:text=“Via Phone" android:id="@+id/RbPhone" android:layout_width="fill_parent" android:layout_height="wrap_content"> </RadioButton>
    25. 25. <RadioButton android:text=“Via Email" android:id="@+id/rdEmail" android:layout_width="fill_parent" android:layout_height="wrap_content"> </RadioButton> </RadioGroup>
    26. 26.  Accessing the Radio Buttons from the android code – (Our activity)  We use findViewById method to refer from the R directory. RadioButton tComment = (RadioButton)findViewById(; //second Radio RadioButton tComment = (RadioButton)findViewById(;
    27. 27.  Quickview  A toast is a message that appears on the surface of the screen for a moment, but it does not take focus (or pause the current activity).  so it cannot accept user input  You can customize the toast layout to include images
    28. 28.  A toast notification is a message that pops up on the surface of the window.  It only fills the amount of space required for the message and the user's current activity remains visible and interactive.  The notification automatically fades in and out, and does not accept interaction events.  The screenshot below shows an example toast notification from the Alarm application.
    29. 29. Toast.makeText(Hello.this, "Selected", Toast.LENGTH_SHORT).show();
    30. 30.  Add android:onClick attribute on the radio buttons in your xml file.  <RadioButton  android:id="@+id/radio_red" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Red" android:onClick="onRadioButtonClicked"/>
    31. 31.  Include this method in your activity – Note this method shares the same name with on Click attribute in your xml. //on click event in radio Buttons public void onRadioButtonClicked(View v) { // Perform action on clicks RadioButton rb = (RadioButton) v; Toast.makeText(Hello.this, rb.getText(), Toast.LENGTH_SHORT).show(); }
    32. 32.  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 xml would be the following.
    33. 33. Include this in your xml <CheckBox android:id="@+id/checkbox" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="check it out“ android:onClick="onCheckboxClicked" > Note: onClick attribute
    34. 34.  Include this in your activity public void onCheckboxClicked(View v) { // Perform action on clicks, depending on whether it's now checked if (((CheckBox) v).isChecked()) { Toast.makeText(Hello.this, "Selected", Toast.LENGTH_SHORT).show(); } else { Toast.makeText(Hello.this, "Not selected", Toast.LENGTH_SHORT).show(); } }
    35. 35.  ListView is a ViewGroup that creates a list of  scrollable items.   The list items are automatically inserted to  the list using a ListAdapter.
    36. 36.  Open the and make the class  extend ListActivity (instead of Activity):  public class Counties extends ListActivity { }
    37. 37. @Override public void onCreate(Bundle savedInstanceState) {   super.onCreate(savedInstanceState);   setListAdapter(new ArrayAdapter<String>(this, R.layout.login, COUNTIES));   ListView lv = getListView();   lv.setTextFilterEnabled(true); }
    38. 38. //Include this string array after the onCreate  method static final String[] COUNTIES = new String[] {   “Nairobi", “Kakamega", “Kisii", “Nakuru",  “Laikipia",“Bungoma", “Eldoret", “Kwale“ };
    39. 39.  Notice that this does not load a layout file for  the Activity .  which you usually do with setContentView(int)).   Instead, setListAdapter(ListAdapter) automatic ally adds a ListView to fill the entire screen of  the ListActivity.   This method takes an ArrayAdapter, which  manages the array of list items that will be  placed into the ListView. 
    40. 40.  Spinner is a widget similar to a drop-down list  for selecting items.   Mostly used where a user needs to select an  item from a list.
    41. 41.  Create an xml file in the res/layout/ and insert  the following xml codes.  Note  Spinner's android:prompt attribute  reference a string resource - string resource   is located in res/values.
    42. 42.  Open strings.xml – located in  res/values/strinng.xml  Add this line 
    43. 43.  The android.R.layout.simple_spinner_item ID references a  layout for the standard spinner appearance, defined by the  platform.   Then setDropDownViewResource(int) is called to define the  appearance for each item when the widget is  opened(simple_spinner_dropdown_item is another standard  layout defined by the platform).   Finally, the ArrayAdapter is set to associate all of its items  with the Spinner by calling setAdapter(T).
    44. 44.  Android offers a custom 2D graphics library  for drawing shapes and images.   The package is  where you'll find the common classes used  for drawing in two-dimensions.  A Drawable is a general abstraction for  "something that can be drawn.
    45. 45.  Creating from resource images  A simple way to add graphics to your  application is by referencing an image file  from your project resources.   Supported file types are PNG (preferred), JPG  (acceptable) and GIF (discouraged).   This technique would obviously be preferred for  application icons, logos, or other graphics such as  those used in a game
    46. 46.  To use an image resource, just add your file to  the res/drawable/ directory of your project.  From there, you can reference it from your  code or your XML layout.   Either way, it is referred using a resource ID,  which is the file name without the file type  extension (E.g., my_image.png is referenced  as my_image).
    47. 47.  Image View is a widget that allows placement  of an image in a window