Nama : Widya Ayu Agustania

NIM : 1202164177

Kelas : SI-40–08

4.1

Unit 2: User experience

Lesson 4: User interaction

1.1 Start the new project

Buat file bernama Droid Café.

File > new> Basic Activity > beri nama file Droid cafe

Akan ada file activitymain.xml dan contentmain.xml

Buka content_main.xml dan click Design tab

Pilih tulisan Hello Word dan buka attribute. Beri ketentuannya sebagai beikut:

Attribute field

Enter the following:

ID textintro

text Change Hello World to Droid Desserts

textStyle B (bold)

textSize 24sp

Delete Constraint bagian bawah > margin diubah jadi 8 bagian atasnya

Buka text pada contentmain.xml > extract resource droid desserts

1.2 Add the images

Masukan gambar ke drawable

Taruh gambar donat ke tab design dan marginnya 24dp

Attribute field

Enter the following:

ID donut

content Description Donuts are glazed and sprinkled with candy.
(You can copy/paste the text into the field.)

Drag icecream_circle dan margin leftnya 24 dp

Attribute field

Enter the following:

ID ice_cream

contentDescription Ice cream sandwiches have chocolate wafers and vanilla filling.
(You can copy/paste the text into the field.)

Drag froyo image dan masukan atribut berikut

Attribute field

Enter the following:

ID froyo

contentDescription FroYo is premium self-serve frozen yogurt.
(You can copy/paste the text into the field.)

Klik warning >expand > fix

1.3 Add the text descriptions

Drag textview element ke layout > margin 24dp > id donut_description_constraint

Lakukan hal yang sama untuk ice cream dengan ketentuan berikut:

Attribute field

Enter the following:

ID

ice_cream_description

Left, right, and top margins

24

layout_width

match_constraint

text

@string/ice_cream_sandwiches

Lakukan hal yang sama juga untuk froyo dengan ketentuan berikut:

Attribute field

Enter the following:

ID

froyo_description

Left, right, and top margins

24

layout_width

match_constraint

text

@string/froyo

Layout akan terlihat seprti ini

Berikut code untu contentmain.xml

4. Task 2: Add onClick methods for images

2.1 Create a Toast method

Buka res>values>string.xml

Masukan source code seperti dipetunjuk

Masukan source code berikut ke Main Activity

2.2 Create click handlers

Masukan source code berikut sesuai petunjuk ke mainactivity.java

2.3 Add the onClick attribute

Tambahkan code : android:onClick=”showDonutOrder”/>

Optional: pilih code> reformat code

Task 3: Change the floating action button

3.1 Add a new icon

Pilih res > draweble > new >Image asset

Pilih Icon typenya : Action Bar and tab Icons

Lalu ubah name menjadi : ic_shopping_chart

Pilih Clip art yang sesuai

Pilih Theme Hollo dark > klik next

Klik finish

3.2 Add an Activity

Klik file> new > empty activity

Activity Namenya beri nama : OrderActivity

3.3 Change the action

Ubah methodnya menjadi method intent

Run The App

4.2 INPUT CONTROLS

1.1 Add an EditText for entering a namet 77

Buka activity_order.xml layout dan gunakan constrait layout

Masukan atribut elemen berikut

TextView attribute

Value

android:id

“@+id/name_label”

android:layout_width

“wrap_content”

android:layout_height

“wrap_content”

android:layout_marginStart

“24dp”

android:layout_marginLeft

“24dp”

android:layout_marginTop

“32dp”

android:text

“Name”

app:layout_constraintStart_toStartOf

“parent”

app:layout_constraintTop_toBottomOf “@+id/order_textview”

Pindah ke tab tex pada activitymain.xml. Masukan code berikut

EditText attribute

Value

android:id

"@+id/name_text"

android:layout_width

"wrap_content"

android:layout_height

"wrap_content"

android:layout_marginStart

8dp

android:layout_marginLeft

8dp

android:ems

"10"

android:hint

"@string/enter_name_hint"

android:inputType

"textPersonName"

app:layout_constraintBaseline_toBaselineOf

"@+id/name_label"

app:layout_constraintStart_toEndOf

"@+id/name_label"

Task 2: Use radio buttons

2.1 Add a RadioGroup and radio buttons

Kita buat Radio Buttons Elements

Pertama Buka activity_order.xml dan tambahkan TextView element constrain untuk bottom dari note_text element yang sudah dalam layout, dan untuk left margin, seperti gambar berikut

Edit keterangannya seperti berikut

TextView attribute

Value

android:id

"@+id/delivery_label"

android:layout_width

"wrap_content"

