Part: Pemrograman Android Studio ”Delightful user experience”

1: Drawables, styles, and themes

Create the project

Create the layout for MainActivity

Create the score containers

pertama klik buttons>imageButton>Project

Selanjutnya buat tampilan seperti gambar dibawah ini

masukkan code dibawah

Masukkan atribut dibawah ini pada button minus team1

<ImageButton
    android:id="@+id/decreaseTeam1"
    style="@style/MinusButtons"
    android:layout_width="@dimen/button_size"
    android:layout_height="@dimen/button_size"
    android:layout_alignParentStart="true"
    android:layout_alignParentLeft="true"
    android:layout_centerVertical="true"
    android:onClick="decreaseScore" />

Team2

<ImageButton
    android:id="@+id/decreaseTeam2"
    style="@style/MinusButtons"
    android:layout_width="@dimen/button_size"
    android:layout_height="@dimen/button_size"
    android:layout_alignParentStart="true"
    android:layout_alignParentLeft="true"
    android:layout_centerVertical="true"
    android:onClick="decreaseScore" />

Masukkan atribut dibawah ini pada button plus team1

<ImageButton
    android:id="@+id/increaseTeam1"
    style="@style/PlusButtons"
    android:layout_width="@dimen/button_size"
    android:layout_height="@dimen/button_size"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:onClick="increaseScore" />

Team2

<ImageButton
    android:id="@+id/increaseTeam2"
    style="@style/PlusButtons"
    android:layout_width="@dimen/button_size"
    android:layout_height="@dimen/button_size"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:onClick="increaseScore" />

Membuat score dengan code dibawah ini

<TextView
    android:id="@+id/score_1"
    style="@style/ScoreText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:text="@string/initial_count" />
<TextView
    android:id="@+id/score_2"
    style="@style/ScoreText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:text="@string/initial_count" />

Add vector assets

Klik file>new>Vector Asset

Create a drawable resource

Selanjutnya membuat resource gambar dengan cara dibawah ini

Tuliskan code dibawah ini

Apply the ShapeDrawable as a background

buka activity_main.xml dan tuliskan code dibawah ini

style="@style/MinusButtons"
android:layout_width="@dimen/button_size"
android:layout_height="@dimen/button_size"

Style your View elements

Create Button styles dengan cara buka res>values>style dan tuliskan code dibawah ini

<resources>

    <style name="AppTheme" parent="Theme.AppCompat.DayNight.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="ScoreButtons" parent="Widget.AppCompat.Button">
        <item name="android:background">@drawable/button_background</item>
        <item name="android:tint">@color/colorPrimary</item>
    </style>

    <style name="PlusButtons" parent="ScoreButtons">
        <item name="android:src">@drawable/ic_plus</item>
        <item name="android:contentDescription">
            @string/plus_button_description
        </item>
    </style>

    <style name="MinusButtons" parent="ScoreButtons">
        <item name="android:src">@drawable/ic_minus</item>
        <item name="android:contentDescription">
            @string/minus_button_description
        </item>
    </style>

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

    <style name="TeamText">
        <item name="android:textAppearance">
            @style/TextAppearance.AppCompat.Display1
        </item>
    </style>

</resources>

Themes and final touches

Explore themes

Open the AndroidManifest.xml

Add theme button to the menu

Open strings.xml

tambahkan code dibawah untuk mengganti mode

<string name="night_mode">Night Mode</string>
<string name="day_mode">Day Mode</string>

selanjutnya tambahkan pada res>menu

Change the theme from the menu

Run App

2: Cards and colors

Download the starter code

Open and run the MaterialMe project

1. Download the MaterialMe-Starter code.
2. Open the app in Android Studio.
3. Run the app.

Explore the app

buat java.class seperti gambar dibawah ini

Add a CardView and images

Add the CardView

Open the build.gradle (Module: app)

Open the list_item.xml>Choose Code > Reformat Code to reformat the XML code

Download the images

Download the banner images zip file.

pen the MaterialMe > app > src > main > res

Modify the Sport object

The Sport object will need to include the Drawable resource that corresponds to the sport. To achieve that:

Fix the initializeData() method

In MainActivity, the initializeData() method is now broken, because the constructor for the Sport object demands the image resource as the third parameter.

Add an ImageView to the list items

1. Change the LinearLayout inside the list_item.xml file to a RelativeLayout, and delete the android:orientation attribute.
2. Add an ImageView as the first element within the RelativeLayout with the following attributes:

Load the images using Glide

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

compile 'com.github.bumptech.glide:glide:3.7.0'

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

private ImageView mSportsImage;

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

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

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);

run app

Make your CardView swipeable, movable, and clickable

Implement swipe to dismiss

Open MainActivity and create a new ItemTouchHelper object in the onCreate() method at the end, below the initializeData() method. For its argument, you will create a new instance of ItemTouchHelper.SimpleCallback. As you enter new ItemTouchHelper, suggestions appear. Select ItemTouchHelper.SimpleCallback{...} from the suggestion menu. Android Studio fills in the required methods: onMove() and onSwiped() as shown below.

Implement drag and drop

ItemTouchHelper helper = new ItemTouchHelper(new ItemTouchHelper
        .SimpleCallback(
            ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT | 
            ItemTouchHelper.DOWN | ItemTouchHelper.UP,
        ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT)

In the onMove() method, get the original and target index from the second and third argument passed in (corresponding to the original and target view holders).

// Get the from and to positions.
int from = viewHolder.getAdapterPosition();
int to = target.getAdapterPosition();

Swap the items in the dataset by calling Collections.swap() and pass in the dataset, and the initial and final indexes:

Collections.swap(mSportsData, from, to);

Notify the adapter that the item was moved, passing in the old and new indexes, and change the return statement to true:

mAdapter.notifyItemMoved(from, to);
return true;

Implement the DetailActivity layout

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

tuliskan code dibawah ini pada activity_detail.xml yang telah dibuat

Implement the detail view and click listener

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

ViewHolder(View itemView) {
    super(itemView);
    mTitleText = itemView.findViewById(R.id.title);
    mInfoText = itemView.findViewById(R.id.subTitle);
    mSportsImage = itemView.findViewById(R.id.sportsImage);
    itemView.setOnClickListener(this);
}

Add the FAB and choose a Material Design color palette

Add the FAB

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

run