Mobile Application Development BSCS-7 Lecture # 8

Mobile Design Principles – 1. Who? User requirements

Mobile Design Principles – 2. Cues

Mobile Design Principles – 3. Fingers

Mobile Design Principles – 4. Clean Use a grid

Mobile Design Principles – 5. Color, Size, Shape

Mobile Design Principles – 6. Feedback

UI Layouts Basic building block for UI is a View object which is created from View class and occupies a rectangular area on screen and is responsible for drawing and event handling. View is base class for widgets, which are used to create interactive UI components like buttons, text fields, etc. ViewGroup is a subclass of View and provides invisible container that hold other Views or other ViewGroups and define their layout properties. At third level we have different layouts which are subclasses of ViewGroup class and a typical layout defines visual structure for an Android UI and can be created either at run time using View/ViewGroup objects or you can declare your layout using simple XML file main_layout.xml which is located in the res/layout folder of your project. Once your layout is defined, you can load layout resource from your application code, in your Activity.onCreate() callback implementation as shown below: public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); }

UI Layouts - Types S.N. Layout & Description 1 Linear Layout a view group that aligns all children in a single direction, vertically or horizontally. 2 Relative Layout a view group that displays child views in relative positions. 3 Table Layout a view that groups views into rows and columns. 4 Absolute Layout enables you to specify exact location of its children. 5 Frame Layout a placeholder on screen that you can use to display a single view. 6 List View a view group that displays a list of scrollable items. 7 Grid View a ViewGroup that displays items in a two-dimensional, scrollable grid.

UI Layouts - View Input Events Two aspects of a UI are screen layout (made up of View objects, such as text and button) event handling A view object may have a unique ID assigned to it which will identify the View uniquely within the tree. The syntax for an ID, inside an XML tag is: The at-symbol (@) at the beginning of the string indicates that the XML parser should parse and expand the rest of the ID string and identify it as an ID resource. The plus-symbol (+) means that this is a new resource name that must be created and added to our resources. To create an instance of the view object and capture it from the layout, use the following: UI Layouts - View Identification android:id="@+id/my_button" Button myButton = (Button) findViewById(R.id.my_button);

Toast android.widget.Toast A toast is a view containing a quick little message for the user. A toast provides simple feedback about an operation in a small popup. It only fills the amount of space required for the message and the current activity remains visible and interactive. Steps Instantiate a Toast object with one of the makeText() methods. This method takes three parameters: the application Context, the text message, and the duration for the toast. It returns a properly initialized Toast object. Context context = getApplicationContext(); CharSequence text = "Hello toast!"; int duration = Toast.LENGTH_SHORT; Toast toast = Toast.makeText(context, text, duration); toast.show(); // Toast.makeText(context, text, duration).show();

Toast Positioning your Toast The first parameter of the setGravity() method specifies the overall position of the Toast. You can use the following constants in the Gravity class to specify the overall position: TOP • BOTTOM • LEFT • RIGHT • CENTER CENTER_HORIZONTAL • CENTER_VERTICAL Each of these constants defines the position in either the X or Y direction, except for the CENTER constant which implies centered both horizontally and vertically. You can combine these constants using the | (or) operator. The two other parameters of the setGravity() method are an X and Y offset to the position defined by the Gravity constant. Constants int LENGTH_LONG Show the view or text notification for a long period of time. LENGTH_SHORT Show the view or text notification for a short period of time. toast.setGravity(Gravity.CENTER, 0, 0);

Toast Public Methods void cancel()Close the view if it's showing, or don't show it if it isn't showing yet. int getDuration()Return the duration. getGravity()Get the location at which the notification should appear on the screen. float getHorizontalMargin()Return the horizontal margin. getVerticalMargin()Return the vertical margin. view getView()Return the view. getXOffset()Return the X offset in pixels to apply to the gravity's location. getYOffset()Return the Y offset in pixels to apply to the gravity's location. setDuration(int duration)Set how long to show the view for. setMargin(float horizontalMargin, float verticalMargin)Set the margins of the view. setText(int resId)Update the text in a Toast that was previously created using one of the makeText() methods. setText(CharSequence s)Update the text in a Toast that was previously created using one of the makeText() methods. setView(View view)Set the view to show. show()Show the view for the specified duration.

Notification a