SlideShare a Scribd company logo
ANDROID UI WITH XML
J M GITHEKO
MARCH 2016
ANDROID STUDIO USER INTERFACE TOOLS
Layout Editor Drag and drop user interface elements to build layouts for your
app.
Theme
Editor
Build re-usable user interface styles for layouts and widgets in
your app.
Translations
Editor
View and update all your string resource translations in one
convenient place.
Vector Asset
Studio
Add material icons and import Scalable Vector Graphic (SVG) files
into your Android Studio project as a drawable resource.
UI DESIGNER
KEY UI ELEMENTS
Linear Layout all the elements are displayed in linear fashion based on
orientation i.e. either horizontally or vertically.
Relative Layout the views are placed in related to one another.
Listview list of scrollable items
Gridview to display items in two dimensional scrolling grid (rows and
columns)
Scrollview &
Horizontal Scrollview
how items are make scrollable
Absolute Layout absolute layout displays views based on exact location of its
children by using x and y coordinates. This view is depreciated
in Android.
Frame Layout
Spinner drop down-list allowing user to select one value from a set of
values.
TextView displays text to the user
EditText used in applications when we need user to provide an input or
text field
OTHER
ELEMENTS
ACTION BAR
•The action bar is an important design element,
usually at the top of each screen in an app, that
provides a consistent familiar look between
Android apps. It is used to provide better user
interaction and experience by supporting easy
navigation through tabs and drop-down lists. It
also provides a space for the app or activity’s
identity, thus enabling the user to know their
location in the app, and easy access to the
actions that can be performed.
CONT’D
•Before Android 3.0 Action Bar was not included
in the SDK. You needed libraries to incorporate
it into your design. Today, we have appcompat
v7 library or later. You may need to activate.
• App icon – This is used to identify your app with a logo or
icon.
• View control – This can also be used to identify the app or
the specific activity the user is on by the title. If your app has
different views, it can also be used to display these and allow
for easy switching between views.
• Action buttons – These are used to display the most
important and/or often used actions. If there isn’t enough
space to show all of the action buttons, those that don’t fit are
ADDING ACTIONS TO THE ACTION BAR
•To add actions to the action bar, create a XML
file in the res/menu directory where you will
define each action. It is possible to define the
actions in Java code, but you will write less
code if you use XML.
CONT’D
• The contents of res/menu/main_activity_bar.xml are shown in
the next slide. In this example, we’re using the Action Bar Icon
Pack for the action icons. Download it and copy the necessary
icons to the res/drawable-xxxx directory for the different
screen densities.
<menu
xmlns:android="http://schemas.android.com/apk/res/
android" >
<item android:id="@+id/action_search"
android:icon="@drawable/ic_action_search"
android:title="@string/action_search"
android:showAsAction="ifRoom" />
<item android:id="@+id/action_record"
android:icon="@drawable/ic_action_video"
android:title="@string/action_record"
android:showAsAction="ifRoom" /> ……
STRINGS.XML
• add the string literals to res/values/strings.xml, as shown
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">ActionBar</string>
<string name="action_settings">Settings</string>
<string name="action_search">Search</string>
<string name="action_record">Record Video</string>
<string name="action_save">Save</string>
<string name="action_label">Add Label</string>
<string name="action_play">Play Video</string>
<string name="hello_world">Hello world!</string>
</resources>
<?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">ActionBar</string> <string name="action_settings">Settings</string> <string name="action_search">Sea
JAVA COMPONENT OF ACTION BAR
• See: http://www.sitepoint.com/better-user-interfaces-
android-action-bar/
• To be covered in another lesson
FAB
• See Word document (too much code doesn’t fit in PowerPoint
COLOR RESOURCE:
DEFINES THEME COLOURS FOR YOUR PROJECT
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color
name="color_name"
>hex_color</color>
</resources>
COLOR EXAMPLE
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="opaque_red">#f00</color>
<color name="translucent_red">#80ff0000</color>
</resources>
DIMENSIONS:
USED TO DEFINE STANDARD DIMENSIONS IN
YOUR PROJECT
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen
name="dimension_name"
>dimension</dimen>
</resources>
DIMENSION EXAMPLE
• <?xml version="1.0" encoding="utf-8"?>
• <resources>
• <dimen name="textview_height">25dp</dimen>
• <dimen name="textview_width">150dp</dimen>
• <dimen name="ball_radius">30dp</dimen>
• <dimen name="font_size">16sp</dimen>
• </resources>
OTHER RESOURCE TYPES
• http://developer.android.com/guide/topics/resources/more-
resources.html
METRICS, KEYLINES AND BREAKPOINTS
• Material design recommends standards dimensions for layouts.
• These are referred to as keylines
• For responsive design, the layout should change depending on
the device screen size and resolution
• Break points are the screen sizes where the app or web page is
designed to automatically change layout. See following
discussion:
http://developer.android.com/guide/practices/screens_suppor

More Related Content

What's hot (20)

PDF
Android activities & views
ma-polimi
 
PPT
Composite pattern
Shakil Ahmed
 
PPTX
Android Automation Testing with Selendroid
Vikas Thange
 
PPTX
UNIT TESTING PPT
suhasreddy1
 
PPTX
Spring boot
Pradeep Shanmugam
 
PPTX
React hooks
Sadhna Rana
 
PDF
CSS Positioning Elements.pdf
Kongu Engineering College, Perundurai, Erode
 
PPT
OOAD UNIT I UML DIAGRAMS
Mikel Raj
 
PPTX
Software Development Life Cycle
Slideshare
 
PPTX
React state
Ducat
 
PPTX
Inversion of Control and Dependency Injection
Dinesh Sharma
 
PPTX
Software testing
balamurugan.k Kalibalamurugan
 
PPT
State Diagrams
Vaidik Trivedi
 
PPTX
IT Quality Testing and the Defect Management Process
Yolanda Williams
 
PPTX
React hooks
Assaf Gannon
 
PPSX
Junit
FAROOK Samath
 
PDF
Angular - Chapter 4 - Data and Event Handling
WebStackAcademy
 
PPTX
Unit 1 - TypeScript & Introduction to Angular CLI.pptx
Malla Reddy University
 
PPTX
Presentation On Software Testing Bug Life Cycle
Rajon
 
Android activities & views
ma-polimi
 
Composite pattern
Shakil Ahmed
 
Android Automation Testing with Selendroid
Vikas Thange
 
UNIT TESTING PPT
suhasreddy1
 
Spring boot
Pradeep Shanmugam
 
React hooks
Sadhna Rana
 
CSS Positioning Elements.pdf
Kongu Engineering College, Perundurai, Erode
 
OOAD UNIT I UML DIAGRAMS
Mikel Raj
 
Software Development Life Cycle
Slideshare
 
React state
Ducat
 
Inversion of Control and Dependency Injection
Dinesh Sharma
 
State Diagrams
Vaidik Trivedi
 
IT Quality Testing and the Defect Management Process
Yolanda Williams
 
React hooks
Assaf Gannon
 
Angular - Chapter 4 - Data and Event Handling
WebStackAcademy
 
Unit 1 - TypeScript & Introduction to Angular CLI.pptx
Malla Reddy University
 
Presentation On Software Testing Bug Life Cycle
Rajon
 

Viewers also liked (13)

PPTX
Seebeck effect
Valentin Vitkov
 
PDF
POLESTAR PRESENTATION 15.04.2016
Santosh Wagh
 
XLS
Bottiglieri Show
guest55b61
 
PPT
Adam Slim
ilonabrugman
 
PPTX
Spice whiskey
Vikas Kumar
 
PPTX
Presentacion publicidad
teresa rodriguez
 
PPS
Chau, Pesimismo
Douce Nieto
 
PPTX
Actividad 3
teresa rodriguez
 
DOCX
Resume
Mac Gearheart
 
DOC
Sonia Yaco CV June 2016
Sonia Yaco
 
DOCX
Aaron Landis Writing Sample
Aaron Landis
 
PPT
Piano Del Significato
pikkolabaffons
 
PPTX
Android programming basics
Egerton University
 
Seebeck effect
Valentin Vitkov
 
POLESTAR PRESENTATION 15.04.2016
Santosh Wagh
 
Bottiglieri Show
guest55b61
 
Adam Slim
ilonabrugman
 
Spice whiskey
Vikas Kumar
 
Presentacion publicidad
teresa rodriguez
 
Chau, Pesimismo
Douce Nieto
 
Actividad 3
teresa rodriguez
 
Sonia Yaco CV June 2016
Sonia Yaco
 
Aaron Landis Writing Sample
Aaron Landis
 
Piano Del Significato
pikkolabaffons
 
Android programming basics
Egerton University
 
Ad

Similar to Android ui with xml (20)

PPTX
Chapter 2 lesson-1 adding the action bar
Kalluri Vinay Reddy
 
PPTX
Android session 2-behestee
Hussain Behestee
 
PPTX
mobile application development -unit-3-
TejamFandat
 
PDF
Android design patterns
Platty Soft
 
PDF
Android ActionBar Navigation reloaded
Dominik Helleberg
 
PPT
Android UI Patterns
Peter Pascale
 
PDF
2012/02/15 Android 4.0 UI Design Tips@happy designer meetup
Justin Lee
 
DOCX
Android action bar and notifications-chapter16
Dr. Ramkumar Lakshminarayanan
 
ODP
Android App Development - 05 Action bar
Diego Grancini
 
PPTX
Action bar & ActionBarSherlock
Zahid Ali Shah
 
PDF
Ch4 creating user interfaces
Shih-Hsiang Lin
 
DOCX
How to create ui using droid draw
info_zybotech
 
PPT
Android ui patterns
Mobile March
 
PPT
Android ui patterns
vpulec
 
PDF
Android 4.0 UI Design Tips
Justin Lee
 
PPTX
08ui.pptx
KabadaSori
 
PDF
Using android's action bar
Danilo Freitas de Souza
 
POT
Android Material Design
Ankit Shandilya
 
PDF
Chapt 04 user interaction
Edi Faizal
 
PPT
eyeryeryeryeryeyeyeryeryyerye13872085.ppt
FarhanGhafoor7
 
Chapter 2 lesson-1 adding the action bar
Kalluri Vinay Reddy
 
Android session 2-behestee
Hussain Behestee
 
mobile application development -unit-3-
TejamFandat
 
Android design patterns
Platty Soft
 
Android ActionBar Navigation reloaded
Dominik Helleberg
 
Android UI Patterns
Peter Pascale
 
2012/02/15 Android 4.0 UI Design Tips@happy designer meetup
Justin Lee
 
Android action bar and notifications-chapter16
Dr. Ramkumar Lakshminarayanan
 
Android App Development - 05 Action bar
Diego Grancini
 
Action bar & ActionBarSherlock
Zahid Ali Shah
 
Ch4 creating user interfaces
Shih-Hsiang Lin
 
How to create ui using droid draw
info_zybotech
 
Android ui patterns
Mobile March
 
Android ui patterns
vpulec
 
Android 4.0 UI Design Tips
Justin Lee
 
08ui.pptx
KabadaSori
 
Using android's action bar
Danilo Freitas de Souza
 
Android Material Design
Ankit Shandilya
 
Chapt 04 user interaction
Edi Faizal
 
eyeryeryeryeryeyeyeryeryyerye13872085.ppt
FarhanGhafoor7
 
Ad

More from Egerton University (6)

PPTX
COMP340 TOPIC 4 THREE.JS.pptx
Egerton University
 
PPTX
Event handler example
Egerton University
 
PPT
javascript examples
Egerton University
 
PPTX
Php basics
Egerton University
 
PPTX
Website management
Egerton University
 
PPTX
My sql command line client
Egerton University
 
COMP340 TOPIC 4 THREE.JS.pptx
Egerton University
 
Event handler example
Egerton University
 
javascript examples
Egerton University
 
Php basics
Egerton University
 
Website management
Egerton University
 
My sql command line client
Egerton University
 

Recently uploaded (20)

PDF
Blockchain Transactions Explained For Everyone
CIFDAQ
 
PDF
Smart Trailers 2025 Update with History and Overview
Paul Menig
 
PDF
The Builder’s Playbook - 2025 State of AI Report.pdf
jeroen339954
 
PPTX
Webinar: Introduction to LF Energy EVerest
DanBrown980551
 
PPTX
OpenID AuthZEN - Analyst Briefing July 2025
David Brossard
 
PDF
CIFDAQ Market Insights for July 7th 2025
CIFDAQ
 
PDF
Chris Elwell Woburn, MA - Passionate About IT Innovation
Chris Elwell Woburn, MA
 
PPTX
AI Penetration Testing Essentials: A Cybersecurity Guide for 2025
defencerabbit Team
 
PDF
July Patch Tuesday
Ivanti
 
PDF
HCIP-Data Center Facility Deployment V2.0 Training Material (Without Remarks ...
mcastillo49
 
PDF
SWEBOK Guide and Software Services Engineering Education
Hironori Washizaki
 
PPTX
From Sci-Fi to Reality: Exploring AI Evolution
Svetlana Meissner
 
PDF
New from BookNet Canada for 2025: BNC BiblioShare - Tech Forum 2025
BookNet Canada
 
PDF
Empower Inclusion Through Accessible Java Applications
Ana-Maria Mihalceanu
 
PPTX
UiPath Academic Alliance Educator Panels: Session 2 - Business Analyst Content
DianaGray10
 
PDF
From Code to Challenge: Crafting Skill-Based Games That Engage and Reward
aiyshauae
 
PDF
Using FME to Develop Self-Service CAD Applications for a Major UK Police Force
Safe Software
 
PDF
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
PDF
Complete JavaScript Notes: From Basics to Advanced Concepts.pdf
haydendavispro
 
PDF
Presentation - Vibe Coding The Future of Tech
yanuarsinggih1
 
Blockchain Transactions Explained For Everyone
CIFDAQ
 
Smart Trailers 2025 Update with History and Overview
Paul Menig
 
The Builder’s Playbook - 2025 State of AI Report.pdf
jeroen339954
 
Webinar: Introduction to LF Energy EVerest
DanBrown980551
 
OpenID AuthZEN - Analyst Briefing July 2025
David Brossard
 
CIFDAQ Market Insights for July 7th 2025
CIFDAQ
 
Chris Elwell Woburn, MA - Passionate About IT Innovation
Chris Elwell Woburn, MA
 
AI Penetration Testing Essentials: A Cybersecurity Guide for 2025
defencerabbit Team
 
July Patch Tuesday
Ivanti
 
HCIP-Data Center Facility Deployment V2.0 Training Material (Without Remarks ...
mcastillo49
 
SWEBOK Guide and Software Services Engineering Education
Hironori Washizaki
 
From Sci-Fi to Reality: Exploring AI Evolution
Svetlana Meissner
 
New from BookNet Canada for 2025: BNC BiblioShare - Tech Forum 2025
BookNet Canada
 
Empower Inclusion Through Accessible Java Applications
Ana-Maria Mihalceanu
 
UiPath Academic Alliance Educator Panels: Session 2 - Business Analyst Content
DianaGray10
 
From Code to Challenge: Crafting Skill-Based Games That Engage and Reward
aiyshauae
 
Using FME to Develop Self-Service CAD Applications for a Major UK Police Force
Safe Software
 
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
Complete JavaScript Notes: From Basics to Advanced Concepts.pdf
haydendavispro
 
Presentation - Vibe Coding The Future of Tech
yanuarsinggih1
 

Android ui with xml

  • 1. ANDROID UI WITH XML J M GITHEKO MARCH 2016
  • 2. ANDROID STUDIO USER INTERFACE TOOLS Layout Editor Drag and drop user interface elements to build layouts for your app. Theme Editor Build re-usable user interface styles for layouts and widgets in your app. Translations Editor View and update all your string resource translations in one convenient place. Vector Asset Studio Add material icons and import Scalable Vector Graphic (SVG) files into your Android Studio project as a drawable resource.
  • 4. KEY UI ELEMENTS Linear Layout all the elements are displayed in linear fashion based on orientation i.e. either horizontally or vertically. Relative Layout the views are placed in related to one another. Listview list of scrollable items Gridview to display items in two dimensional scrolling grid (rows and columns) Scrollview & Horizontal Scrollview how items are make scrollable Absolute Layout absolute layout displays views based on exact location of its children by using x and y coordinates. This view is depreciated in Android. Frame Layout Spinner drop down-list allowing user to select one value from a set of values. TextView displays text to the user EditText used in applications when we need user to provide an input or text field
  • 6. ACTION BAR •The action bar is an important design element, usually at the top of each screen in an app, that provides a consistent familiar look between Android apps. It is used to provide better user interaction and experience by supporting easy navigation through tabs and drop-down lists. It also provides a space for the app or activity’s identity, thus enabling the user to know their location in the app, and easy access to the actions that can be performed.
  • 7. CONT’D •Before Android 3.0 Action Bar was not included in the SDK. You needed libraries to incorporate it into your design. Today, we have appcompat v7 library or later. You may need to activate.
  • 8. • App icon – This is used to identify your app with a logo or icon. • View control – This can also be used to identify the app or the specific activity the user is on by the title. If your app has different views, it can also be used to display these and allow for easy switching between views. • Action buttons – These are used to display the most important and/or often used actions. If there isn’t enough space to show all of the action buttons, those that don’t fit are
  • 9. ADDING ACTIONS TO THE ACTION BAR •To add actions to the action bar, create a XML file in the res/menu directory where you will define each action. It is possible to define the actions in Java code, but you will write less code if you use XML.
  • 10. CONT’D • The contents of res/menu/main_activity_bar.xml are shown in the next slide. In this example, we’re using the Action Bar Icon Pack for the action icons. Download it and copy the necessary icons to the res/drawable-xxxx directory for the different screen densities.
  • 12. STRINGS.XML • add the string literals to res/values/strings.xml, as shown <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">ActionBar</string> <string name="action_settings">Settings</string> <string name="action_search">Search</string> <string name="action_record">Record Video</string> <string name="action_save">Save</string> <string name="action_label">Add Label</string> <string name="action_play">Play Video</string> <string name="hello_world">Hello world!</string> </resources> <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">ActionBar</string> <string name="action_settings">Settings</string> <string name="action_search">Sea
  • 13. JAVA COMPONENT OF ACTION BAR • See: http://www.sitepoint.com/better-user-interfaces- android-action-bar/ • To be covered in another lesson
  • 14. FAB • See Word document (too much code doesn’t fit in PowerPoint
  • 15. COLOR RESOURCE: DEFINES THEME COLOURS FOR YOUR PROJECT <?xml version="1.0" encoding="utf-8"?> <resources> <color name="color_name" >hex_color</color> </resources>
  • 16. COLOR EXAMPLE <?xml version="1.0" encoding="utf-8"?> <resources> <color name="opaque_red">#f00</color> <color name="translucent_red">#80ff0000</color> </resources>
  • 17. DIMENSIONS: USED TO DEFINE STANDARD DIMENSIONS IN YOUR PROJECT <?xml version="1.0" encoding="utf-8"?> <resources> <dimen name="dimension_name" >dimension</dimen> </resources>
  • 18. DIMENSION EXAMPLE • <?xml version="1.0" encoding="utf-8"?> • <resources> • <dimen name="textview_height">25dp</dimen> • <dimen name="textview_width">150dp</dimen> • <dimen name="ball_radius">30dp</dimen> • <dimen name="font_size">16sp</dimen> • </resources>
  • 19. OTHER RESOURCE TYPES • http://developer.android.com/guide/topics/resources/more- resources.html
  • 20. METRICS, KEYLINES AND BREAKPOINTS • Material design recommends standards dimensions for layouts. • These are referred to as keylines • For responsive design, the layout should change depending on the device screen size and resolution • Break points are the screen sizes where the app or web page is designed to automatically change layout. See following discussion: http://developer.android.com/guide/practices/screens_suppor