Android UI elements

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.

3. UI DESIGNER

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

5. OTHER
ELEMENTS

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.

11. <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" /> ……

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