IF 633
Mobile Application Programming
02 Android Activity, Layout, View and UI Resources
REVIEW
▪ Android is an ecosystem
▪ Challenges of Android app development
▪ App fundamentals
▪ Android Studio
▪ Basic app development workflow with Android Studio
▪ Running apps on virtual and physical devices
OBJECTIVES
▪ Explain and define what is an Activity
▪ Explain and define what is a View
▪ Explain how to arrange and configure layout using different types.
▪ Explain and define what the resources files are
▪ Explain how to define the resources file and how to link the objects on
the resources files into the Java code.
OUTLINE
Android Activity
Views
Layouts
Relative Layout
Linear Layout
Frame Layout
Constraint Layout
Resources for UI
What is an Activity
An activity represents a single screen in your app with an interface the user can
interact with. For example, an email app might have one activity that shows a list
of new emails, another activity to compose an email, and another activity for
reading individual messages. Your app is probably a collection of activities that
you create yourself, or that you reuse from other apps.
Typically, one Activity in an app is specified as the "main" activity, for example
MainActivity. The user sees the main activity when they launch the app for the
first time. Each activity can start other activities to perform different actions.
Creating an Activity
To implement an Activity in your app, do the following:
▪ Create an Activity Java class.
▪ Implement a basic UI for the Activity in an XML layout file.
▪ Declare the new Activity in the AndroidManifest.xml file.
Create an Activity Java Class
When you create a new project in Android Studio, the MainActivity is,
by default, a subclass of the AppCompatActivity class.
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
Create an Activity Java Class (Cont.)
The first task for you in your Activity subclass is to implement the standard
Activity lifecycle callback methods (such as onCreate()) to handle the state
changes for your Activity.
The one required callback your app must implement is the onCreate() method.
The system calls this method when it creates your Activity, and all the essential
components of your Activity should be initialized here. Most importantly, the
onCreate() method calls setContentView() to create the primary layout for
the Activity.
Declare the Activity in AndroidManifest.xml
▪ Each Activity in your app must be declared in the AndroidManifest.xml file with
the <activity> element, inside the <application> section.
<activity android:name=".MainActivity" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
Implement The Activity's User Interface
The UI for an activity is provided by a hierarchy of View elements, which controls
a particular space within the activity window and can respond to user interaction.
The most common way to define a UI using View elements is with an XML layout
file stored as part of your app's resources. Defining your layout in XML enables
you to maintain the design of your UI separately from the source code that
defines the activity behavior.
You can also create new View elements directly in your activity code by inserting
new View objects into a ViewGroup, and then passing the root ViewGroup to
setContentView().
What is a view?
▪ A View is everything you see at your mobile device.
▪ A View is every user interface element you see.
▪ View subclasses are basic user interface building blocks
▪ Display text (TextView class), edit text (EditText class)
▪ Buttons (Button class), menus, other controls
▪ Scrollable (ScrollView, RecyclerView)
▪ Show images (ImageView)
▪ Group views (ConstraintLayout and LinearLayout)
View attributes
▪ Color, dimensions, positioning
▪ May have focus (e.g., selected to receive user input)
▪ May be interactive (respond to user clicks)
▪ May be visible or not
▪ Relationships to other views
Create views and layouts
1. XML layout file
2. Design and Text tabs
3. Palette pane
4. Component Tree
5. Design and blueprint
panes
6. Attributes tab
View defined in XML
<TextView
android:id="@+id/show_count"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/myBackgroundColor"
android:text="@string/count_initial_value"
android:textColor="@color/colorPrimary"
android:textSize="@dimen/count_text_size"
android:textStyle="bold"
/>
View attributes in XML
android:<property_name>="<property_value>"
Example: android:layout_width="match_parent"
android:<property_name>="@<resource_type>/resource_id"
Example: android:text="@string/button_label_next"
android:<property_name>="@+id/view_id"
Example: android:id="@+id/show_count"
Create View in Java code
context
In an Activity:
TextView myText = new TextView(this);
myText.setText("Display this text!");
What is the context?
▪ Context is an interface to global information about an
application environment
▪ Get the context:
Context context = getApplicationContext();
▪ An Activity is its own context:
TextView myText = new TextView(this);
ViewGroup contains "child" views
▪ ConstraintLayout: Positions UI elements using constraint
connections to other elements and to the layout edges
▪ ScrollView: Contains one element and enables scrolling
▪ RecyclerView: Contains a list of elements and enables
scrolling by adding and removing elements dynamically
ViewGroups for layouts
Layouts
▪ are specific types of ViewGroups (subclasses of ViewGroup)
▪ contain child views
▪ can be in a row, column, grid, table, absolute
Common Layout Classes
LinearLayout ConstraintLayout GridLayout TableLayout
Horizontal or Connect views with Rows and Rows and
vertical row constraints columns columns
● RelativeLayout: Child views relative to each other
● FrameLayout: Shows one child of a stack of children
Class hierarchy vs. layout hierarchy
● View class-hierarchy is standard object-oriented class
inheritance
○ For example, Button is-a TextView is-a View is-an Object
○ Superclass-subclass relationship
● Layout hierarchy is how views are visually arranged
○ For example, LinearLayout can contain Buttons
arranged in a row
○ Parent-child relationship
Hierarchy of viewgroups and views
ViewGroup Root view is always a ViewGroup
ViewGroup View View
View View View
View hierarchy and screen layout and
Layout Editot
in Layout Editor
Layout created in XML
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
... />
<TextView
... />
<Button
... />
</LinearLayout>
Layout created in Java Activity code
LinearLayout linearL = new LinearLayout(this);
linearL.setOrientation(LinearLayout.VERTICAL);
TextView myText = new TextView(this);
myText.setText("Display this text!");
linearL.addView(myText);
setContentView(linearL);
Best practices for view hierarchies
● Arrangement of view hierarchy affects app performance
● Use smallest number of simplest views possible
● Keep the hierarchy flat—limit nesting of views and view
groups
What is ConstraintLayout?
● Default layout for new Android Studio project
● ViewGroup that offers flexibility for layout design
● Provides constraints to determine positions and alignment of
UI elements
● Constraint is a connection to another view, parent layout, or
invisible guideline
ConstraintLayout toolbar in layout editor
1. Show: Show Constraints and Show Margins
2. Autoconnect: Enable or disable
3. Clear All Constraints: Clear all constraints in layout
4. Infer Constraints: Create constraints by inference
5. Default Margins: Set default margins
6. Pack: Pack or expand selected elements
7. Align: Align selected elements
8. Guidelines: Add vertical or horizontal guidelines
9. Zoom controls: Zoom in or out
Preview layouts
Preview layout with horizontal/vertical orientation:
1. Click Orientation in Editor button
2. Choose Switch to Landscape or Switch to Portrait
Preview layout with different devices:
1. Click Device in Editor button
2. Choose device
Resources
● Separate static data
from code in your
layouts.
resources
● Strings, dimensions, and resource
images, menu text, files
stored in res
colors, styles folder
● Useful for localization
Refer to resources in code
● Layout:
R.layout.activity_main
setContentView(R.layout.activity_main);
● View:
R.id.recyclerview
rv = (RecyclerView) findViewById(R.id.recyclerview);
● String:
In Java: R.string.title
In XML: android:text="@string/title"
Summary
▪ After finishing this lecture, you should be able:
▪ to understand what an Activity is
▪ to understand what View and ViewGroup are
▪ to understand layouts to arrange the display on the device’s
screen
▪ to understand how to create, configure, and utilized the objects in
the resources’ files
NEXT WEEK’S OUTLINE
Text View, Text Input, Button
Widget
Container (e.g. Recycler View, Scroll View, Card View)
Action Bar, Toast, Snack Bar, Dialog Bar.
REFERENCES
▪ J.F.DiMarzio. Beginning Android Programming with Android Studio (2017).
John Wiley & Son.
▪ D. Griffiths & D. Griffiths. Head First Android Development. O’Reilly
▪ Google Developer Training Team. Android Developer Fundamental Course:
Learn to develop Android Applications. Concept Reference. (Version 2:
2018). Google Inc.
▪ https://google-developer-training.github.io/android-developer-fundamentals-
course-concepts-v2/
Visi
Menjadi Program Studi Strata Satu Informatika unggulan yang menghasilkan lulusan
INFORMATIKA
berwawasan internasional yang kompeten di bidang Ilmu Komputer (Computer
Science), berjiwa wirausaha dan berbudi pekerti luhur.
Misi
1. Menyelenggarakan pembelajaran dengan teknologi dan kurikulum terbaik serta didukung
tenaga pengajar profesional.
2. Melaksanakan kegiatan penelitian di bidang Informatika untuk memajukan ilmu dan
teknologi Informatika.
3. Melaksanakan kegiatan pengabdian kepada masyarakat berbasis ilmu dan teknologi
Informatika dalam rangka mengamalkan ilmu dan teknologi Informatika.