android:layout_height

"wrap_content"

android:layout_marginStart

"24dp"

android:layout_marginLeft

"24dp"

android:layout_marginTop

"24dp"

android:text

"Choose a delivery method: "

android:textSize

"18sp"

app:layout_constraintStart_toStartOf

"parent"

app:layout_constraintTop_toBottomOf

"@+id/note_text"

Extrac string resource untuk "Choose a delivery method:" menjadi choose_delivery_method.

Untuk menambahkan radio buttons, enclose RadioGroup. Tambahkan RadioGroup untuk layout underneath TextView kita hanya menambahkan, enclosing three RadioButton elements

2.2 Add the radio button click handler

Buka activity_order.xml. Masukan code berikut

Task 3: Use a spinner for user choices

3.1 Add a spinner to the layout

Buka activity_order.xml drag spinner dari paallet . Lalu constraint agara rapi

Masukan code spinner berikut

3.2 Add code to activate the Spinner and its listener

Buka strings.xml. Masukan source code berikut

Untuk men define selection panggil kembali Spinner, Ubah kelas OrderActivity Untuk implementasi AdapterView.OnItemSelectedListener

Masukan source code berikut

3.3 Add code to respond to Spinner selections

Masukan code onItemSelected() panggil method, lalu kita gunakan getItemAtPosition(), dan assignspinnerLabel. Kita juga bisa memanggil displayToast()

Run Aplikasi

04.3: Menus and pickers

Task 1: Add items to the options menu

  1. 1 Examine the code

Buka content_main.xml dan click Text tab untuk melihat XML code. app:layout_behavior untuk ConstraintLayout adalah set @string/appbar_scrolling_view_behavior, yang mana ini untuk mengontro; screen scrolls di relation untuk app bar .

Buka activity_main.xml dan click Text tab untuk melihat XML code untuk main layout, yang mana digunakan CoordinatorLayout layout dengan sebuah embedded AppBarLayout layout. CoordinatorLayout dan AppBarLayout tags sebagai requair android.support.design, yang mana adalah Android Design Support Library

Run Aplikasi

1.2 Add more menu items to the options menu

Expand res > menu in the Project > Android pane, dan buka menu_main.xml. Item menu ini hanya menyediakan dari template action_settings (the Settings choice)

Ubah atribut action_settings item untuk membuat action_contact item (Jangan ubah android:orderInCategory attribute):

Attribute Value

android:id

"@+id/action_contact"

android:title

"Contact"

app:showAsAction

"never"

Extract the hard-coded string "Contact" ke string resource action_contact.

Masukan menu item baru <item> tag <menu> block

Attribute Value

android:id

"@+id/action_order"

android:orderInCategory

"10"

android:title

"Order"

app:showAsAction

"never"

extract hard-coded string "Order" ke string resource action_order.

tambahkan two more menu items dengan mengikuti attributes:

Status item attribute

Value

android:id

"@+id/action_status"

android:orderInCategory

"20"

android:title

"Status"

app:showAsAction

"never"

Favorites item attribute

Value

android:id

"@+id/action_favorites"

android:orderInCategory

"30"

android:title

"Favorites"

app:showAsAction

"never"

Extract "Status" into the resource action_status, and "Favorites" into the resource action_favorites.

Kita akan menampilkan sebuah pesan Toast dengan sebuah action message . Buka strings.xml dan tambahkan string names dan values untuk messages ini

Run aplikasi

Task 2: Add icons for menu items

2.1 Add icons for menu items

Untuk status dan favirit icons ikuti step berikut:

  1. Expand res in the Project > Android pane, and right-click (or Control-click) the drawable folder.
  2. Choose New > Image Asset. The Configure Image Asset dialog appears.
  3. Choose Action Bar and Tab Items in the drop-down menu.
  4. Change ic_action_name to another name (such as ic_status_info for the Status icon).
  5. Click the clip art image (the Android logo next to Clipart:) to select a clip art image as the icon. A page of icons appears. Click the icon you want to use.
  6. Choose HOLO_DARK from the Theme drop-down menu. This sets the icon to be white against a dark-colored (or black) background. Click Next and then click Finish.

2.2 Show the menu items as icons in the app bar

Buka menu_main.xml. Masukan source code berikut

Order item attribute

Old value

New value

android:icon

none

"@drawable/ic_shopping_cart"

app:showAsAction

"never"

"always"

Status item attribute

Old value

New value

android:icon

none

"@drawable/@drawable/ic_status_info"

app:showAsAction

"never"

"always"

Favorites item attribute

Old value

New value

android:icon

none

"@drawable/ic_favorite"

