TUTORIAL HELLO TOAST - ANDROID STUDIO

Assalamualaikum Wr, Wb

Pada kesempatan kali ini, saya akan membuatkan tutorial membuat Hello Toast pada aplikasi Android Strudio. mungkin pembaca sekalian sudah mencari referensi dari blog lain, tapi tidak salahnya membaca blog dari saya untuk memperdalam pengetahuan sekaligus sebagai sarana pembelajaran tentang Android Studio.

~~~ Tampilan Akhir ~~~

Buka aplikasi android studionya, lalu buat proyek baru dengan parameter sebagai berikut :

Gunakan Linear Layout pada tampilan UI yang pertama, setelah itu tambahkan 2 Button dan 1 Text View dengan ketentuan sebagai berikut :

Buat nama sumber daya pada masing-masing elemennya dengan cara :

>> Letakkan kursor pada kata "Toast". Pilih Extract string resources. Setel nama Sumber Daya ke button_label_toast dan klik OK. Lakukan itu pada elemen lainnya.

Kita masuk ke elemen TextView
Ubah ukuran value “ 0 “ agar lebih besar sehingga dapat keliahatan dengan jelas.

>>Tambahkan source code android:textSize="160sp" pada TextView untuk mengubah ukuran valuenya. Setelah itu, seperti biasa beri nama sumber daya dengan nama count_text_size. Maka tampilan akan berubah menjadi seperti dibawah ini :

Tambahkan source code dibawah ini untuk memberi warna pada tampilan UI . setelah itu tinggal kita panggil saja namanya kedalam source code di activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="myBackgroundColor">#FFF043</color>
</resources>

Tambahkan surce code :

android:gravity = “center”. Untuk memposisikan nilai dari TextView nya menjadi ke tengah-tengah.

Tambahkan source code :

android:layout_weight=”2”. Untuk memposisikan tampilan UI agar menjadi lebih full layarnya. Karena akan otomatis menjadi sedalam ruangan itu kosong.

Source code solusi pada string.xml.

<resources>
    <string name="app_name">HelloToast</string>
    <string name="button_label_toast">Hello Toast</string>
    <string name="count_initial_value">0</string>
    <string name="button_label_count">Count</string>
</resources>

Source code solusi pada dimens.xml

    <?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="activity_vertical_margin">12dp</dimen>
    <dimen name="activity_horizontal_margin">12dp</dimen>
    <dimen name="count_text_size">160sp</dimen>
</resources>

Source code solusi pada colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="myBackgroundColor">#FFF043</color>
</resources>

Source code solusi pada activity_main.xml

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button_toast"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/button_label_toast"
        android:background="@color/colorPrimary"
        android:textColor="@android:color/white" />

    <TextView
        android:id="@+id/show_count"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="@string/count_initial_value"
        android:textSize="@dimen/count_text_size"
        android:textStyle="bold"
        android:textColor="@color/colorPrimary"
        android:background="@color/myBackgroundColor"
        android:layout_weight="2" />

    <Button
        android:id="@+id/button_count"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/button_label_count"
        android:background="@color/colorPrimary"
        android:textColor="@android:color/white" />
</LinearLayout>

Tambahkan properti berikut ini ke tombol button_toast :

android:onClick="showToast"

Tambahkan atribut berikut ke tombol button_count :

android:onClick="countUp"

§ Dalam activity_main.xml, letakkan kursor mouse Anda di atas setiap nama metode ini.

§ Tekan Alt-Enter (Option-Enter di Mac), dan pilih Create onClick event handler.

§ Pilih MainActivity dan klik OK.

>> Maka akan tampil pada file MainActivity.java sebagai berikut :

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void countUp(View view) {
    }

    public void showToast(View view) {
    }
}

Menampilkan pesan ketika onClick aktif menggunakan Konteks.

Context context = getApplicationContext();

Menentukan panjang atau pendeknya suatu string dengan menggunakan konstanta Toast.

Toast.LENGTH_LONG

Toast.LENGTH_SHORT

Tambahkan source code berikut kedalam method showToast :

    public void showToast(View view) {
    Toast toast = Toast.makeText(this, (R.string.toast_message), Toast.LENGTH_LONG);
    toast.show();
}

· toast_message ubah valuenya jadi “Hello Toast”.

· R = parameter sebagai sumber daya.

· String = tempat penyimpanan file nya ada di string.xml.

· Toast_message = nama sumber daya.

· toast.show(); = ketika semua itu dijalankan maka akan keluar tampilan yang ada pada toast_message yaitu tampilan Hello Toast.

Dalam MainActivity.java tambahkan variable private dengan nama :

o Private int mCount = 0; à untuk memulai angka dari 0.

o Private TextView mShowCount ; à untuk mendapatkan referensi dari TextView. Jadi ketika di klik nantinya angka yang awalnya 0 akan tampil dalam TextView.

Tambahkan source code kedalan onCreate() :

mShowCount = (TextView) findViewById(R.id.show_count);

penjelasan code diatas :

akan menampilkan apa yang ingin anda tampilkan kedalam TextView dalam kasus ini dan pencariannya berdasarkan id nya.

Tambahkan source code kedalam method countUp():

    public void countUp(View view) {
    mCount++;
    if (mShowCount != null)
        mShowCount.setText(Integer.toString(mCount));
}

Penjelasan :

o mCount++; à artinya dia akan menambahkan sebanyak 1. dalam kasus ini berarti mulai nya dari 0. Ketika statement ini dijalankan, maka akan ditambahkan 1 tanpa ada batasnya ( 0+1+1+1+1+1+dst).

o Setel teks kedalam tampilan teks ke nilai variable count.

Sekian dulu penjelasan Tutorial membuat Hello Toast pada aplikasi Android Studio. Sampai jumpa pada lain waktu.

~~~REGARD'S ~~~