Mobile App Development

Android App Development - Front-end

Hajrah Jahan
Overview

• Front-end
• XML
• Android Layouts
○ Linear Layout
○ Imageview
○ Values
XML - eXtensible Markup Language

● It is used for storing and transferring data.

● It is a markup language much like HTML.

● Unlike HTML, XML is case-sensitive, requires

each tag is closed properly, and preserves

whitespace.

● XML tags need not be predefined like HTML.

XML in Android
● Each XML file used to design the Android UI is known as a Layout file.

● Every tag has its Attributes.

Root
● A Root View is a root element of an XML Layout file.

● All the tags corresponding to various components of your UI must be placed between the

starting and ending tag of the main root tag.

● Each Layout file contains only one root tag.

Common Layouts

● A Relative Layout displays its child content in positions relative to the parent.

● A Linear Layout aligns its contents into a single direction, vertical or horizontal.

● A Frame Layout is a placeholder on a screen that displays only a single view, i.e., A Fragment.
Views

● All Views are placed in a Layout.

○ Text, Images, and buttons are all views.

● View Group is an invisible container that holds multiple views together and defines their layout

properties.

Common View Groups

● A List View displays a list of scrollable items.

● A Grid View displays items in a 2D scrollable grid.

● A Table Layout groups views into rows and columns.

Xlmns URI in tags
<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"
tools:context=".MainActivity">
</RelativeLayout>

● A URI is a Uniform Resource Indicator.

● It identifies an Internet Domain Address.

● Here http://schemas.android.com/apk/res/android is the android URI.

● It is used to point to and provide access to all the XML Tags created to design Android Apps.
XML tags for Android
Layouts and ViewGroups
Attributes in a Tag
● Android:id
○ Gives your component or tag an id for future reference.
● Android:layout_width (Required*)
○ Specifies the width or breadth of your 2D design component.
● Android:layout_height (Required*)
○ Specifies the height or length of your 2D design component.
● Android:text
○ Specifies the text you wish to show in a View.
○ For Example;
■ Using a TextView to display a name
■ Using a Button to display Ok or Cancel.
● Tools
○ Connects your layout file with your Java file.
Attributes Values
Android:layout_width, Android:layout_height

● match_parent: To match the size of your component or view with your parent layout or

ViewGroup.

○ Always use match_parent for root element.

● wrap_content: To match the size of your component or view with the size of its content.

● 0dp: To specify a numeric value in density pixels.

○ This value will decrease in small screens and increase in larger screens.
XML tags for Android

● TextView displays a formatted text label

● ImageView displays an image resource

● Button can be clicked to perform an action

● ImageButton displays a clickable image

● EditText is an editable text field for user input

● ListView is a scrollable list of items containing other views

 ListView

TextView

Button

ImageView or
ImageButton

EditText
More Attributes
Relative Layout
● As the word suggests you make a relationship with the child components or views.

● Android RelativeLayout enables you to specify how child views are positioned relative to each

other.

● The position of each view can be specified as relative to sibling elements or relative to the

parent.

● The connection or position property in child elements or views:

○ Android:layout_alignParentRight= “true”

○ Android:layout_alignParentLeft= “true”

○ Android:layout_alignParentBottom= “true”

○ Android:layout_alignParentTop= “true”
More positions for the child elements
Android:layout_centerInParent= “true”

● Positions an element vertically and horizontally in the center of the layout.

Android:layout_centerVertical= “true”

● Positions an element vertically in the center of the layout.

Android:layout_centerHorizontal= “true”

● Positions an element horizontally in the center of the layout

Giving ID’s to Tags

Android:id= “@+id/btnStartApp”

● Mention the id name after the prefix “@+id/”

● Use clear and understandable naming conventions for id’s

More positions for the child elements using ID’s

Android:layout_toRightOf= “@+id/btnStartApp”

● Positions an element to the right of an existing element.

Android:layout_toLeftOf= “@+id/btnStartApp”

● Positions an element to the left of an existing element.

Android:layout_above= “@+id/btnStartApp”

● Positions an element above an existing element.

Android:layout_below= “@+id/btnStartApp”

● Positions an element below an existing element.

Linear Layout
● Android LinearLayout is a view group that aligns all children in either vertically or horizontally.

● For Example, forms.

Linear Layout Properties

Android:orientation = “vertical”

● Positions elements vertically one below the other.

● Default orientation is horizontal.

Android:gravity = “center”

● Aligns all elements to the value specified.

Adding Colors to Views

Android:background = “@colors/Darkred”

Android:textColor = “@colors/Darkgray”

● Navigate to the values sub-folder in the res

folder.

● Add the hexcode in a custom tag in the

colors.xml file.

● Use the custom tag name in your android

color property.
● To choose from a color picker instead, mention any hexcode then click on the color box that

appear on the left of the property.

Adding Vector Assets

● Vector assets are svg icon files.

● To add an icon:

○ Right click on the drawable folder.

○ Select New → Select Vector Assets.

○ Choose from the Android library or

○ Upload your own icon.

Note: The icon should not be larger than 1024 pixels.

Image View Properties

Android:contentDescription = “<Yourtexthere>”

● To add description or anchor text for your image.

Android:scaleType = “fitXY”

● Scales the image along your x and y axis.

Adding String values to Views

● Save a string in the strings.xml file in your values sub-folder in res folder to use them later

in the app.

● For example, to add a content_Description to your imageView.

Edit Text Properties
Android:ems = “15”

● ems is a unit of measurement.

● The name em was originally a reference to

the width of the capital M.

● It sets the width of a TextView/EditText to fit a

text of n 'M' letters regardless of the actual

text extension and text size.

Android:inputType = “text”

● Sets the type of input allowed in the field.

Container Properties
Android:padding = “10dp”

● To set the spaces between your content and the border of your widget element.

Android:margin = “5dp”

● To set the spaces outside of your view.

Android:border = “2dp”

● To add a line that goes around our object.

Handouts

• https://andersenlab.com/services/design-studio/mobile-design?utm_source=google&utm_medium=cpc&utm

_campaign=service-ui-ux&utm_id=10209014361&utm_content=131327570812-539615780159-android%2

0ui%20design&gclid=CjwKCAiA3pugBhAwEiwAWFzwdewJlNU0IBVp1tmbT1WYPxqSVVBNKy_Ze1

AgaBxYyqOnMqwe1BZsDhoCCAYQAvD_BwE

• https://data-flair.training/blogs/android-layout-and-views/

• https://developer.android.com/develop/ui/views/layout/declaring-layout

• https://www.tutorialspoint.com/android/android_user_interface_layouts.htm

• https://developer.android.com/develop/ui/views/layout/relative
 Handouts
• https://developer.android.com/develop/ui/views/layout/linear

• https://www.tutorialspoint.com/android/android_linear_layout.htm

• https://developer.android.com/reference/android/widget/ImageView

• https://www.geeksforgeeks.org/imageview-in-android-with-example/

• https://developer.android.com/reference/android/graphics/Color

• https://developer.android.com/guide/topics/resources/string-resource

• https://developer.android.com/reference/android/widget/EditText

• https://guides.codepath.com/android/Working-with-the-EditText

• https://www.geeksforgeeks.org/concept-of-padding-in-android/

• https://www.geeksforgeeks.org/concept-of-margin-in-android/

• https://www.tutorialspoint.com/how-do-i-put-a-border-around-an-android-textview