Android Developer Fundamentals V2

User Interaction

Lesson 4

Buttons
Buttonsand
and This work is licensed under a
Android
AndroidDeveloper
DeveloperFundamentals
FundamentalsV2
V2 clickable
clickableimages
images
Creative Commons Attribution 4.0 Inter 1
national License
4.1 Buttons and clickable
images

Buttons and This work is licensed under a

Android Developer Fundamentals V2 clickable images
Creative Commons Attribution 4.0 Inter 2
national License
Contents
● User interaction
● Buttons
● Clickable images
● Floating action button
● Common gestures

This work is licensed under a

Buttons and
Android Developer Fundamentals V2 Creative Commons Attribution 4.0 Inter 3
clickable images national License
User interaction

Buttons and This work is licensed under a

Android Developer Fundamentals V2 clickable images
Creative Commons Attribution 4.0 Inter 4
national License
Users expect to interact with apps

● Tapping or clicking, typing, using gestures, and talking

● Buttons perform actions
● Other UI elements enable data input and navigation

This work is licensed under a

Buttons and
Android Developer Fundamentals V2 Creative Commons Attribution 4.0 Inter 5
clickable images national License
User interaction design
Important to be obvious, easy, and consistent:
● Think about how users will use your app
● Minimize steps
● Use UI elements that are easy to access, understand, use
● Follow Android best practices
● Meet user's expectations
This work is licensed under a
Buttons and
Android Developer Fundamentals V2 Creative Commons Attribution 4.0 Inter 6
clickable images national License
Buttons

Android Developer Fundamentals V2 7

Button
● View that responds to tapping (clicking) or pressing
● Usually text or visuals indicate what will happen when
tapped
● State: normal, focused, disabled, pressed, on/off

Buttons and This work is licensed under a

Android Developer Fundamentals V2 clickable images
Creative Commons Attribution 4.0 Inter 8
national License
Button image assets

1. Right-click app/res/drawable
2. Choose New > Image Asset
3. Choose Action Bar and Tab Items
from drop down menu
4. Click the Clipart: image Experiment:
(the Android logo) 2. Choose New > Vector Asset

Buttons and This work is licensed under a

Android Developer Fundamentals V2 clickable images
Creative Commons Attribution 4.0 Inter 9
national License
Responding to button taps
● In your code: Use OnClickListener event listener.
● In XML: use android:onClick attribute in the XML layout:
<Button
android:id="@+id/button_send" android:onClick
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button_send"
android:onClick="sendMessage" />

Buttons and This work is licensed under a

Android Developer Fundamentals V2 clickable images
Creative Commons Attribution 4.0 Inter 10
national License
Setting listener with onClick callback

Button button = findViewById(R.id.button);

button.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
// Do something in response to button click
}
});

Buttons and This work is licensed under a

Android Developer Fundamentals V2 clickable images
Creative Commons Attribution 4.0 Inter 11
national License
Clickable
images

Android Developer Fundamentals V2 12

ImageView
● ImageView with android:onClick attribute
● Image for ImageView in app>src>main>res>drawable
folder in project

Buttons and This work is licensed under a

Android Developer Fundamentals V2 clickable images
Creative Commons Attribution 4.0 Inter 13
national License
Responding to ImageView taps
● In your code: Use OnClickListener event listener.
● In XML: use android:onClick attribute in the XML layout:

<ImageView
android:layout_width="wrap_content" android:onClick
android:layout_height="wrap_content"
android:src="@drawable/donut_circle"
android:onClick="orderDonut"/>

Buttons and This work is licensed under a

Android Developer Fundamentals V2 clickable images
Creative Commons Attribution 4.0 Inter 14
national License
Floating action
button

Android Developer Fundamentals V2 15

Floating Action Buttons (FAB)
● Raised, circular, floats above layout
● Primary or "promoted" action for a screen
● One per screen

For example:
Add Contact button in Contacts app

Buttons and This work is licensed under a

Android Developer Fundamentals V2 clickable images
Creative Commons Attribution 4.0 Inter 16
national License
Using FABs
● Start with Basic Activity template
● Layout:
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/fab_margin"
android:src="@drawable/ic_fab_chat_button_white"
.../>

Buttons and This work is licensed under a

Android Developer Fundamentals V2 clickable images
Creative Commons Attribution 4.0 Inter 17
national License
FAB size

● 56 x 56 dp by default
● Set mini size (30 x 40 dp) with app:fabSize attribute:
○ app:fabSize="mini"

● Set to 56 x 56 dp (default):
○ app:fabSize="normal"

Buttons and This work is licensed under a

Android Developer Fundamentals V2 clickable images
Creative Commons Attribution 4.0 Inter 18
national License
Common
Gestures

Android Developer Fundamentals V2 19

Touch Gestures
Touch gestures include:
● long touch
● double-tap Don’t depend on touch
● fling gestures for app's basic
● drag behavior!
● scroll
● pinch

Buttons and This work is licensed under a

Android Developer Fundamentals V2 clickable images
Creative Commons Attribution 4.0 Inter 20
national License
Detect gestures
Classes and methods are available to help you handle
gestures.
● GestureDetectorCompat class for common gestures
● MotionEvent class for motion events

Buttons and This work is licensed under a

Android Developer Fundamentals V2 clickable images
Creative Commons Attribution 4.0 Inter 21
national License
Detecting all types of gestures
1. Gather data about touch events.
2. Interpret the data to see if it meets the criteria for any
of the gestures your app supports.
Read more about how to handle gestures in the
Android developer documentation

Buttons and This work is licensed under a

Android Developer Fundamentals V2 clickable images
Creative Commons Attribution 4.0 Inter 22
national License
Learn more
● Input Controls ● Buttons
● Drawable Resources ● Spinners
● Floating Action Button ● Dialogs
● Radio Buttons ● Fragments
● Specifying the Input Met ● Input Events
hod Type ● Pickers
● Handling Keyboard Input ● Using Touch Gestures
● Text Fields ● Gestures design guide
Buttons and This work is licensed under a
Android Developer Fundamentals V2 clickable images
Creative Commons Attribution 4.0 Inter 23
national License
What's Next?

● Concept Chapter: 4.1 Buttons and clickable images

● Practical: 4.1 Clickable images

Buttons and This work is licensed under a

Android Developer Fundamentals V2 clickable images
Creative Commons Attribution 4.0 Inter 24
national License
END

Android Developer Fundamentals V2 25