Nama : Widya Ayu Agustania

Nim : 1202164177

Kelas : SI4008

TASK 5

5.1

Android fundamentals 05.1: Drawables, styles, and themes

Task 1: Create the Scorekeeper app

1.1 Create the project

1. Buat project bernama Scorekeeper.

2. Accept default minimum SDK dan plih Empty Activity template.

3. Accept Activity name (MainActivity), Click Finish.

1.2 Create the layout for MainActivity

Langkah pertama untuk mengubah layout dari ConstraintLayout ke LinearLayout:

1. Buka activity_main.xml dan click Text tab XML untuk melihat code.

android.support.constraint.ConstraintLayout

2. Ubah ViewGroup to LinearLayout.

3. Hapus line dari XML code, yang mana ini berhubungan ke ConstraintLayout

Masukan atribut berikut:

Attribute Value

android:orientation “vertical”

android:padding “16dp”

1.3 Create the score containers

Design dan masukan atribut berikut:

RelativeLayout attribute

Value

android:layout_width “match_parent”

android:layout_height “0dp”

android:layout_weight “1”

Tambahkan image button element ke relative layout

Masukan atribut text view berikut

Atribut text view yang lain

1.4 Add vector assets

1. Pilih File > New > Vector Asset untuk Vector Asset Studio.

2. Click icon untuk membuka list dari material icon files. Pilih Content category.

3. Pilih add icon dan click OK.

4. Rename resource file ic_plus dan check Override checkbox next untuk size options.

5. Rubah size dari icon icon to 40dp x 40dp.

6. Click Next kemudian Finish.

7. Ulangi process untuk menambahkan remove icon dan ic_minus.

Masukan code berikut:

1.5 Initialize the TextView elements and score count variables

1. Buka main activity

2. Buat 2 integer

4. Buat 2 text view

6. Buat method on create

1.6 Implement the click handlers for the ImageButton elements

Buka activity_main.xml > Masukan source code seperti dipetunjuk

4. Task 2: Create a drawable resource

2.1 Create a ShapeDrawable

1. Pada Project > Android pane, klik kanan (Control-click) diatas drawable folder di res directory.

2. Pilih New > Drawable resource file.

3. file button_background dan click OK.

4. Buka button_background.xml, click Text tab untuk edit the XML codedan remove

<?xml version=”1.0" encoding=”utf-8"?>

5. Masukan Code berikut

2.2 Apply the ShapeDrawable as a background

1. Buka activity_main.xml

2. Masukan source code seperti dipetunjuk

6. Task 3: Style your View elements

3.1 Create Button styles

Buka styles.xml

Diantara <resources> tags, tambahkan sebuah new style score buttons

Buat style start buttons

Buat style minus buttons

Untuk image button elemen, masukan atribut berikut

Delete these attributes

Add this attribute

android:src

style=”@style/MinusButtons

android:contentDescription

android:background

Delete these attributes

Add this attribute

android:src

style=”@style/PlusButtons

android:contentDescription

android:background

3.2 Create TextView styles

Code syle.xml

Code activity_main.xml

3.3 Updating the styles

Buka style.xml dan modifikasi atribut berikut

Style

Item

ScoreButtons

<item name=”android:tint”>@color/colorPrimary</item>

ScoreText

<item name=”android:textAppearance”>@style/TextAppearance.AppCompat.Display3</item

Buat style baru dengan nama TeamText

Run aplikasi

7. Task 4: Themes and final touches

.1 Explore themes

1. Buka AndroidManifest.xml file

android:theme=”@style/Theme.AppCompat.Light.NoActionBar”

4.2 Add theme button to the menu

1. Buka strings.xml dan buat 2 string

<string name=”night_mode”>Night Mode</string>

<string name=”day_mode”>Day Mode</string>

2. Klik kanan (Control-click) di res directory di Project > Android pane, dan pilih New > Android resource file.

3. Click the Text tab of the layout editor to show the XML code.

