kode ish1e3 – algoritma dan pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/w5-user...8...
TRANSCRIPT
![Page 1: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/1.jpg)
1
Kode ISH3J4 – Pemrograman Aplikasi Bergerak
Pemrograman Mobile
Rahmat Fauzi, S.T.,M.T
Sistem Informasi – Fakultas Rekayasa Industri
![Page 2: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/2.jpg)
2
2
Sprint 1
![Page 3: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/3.jpg)
3
USER EXPERIENCE
User Interaction
3
![Page 4: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/4.jpg)
4
bit.ly/Video4SI4108
(Terakhir 23.59 Selasa, 18 Februari 2020)
4
Pengumpulan Praktikum
![Page 5: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/5.jpg)
5Let’s Practice
Open CodeLabs Google
5
![Page 6: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/6.jpg)
6
4.1 Buttons and clickable images
6
![Page 7: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/7.jpg)
7Contents
● User interaction● Buttons● Clickable images● Floating action button● Common gestures
7
![Page 8: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/8.jpg)
8
Android Developer Fundamentals V2 Buttons and
clickable imagesThis work is licensed under a Creative Commons Attribution 4.0 International License.
User interaction
8
![Page 9: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/9.jpg)
9Users expect to interact with apps
● Tapping or clicking, typing, using gestures, and talking
● Buttons perform actions
● Other UI elements enable data input and navigation
9
![Page 10: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/10.jpg)
10
Android Developer Fundamentals V2 Buttons and
clickable imagesThis work is licensed under a Creative Commons Attribution 4.0 International License.
Buttons
10
![Page 11: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/11.jpg)
11Button
● 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
11
![Page 12: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/12.jpg)
12Button 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 (the Android logo)
12
Experiment:2. Choose New > Vector Asset
![Page 13: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/13.jpg)
13Responding to button taps
● In your code: Use OnClickListener event listener.● In XML: use android:onClick attribute in the XML layout:
<Buttonandroid:id="@+id/button_send"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="@string/button_send"android:onClick="sendMessage" />
13
android:onClick
![Page 14: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/14.jpg)
14Setting 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}
});
14
![Page 15: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/15.jpg)
15
Android Developer Fundamentals V2 Buttons and
clickable imagesThis work is licensed under a Creative Commons Attribution 4.0 International License.
Clickable images
15
![Page 16: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/16.jpg)
16ImageView● ImageView with android:onClick attribute
● Image for ImageView in app>src>main>res>drawable folder in project
16
![Page 17: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/17.jpg)
17Responding to ImageView taps
● In your code: Use OnClickListener event listener.● In XML: use android:onClick attribute in the XML layout:
<ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/donut_circle"android:onClick="orderDonut"/>
17
android:onClick
![Page 18: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/18.jpg)
18
Android Developer Fundamentals V2 Buttons and
clickable imagesThis work is licensed under a Creative Commons Attribution 4.0 International License.
Floating action button
18
![Page 19: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/19.jpg)
19Floating 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
19
![Page 20: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/20.jpg)
20
Android Developer Fundamentals V2 Buttons and
clickable imagesThis work is licensed under a Creative Commons Attribution 4.0 International License.
Common Gestures
20
![Page 21: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/21.jpg)
21Touch Gestures
Touch gestures include:
● long touch● double-tap● fling● drag● scroll● pinch
21
Don’t depend on touch gestures for app's basic behavior!
![Page 22: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/22.jpg)
22
4.2 Input Controls
22
![Page 23: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/23.jpg)
23Contents
● Overview of input controls
● Freeform text and numbers
● Providing choices
23
![Page 24: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/24.jpg)
24
Android Developer Fundamentals V2 Buttons and
clickable imagesThis work is licensed under a Creative Commons Attribution 4.0 International License.
Overview of input Controls
24
![Page 25: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/25.jpg)
25Accepting user input
● Freeform text and numbers: EditText (using keyboard)
● Providing choices: CheckBox, RadioButton, Spinner
● Switching on/off: Toggle, Switch
● Choosing value in range of values: SeekBar
25
![Page 26: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/26.jpg)
26
1. EditText2. SeekBar3. CheckBox4. RadioButton5. Switch6. Spinner
Examples of input controls
26
![Page 27: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/27.jpg)
27
1. Use EditText for entering text using keyboard2. Use SeekBar for sliding left or right to a setting3. Combine CheckBox elements for choosing more than one
option4. Combine RadioButton elements into RadioGroup — user
makes only one choice5. Use Switch for tapping on or off6. Use Spinner for choosing a single item from a list
How input controls work
27
![Page 28: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/28.jpg)
28
Android Developer Fundamentals V2 Buttons and
clickable imagesThis work is licensed under a Creative Commons Attribution 4.0 International License.
Freeform text and numbers
28
![Page 29: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/29.jpg)
29EditText for multiple lines of text
● EditText default● Alphanumeric keyboard● Suggestions appear● Tapping Return (Enter) key starts
new line
29
Return key
![Page 30: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/30.jpg)
30Customize with inputType
● Set in Attributes pane of layout editor
● XML code for EditText:<EditText
android:id="@+id/name_field"android:inputType =
"textPersonName"...
30
![Page 31: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/31.jpg)
31EditText for message
● android:inputType="textShortMessage"
● Single line of text● Tapping Emoticons key changes
keyboard to emoticons
31
Emoticons
![Page 32: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/32.jpg)
32EditText for single line
● Both work:○ android:inputType
="textLongMessage"○ android:inputType
="textPersonName"
● Single line of text● Tapping Done key advances focus to
next View
32
Done key
![Page 33: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/33.jpg)
33EditText for phone number entry
● android:inputType ="phone"
● Numeric keypad (numbers only)
● Tapping Done key advances focus to
next View
33
Done key
![Page 34: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/34.jpg)
34
● textCapCharacters: Set to all capital letters● textCapSentences: Start each sentence with a capital letter● textPassword: Conceal an entered password● number: Restrict text entry to numbers● textEmailAddress: Show keyboard with @ conveniently located● phone: Show a numeric phone keypad● datetime: Show a numeric keypad with a slash and colon for entering
the date and time
34
Common input types
![Page 35: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/35.jpg)
35
Android Developer Fundamentals V2 Buttons and
clickable imagesThis work is licensed under a Creative Commons Attribution 4.0 International License.
Providing choices
35
![Page 36: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/36.jpg)
36UI elements for providing choices
● CheckBox and RadioButton
● ToggleButton and Switch
● Spinner
36
![Page 37: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/37.jpg)
37CheckBox
● User can select any number of choices● Checking one box does not uncheck another● Users expect checkboxes in a vertical list● Commonly used with a Submit button● Every CheckBox is a View and can have
an onClick handler
37
![Page 38: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/38.jpg)
38RadioButton
● Put RadioButton elements in a RadioGroup in a vertical list (horizontally if labels are short)
● User can select only one of the choices● Checking one unchecks all others in group● Each RadioButton can have onClick
handler● Commonly used with a Submit button
for the RadioGroup
38
![Page 39: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/39.jpg)
39Toggle buttons and switches
● User can switch between on and off● Use android:onClick for click handler
Toggle buttons
Switches
39
![Page 40: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/40.jpg)
40
4.3 Menus and pickers
40
![Page 41: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/41.jpg)
41Contents
● Overview
● App Bar with Options Menu
● Contextual menus
● Popup menus
● Dialogs
● Pickers
41
![Page 42: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/42.jpg)
42
1. App bar with options menu
2. Context menu
3. Contextual action bar
4. Popup menu
Types of Menus
42
![Page 43: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/43.jpg)
43Dialogs and pickers
43
1 2 3
1. Alert dialog
2. Date picker
3. Time picker
![Page 44: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/44.jpg)
44
Android Developer Fundamentals V2 Buttons and
clickable imagesThis work is licensed under a Creative Commons Attribution 4.0 International License.
App Bar with Options Menu
44
![Page 45: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/45.jpg)
45
What is the App Bar?
45
Bar at top of each screen—same for all devices (usually)
1. Nav icon to open navigation drawer
2. Title of current Activity
3. Icons for options menu items
4. Action overflow button forthe rest of the options menu
![Page 46: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/46.jpg)
46
● Appears in the right corner of the app bar (3)
● For navigating to other activities and editing app settings
What is the options menu?
46
● Action icons in the app bar for important items (1)
● Tap the three dots, the "action overflow button" to see the options menu (2)
![Page 47: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/47.jpg)
47
Android Developer Fundamentals V2 Buttons and
clickable imagesThis work is licensed under a Creative Commons Attribution 4.0 International License.
Contextual Menus
47
![Page 48: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/48.jpg)
48What are contextual menus?
48
● Allows users to perform action on selected View
● Can be deployed on any View
● Most often used for items in RecyclerView, GridView, or other View collection
![Page 49: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/49.jpg)
49Types of contextual menus
49
● Floating context menu—long-press on a View ○ User can modify View or use it in some fashion○ User performs action on one View at a time
● Contextual action mode—temporary action bar in place of or underneath app bar○ Action items affect the selected View element(s)○ User can perform action on multiple View elements at once
![Page 50: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/50.jpg)
50
Android Developer Fundamentals V2 Buttons and
clickable imagesThis work is licensed under a Creative Commons Attribution 4.0 International License.
Popup Menu
50
![Page 51: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/51.jpg)
51What is a popup menu?
51
● Vertical list of items anchored to a view
● Typically anchored to a visible icon
● Actions should not directly affect view content○ Options menu overflow icon that opens options menu
○ In email app, Reply All and Forward relate to email message but don’t affect or act on message
![Page 52: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/52.jpg)
52
Android Developer Fundamentals V2 Buttons and
clickable imagesThis work is licensed under a Creative Commons Attribution 4.0 International License.
Dialogs
52
![Page 53: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/53.jpg)
53
DatePickerDialogTimePickerDialog
Dialogs
53
● Dialog appears on top, interrupting flow of Activity
● Requires user action to dismiss
AlertDialog
![Page 54: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/54.jpg)
54AlertDialog
54
AlertDialog can show:
1. Title (optional)
2. Content area
3. Action buttons
![Page 55: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/55.jpg)
55
Android Developer Fundamentals V2 Buttons and
clickable imagesThis work is licensed under a Creative Commons Attribution 4.0 International License.
Pickers
55
![Page 56: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/56.jpg)
56Pickers
56
● DatePickerDialog
● TimePickerDialog
![Page 57: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/57.jpg)
57Pickers use fragments
● Use DialogFragment to show a picker
● DialogFragment is a window that floats on top of Activity window
57
![Page 58: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/58.jpg)
58Introduction to fragments
● A Fragment is like a mini-Activity within an Activity○ Manages its own own lifecycle○ Receives its own input events
● Can be added or removed while parent Activity is running
● Multiple fragments can be combined in a single Activity
● Can be reused in more than one Activity
58
![Page 59: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/59.jpg)
59
4.4 User navigation
59
![Page 60: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/60.jpg)
60Contents
● Back navigation ● Hierarchical navigation
○ Ancestral navigation○ Descendant navigation○ Lateral navigation
60
![Page 61: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/61.jpg)
61
Android Developer Fundamentals V2 Buttons and
clickable imagesThis work is licensed under a Creative Commons Attribution 4.0 International License.
Back Navigation
61
![Page 62: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/62.jpg)
62Back Navigation
62
● Provided by the device's Back button
● Controlled by the Android system back stack
![Page 63: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/63.jpg)
63
Android Developer Fundamentals V2 Buttons and
clickable imagesThis work is licensed under a Creative Commons Attribution 4.0 International License.
Hierarchical Navigation
63
![Page 64: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/64.jpg)
64Hierarchical navigation patterns
64
● Parent screen—Screen that enables navigation down to child screens, such as home screen and main Activity
● Collection sibling—Screen enabling navigation to a collection of child screens, such as a list of headlines
● Section sibling—Screen with content, such as a story
![Page 65: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/65.jpg)
Android Developer Fundamentals V2
This work is licensed under a Creative Commons Attribution 4.0 International License.
Buttons and clickable images
Top Stories
Example of a screen hierarchy
65
1. Parent 2. Children: collection siblings3. Children: section siblings
● Use Activity for parent screen ● Use Activity or Fragment for
children screens
HeadlineHeadlineHeadlineHeadline
News App
Story Story Story
Tech NewsHeadlineHeadlineHeadlineHeadline
CookingHeadlineHeadlineHeadlineHeadline
1
2
3
![Page 66: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/66.jpg)
66Types of hierarchical navigation
66
● Descendant navigation○ Down from a parent screen to one of its children○ From a list of headlines—to a story summary—to a story
● Ancestral navigation○ Up from a child or sibling screen to its parent○ From a story summary back to the headlines
● Lateral navigation○ From one sibling to another sibling○ Swiping between tabbed views
![Page 67: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/67.jpg)
67
Android Developer Fundamentals V2 Buttons and
clickable imagesThis work is licensed under a Creative Commons Attribution 4.0 International License.
Descendant Navigation
67
![Page 68: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/68.jpg)
Android Developer Fundamentals V2
This work is licensed under a Creative Commons Attribution 4.0 International License.
Buttons and clickable images
Descendant navigation
68
Descendant navigation
● Down from a parent screen to one of its children
● From the main screen to a list of headlines to a story
Top StoriesHeadlineHeadlineHeadlineHeadline
News App
Story Story Story
Tech NewsHeadlineHeadlineHeadlineHeadline
CookingHeadlineHeadlineHeadlineHeadline
![Page 69: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/69.jpg)
69
Android Developer Fundamentals V2 Buttons and
clickable imagesThis work is licensed under a Creative Commons Attribution 4.0 International License.
Ancestral Navigation
69
![Page 70: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/70.jpg)
70Ancestral navigation (Up button)
70
● Enable user to go up from a sectionor child screen to the parent
![Page 71: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/71.jpg)
71
Android Developer Fundamentals V2 Buttons and
clickable imagesThis work is licensed under a Creative Commons Attribution 4.0 International License.
Lateral Navigation
71
![Page 72: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/72.jpg)
Android Developer Fundamentals V2
This work is licensed under a Creative Commons Attribution 4.0 International License.
Buttons and clickable images
Tabs and swipes
72
Lateral navigation
● Between siblings
● From a list of stories to a list in a different tab
● From story to story under the same tab
Top StoriesHeadlineHeadlineHeadlineHeadline
News App
Story Story Story
Tech NewsHeadlineHeadlineHeadlineHeadline
CookingHeadlineHeadlineHeadlineHeadline
![Page 73: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/73.jpg)
73Best practices with tabs
73
● Lay out horizontally
● Run along top of screen
● Persistent across related screens
● Switching should not be treated as history
![Page 74: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/74.jpg)
74
4.5 RecyclerView
74
![Page 75: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/75.jpg)
75Contents
● RecyclerView Components
● Implementing a RecyclerView
75
![Page 76: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/76.jpg)
76What is a RecyclerView?
● RecyclerView is scrollable container for large data sets
● Efficient ○ Uses and reuses limited number of
View elements○ Updates changing data fast
76
![Page 77: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/77.jpg)
77How it works
77
![Page 78: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/78.jpg)
78
Android Developer Fundamentals V2 Buttons and
clickable imagesThis work is licensed under a Creative Commons Attribution 4.0 International License.
RecyclerView Components
78
![Page 79: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/79.jpg)
79
● Data
● RecyclerView scrolling list for list items—RecyclerView
● Layout for one item of data—XML file
● Layout manager handles the organization of UI components in a View—Recyclerview.LayoutManager
● Adapter connects data to the RecyclerView—RecyclerView.Adapter
● ViewHolder has view information for displaying one item—RecyclerView.ViewHolder
79
Overview
![Page 80: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/80.jpg)
80
80
How components fit together overview
![Page 81: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/81.jpg)
81
● Each ViewGroup has a layout manager
● Use to position View items inside a RecyclerView
● Reuses View items that are no longer visible to the user
● Built-in layout managers ○ LinearLayoutManager○ GridLayoutManager○ StaggeredGridLayoutManager
● Extend RecyclerView.LayoutManager
81
What is a layout manager?
![Page 82: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/82.jpg)
82Playstore
82
![Page 83: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/83.jpg)
83Instagram
83
![Page 84: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/84.jpg)
84
● Helps incompatible interfaces work together○ Example: Takes data from database Cursor and prepares strings
to put into a View● Intermediary between data and View● Manages creating, updating, adding, deleting View items as
underlying data changes
● RecyclerView.Adapter
84
What is an adapter?
![Page 85: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/85.jpg)
85
● Used by the adapter to prepare one View with data for one list item
● Layout specified in an XML resource file● Can have clickable elements● Is placed by the layout manager
● RecyclerView.ViewHolder
85
What is a ViewHolder?
![Page 86: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/86.jpg)
86
Android Developer Fundamentals V2 Buttons and
clickable imagesThis work is licensed under a Creative Commons Attribution 4.0 International License.
Implementing RecyclerView
86
![Page 87: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/87.jpg)
87
1. Add RecyclerView dependency to build.gradle if needed2. Add RecyclerView to layout3. Create XML layout for item4. Extend RecyclerView.Adapter5. Extend RecyclerView.ViewHolder6. In Activity onCreate(), create RecyclerView with adapter
and layout manager
87
Steps Summary
![Page 88: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/88.jpg)
88
Thank YouAny Question ? ?
![Page 89: Kode ISH1E3 – Algoritma dan Pemrogramanrahmatfauzi.com/wp-content/uploads/2020/02/W5-USER...8 Android Developer Fundamentals V2 Buttons and clickable images This work is licensed](https://reader034.vdocuments.us/reader034/viewer/2022042121/5e9c26f8f425d12b166b7a06/html5/thumbnails/89.jpg)
89
Daftar Referensi
1)https://developer.android.com/courses/fundamentals-training/toc-v2