Android App Development - Front-end

XML in Android App Development

• XML (eXtensible Markup Language) is used for storing and transferring data, similar to HTML
• XML is case-sensitive, requires each tag to be closed properly, and preserves whitespace
• XML tags need not be predefined like HTML

XML Layout File

• Each XML file used to design the Android UI is known as a Layout file
• Every tag has its Attributes
• Root View is a root element of an XML Layout file, and all tags corresponding to various components of the 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

• Relative Layout: displays its child content in positions relative to the parent
• Linear Layout: aligns its contents into a single direction, vertical or horizontal
• Frame Layout: 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

• List View: displays a list of scrollable items
• Grid View: displays items in a 2D scrollable grid
• Table Layout: groups views into rows and columns

Attributes in a Tag

• Android:id: gives a component or tag an id for future reference
• Android:layout_width and Android:layout_height: specify the width and height of a 2D design component
• Android:text: specifies the text to be shown in a View

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: an editable text field for user input
• ListView: a scrollable list of items containing other views

RelativeLayout

• Enables specifying how child views are positioned relative to each other
• Position properties in child elements:
  • Android:layout_alignParentRight= “true”
  • Android:layout_alignParentLeft= “true”
  • Android:layout_alignParentBottom= “true”
  • Android:layout_alignParentTop= “true”
• More positions for child elements:
  • Android:layout_centerInParent= “true”
  • Android:layout_centerVertical= “true”
  • Android:layout_centerHorizontal= “true”

Giving IDs to Tags

• Android:id= “@+id/btnStartApp”
• Use clear and understandable naming conventions for IDs

More Positions for Child Elements using IDs

• Android:layout_toRightOf= “@+id/btnStartApp”
• Android:layout_toLeftOf= “@+id/btnStartApp”
• Android:layout_above= “@+id/btnStartApp”
• Android:layout_below= “@+id/btnStartApp”

LinearLayout

• Aligns all children in either vertically or horizontally
• Properties:
  • Android:orientation = “vertical”
  • Android:gravity = “center”