android ui: overview - sisoftpadding and margin 13 layout parameters •internal margins using...
TRANSCRIPT
![Page 1: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/1.jpg)
1
![Page 2: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/2.jpg)
Android UI: Overview• An Activity is the front end component and it can contain
screens.
• Android screens are composed of components or screen containers and components within the containers
• Screen containers are called View Groups or Layouts.
• Layout defines the arrangement of components within the containers.
• All components are called views
• android.view.View.* = base class for all widgets and ViewGroups– sub-classes include: TextView, ImageView, button, EditText etc
• android.view.ViewGroup = It is base class for layouts and views containers.
2
![Page 3: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/3.jpg)
Views and View Groups• Each component in the screen is either a View or
ViewGroup object
• The Screen specification may be expressed either in XML or in program
3
![Page 4: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/4.jpg)
View Groups or Layouts• The screen container and component specification can be written in XML
format. These are called XML layouts
• Android considers XML-based layouts to be resources, and as such layout files are stored in the res/layout directory
4
![Page 5: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/5.jpg)
ViewGroup or Layout
• There are six types of Layouts: 1. LinearLayout (the box model)
2. RelativeLayout (a rule-based model)
3. ConstraintLayout (a rule-based model)
4. TableLayout (the grid model)
5. Grid Layout (the grid model) – Introduced in ice cream sandwich
6. Frame Layout (it provides space in layout)
7. Coodinator Layout (it provides space in layout)
8. Absolute Layout (Non flexible model) – Deprecated Now
5
![Page 6: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/6.jpg)
Layout Parameters
• fill model (fill_parent/wrap_content/NNpx)
– Layout_width
– Layout_height
• gravity(left/right/center)
• Padding and margin
• Id
6
![Page 7: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/7.jpg)
Layout Parameters
0.1 Fill Model
• Widgets have a "natural" size based on their accompanying text.
• When their combined sizes does not exactly match the width of the Android device's screen, we may have the issue of what to do with the remaining space.
7
![Page 8: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/8.jpg)
Layout Parameters
0.1 Fill Model :
All widgets inside a LinearLayout must supply dimensional attributes android:layout_width and android:layout_height to help address the issue of empty space. Values used in defining height and width are:
1.Specific a particular dimension, such as 125dip (device independent pixels)
2. wrap_content: which means the widget should fill up its natural space, unless that is too big, in which case Android can use word-wrap as needed to make it fit.
3. fill_parent: which means the widget should fill up all available space in its enclosing container, after all other widgets are taken care of
8
![Page 9: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/9.jpg)
Layout Parameters
9
![Page 10: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/10.jpg)
10
Layout Parameters
![Page 11: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/11.jpg)
11
Layout Parameters
![Page 12: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/12.jpg)
1.4 Padding
• The padding specifies how much space there is between the boundaries of the widget's "cell" and the actual widget contents.
• If you want to increase the internal whitespace between the edges of the and its contents, you will want to use the:– android:padding property
– or by calling setPadding() at runtime on the widget's Java object.
12
Layout Parameters
![Page 13: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/13.jpg)
Padding and Margin
13
Layout Parameters
![Page 14: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/14.jpg)
• Internal Margins Using Padding
14
Layout Parameters
![Page 15: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/15.jpg)
• (External) Margin
15
Layout Parameters
![Page 16: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/16.jpg)
android:id• This provides a unique identifier for the view, which you can use to
reference the object from your app code, such as to read and manipulate the object
• For the ID value, use this syntax form: "@+id/name". The at sign (@) is required whenever reference is being made to any resource object from XML. It is followed by the resource type (id in this case), a slash, then the resource name
• The plus symbol, +, indicates that this is a new resource ID and the aapt tool will create a new resource integer in the R.java class, if it doesn't already exist
• However, if an ID resource is defined, then you can apply that ID to a View element by excluding the + symbol in the android:id value
• This id field is used to reference screen variable in program by using findViewById
16
Layout Parameters
![Page 17: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/17.jpg)
1.Linear Layout
1.Linear Layout :- Linear Layout is a box model –widgets or
child containers are lined up in a column or row, one after the next. To configure a Linear Layout, direction of the control should be specified with:
• orientation (Horizontal/Vertical)
• weight (Default is zero)
17
![Page 18: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/18.jpg)
• Orientation : indicates whether the Linear Layout represents a row(HORIZONTAL) or a column (VERTICAL)
Add the android:orientation property to your LinearLayout element in your XML layout, setting the value to be horizontal for a row or vertical for a column.
The orientation can be modified at runtime by invoking setOrientation()
vertical
HorizontalA
C
B CBA
1.Linear Layout
18
![Page 19: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/19.jpg)
1.2 Weight
• It is used to proportionally assign space to widgets in a view.
• You set android:layout_weight to a value (1, 2, 3, …) to indicates what proportion of the free space should go to that widget. Example Both the TextView and the Button widgets have been set as in the previous example. Both have the additional property android:layout_weight="1"whereas the EditText control has android:layout_weight="2“
• Default value is 0
19
Linear Layout
![Page 20: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/20.jpg)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="@+id/myLinearLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ff0033cc"
android:padding="4dip"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" >
<TextView
android:id="@+id/labelUserName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ffff0066"
android:text="User Name"
android:textSize="16sp"
android:textStyle="bold"
android:textColor="#ff000000”>
</TextView>
<EditText
android:id="@+id/ediName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp”>
</EditText>
20
<Buttonandroid:id="@+id/btnGo"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Go"android:textStyle="bold”/>
</LinearLayout>
1.Linear Layout
![Page 21: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/21.jpg)
2. Relative Layout :- Relative Layout places widgets based
on their relationship to other widgets in the container and
the parent container.
A
D
CB
21
2.Relative Layout
![Page 22: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/22.jpg)
2.Relative Layout: Parameters
22
• android:layout_alignParentTop
If "true", makes the top edge of this view match the top edge of the parent.
• android:layout_centerVertical
If "true", centers this child vertically within its parent.
• android:layout_below
Positions the top edge of this view below the view specified with a resource ID.
• android:layout_toRightOf
Positions the left edge of this view to the right of the view specified with a resource ID.
![Page 23: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/23.jpg)
2.Relative Layout
23
![Page 24: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/24.jpg)
• Similar to Relative Layout however it provides more flexibility
• To define a view's position in Constraint Layout, you must add at least one horizontal and one vertical constraint for the view
24
Constraint Layout
![Page 25: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/25.jpg)
25
Constraint Layout
![Page 26: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/26.jpg)
Table Layout
3. Table Layout
1.Android's Table Layout allows you to position your widgets in a grid made of identifiable rows and columns.
2.Columns might shrink or stretch to accommodate their contents.
3.TableLayout works in conjunction with Table Row.
4.TableLayout controls the overall behavior of the container, with the widgets themselves positioned into one or more Table Row containers, one per row in the grid.
26
![Page 27: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/27.jpg)
• Table layout contains the widgets in rows and columns form
A
FE
B
JI
G
C
K
H
D
L
27
Table Layout
![Page 28: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/28.jpg)
TableLayout
<TableLayout- - - - >
<TableRow><TextView
android:text="URL:"/><EditTextandroid:id="@+id/entry"android:layout_span="3" />
</TableRow>
<TableRow>----------------------
</TableRow>
</TableLayout>28
Table Row
Table Row
Table Layout
![Page 29: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/29.jpg)
Grid Layout
• Android 4.0, or Ice Cream Sandwich (ICS), introduces GridLayout to support rich user interface design. GridLayout is similar to TableLayout and LinearLayout
• android.widget.GridLayout places its children in a rectangular grid (in the form of rows and columns) similar to the TableLayout
![Page 30: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/30.jpg)
Grid Layout
<?xml version="1.0" encoding="utf-8"?> <GridLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:columnCount="4" android:rowCount="4" android:orientation="horizontal" >
<TextView android:text=" R 1, C 1 " /> <TextView android:text=" R 1, C 2 " /> <TextView android:text=" R 1, C 3 " /> <TextView android:text=" R 1, C 4 " /> <TextView android:text=" R 2, C 1 " /> <TextView android:text=" R 2, C 2 " /><TextView android:text=" R 2, C 3 " /> <TextView android:text=" R 2, C 4 " />
<TextView android:text=" R 3, C 1 " /> <TextView android:text=" R 3, C 2 " /><TextView android:text=" R 3, C 3 " /> <TextView android:text=" R 3, C 4 " />
<TextView android:text=" R 4, C 1 " /> <TextView android:text=" R 4, C 2 " /> <TextView android:text=" R 4, C 3 " /> <TextView android:text=" R 4, C 4 " />
</GridLayout>
![Page 31: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/31.jpg)
Grid Layout
XML Attributes
• GridLayout supports the XML Attributes defined in android.widget.GridLayout class and in android.widget.GridLayout.LayoutParams
android:rowCount, android:columnCount, android:orientation
• Create an xml file with GridLayout of 4 x 4 with xml attributes rowCount and columnCount set to 4 and orientation set as horizontal.
![Page 32: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/32.jpg)
Next, modify the TextView text data placed at R3, C3 to R3, C3 modify. With this the GridLayout output comes out as shown
![Page 33: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/33.jpg)
Frame Layout
Frame Layout :-
• Frame Layout is designed to block out an area on the screen to display a single item.
• FrameLayout should be used to hold a single child view, because it can be difficult to organize child views in a way that's scalable to different screen sizes without the children overlapping each other.
33
![Page 34: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/34.jpg)
34
<?xml version="1.0" encoding="utf-8"?><FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent">
<ImageView- - - - - />
<TextView- - - - - />
<TextView- - - -/>
</FrameLayout>
Frame Layout
![Page 35: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/35.jpg)
• Coordinator Layout is a super-powered FrameLayout.
• Coordinator Layout is intended for two primary use cases:– As a top-level application decor or chrome layout
– As a container for a specific interaction with one or more child views
• By specifying Behaviors for child views of a Coordinator Layout you can provide many different interactions within a single parent and those views can also interact with one another
35
Coordinator Layout
![Page 36: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/36.jpg)
www.sisoft.in 36
Co-ordinator Layout
![Page 37: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/37.jpg)
Absolute Layout
Absolute Layout :-
• A layout that lets you specify exact locations (x/y coordinates) of its children.
• Absolute layouts are less flexible and harder to maintain than other types of layouts without absolute positioning
37
![Page 38: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/38.jpg)
Absolute Layout
<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout
android:id="@+id/myAbsoluteLayout“
android:layout_width="fill_parent“
android:layout_height="fill_parent“
xmlns:android="http://schemas.android.com/apk/res/android" >
<Button
android:id="@+id/myButton“
android:layout_width="wrap_content“
android:layout_height="wrap_content“
android:text="Button“
android:layout_x=“120px“
android:layout_y=“32px">
</Button>
</AbsoluteLayout>
38
![Page 39: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/39.jpg)
ScrollView
•When we have more data than what can be shown on a single screen you may use the ScrollView control.
•It provides a sliding or scrolling access to the data. This way the user can only see part of your layout at one time, but the rest is available via scrolling.
• ScrollView only supports vertical scrolling. For horizontal scrolling, use HorizontalScrollView.
39
![Page 40: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/40.jpg)
ScrollView Layout
<ScrollViewandroid:id="@+id/myScrollView1"android:layout_width="fill_parent"android:layout_height="fill_parent"android:background="#ff009999“>
<LinearLayoutandroid:id="@+id/myLinearLayoutHorizontal1"android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="horizontal”>
<TextViewandroid:id="@+id/textView1"android:layout_width="fill_parent"android:layout_height="wrap_content"android:text="Line1"android:textSize="70dip"/>
<TextViewandroid:id="@+id/textView1"android:layout_width="fill_parent"android:layout_height="wrap_content"android:text="Line1"android:textSize="70dip"/>
--------------------------------------------------
</LinearLayout></ScrollView>40
![Page 41: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/41.jpg)
Each View or ViewGroup can have its own set of attributes…but, some are very common
Attribute Description
layout_width specifies width of View or ViewGroup
layout_height specifies height
layout_marginTop extra space on top
layout_marginBottom extra space on bottom side
layout_marginLeft extra space on left side
layout_marginRight extra space on right side
layout_gravity how child views are positioned
layout_weight how much extra space in layout should be allocated to View (only when in LinearLayout or TableView)
layout_x x-coordinate
layout_y y-coordinate
41
![Page 42: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/42.jpg)
Reusing Layouts - <Include> Tag• Although Android offers a variety of widgets to provide small and re-usable
interactive elements, you might also need to re-use larger components that require a special layout
• To efficiently reuse complete layouts, you can use the <include/> and <merge/> tags to embed another layout inside the current layout
• Create a Reusable Layout: If you already know the layout that you want to reuse, create a new XML file and define the layout. For example, here's a layout that defines a title bar to be included in each activity (titlebar.xml):
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width=”match_parent”android:layout_height="wrap_content"android:background="@color/titlebar_bg">
<ImageView android:layout_width="wrap_content"android:layout_height="wrap_content" android:src="@drawable/gafricalogo" />
</FrameLayout>
![Page 43: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/43.jpg)
Include Tag• Use the <include>tag : Inside the layout to which you want to add the re-
usable component, add the <include/> tag For example, here's a layout that includes the title bar from earlier example:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width=”match_parent”android:layout_height=”match_parent”android:background="@color/app_bg"android:gravity="center_horizontal">
<include layout="@layout/titlebar"/>
<TextView android:layout_width=”match_parent”android:layout_height="wrap_content"android:text="@string/hello"android:padding="10dp" />
…</LinearLayout>
![Page 44: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/44.jpg)
<merge> Tag• The <merge /> tag helps eliminate redundant view groups in your view
hierarchy when including one layout within another.
• For example, if your main layout is a vertical LinearLayout in which two consecutive views can be re-used in multiple layouts, then the re-usable layout in which you place the two views requires its own root view
• However, using another LinearLayout as the root for the re-usable layout would result in a vertical LinearLayout inside a vertical LinearLayout. The nested LinearLayout serves no real purpose other than to slow down your UI performance.
<merge xmlns:android=http://schemas.android.com/apk/res/android><Button
android:layout_width="fill_parent" android:layout_height="wrap_content"android:text="@string/add"/>
<Buttonandroid:layout_width="fill_parent" android:layout_height="wrap_content"android:text="@string/delete"/>
</merge>
![Page 45: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/45.jpg)
• To avoid including such a redundant view group, you can instead use the <merge> element as the root view for the re-usable layout
• Now, when you include this layout in another layout (using the <include/> tag), the system ignores the <merge> element and places the two buttons directly in the layout, in place of the <include/> tag.
<merge> Tag
![Page 46: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/46.jpg)
Designing Layouts for different orientations
46
•To optimize your user experience on different screen orientation, you should create a unique layout XML file for each screen orientation you want to support. Each layout should be saved into the appropriate resources directory, named with a -<orientation> suffix. For example, a unique layout for landscapce screens should be saved under res/layout-land/.• For Portrait directory, it should be res/layout-port
MyProject/res/
layout/ # default (portrait)main.xml
layout-land/ # landscapemain.xml
![Page 47: Android UI: Overview - SisoftPadding and Margin 13 Layout Parameters •Internal Margins Using Padding 14 Layout Parameters • (External) Margin 15 Layout Parameters android:id •](https://reader033.vdocuments.mx/reader033/viewer/2022053117/6098700d474a060a4c3c217e/html5/thumbnails/47.jpg)
Attaching Layouts to Java Code
• Assume the UI in res/layout/main.xml has been created. This layout could be called by an application using the statement
setContentView(R.layout.main);
• Where R is a class automatically generated to keep track of resources available to the application.
47