4. Masukan atribut menu berikut

<item

android:id=”@+id/night_mode”

android:title=”@string/night_mode”/>

6. Buka MainActivity, tekan Ctrl-O untuk membuka Override Method menu, dan pilih onCreateOptionsMenu(menu:Menu):boolean method lokasi dibawah android.app.Activity category.

5. Click OK.

6. Pada onCreateOptionsMenu() sebelum return.super statement, tambah code berikut:

getMenuInflater().inflate(R.menu.main_menu, menu);

4.3 Change the theme from the menu

Buka style.xml masukan code berikut

4.4 SaveInstanceState

Buka Main Activity dan tambahkan tags dibawah nomor variables, yang mana ini akan digunakan keys in onSaveInstanceState():

Diakhir dari MainActivity, override onSaveInstanceState() method untuk memberi nilai dari 2 elemen score TextView elements:

Diakhir onCreate() method, tambahkan kodingan check jika disana ada sebuah there savedInstanceState.

5.2

Android fundamentals 05.2: Cards and colors

3. Task 1: Download the starter code

1.1 Open and run the MaterialMe project

1. Download MaterialMe-Starter

2. Buka Android Studio.

1.2 Explore the app

Sebelum membuat modifikasi untuk aplikasi, explore structure sekarang. Ikuti elements:

Sport.java

Kelas ini merepresentasikan model data untuk setiap data mentah RecyclerView. Sekarang contains sebuah field untuk judul dari sport dan sebuah field untuk beberapa information tentang sport.

SportsAdapter.java

Adapter ini untuk RecyclerView. Menggunakan sebuah ArrayList dari sport objek sebagai a data MainActivity.java

MainActivity menginitialisasi RecyclerView dan adapter, dan membuat data dari resource files.

strings.xml

semua resource file contains ini dari data untuk app, including ttermasuk judul dan informasi setiap sport.

list_item.xml

4. Task 2: Add a CardView and images

2.1 Add the CardView

1. Bukafile build.gradle (Module: app) , dan tambahkan code berikut:

implementation ‘com.android.support:cardview-v7:26.1.0’

