Tutorial Membuat Aplikasi Android Sederhana “Penghitung Skor Pertandingan Basket”

24 Jan 2018 14:16 7181 Hits 0 Comments
Tutorial Membuat Aplikasi Android Sederhana "Court Counter" (Penghitung Skor Pertandingan Basket) dengan Menggunakan Android Studio.

Pada artikel kali ini, saya akan memberikan tutorial untuk membuat sebuah aplikasi android “Penghitung Skor Pertandingan Basket” atau kita gunakan Bahasa Inggris agar nama aplikasi nya lebih simple, Jadi kita namakan “Court Counter”.

Bagi kalian yang mengikuti courses Android dari Udacity tentunya sudah pernah membuat aplikasi yang serupa, karena memang referensi nya saya ambil dari udacity. Baiklah mari kita mulai.

1. Buka Android Studio

Langkah pertama adalah membuka / menjalankan Android Studio. Bagi yang belum menginstall nya silahkan install terlebih dahulu, untuk file instalasi nya bisa di download di link berikut : https://developer.android.com/studio/archive.html

2. Buat Project Baru

Kemudian buat project baru, caranya klik File > New > New Project. Isi Application Name dengan “Court Counter”, Company Domain biarkan default karena ini hanya untuk belajar, dan pilih Project Location untuk menyimpan file project. Lalu klik next.

3. Pilih Target Android Devices

Ceklist pada opsi Phone and Tablet pilih API 14 : Android 4.0 (Ice Cream Sandwich), sehingga akan muncul keterangan “by targeting api 14 and later, your apps will run on approximately 100% of devices” yang artinya aplikasi kita kemungkinan bisa support untuk 100% perangkat smartphone dan tablet yang ada di dunia. Klik next, lalu Finish.

4. Mulai Coding

Setelah project baru berhasil dibuat, biasanya gradle akan melakukan syncing, Jadi tunggu sampai proses gradle nya selesai. Setelah selesai barulah mulai coding.

Build Layout

Buatlah layout seperti tampilan berikut

Berikut source code untuk activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fontFamily="sans-serif-medium"
                android:gravity="center"
                android:padding="16dp"
                android:text="Team A"
                android:textColor="#616161"
                android:textSize="14sp" />

            <TextView
                android:id="@+id/team_a_score"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fontFamily="sans-serif-light"
                android:gravity="center"
                android:paddingBottom="24dp"
                android:text="0"
                android:textColor="#000000"
                android:textSize="56sp" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:layout_marginLeft="24dp"
                android:layout_marginRight="24dp"
                android:onClick="addThreeForTeamA"
                android:text="+3 Points" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:layout_marginLeft="24dp"
                android:layout_marginRight="24dp"
                android:onClick="addTwoForTeamA"
                android:text="+2 Points" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:layout_marginLeft="24dp"
                android:layout_marginRight="24dp"
                android:onClick="addOneForTeamA"
                android:text="Free throw" />
        </LinearLayout>

        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:layout_marginTop="16dp"
            android:background="@android:color/darker_gray" />

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fontFamily="sans-serif-medium"
                android:gravity="center"
                android:padding="16dp"
                android:text="Team B"
                android:textColor="#616161"
                android:textSize="14sp" />

            <TextView
                android:id="@+id/team_b_score"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fontFamily="sans-serif-light"
                android:gravity="center"
                android:paddingBottom="24dp"
                android:text="0"
                android:textColor="#000000"
                android:textSize="56sp" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:layout_marginLeft="24dp"
                android:layout_marginRight="24dp"
                android:onClick="addThreeForTeamB"
                android:text="+3 Points" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:layout_marginLeft="22dp"
                android:layout_marginRight="22dp"
                android:onClick="addTwoForTeamB"
                android:text="+2 Points" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:layout_marginLeft="22dp"
                android:layout_marginRight="22dp"
                android:onClick="addOneForTeamB"
                android:text="Free throw" />
        </LinearLayout>
    </LinearLayout>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="32dp"
        android:onClick="resetScore"
        android:text="Reset" />

</RelativeLayout>

Lalu berikutnya source code untuk menu.xml, kalian bisa tambahkan terlebih dahulu dengan cara klik kanan pada nama folder res > new > xml.

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity">
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="@string/action_settings"
        app:showAsAction="never" />
</menu>

Terakhir adalah source code untuk MainActivity.java

package com.example.personal.courtcounter;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.TextView;

/**
 * This activity keeps track of the basketball score for 2 teams.
 */
public class MainActivity extends AppCompatActivity {

    // Tracks the score for Team A
    int scoreTeamA = 0;

    // Tracks the score for Team B
    int scoreTeamB = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        String jamesbond = "hi";
        String jamesBond = "hello";
        String s = jamesBond + jamesbond;
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimpSlifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

    /**
     * Increase the score for Team A by 1 point.
     */
    public void addOneForTeamA(View v) {
        scoreTeamA = scoreTeamA + 1;
        displayForTeamA(scoreTeamA);
    }

    /**
     * Increase the score for Team A by 2 points.
     */
    public void addTwoForTeamA(View v) {
        scoreTeamA = scoreTeamA + 2;
        displayForTeamA(scoreTeamA);
    }

    /**
     * Increase the score for Team A by 3 points.
     */
    public void addThreeForTeamA(View v) {
        scoreTeamA = scoreTeamA + 3;
        displayForTeamA(scoreTeamA);
    }

    /**
     * Increase the score for Team B by 1 point.
     */
    public void addOneForTeamB(View v) {
        scoreTeamB = scoreTeamB + 1;
        displayForTeamB(scoreTeamB);
    }

    /**
     * Increase the score for Team B by 2 points.
     */
    public void addTwoForTeamB(View v) {
        scoreTeamB = scoreTeamB + 2;
        displayForTeamB(scoreTeamB);
    }

    /**
     * Increase the score for Team B by 3 points.
     */
    public void addThreeForTeamB(View v) {
        scoreTeamB = scoreTeamB + 3;
        displayForTeamB(scoreTeamB);
    }

    /**
     * Resets the score for both teams back to 0.
     */
    public void resetScore(View v) {
        scoreTeamA = 0;
        scoreTeamB = 0;
        displayForTeamA(scoreTeamA);
        displayForTeamB(scoreTeamB);
    }

    /**
     * Displays the given score for Team A.
     */
    public void displayForTeamA(int score) {
        TextView scoreView = (TextView) findViewById(R.id.team_a_score);
        scoreView.setText(String.valueOf(score));
    }

    /**
     * Displays the given score for Team B.
     */
    public void displayForTeamB(int score) {
        TextView scoreView = (TextView) findViewById(R.id.team_b_score);
        scoreView.setText(String.valueOf(score));
    }
}

Sampai sini aplikasi sederhana "Court Counter" sudah selesai, silahkan run di smartphone Anda. Untuk versi lengkap nya bisa didownload pada link berikut : https://github.com/udacity/Court-Counter

Sekian untuk tutorial kali ini, sampai jumpa di artikel berikutnya. :)

Tags

About The Author

Rivaldy Fauzan 29
Novice

Rivaldy Fauzan

Just an Ordinary Author
Plimbi adalah tempat menulis untuk semua orang.
Yuk kirim juga tulisanmu sekarang
Submit Artikel