Scribd
Upload
11 views46 pages

MP - Chapter 3

Mobile Programming

Uploaded by

wcnfw64f77
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
11 views46 pages

MP - Chapter 3

Mobile Programming

Uploaded by

wcnfw64f77
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 46
Unit -3 Designing the User Interface_[5 Hrs] Android Layout Types A layout defines the structure for a user interface in your app, such as in an activity. All elements in the layout are built using a hierarchy of View and ViewGroup objects. A View usually draws something the user can see and interact with. Whereas a ViewGroup is an invisible container that defines the layout structure for View and other ViewGroup objects, as shown in figure. view vew [ I | View View View Figure 3-1. Illustration of a view hierarchy, which defines a UI layout The View objects are usually called "widgets" and can be one of many subclasses, such as Button or TextView. The ViewGroup objects are usually called "layouts" can be one of many types that provide a different layout structure, such as LinearLayout or ConstraintLayout . You can declare a layout in two ways: Declare UI elements in XML. Android provides a straightforward XML vocabulary that corresponds to the View classes and subclasses, such as those for widgets and layouts. You can also use Android Studio's Layout Editor to build your XML layout using a drag-and-drop interface. ‘* Instantiate layout elements at runtime. Your app can create View and ViewGroup objects (and manipulate their properties) programmatically. Following are the different types of layout used for designing the User Interface. Linearlayout LinearLayout is a view group that aligns all children in a single direction, vertically or horizontally. You can specify the layout direction with the android:orientation attribute. Figure 3-2. Representation of LinearLayout All children of a LinearLayout are stacked one after the other, so a vertical list will only have one child per row, no matter how wide they are, and a horizontal list will only be one row high (the height of the tallest child, plus padding). A LinearLayout respects margins between children and the gravity (right, center, or left alignment) of each child, Following code snippet will demonstrate LinearLayout. ayout_width="wrap_content" layout _height="wrap content" android:text="This is label 1" android: textSize="20sp"/> android:layout width="wrap content" layout _height="wrap content" ext="This is label 3" "20sp"/> Above code will produce following output. DO al Figure 3-3. Output produced for LinearLayout Following are some attributes used with LinearLayout: android:baselineAligned When set to false, prevents the layout from aligning its children’s baselines. android:baselineAlignedChildindex When a linear layout is part of another layout thatis baseline aligned, it can specify which of its children to baseline align to (that is, which child TextView). android:divider Drawable to use as a vertical divider between buttons. android:gravity Specifies how an object should position its content, on both the X and Y axes, within its own bounds. android: measurewithLargestChild ‘When set to true, all children with a weight will be considered having the minimum size of the largest child. ‘android:orientation ‘Should the layout be a column or a row? Use “horizontal” for a row, "vertical" fora column. android:weightSum Defines the maximum weight sum. Layout Weight LinearLayout also supports assigning a weight to individual children with the android:layout_weight attribute. This attribute assigns an "importance" value to a view in terms of how much space it should occupy on the screen. A larger weight value allows it to expand to fill any remaining space in the parent view. Child views can specify a weight value, and then any remaining space in the view group is assigned to children in the proportion of their declared weight. Default weight is zero. Equal distribution To create a linear layout in which each child uses the same amount of space on the screen, set the android:layout_height of each view to “Odp" (for a vertical layout) or the android:layout_width of each view to "Odp" (for a horizontal layout). Then set the android:layout_weight of each view to Unequal distribution You can also create linear layouts where the child elements use different amounts of space on the screen: ‘« Ifthere are three text fields and two of them declare a weight of 1, while the other is given no weight, the third text field without weight doesn’t grow. Instead, this third text field occupies only the area required by its content. The other two text fields, on the other hand, expand equally to fill the space remaining after all three fields are measured. ‘* Ifthere are three text fields and two of them declare a weight of 1, while the third field is then given a weight of 2 (instead of 0), then it's now declared more important than both the others, so it gets half the total remaining space, while the first two share the rest equally. Following code snippet demonstrate layout_weight attribute. Here we are creating two TextViews. First TextView have weight equal to 2 and Second TextView have weight equal to 1. Total weight of LinearLayout is 3.
    Above code will produce following output: Dela Figure 3-4. Output demonstrating layout_weight attribute RelativeLayout RelativeLayout is a view group that displays child views in relative positions. The position of each view can be specified as relative to sibling elements (such as to the left-of or below another view) or in positions relative to the parent RelativeLayout area (such as aligned to the bottom, left or center). Figure 3-5. Representation of RelativeLayout A RelativeLayout is a very powerful utility for designing a user interface because it can eliminate nested view groups and keep your layout hierarchy flat, which improves performance. If you find yourself using several nested LinearLayout groups, you may be able to replace them with a single RelativeLayout. Following are some attributes used with RelativeLayout: android:layout_above Positions the bottom edge of this view above the given anchor view ID. android:layout_alignBaseline Positions the baseline of this view on the baseline of the given anchor view ID. android:layout_alignBottom Makes the bottom edge of this view match the bottom edge of the given anchor view ID. android:layout_alignEnd Makes the end edge of this view match the end edge of the given anchor view ID. android:layout_alignLeft Makes the left edge of this view match the left edge of the given anchor view ID. android:layout_alignParentBottom Iftrue, makes the bottom edge of this view match the bottom edge of the parent. android:layout_alignParentEnd Iftrue, makes the end edge of this view match the end edge of the parent. android:layout_alignParentLeft Iftrue, makes the left edge of this view match the left edge of the parent. android:layout_alignParentRight Iftrue, makes the right edge of this view match the right edge of the parent. android:layout_alignParentStart Iftrue, makes the start edge of this view match the start edge of the parent. android:layout_alignParentTop Iftrue, makes the top edge of this view match the top edge of the parent. android:layout_alignRight Makes the right edge of this view match the right edge of the given anchor view ID. android:layout_alignStart Makes the start edge of this view match the start edge of the given anchor view ID. android:layout_alignTop ‘Makes the top edge of this view match the top edge of the given anchor view 1D. android:layout_alignWithParentifMissing Ifset to true, the parent will be used as the anchor when the anchor cannot be be found for layout_toLeftOf, layout_toRightOf, ete android:layout_below Positions the top edge of this view below the given anchor view ID. android:layout_centerHorizontal Iftrue, centers this child horizontally within its parent. android:layout_centerinParent Iftrue, centers this child horizontally and vertically within its parent.

You might also like