2. Open the list_item.xml file, dan surround root LinearLayout dengan android.support.v7.widget.CardView. Pindah schema declaration (xmlns:android=”http://schemas.android.com/apk/res/android) Untuk CardView, dan ikuti attributes:

3. Code > Reformat Code untuk reformat XML code

2.2 Download the images

1. Download banner images zip file.

2. Open the MaterialMe > app > src > main > res directory in your operating system’s file explorer, and create a drawable directory, and copy the individual graphics files into the drawable directory.

2.3 Modify the Sport object

1. Add an integer member variable to the Sport object that will contain the Drawable resource:

private final int imageResource;

2. Modify the constructor so that it takes an integer as a parameter and assigns it to the member variable:

public Sport(String title, String info, int imageResource) {

this.title = title;

this.info = info;

this.imageResource = imageResource;

}

3. Create a getter for the resource integer:

public int getImageResource() {

return imageResource;

}

2.4 Fix the initializeData() method

1. In the initializeData() method, get the TypedArray of resource IDs by calling getResources().obtainTypedArray(), passing in the name of the array of Drawable resources you defined in your strings.xml file:

TypedArray sportsImageResources =

getResources().obtainTypedArray(R.array.sports_images);

2. Fix the code in the loop that creates the Sport objects, adding the appropriate Drawable resource ID as the third parameter by calling getResourceId() on the TypedArray:

for(int i=0;i<sportsList.length;i++){

mSportsData.add(new Sport(sportsList[i],sportsInfo[i],

sportsImageResources.getResourceId(i,0)));

}

3. Clean up the data in the typed array once you have created the Sport data ArrayList:

sportsImageResources.recycle();

2.5 Add an ImageView to the list items

1. Ubah LinearLayout disamping list_item.xml file ke RelativeLayout, dan hapus android:orientation attribute.

2. Tambahkan ImageView sebagai element pertama RelativeLayout dengan ikuti attributes:

3. Add the following attributes to the title TextView element:

Attribute

Value

android:layout_alignBottom

“@id/sportsImage”

android:theme

“@style/ThemeOverlay.AppCompat.Dark”

4. Add the following attributes to the newsTitle TextView element:

Attribute

Value

android:layout_below

“@id/sportsImage”

android:textColor

“?android:textColorSecondary”

5. Add the following attributes to the subTitle TextView element:

Attribute

Value

android:layout_below

“@id/newsTitle”

2.6 Load the images using Glide

1. Open the build.gradle (Module: app) file, and add the following dependency for Glide in the dependencies section:

implementation ‘com.github.bumptech.glide:glide:3.7.0’

2. Open SportsAdapter, and add a variable in the ViewHolder class for the ImageView:

private ImageView mSportsImage;

3. Initialize the variable in the ViewHolder constructor for the ViewHolder class:

mSportsImage = itemView.findViewById(R.id.sportsImage);

4. Add the following line of code to the bindTo() method in the ViewHolder class to get the image resource from the Sport object and load it into the ImageView using Glide:

Glide.with(mContext).load(currentSport.getImageResource()).into(mSportsImage);

5. Task 3: Make your CardView swipeable, movable, and clickable

3.1 Implement swipe to dismiss

1. Buka MainActivity dan buat sebuah new ItemTouchHelper object di metod onCreate() , dibawah initializeData() method

2. Because we are only implementing swipe to dismiss at the moment, you should pass in 0 for the supported move directions and ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT for the supported swipe directions:

ItemTouchHelper helper = new ItemTouchHelper(new ItemTouchHelper

.SimpleCallback(0, ItemTouchHelper.LEFT |

ItemTouchHelper.RIGHT) {

3. You must now implement the desired behavior in onSwiped(). In this case, swiping the card left or right should delete it from the list. Call remove() on the data set, passing in the appropriate index by getting the position from the ViewHolder:

mSportsData.remove(viewHolder.getAdapterPosition());

4. To allow the RecyclerView to animate the deletion properly, you must also call notifyItemRemoved(), again passing in the appropriate index by getting the position from the ViewHolder:

mAdapter.notifyItemRemoved(viewHolder.getAdapterPosition());

5. Below the new ItemTouchHelper object in the onCreate() method for MainActivity, call attachToRecyclerView() on the ItemTouchHelper instance to add it to your RecyclerView:

helper.attachToRecyclerView(mRecyclerView);

3.3 Implement the DetailActivity layout

1. Create a new Activity by going to File > New > Activity > Empty Activity.

2. Call it DetailActivity, and accept all of the defaults.

3. Buka activity_detail.xml, dan masukan source code berikut

3.4 Implement the detail view and click listener

Follow these steps to implement the detail view and click listener:

1. Open SportsAdapter and change the ViewHolder inner class, which already extends RecyclerView.ViewHolder, to also implement View.OnClickListener, and implement the required method (onClick()).

2. Set the OnClickListener to the itemView in the ViewHolder constructor. The entire constructor should now look like this:

3. In the onClick() method, get the Sport object for the item that was clicked using getAdapterPosition():

4. In the same method, add an Intent that launches DetailActivity, put the title and image_resource as extras in the Intent, and call startActivity() on the mContext variable, passing in the new Intent.

5. Open DetailActivity and initialize the ImageView and title TextView in onCreate():

6. Get the title from the incoming Intent and set it to the TextView:

7. Use Glide to load the image into the ImageView:

6. Task 4: Add the FAB and choose a Material Design color palette

4.1 Add the FAB

1. Open the build.gradle (Module: app) file and add the following line of code for the design support library in the dependencies section:

2. Add an icon for the FAB by right-clicking (or Control-clicking) the res folder in the Project > Android pane, and choosing New > Vector Asset. The FAB will reset the contents of the RecyclerView, so the refresh icon should do:

. Change the name to ic_reset, click Next, and click Finish.

3. Open activity_main.xml and add a FloatingActionButton with the following attributes:

4. Open MainActivity and add the resetSports() method with a statement to call initializeData() to reset the data.

5. Run the app. You can now reset the data by tapping the FAB.

4.2 Choose a Material Design palette

1. In the Project > Android pane, navigate to your styles.xml file (located in the values directory). The AppTheme style defines three colors by default: colorPrimary, colorPrimaryDark, and colorAccent. These styles are defined by values from the colors.xml file.

2. Pick a color from the Material Color Guide to use as your primary color, such as #607D8B (in the Blue Grey color swatch). It should be within the 300–700 range of the color swatch so that you can still pick a proper accent and dark color.

3. Open the colors.xml file, and modify the colorPrimary hex value to match the color you picked.

4. Pick a darker shade of the same color to use as your primary dark color, such as #37474F. Again, modify the colors.xml hex value for colorPrimaryDark to match.

5. Pick an accent color for your FAB from the colors whose values start with an A, and whose color contrasts well with the primary color (like Deep Orange A200). Change the colorAccent value in colors.xml to match.

6. Run the app

Android fundamentals 05.3: Adaptive layouts

3. Task 1: Support landscape orientation

1.1 Change to a GridLayoutManager

1. Continue developing your version of the MaterialMe app, or download MaterialMe. If you decide to make a copy of the MaterialMe project to preserve the version from the previous practical, rename the copied version MaterialMe-Resource.

2. Create a new resources file called integers.xml. To do this, open the res folder in the Project > Android pane, right-click (or Control-click) on the values folder, and select New > Values resource file.

3. Name the file integers.xml and click OK.

4. Create an integer constant between the <resources> tags called grid_column_count and set it equal to 1:

<integer name=”grid_column_count”>1</integer>

5. Create another values resource file, again called integers.xml; however, the name will be modified as you add resource qualifiers from the Available qualifiers pane. The resource qualifiers are used to label resource configurations for various situations.

6. Select Orientation in the Available qualifiers pane, and press the >> symbol in the middle of the dialog to assign this qualifier.

7. Change the Screen orientation menu to Landscape, and notice how the directory name values-land appears. This is the essence of resource qualifiers: the directory name tells Android when to use that specific layout file. In this case, that is when the phone is rotated to landscape mode.

8. Click OK to generate the new layout file.

9. Copy the integer constant you created into this new resource file, but change the value to 2.

1.2 Modify MainActivity

1. Open MainActivity, and add code to onCreate() to get the integer from the integers.xml resource file:

int gridColumnCount =
getResources().getInteger(R.integer.grid_column_count);

2. Change the LinearLayoutManager for the RecyclerView to a GridLayoutManager, passing in the context and the newly created integer:

mRecyclerView.setLayoutManager(new
GridLayoutManager(this, gridColumnCount));

3. Run the app

4. Use the gridColumnCount variable to disable the swipe action (set swipeDirs to zero) when there is more than one column:

5. Use swipeDirs in place of the swipe direction arguments (ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT) for ItemTouchHelper.SimpleCallback():

6. Run App

3. Task 2 : Support tablets

2.1 Adapt the layout to tablets

1. Create an integers.xml resource file which uses the Smallest Screen Width qualifier with the value set to 600. Android uses this file whenever the app runs on a tablet.

2. Copy the code from the integers.xml (land) file (it has a grid count of 2) and paste it in the new integers.xml (sw600dp) file.

3. Create another integers.xml file that includes both the Smallest Screen Width qualifier set to 600, and the Orientation qualifier set to Landscape. Android uses the resulting integers.xml (sw600dp-land) file when the app runs on a tablet in landscape mode.

4. Copy the code from the integers.xml (land) file and paste it in the new integers.xml (sw600dp-land) file.

5. Change the grid_column_count variable to 3 in the integers.xml (sw600dp-land) file.

2.2 Update the tablet list item styles

1. Open styles.xml and add the following styles:

<style name=”SportsDetailText”

parent=”TextAppearance.AppCompat.Subhead”/>

<style name=”SportsTitle”

parent=”TextAppearance.AppCompat.Headline”/>

2. Create a new values resource file called styles.xml that uses the Smallest Screen Width qualifier with a value of 600 for tablets.

3. Copy all styles from the original styles.xml file into the new styles.xml (sw600dp) file.

4. In styles.xml (sw600dp), change the parent of the SportsTitle style to “TextAppearance.AppCompat.Display1”:

<style name=”SportsTitle”

parent=”TextAppearance.AppCompat.Display1"/>

5. The Android predefined Display1 style uses the textColorSecondary value from the current theme (ThemeOverlay.AppCompat.Dark), which in this case is a light gray color. The light gray color does not show up well on the banner images in your app. To correct this add an "android:textColor" attribute to the SportsTitle style and set it to "?android:textColorPrimary":

6. Change the parent of SportsDetailText style to “TextAppearance.AppCompat.Headline”.

7. To update the style of the TextView elements, open list_item.xml, and change the style attribute of the title TextView to @style/SportsTitle:

style=”@style/SportsTitle”

8. Change the style attribute of the newsTitle and subTitle TextView elements to @style/SportsDetailText.

9. Run your app

2.3 Update the tablet sports detail styles

You have now fixed the display for the MainActivity, which lists all the Sports CardView elements. The DetailActivity still has the same font sizes on tablets and phones.

1. Add the following style in the styles.xml file for the detail title:

<style name="SportsDetailTitle"
parent="TextAppearance.AppCompat.Headline"/>

2. Add the following style in the styles.xml (sw600dp) file for the detail title:

<style name="SportsDetailTitle"
parent="TextAppearance.AppCompat.Display3"/>

3. Open activity_detail.xml, and change the style attribute of both the newsTitleDetail and subTitleDetail TextView elements to the new SportsDetailText style you created in a previous step:

style="@style/SportsDetailText"

4. In activity_detail.xml, change the style attribute of the titleDetail TextView element to the new SportsDetailTitle style you created:

style=”@style/SportsDetailTitle”

5. Run your app.

5. Task 3: Localize your app

3.1 Add a localized strings.xml file

1. Create a new values resource file.

2. Call the file strings.xml and select Locale from the list of available qualifiers. The Language and Specific Region Only panes appear.

3. In the Language pane, select en: English.

4. In the Specific Region Only pane, select US: United States and click OK. Android Studio creates a specific values directory in your project directories for the U.S. locale, called values-en-rUS. In the Project > Android pane, the strings.xml file in this directory appears as strings.xml (en-rUS) within the newly created strings.xml folder (with a U.S. flag icon).

5. Copy all string resources of the generic strings.xml file (now located in the strings.xml folder) to strings.xml (en-rUS).

6. In the generic strings.xml file, change the Soccer item in the sports_titles array to Football, and change the Soccer news text in the sports_info array to Football news.

3.2 Run the app in different locales

In order to see the locale-specific differences, you can start your device or emulator, and change its language and locale to U.S. English (if not already set). In U.S. English, you should see “Soccer”. You can then switch to any language and locale other than U.S. English, and run the app again. You should then see “Football”.

1. To switch the preferred language in your device or emulator, open the Settings app.

If your Android device is in another language, look for the gear icon

2. Find the Languages & input settings in the Settings app, and choose Languages. Languages is the first choice on the Languages & input screen.

Remember the globe icon for the Languages & input choice, so that you can find it again if you switch to a language you do not understand:

3. For devices and emulators running a version of Android previous to Android 7, choose Language on the Languages & input screen, select a language and locale such as Français (France), and skip the following steps.

4. Run the app with your device or emulator. In U.S. English, you should see “Soccer”.

5. Switch to any language and locale other than U.S. English, and run the app again. You should then see “Football”.