app:showAsAction

"never"

"ifRoom"

Task 3: Handle the selected menu item

Buka main activity. Masukan source code berikut

Task 4: Use a dialog to request a user’s choice

4.1 Create a new app to show an alert dialog

Buat new project di empty activity bernama Dialog For alert

Buka Activity Main.xml

Edit Text View “Hello Word” Menjadi “Hello World! Tap to test the alert”

Drag Button ALERT

4.2 Add an alert dialog to the main activity

Buka Main Activity, masukan source code berikut

Task 5: Use a picker for user input

5.1 Create a new app to show a date picker

Buat new project di main activity bernama picker date

Buka activity_main.xml. Ubah text view “Hello Word”

Android fundamentals 04.4: User navigation

3. Task 1: Add an Up button for ancestral navigation

1. Download Droid Café Options

2. Buka androidmanifest.xml

3. Masukan source code seperti dipetunjuk

4. Run aplikasi

4. Task 2: Use tab navigation with swipe views

2.1 Create the project and layout

1. Buat Project baru di empty activity bernama Tab Experiment

2. Buka build gradle, masukan code berikut

3. Buka styles.xml, hide source code berikut

4. Buka activity_main.xml. masukan source code berikut

2.2 Create a class and layout for each fragment

Buka new > fragment > fragment Blank

Buat fragment 1 > masukan source code fragment 1 seperti dipetunjuk

2.3 Edit the fragment layout

1. Ubah ke framelayout ke relativelayout

2. Ubah TextView text ke “These are the top stories: “ dan layout_width dan layout_height ke wrap_content.

3. Set text appearance dengan android:textAppearance=”?android:attr/textAppearanceLarge”.

2.3Add a PagerAdapter

1. Click com.example.android.tabexperiment di Android > Project pane.

2. Pilih File > New > Java Class.

3. Masukan source code berikut

2.4 Use PagerAdapter to manage screen views

1.Dibawah code tambhkan onCreate() method di task sebelumnya, tambahkan code seperti dipetunjuk untu gunakan PagerAdapter untuk mengatur (page) views di fragments

2. Diakhir method onCreate() , set sebuah listener (TabLayoutOnPageChangeListener) untuk men detect jika di clicked, dan buat onTabSelected() method untuk set ViewPager

3. Run Aplikasi

Android fundamentals 04.5: RecyclerView

Task 1: Create a new project and dataset

1.1. Create the project and layout

1. Start Android Studio.

2. Buat sebuah project baru dengan nama RecyclerView, pilih Basic Activity template

3. Run Aplikasi

1.2. Add code to create data

1. Buka Main Activity

2. Tambahkan private member variable

4.Masukan Method on create berikut

1.3. Change the FAB icon

  1. Expand res di Project > Android pane, dan klik kanan (atau Control-click) drawable folder.

2. Pilih New > Image Asset.

3. Pilih Action Bar and Tab Items menu di drop-down .

4. Ubah ic_action_name di Name field ke ic_add_for_fab.

5. Click clip art image pilih select clip art image sebagai icon.

6. Pilih HOLO_DARK dari tema menu drop-down. Click Next.

7. Click Finishdi Confirm Icon Path dialog.

4. Task 2: Create a RecyclerView

1. Tambahkan sebuah element RecyclerView element to the MainActivity XML content layout (content_main.xml) for the RecyclerView app.

2. Buat sebuah XML layout file (wordlist_item.xml) untuk 1 list item, yang mana adalah WordListItem.

3. Tambahkan adapter (WordListAdapter) dengan sebuah ViewHolder (WordViewHolder).

4. Di onCreate() method of MainActivity, buat RecyclerView dan inisialisasi dengan adapter dan sebuah standard layout manager.

2.1. Modify the layout in content_main.xml

Buka content_main.xml > ikuti code berikut

2.2. Create the layout for one list item

  1. Buka res> layout > klik kanan new layout resource file

2. Buat nama file wordlist item

2.3 Create a style from the TextView attributes

Ikuti source code berikut

2.4. Create an adapter

  1. Klik kanan java/com.android.example.recyclerview dan pilih New > Java Class.

2. Name the class WordListAdapter.

2.5 Create the ViewHolder for the adapter

2.7. Create the RecyclerView in the Activity

Masukan ryecyle views sebagai berikut

Run Aplikasi

4. Task 3: Make the list interactive

3.1. Make items respond to clicks

1. Buka WordListAdapter.

2. Ubah WordViewHolder class signature untuk implement View.onClickListener:

3.2. Add behavior to the FAB

Buka Main Activity > masukan method berikut

Run Aplikasi