BSE2209
MOBILE PROGRAMMING PROJECT
In Last Lecture
▪ Android components
▪ Activities and layouts
▪ View and ViewGroup objects
▪ Activity lifecycle
▪ Containers
2
In This Lecture
▪ Android UIs
3
Designing the Android UI
▪ Android UI is designed using XML or programmatically in
application.
▪ Originally, only XML was used for Native Android UI design.
▪ With XML, the screens and UI components are developed in
XML notation while the application logic is implemented in
Java or Kotlin
▪ Using XML we are able to separate the presentation from
application logic which makes it easier to visualize, manage,
edit and debug the App.
▪ More about XML based UIs:
4
Designing the Android UI
▪ Of recent, Google introduced Jetpack Compose, a modern approach for
developing user interfaces.
▪ Jetpack uses Kotlin code to declare UI components.
▪ According to Google, Jetpack Compose is Android's modern toolkit for
building native UI – Google might completely replace XML with Compose in
future.
▪ Jetpack compose speeds up testing and uses a single code base to write
code
▪ Jetpack compose allows you to do more with less code compared to xml
▪ More about Jetpack: https://developer.android.com/jetpack/compose
5
XML vs Jetpack Compose
XML Jetpack Compose
▪ More code ▪ Less code
▪ Non-declarative API (no need to ▪ Uses declarative API (you need
describe your UI) to describe your UI)
▪ Less flexible in implementing ▪ More flexible to implement
complex UI desired UI
▪ Takes more time to develop a ▪ Accelerates development with
similar interface interoperability
▪ Kotlin not required ▪ Requires knowledge of Kotlin
▪ Navigation is harder ▪ Navigation is easier
▪ Animation is harder ▪ Animation made easier
20:45 6
XML-based UIs
▪ The View class is the basic building block of Android UIs
▪ It’s the base class of all widgets (buttons, text fields etc)
▪ The ViewGroup is the base class for layouts, which are
invisible containers of other Views or ViewGroups
▪ All UI components are that you need to access in Java or
Kotlin code are defined within layouts and each component
should have a unique ID conventionally defined as
android:id=“@+id/unique_id”
▪ Layouts are defined in XML files stored in app/res/layout
foder
7
XML-based UIs
8
Attaching Views to Kotlin code
▪ Assume res/layout/main.xml layout and main.kt files have
been created. The layout file can be linked to Kotlin code
using the statement in main.kt:
setContentView(R.layout.main)
The R is a class automatically genereated to keep track of
all the resources available in the app
▪ Individual widgets, eg button1, in the XML file can be
accessed from the Kotlin file using:
findViewById<Button>(R.id. button1)
9
Attaching Views to Kotlin code
▪ Alternative of attaching views of to Kotlin code: View
binding
▪ View binding makes it easy to write code that interacts with
views
▪ Once enabled in a module, view binding generates a binding
class for each XML file present in the module.
▪ An instance of the binding class contains direct references to
all views that have an ID in the corresponding layout.
▪ View binding replaces using findViewById
10
Attaching Views to Kotlin code
To Setup View Binding:
▪ Add the code below to your module-level
build.gradle file
▪ Name of the bind class is generated from the
XML file using Pascal case and adding the
word Binding at the end e.g
result_profile.xml generates
ResultProfileBinding binding class
▪ Every binding class includes a getRoot()
method that directly references the root view
of the XML file 11
Attaching Views to Kotlin code
To use view binding object within activities (Kotlin code):
▪ Create an instance of the binding class by calling the inflate()
method which is included in the binding class.
▪ Pass the root view to setContentView() to make it the active
view on the screen.
▪ Use the instance of the binding class to reference any of the
views
12
Attaching Views to Kotlin code
Steps include adding the code below to your Kotlin file:
Import com.app_name.databinding.MainBinding
class main : AppCompatActivity() {
private lateinit var binding: MainBinding
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = MainBinding.inflate(layoutInflater)
setContentView(binding.root)
//binding object now gives you access to all views in main.xml e.g
binding.my_button.setOnClickListener {…}
For more about view binding:
https://developer.android.com/topic/libraries/view-binding
13
Attaching Listeners to Widgets
▪ Within the XML file, you can attach a listerner to a view e.g:
android:onClick=“doSomething“
//where doSomething is a listerner method in your
kotlin file
fun doSomething(v: View) {
binding.btn1.text.toString().toInt()
}
14
Tasks for this week
▪ Go to https://developer.android.com/develop/ui and complete
reading the following sections in the tutorial:
▪ Develop you app’s layout
▪ Apply themes
▪ Add components
▪ Work with text and emoji
▪ Display graphics and videos
▪ Work with animations and transitions
▪ Add support for touch and input
▪ Add notifications to your app
▪ Customize app launch
▪ Add app content to home screen or launcher
15
Tasks for this week
▪ Create an app with the following UI:
My Smart Home My Smart Home
Note:
• Buttons on the interface need not be
active (no need to respond to events)
• Only 2 pages at the bottom navigation
bar need to be implemented (i.e
Favourites and Things)
• The link to the active page at the bottom
navigation gets highlighted in yellow
• You are free to use any method to
implement the UIs (XML or Jetpack
Compose)
16
