Building interactive app

#AskMeAnything
Building interactive app

Senior Android Developer
Omar Albelbaisy
Bio
Omar got his bachelor’s degree in Computer Science
from IUG university in 2014 and has been working as an
Android developer since that time.
He worked in many organizations and companies as
well as a freelancer developer.
He earned the Top Rated badge on Upwork freelancing
platform in 2017.
He also worked as an Android Trainer in many training
centers and colleges.
Omar is currently working as a Content Developer at
Coded and a Mentor at Udacity.

Introduction
© 2019 Udacity. All rights reserved.
❖ The ﬁrst thing you did was building the user interface using XML code.
❖ You have added buttons and other UI elements to your app's main
screen, but currently, these UI elements does not interact with the user.

Introduction
❖ Most apps need to respond to the user in some way.

Introduction
❖ In this lecture you will learn how you can get your app to do something
in response to the user, and how to get your activity and layout talking
to each other like best buddies.
❖ Along the way, we’ll know how Android actually works by introducing the
R class, which is the hidden gem that glues everything together.

Introduction
What you'll learn
❖ How to use onClick attribute.
❖ How to ﬁnd a view by its ID.
❖ How to set and get property values of a view.
❖ How to add a listener for a View using Java code.

Getting Started!

Enable Auto Import
❖ Before adding behavior to your buttons, It’s recommended to enable
auto-imports so that Android Studio automatically imports any classes
that are needed by the Java code.

Enable Auto Import

XML to Java

Workflow
❖ Typically, developers define UI in XML files (e.g., the activity_main.xml file
located in the res/layout folder).
❖ During build time, XML layout file is compiled into compiled resource.
❖ During run time, android inflate the compiled resource into java objects
when setContentView() method is called.
❖ After inflation Android will measure the size and position of each
View/ViewGroup and then draw the result on the screen.

Workﬂow
XML
Compiled
Resources
View
Objects

MainActivity.java
❖ This class has at least one method which is onCreate().
❖ The onCreate() method executes when the activity gets initiated.
❖ In the ﬁrst line, we call super.onCreate() method which is deﬁned in the
original super class to build the basic window for us to show our layout.
❖ In the next line we call setContentView to set the layout of the activity to
activity_main.xml.

MainActivity.java
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}

Add simple interaction

Use onClick attribute
To use onClick attribute you need to:-
❖ Deﬁne the method that implement the desired click behavior in the
activity class.
❖ This method must be public, return void, and take a single argument
of View (This is the view that receives the click event).
❖ Set the method name as the value of the onClick attribute of the view.

Use onClick attribute
❖ Now we will show a message to the user when the button pressed.
❖ To do this we will use something called Toast
❖ Toast is a short message that appears at the bottom of the screen.

Show a Toast
❖ First, we will add a new method call showToast to the MainActivity.java
❖ Inside this method we will use Toast class to show the message to the
user as follow.
public void showToast(View view) {
Toast toast = Toast.makeText(this, "Hello World!", Toast.LENGTH_SHORT);
toast.show();
}

Show a Toast
❖ Then, we will move to activity_main.xml and set onClick property to point
to showToast method so that method will be called when the button
clicked by the user.
❖ Run the app!

Update views properties

R class
❖ The method that shows the toast is very simple; it does not interact with
any other views in the layout.
❖ The next step is to ﬁnd and update other views.
❖ But before that, we should give ids to our view in XML code so we can
access them later from Java!
❖ The connector between XML and Java is called the R class.

R class
❖ The R class is the glue between the world of Java and resources.
❖ R.java is an automatically generated from project resources (such as
strings, layouts, drawables, colors etc).
❖ It contains assigned numeric constants to identify each resource.
❖ You can use these constants to access resource from your code.
❖ It basically makes the connection between the XML ﬁles and Java.

R class
❖ R class recreated every time you change anything in the res directory,
For example, when you add an image or XML ﬁle or change an id.
❖ If you attempt to make changes directly in it, they will be erased when
you build your project.

R class
R.resource_type.name_or_id

findViewById
❖ To retrieve the view from layout resources we use findViewById method
defined in the Activity class.
❖ This method searches for the view with the given id in the view objects
hierarchy and return it.
❖ After we get the view we can store it in a new variable to be able to
modify its properties in other parts of the code.

ﬁndViewById
activity_main.xml
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
MainActivity.java
TextView textView = findViewById(R.id.textView);

Update and get properties
TextView textView = findViewById(R.id.textView);
…
textView.setText(String.valueOf(counter));
textView.setTextSize(counter);
textView.setTextColor(Color.RED);
…
textView.getText();

Add OnClickListener

Why we need Listeners ?
❖ Sometimes, onClick attribute is not enough!
❖ OnClick attribute is suitable for simple event handling in an Activity.
❖ But if you would like to dynamically change event handling or you would
like to handle event in fragments or in adapters or if you want to handle
diﬀerent types of events rather than onClick then you need to add a
listener for the View from Java code.

What is the Listener ?!
❖ A listener watches for an event to be fired.
❖ When the event fired, the listener will be notified.
❖ Then we can handle that event and perform the operation we want.
❖ There are multiple events that we can listen to.
➢ Examples:- Clicks, LongClicks, Check, Drag, etc ..
❖ For each event we can attach a listener!

What is the Listener ?!

Add OnClickListener
❖ To add onClickListener for a View we use setOnClickListener method.
❖ This method receives a parameter of OnClickListener type.
❖ To create an OnClickListener we have to implement View.OnClickListener
interface and override onClick method.

Add OnClickListener #1
public class MainActivity extends AppCompatActivity implements
View.OnClickListener {
…
@Override
public void onClick(View view) {
// Handle events here
}
}
…
Button button = findViewById(R.id.button);
button.setOnClickListener(this);

public class MyClickListener implements View.OnClickListener {
@Override
}
}
…
MyClickListener myClickListener = new MyClickListener();
button.setOnClickListener(myClickListener);

View.OnClickListener myClickListener = new View.OnClickListener() {
@Override
}
};
button.setOnClickListener(myClickListener);

Add OnClickListener #4!
button.setOnClickListener(new View.OnClickListener() {
@Override
}
});

To recap ..
Let's build a simple interactive app

Ask Me Anything.
Q&As

Be in Demand

Building interactive app

More Related Content

Similar to Building interactive app

Building interactive app