MOBILE Waqas Tariq Dar

COMPUTING Spring 2021, GIFT

University
LECTURE 5
 A Basic Layout and UI
Components
• Android Studio Practical Lecture
• Linear Layout
• Creating and Running an app with compnone:
• Button
• Label
• Text field
• Etc.
 Layouts
• A Layout defines the structure for a UI in your app.
• All elements in the layout are built using a hierarchy of View and
ViewGroup
 A simple LinearLayout
Example
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, I am a TextView" />
<Button android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, I am a Button" />
</LinearLayout>
 Loading the layout file – XML
resource
• When you compile your app, each XML layout file is
compiled into a View resource.
• Inside the Activity.onCreate() callback implementation:
• Call setContentView(), passing it the reference to
your layout resource, e.g.,
• setContentView(R.layout.main_layout);
• where main_layout.xml
 Layouts(cont.) – Attributes
1. Some attributes are specific to a View object, e.g.,
TextView has an attribute of textSize.

2. Some are common to all View objects e.g., ID.

3. And, other attributes are considered "layout

parameters," which are attributes that describe
certain layout orientations of the View object, as
defined by that object's parent ViewGroup
 Attributes – ID
• Any View object may have an integer ID associated
with it, to uniquely identify the View within the tree.
• ID is defined as string in XML but is referenced as an
integer after the app is compiled.
• android:id="@+id/my_button“
• Reference from the app can be done as following:
• Button myButton = (Button)
findViewById(R.id.my_button
 Attributes – margin and
padding
• Specifies extra space on the left, top, right and bottom
sides of the view (margin), or view’s bounds to its
content (padding).
• android:layout_margin="20dp“
• android:padding="20dp"
• android:layout_marginStart="10dp"
• android:layout_marginTop="50dp"
• android:paddingEnd="10dp"
• android:paddingBottom=“20dp
 References
• Book: –
• See, handouts of last lecture
• https://developer.android.com/guide/topics/ui/declaring-layout