Android Development
Android Basic XML LayoutsNotes are based on: The Busy Coder's Guide to Android Developmentby Mark L. MurphyCopyright 2008-2009 CommonsWare, LLC.ISBN: 978-0-9816780-0-9&Android Developers http://developer.android.com/index.html
52 5. Android UI Basic XML Layouts
Basic XML Layouts - Containers
2
Designing Complex Uis
Arguably, LinearLayout is the most common modeling tool. It offers a "box" model similar to the Java-Swing Box-Layout.
Thng thng, mt thit k UI l t hp cc hp lng nhau v cc thnh phn trong mi hp c sp xp theo hng ngang (horizontal) hoc hng dc (vertical).3 5. Android UI Basic XML Layouts
Basic XML Layouts - Containers
3
Summary of Commonly-used Android containers
LinearLayout (the box model),
RelativeLayout (a rule-based model), and
TableLayout (the grid model), along with
ScrollView, a container designed to assist with implementing scrolling containers.
Other (ListView, GridView, WebView, MapView,) discussed later4 5. Android UI Basic XML Layouts
Basic XML Layouts - Containers
4
Before we get started
Androids simplest layout manager is called: Frame Layout.
Mt Frame Layout l mt container hnh ch nht m mi thnh phn ca n (child) c nh ti gc trn bn tri container.
Khi thm mt view mi vo mt frame layout, n c xp chng ln trn cc view hin c5 5. Android UI Basic XML Layouts
Basic XML Layouts - Containers
5
Before we get started Hierarchy Viewer (\tools)
6 5. Android UI Basic XML Layouts
Basic XML Layouts - Containers
6
HierarchyViewerAs in SDK 2.37 5. Android UI Basic XML Layouts
Linear Layout7
Linear Layout
LinearLayout is a box model widgets or child containers are lined up in a column or row, one after the next.
To configure a LinearLayout, you have five main areas of control besides the container's contents: orientation, fill model, weight, gravity, padding , margin8 5. Android UI Basic XML Layouts
Linear Layout8
Linear Layout
Orientationquy nh LinearLayout biu din dng hng hay dng ct.
Gi tr ca thuc tnh android:orientation ca phn t LinearLayout ti XML layout: gi tr horizontal cho dng hng, vertical cho dng ct.
C th sa orientation trong khi chy bng m chng trnh vi lnh setOrientation()
horizontal
vertical9 5. Android UI Basic XML Layouts
Linear Layout9
1.1 Linear Layout: Orientation
horizontal
vertical10 5. Android UI Basic XML Layouts
Linear Layout10
1.2 Linear Layout: Fill ModelWidgets 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.
empty screen spacenatural sizes11 5. Android UI Basic XML Layouts
Linear Layout11
1.2 Linear Layout: Fill Model
Tt c cc widget trong mt LinearLayout phi t gi tr cc thuc tnh kch thcandroid:layout_width and android:layout_height cung cp thng tin gii quyt vn empty space.
Cc gi tr cho height v width:
Xc nh mt kch thc c th, chng hn 125dip (device independent pixels)
wrap_content, ngha l widget s ly khng gian n cn (natural space), nu n qu ln th Android c th dng kiu word-wrap co n li cho va.
fill_parent, ngha l widget s ly ht khng gian cn li ca container nu cn tha.12 5. Android UI Basic XML Layouts
Linear Layout12
1.2 Linear Layout: Fill Model
Row-wiseUse all the rowSpecific size: 125dip
125 dipentire row (320 dip on G1)G1 phone resolution is: 320 x 480 dip (3.2 in). 13 5. Android UI Basic XML Layouts
Linear Layout13
1.2 Linear Layout: WeightCp pht khng gian theo t l cho cc widget trong mt view.
Gn mt gi tr (1, 2, 3,) cho android:layout_weight quy nh t l khng gian dnh cho widget . ExampleBoth 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
Takes: 2 /(1+1+2)of the screen space14 5. Android UI Basic XML Layouts
Linear Layout14
1.3 Linear Layout: GravityIt is used to indicate how a control will align on the screen.By default, widgets are left- and top-aligned.You may use the XML propertyandroid:layout_gravity=to set other possible arrangements:left, center, right, top, bottom, etc.
Button has right gravity
15 5. Android UI Basic XML Layouts
Linear Layout15
1.3 CAUTION: gravity vs. layout_gravity
Phn bit gia:
android:gravityquy nh ni t ni dung ca mt i tng bn trong chnh i tng theo trc x v trc y.
android:layout_gravityv tr ca view i vi container ca n.
android:gravity="center"android:layout_gravity="center"
16 5. Android UI Basic XML Layouts
Linear Layout16
1.4 Linear Layout: Padding
Quy nh khng gian gia cc bin ca cha widget v ni dung ca chnh widget .
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.
Note: Padding is analogous to the margins on a word processing document.17 5. Android UI Basic XML Layouts
Linear Layout17
1.3 Linear Layout: Padding and Margin
18 5. Android UI Basic XML Layouts
Linear Layout18
1.3 Linear Layout: Internal Margins Using PaddingExample:The EditText box has been changed to display 30dip of padding all around
