![Page 1: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/1.jpg)
MOBILE COMPUTINGD10K-7D02
MC04: LayoutsDr. Setiawan Hadi, M.Sc.CS.
Program Studi S-1 Teknik InformatikaFMIPA Universitas Padjadjaran
![Page 2: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/2.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Layout• Layouts can contain UI elements (provided and custom)• Stored in res/layout• Useful Layouts:
– FrameLayout,– LinearLayout,– TableLayout,– GridLayout,– RelativeLayout,– ListView,– GridView,– ScrollView,– DrawerLayout,– ViewPager
![Page 3: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/3.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Recall: Hello World App• 3 Files:
– Activity_my.xml: XML file specifying screen layout
– MainActivity.Java: Java code to define behavior,actions taken when button clicked (intelligence)
– AndroidManifest.xml:• Lists all screens, components of app• How these components attach themselves to overallAndroid system
Analogous to a table of contents for a book• E.g. Hello world program has 1 screen, soAndroidManifest.xml has 1 item listed• App starts running here (a bit like main( ) in C), launchesactivity with a tag
“LAUNCHER”
![Page 4: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/4.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Android UI using XML Layout• Android UI are usually designed in XML• Note: Android UI can also be designed in Java (more later)• In the XML file, we have to choose a layout to use
![Page 5: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/5.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Frame Layout
• simplest type of layout object
• fill with single object (e.g a picture)
• child elements pinned to top left corner of screen, cannot be moved
• adding a new element / child draws over the last one
![Page 6: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/6.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Linear Layout
• aligns child elements (e.g. buttons, text boxes, pictures, etc.) in single direction
• Example:
• orientation attribute defines direction (vertical or horizontal):– android:orientation="vertical“
![Page 7: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/7.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Linear Layout in Android Studio
• LinearLayout can be found in palette of Android Studio Graphical Layout Editor
• After selecting LinearLayout, toolbars buttons to set parameters
Toggle width, height betweenmatch_parent and wrap_content
Change gravity ofLinearLayout
![Page 8: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/8.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Attributes• Layouts have attributes (e.g. width, height,
orientation)• Statements to set attribute values appears in XML
file.• E.g. android:orientation="vertical"• Attributes can be set:
– In xml file– Using IDE (e.g. Android Studio)– In Java program
• Lots of attributes!
![Page 9: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/9.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Attributes
![Page 10: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/10.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Setting Attributes: in XML
![Page 11: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/11.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Setting Attributes: in Java
![Page 12: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/12.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Edit XML Layouts using Graphical IDE• Can drag and drop widgets, layouts in Android Studio• Can also edit their properties (e.g. height, width, color, etc)
Drag and Drop layout
Drag and dropwidgets Edit
properties layout
![Page 13: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/13.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Layout Width and Height Attributes
• match_parent: widget as wide/high as its parent
• wrap_content: widget as wide/high as its content (e.g. text)
• fill_parent: older form of match_parent
![Page 14: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/14.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
LinearLayout Horizontal Orientation‐
• Set– Padding
• E.g. android:layout_paddingTop = “20dp”
– background color• E.g. android:background = “00FF00”
– Margins• E.g. “android:layout_marginLeft = “10dp”
![Page 15: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/15.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Gravity Attribute• By default, linearlayout
left and top aligned‐ ‐• Gravity attribute can
change position of :– Widget within Linearlayout– Contents of widgets (e.g.
android:gravity = “right”)
center
right
![Page 16: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/16.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Weight
• layout_weight attribute– Specifies
"importance" of a view (i.e. button, text, etc)
– default = 0– If layout_weight > 0
takes up more of parent space
![Page 17: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/17.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Another Weight Example
![Page 18: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/18.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Linear Layout
• Alternatively, set– width, height = 0 then– weight = percent of height/width you want element to cover
![Page 19: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/19.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
RelativeLayout• First element listed is placed in "center"• Positions of children specified relative to parent or to each other.
– E.g. android:layout_toRightOf = “true”: widget should be placed to the right of widget referenced in the property
– android:layout_alignParentBottom = “true”: align widget’s bottom with container’s bottom
RelativeLayout availableIn Android Studio palette
![Page 20: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/20.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
RelativeLayout XMLExample
![Page 21: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/21.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Table Layout
• Specify number of rows and columns• Rows specified using TableRows (subclass of LinearLayout)• TableRows contain other elements such as buttons, text, etc.• Available in Android Studio palette
![Page 22: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/22.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
TableLayoutExample
![Page 23: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/23.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
TableLayoutExample
![Page 24: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/24.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
TableLayoutExample
![Page 25: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/25.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
GridLayout• Added in Android 4.0 (2011)• In TableLayout, Rows can span multiple columns only• In GridLayout, child views/controls can span multiple
rows AND columns– different from TableLayout
• child views specify row and column they are in or what rows and columns they span
• Gives greater design flexibility• For more details see section “Introducing GridLayout”
in Busy Coders (pg 1021)
![Page 26: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/26.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Absolute Layout
• Allows specificification of exact locations (x/y coordinates) of its children.
• Less flexible and harder to maintain than other types of layouts
![Page 27: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/27.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Other Layouts Tabbed Layouts‐• Uses a TabHost and
TabWidget
• TabHost consists of TabSpecs
• Can use a TabActivity to simplify some operations
• Tabs can be– predefined View– Activity launched via Intent– generated View from
tabContentFactory
![Page 28: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/28.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Scrolling• Phone screens are small, scrolling content helps• ListView supports vertical scrolling• Other views for Scrolling:
– ScrollView for vertical scrolling– HorizontalScrollView
• Only one child View– but could have children of its own
• examples:– scroll through large image– Linear Layout with lots of elements
• Cannot contain scrollable items
![Page 29: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/29.jpg)
Android Views, Widgets andViewGroups
![Page 30: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/30.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Views and ViewGroups• A view (e.g. buttons, text fieds) is basic UI building block• View occupies rectangular area on screen• ViewGroup (e.g. a layout) contains multiple Views
![Page 31: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/31.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Views and ViewGroups
![Page 32: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/32.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Widgets• Widgets are visual building blocks used to compose Android
screens (Activities)• Need to specify size, margins and padding of widgets
![Page 33: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/33.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Widgets
• Most Android UI developed using widgets (fields, lists, text boxes, buttons, etc)
• Can also render using OpenGL2D or OpenGL3D
![Page 34: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/34.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Adding Button using Widget
• Can drag and drop widgets, layouts in Android Studio• Can also edit their properties (e.g. height, width, color, etc)
![Page 35: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/35.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Other Available Widgets
![Page 36: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/36.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Containers• Containers provide structured way of organizing
multiple widgets• Containers have children (widgets or other containers)• Rules used to specify how children of containers are
laid out. E.g:– Put all children in a row– Put all children in a column– Arrange children into a table or grid with X rows and Y
columns• Containers have size, margins and padding
![Page 37: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/37.jpg)
Android UI Components: Controls
![Page 38: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/38.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Example: Make Button Responding to Clicks
• Task: Display some text when user clicks a button
• In declaration of the button, add property “onClick”, give name of method to call onClick
AndroidMain.XML
This method has to beimplemented in java file
![Page 39: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/39.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Adding Controls
• Controls can be added in XML layout or in Java code
• Can drag and drop to add component in visual editor– XML code automatically
generated– tweak XML code as desired
![Page 40: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/40.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
TextView
• Text in a rectangle, a simple label• display information, not for interaction• Common attributes:
– typeface (android:typeface e.g monospace), bold, italic, (android:textStyle ), text size, text color (android:textColor e.g. #FF0000 for read), width, height, padding, visibility, background color
– units for width / height: px (pixels), dp or dip (density independent ‐pixels 160 dpi base), sp (scaled pixels based on preferred font size), in (inches), mm (millimeters)
• recommended units: sp for font sizes, and dp for everything else• http://developer.android.com/guide/topics/resources/more‐
resources.html#Dimension
![Page 41: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/41.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
TextView
• widget is available in widgets palette in Android Studio Layout editor
• Plain TextView, Large text, Medium text and Small text are all TextView widgets
• See demo project: Basic/Label
![Page 42: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/42.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Setting Text Properties
• Can edit text properties• Can either type in literal
string or click … button to pick a string you have previously declared (e.g. in strings.xml)
• You can also declare new string by clicking on “New Resource”
![Page 43: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/43.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Widget ID
• Every widget has ID whose value is stored in android:id attribute
• To manipulate this widget or set its attributes in Java code,
• need to reference it using its ID• More on this later• Naming convention
– First time use: @+id/xyx_name– Subsequent use: @id/xyz_name
![Page 44: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/44.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Other TextView Attributes
• number of lines of text that are visible– android:lines="2“
• contextual links to email address, url, phone number, – autolink attribute set to none, web, email, phone,
map, or all
![Page 45: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/45.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Button Widget
• Text or icon or both on View (Button)
• E.g. “Click Here”• Declared as subclass of TextView
so similar attributes• Appearance of buttons can be
customizedhttp://developer.android.com/guide/topics/ui/controls/button.html#CustomBackground
![Page 46: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/46.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Button in Android Studio• Button widget available in palette of
Android Studio graphical layout editor
• Can drag and drop button, edit attributes as with TextView
• See demo project: Basic/Button
![Page 47: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/47.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Responding to Button Clicks
• May want Button press to trigger some action• How?
![Page 48: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/48.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Embedding Images:ImageView and ImageButton
• ImageView and ImageButton: Image based based ‐analogs of TextView and Button– ImageView: display image– ImageButton: Clickable image
• Use attribute android:src to specify image source in drawable folder (e.g. @drawable/icon)
• See demo project: Basic/ImageView
![Page 49: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/49.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
ImageView in Widgets Palette
• Can drag and drop ImageView from Widgets Palette
• Can also use menus to specify:– src: to choose image to be displayed– scaleType: to choose how image
should be scaled
![Page 50: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/50.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Options for Scaling Images (scaleType)
“center” centers imagebut does not scale it
“centerCrop” centersimages, scales it so thatshortest dimension fillsavailable space, andcrops longer dimension
“fitXY” scales image tofit ImageView, ignoringaspect ratio
![Page 51: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/51.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
EditText Widget
• UI Component used to get information from user
• long press brings up context menu
• Example:
![Page 52: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/52.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Edit Text
• can span multiple lines via android:lines attribute
• Text fields can have different input types such as number, date, password, or email address
• android:inputType attribute sets input type, affects– What type of keyboard pops up for user– Behaviors such as is every word capitalized
![Page 53: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/53.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
EditText Widget in Android Studio Palette• A whole section of the Android Studio palette
dedicated to EditText widgets (or text fields)
Text FieldsSection of Widgetpalette
EditTextinputTypemenu
![Page 54: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/54.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Widget Attributes• Some attributes apply to most types of widgets• Padding: Can either set all sides (android:padding) or per side ‐
(e.g. android:paddingLeft)– Units either in DIP or millimeters
• Margins: Can be set for all sides (android:layout_margin) or preside (e.g. android:layout_marginTop)– Units either in dp or DIP
• Colors:– Some colors attributes take single color (e.g. android:background)– Other attributes take ColorStateList (different colors under different
conditions)
![Page 55: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/55.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Margin Example
![Page 56: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/56.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Widget Attributes: Other Attributes
• android:visibility: Controls whether the widget is visible
• android:contentDescription:– similar to alt attribute on an HTML <img>– Defines content that briefly defines the content of
the widget– Very important for widgets like ImageView
![Page 57: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/57.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Auto Complete Options
• Depending on EditText inputType suggestions can be displayed– works on actual devices
• Other options for exist for auto complete from list– AutoCompleteTextView
• choose one option
– MultiAutoCompleteTextView• choose multiple options (examples tags, colors)
![Page 58: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/58.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
AutoCompleteTextView
• Two types– we provide list of choices– user provides list
• Developer list– use ArrayAdapter connected to array– best practice: put array in array.xml file
![Page 59: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/59.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
AutoComplete Using Array
![Page 60: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/60.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
EditText
• Auto complete option using device dictionary:
• No dictionary on emulator!
![Page 61: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/61.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Spinner Controls
• Similar to auto complete, but user must select from a set of choices
![Page 62: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/62.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Spinner Control
• Cxd
arrays.xml in res/values
![Page 63: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/63.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Checkbox• Checkbox has 2 states: checked and unchecked• Clicking on checkbox toggles between these 2 states• Used to indicate a choice (e.g. Add rush delivery)• Checkbox widget inherits from TextView, so its properties
like android:textColor can be used to format checkbox• XML code to create Checkbox
![Page 64: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/64.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Pickers• TimePicker and DatePicker• Typically displayed in a TimePickerDialog or
DatePickerDialog– Dialogs are small pop up windows that appear in ‐
front of the current activity
![Page 65: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/65.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Indicators • Variety of built in indicators in addition to TextView• ProgressBar
• RatingBar
• Chronometer• DigitalClock• AnalogClock
![Page 66: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/66.jpg)
Android UI Youtube Tutorials
![Page 67: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/67.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Android UI Youtube Tutorials
• Tutorial 11: Designing the User InterfaceTopics• Tutorial 12: More on User Interface• Tutorial 17: GridLayout
![Page 68: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/68.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Tutorial 11: Designing the User Interface
• https://www.youtube.com/watch?v=72mf0rmjNAA• 6:19’• Topics
– Designing the User interface– Manually adding activity– Dragging in widgets– Changing the text in widgets
![Page 69: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/69.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Tutorial 12: More on User Interface
• https://www.youtube.com/watch?v=72mf0rmjNAA• 10:24’• Main Topics
– Changing text in widgets– Changing strings from hardcoded to resources (variables)
![Page 70: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/70.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Tutorial 17: GridLayout
• https://www.youtube.com/watch?v=4bXOr5Rk1dk• 9:40’• Topics
– Creating GridLayout: Layout that places its children in a grid– Add widgets (buttons) to GridLayout– Format width, height, position of widgets
![Page 71: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/71.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Linier Layout<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent">
<TextView android:text="Nama Keluarga" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <EditText android:width="120px" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:text="Nama Depan" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <EditText android:width="120px" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <Button android:id="@+id/backbutton" android:text="Back" android:layout_width="wrap_content" android:layout_height="wrap_content" /></LinearLayout>
![Page 72: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/72.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Frame Layout<?xml version="1.0" encoding="utf-8"?><FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"> <ImageView android:src="@drawable/lena" android:scaleType="fitCenter" android:layout_height="fill_parent" android:layout_width="fill_parent"/> <TextView android:text="Ini adalah Frame Layout!!!" android:textSize="48px" android:textColor="#cc0000" android:layout_height="fill_parent" android:layout_width="fill_parent" android:gravity="top"/> <TextView android:text="Belajar Pemrograman Android - Informatika Unpad" android:textSize="48px" android:textColor="#00dd00" android:layout_height="fill_parent" android:layout_width="fill_parent" android:gravity="center"/></FrameLayout>
![Page 73: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/73.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Table Layout<TableLayout android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"> <TableRow> <Button android:id="@+id/backbutton" android:text="Back" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </TableRow> <TableRow> <TextView android:text="Nama Depan" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_column="1" /> <EditText android:width="300px" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </TableRow> <TableRow> <TextView android:text="Nama Belakang" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_column="1" /> <EditText android:width="300px" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </TableRow></TableLayout>
![Page 74: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/74.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Baris dan Kolom
0 1 2 3
![Page 75: MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran](https://reader035.vdocuments.site/reader035/viewer/2022062322/5697bf901a28abf838c8df9f/html5/thumbnails/75.jpg)
Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016
Relative Layout<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" > <TextView android:id="@+id/TextView01" android:background="#0b62b3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:padding="25dp" android:text="@string/Atas" android:textColor="#fff" tools:context=".MainActivity" /> <TextView android:id="@+id/TextView02" android:background="#0b62b3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_toLeftOf="@+id/TextView03" android:padding="25dp" android:text="@string/Kiri" android:textColor="#fff" /> <TextView android:id="@+id/TextView03" android:background="#f00" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_marginLeft="20dp" android:layout_marginRight="20dp" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:padding="25dp" android:text="@string/Tengah" android:textColor="#000" /> <TextView android:id="@+id/TextView04" android:background="#0b62b3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_toRightOf="@+id/TextView03" android:padding="25dp" android:text="@string/Kanan" android:textColor="#fff" /> <TextView android:id="@+id/TextView05" android:background="#0b62b3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:padding="25dp" android:text="@string/Bawah" android:textColor="#fff" /></RelativeLayout>