Aplikasi Dongeng Berbasis Android

A. Deskripsi.

Aplikasi Dongeng ini berisi kumpulan dongeng untuk anak sebelum tidur yang diakses dengan menggunakan HP android.

Perencanaan Program :

1. Login NickName hanya mengambil nama untuk ditampilkan di halaman ListView Dongeng dan wajib diisi, jika tidak diisi akan muncul notifikasi permintaan NickName.
2. Setelah Login berhasil akan dibawa ke halaman ListView Dongeng yang berisi kumpulan judul Dongeng.
3. Untuk memilih Dongeng yang akan dibaca kita klik saja judulnya dan akan dibawa ke halaman isi text Dongeng.

B. Design, Source Code XML dan Source Code Java.

1. Halam Login

1.1. Design Graphic.

1.2. Surce Code XML

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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginTop="97dp"
        android:text="NickName Login"
        android:textAlignment="center"
        android:textSize="30sp"
        android:textStyle="normal|bold" />

    <EditText
        android:id="@+id/nickname"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginLeft="40dp"
        android:layout_marginRight="40dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="86dp"
        android:hint="Input Nickname"
        android:textAlignment="center"/>

    <Button
        android:id="@+id/btnLogin"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/nickname"
        android:text="Log In"
        android:layout_marginRight="70dp"
        android:layout_marginLeft="70dp"/>

</RelativeLayout>

1.3. Source Code Java.

MainActivity.java

package com.example.hartono_161021450363;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {


    EditText user;
    Button login;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        user = (EditText) findViewById(R.id.nickname);
        login = (Button) findViewById(R.id.btnLogin);


        login.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                String u,p;
                u = user.getText().toString();

                if(u.equals("")){
                    user.setError("Silakan isi NickName!!");

                }else{
                    Intent x = new Intent(MainActivity.this, ListDataDongeng.class);
                    x.putExtra("user", u);
                    startActivity(x);
                }

            }
        });
    }
}

2. Halaman ListView Dongeng.

2.1. Desing Graphic.

2.2. Source Code XML.

activity_list_data_dongeng.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ListDataDongeng">

    <LinearLayout
        android:id="@+id/line1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/text1"
            android:textColorHighlight="@color/colorPrimaryDark"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textAlignment="center"
            android:textSize="16dp"/>
    </LinearLayout>

    <ListView
        android:id="@+id/listDongeng"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/line1"/>


</RelativeLayout>

2.3. Source Code Java.

ListDataDongeng.java

package com.example.hartono_161021450363;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.Collection;
import java.util.Collections;

public class ListDataDongeng extends AppCompatActivity {

    TextView text;
    ListView listDongeng;
    //data yang akan dimasukkan ke listview
    private String [] dongeng = {"1. Cermin Ajaib","2. Pulau Matahari", "3. Singa dan Jakal yang cerdik", "4. Si Kura-kura yang sombong","5. Telur Emas"};
    //ArrayList untuk menampung data dongeng
    private ArrayList<String> data;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_list_data_dongeng);

        text = (TextView) findViewById(R.id.text1);

        Intent y = getIntent();
        String user = y.getStringExtra("user");
        text.setText("Selamat Bercerita :  "+ user);

        listDongeng = findViewById(R.id.listDongeng);
        ArrayAdapter adapter = new ArrayAdapter(this,android.R.layout.simple_list_item_single_choice,dongeng);
        listDongeng.setAdapter(adapter);


        listDongeng.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                int itemke=i;
                String itemText=(String) listDongeng.getItemAtPosition(i);
                Toast.makeText(getBaseContext(), "Anda Meng Klik " +itemText, Toast.LENGTH_SHORT).show();

                if (itemText.equals("1. Cermin Ajaib")){
                    Intent cerminajaib = new Intent(adapterView.getContext(),CerminAjaib.class);
                    startActivityForResult(cerminajaib, 0);
                }else if (itemText.equals("2. Pulau Matahari")){
                    Intent pulaumatahari = new Intent(adapterView.getContext(),PulauMatahari.class);
                    startActivityForResult(pulaumatahari, 0);
                }else if (itemText.equals("3. Singa dan Jakal yang cerdik")){
                    Intent singa = new Intent(adapterView.getContext(),SingaDanJakal.class);
                    startActivityForResult(singa, 0);
                }else if (itemText.equals("4. Si Kura-kura yang sombong")){
                    Intent kura = new Intent(adapterView.getContext(),KuraKura.class);
                    startActivityForResult(kura, 0);
                }else if (itemText.equals("5. Telur Emas")){
                    Intent telur = new Intent(adapterView.getContext(),TelurEmas.class);
                    startActivityForResult(telur, 0);
                }
            }
        });
    }
}

3. Halaman isi Dongeng.

3.1. Design Graphic.

Pada halaman isi Dongeng ini kita buat sebanyak judul Dongeng yang terdaftar di ListView. Jadi setiap judul memiliki satu halaman sendiri. berikut contoh salah satu halamannya :

3.2. Source Code XML.

a. Source Code XML Design.

activity_telur_emas.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".TelurEmas">

    <TextView
        android:id="@+id/textTelur"
        android:textColorHighlight="@color/colorPrimaryDark"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:textSize="14dp"
        android:textAlignment="gravity"
        android:text="@string/telur"/>


</RelativeLayout>

b. Source Code XML String untuk menyimpan isi cerita yang nanti akan ditamplikan di TextView.

string.xml

<string name="telur">5. Telur Emas\n\n
Alkisah, ada seekor angsa yang dapat mengeluarkan sebutir telur emas setiap hari. Angsa itu dimiliki seorang petani dan istrinya. Mereka bisa hidup nyaman dan berkecukupan berkat telur tersebut.\n\n

Kenyamanan ini berlangsung cukup lama. Namun pada suatu hari, tiba-tiba saja terbersit ide di benak petani tersebut. “Kenapa aku harus mendapatkan satu telur per hari? Kenapa tidak kuambil semuanya sekaligus dan jadi kaya raya?” pikirnya.\n\n

Istrinya ternyata setuju dengan ide tersebut. Mereka pun menyembelih si angsa dan membelah perutnya. Alangkah terkejutnya mereka ketika melihat perut tersebut hanya berisi daging dan darah. Tak ada telur sama sekali, apalagi emas.\n\n

Mereka pun menangis sejadi-jadinya. Tak ada sumber penghasilan tetap yang bisa mereka andalkan lagi. Mereka harus bekerja keras untuk menyambung hidup esok hari.</string>

String.xml berada pada res/layout/values/string.xml.

3.3. Source Code Java.

TelurEmas.java

package com.example.hartono_161021450363;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.text.method.ScrollingMovementMethod;
import android.widget.TextView;

public class TelurEmas extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_telur_emas);

        TextView tv = (TextView) findViewById(R.id.textTelur);
        tv.setMovementMethod(new ScrollingMovementMethod());
    }
}

C. Running Test.

Setelah semua source code dibuat saatnya kita test aplikasi tersebut, dan berikut hasilnya :

1. Halaman Login.

Jika Login NickName tidak diisi

2. Setelah NickName diisi akan menuju halaman ListView Dongeng.

3. Setelah halaman ListView Dongeng terbuka, kita bisa pilih dongeng mana yang akan dibuka

Demikian pembuatan Aplikasi Dongeng Berbasis Android semoga bermanfaat untuk pembelajaran android.