1 of 25

User Interaction

Android Developer Fundamentals V2

1

Lesson 4

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Buttons and clickable images

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Buttons and clickable images

2 of 25

4.1 Buttons and clickable images

2

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Buttons and clickable images

3 of 25

Contents

User interaction
Buttons
Clickable images
Floating action button
Common gestures

3

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Buttons and clickable images

4 of 25

User interaction

4

Android Developer Fundamentals V2

Buttons and clickable images

This work is licensed under a Creative Commons Attribution 4.0 International License.

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Buttons and clickable images

5 of 25

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

5

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Buttons and clickable images

6 of 25

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

6

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Buttons and clickable images

7 of 25

Buttons

7

Android Developer Fundamentals V2

8 of 25

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

8

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Buttons and clickable images

9 of 25

Button image assets

Right-click app/res/drawable
Choose New > Image Asset
Choose Action Bar and Tab Items from drop down menu
Click the Clipart: image �(the Android logo)

Experiment:

Choose New > Vector Asset

9

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Buttons and clickable images

10 of 25

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:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/button_send"

android:onClick="sendMessage" />

10

android:onClick

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Buttons and clickable images

A click event occurs when the user taps or clicks a button, or an image used as a button. The object notifies an event listener called OnClickListener, which is an interface in the View class. You can use the listener to respond to a click event.

Android Studio provides a shortcut for setting up an OnClickListener for the clickable object in your Activity code, and for assigning a callback method: use the android:onClick attribute with the clickable object’s element in the XML layout. For example:

<Button

android:id="@+id/button_send"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/button_send"

android:onClick="sendMessage" />

In this case, when a user clicks the button, the Android system calls the Activity’s sendMessage() method.

11 of 25

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

}

});

11

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Buttons and clickable images

12 of 25

Clickable images

12

Android Developer Fundamentals V2

13 of 25

ImageView

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

13

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Buttons and clickable images

14 of 25

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:layout_height="wrap_content"

android:src="@drawable/donut_circle"

android:onClick="orderDonut"/>

14

android:onClick

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Buttons and clickable images

A click event occurs when the user taps or clicks a button, or an image used as a button. The object notifies an event listener called OnClickListener, which is an interface in the View class. You can use the listener to respond to a click event.

Android Studio provides a shortcut for setting up an OnClickListener for the clickable object in your Activity code, and for assigning a callback method: use the android:onClick attribute with the clickable object’s element in the XML layout. For example:

<Button

android:id="@+id/button_send"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/button_send"

android:onClick="sendMessage" />

In this case, when a user clicks the button, the Android system calls the Activity’s sendMessage() method.

15 of 25

Floating action button

15

Android Developer Fundamentals V2

16 of 25

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

16

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Buttons and clickable images

17 of 25

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"

.../>

17

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Buttons and clickable images

18 of 25

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"

18

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Buttons and clickable images

19 of 25

Common Gestures

19

Android Developer Fundamentals V2

20 of 25

Touch Gestures

Touch gestures include:

long touch
double-tap
fling
drag
scroll
pinch

20

Don’t depend on touch gestures for app's basic behavior!

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Buttons and clickable images

21 of 25

Detect gestures

Classes and methods are available to help you handle gestures.

GestureDetectorCompat class for common gestures
MotionEvent class for motion events

21

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Buttons and clickable images

22 of 25

Detecting all types of gestures

Gather data about touch events.
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

22

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Buttons and clickable images

23 of 25

Learn more

23

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Buttons and clickable images

24 of 25

What's Next?

24

Concept Chapter: 4.1 Buttons and clickable images
Practical: 4.1 Clickable images

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Buttons and clickable images

25 of 25

END

25

Android Developer Fundamentals V2