Cara Membuat Aplikasi Jadwal Shalat Menggunakan Kotlin di Android Studio

By Mark Zuckenberger June 13, 2020 Post a Comment

maswijaba.my.id - Assalamualaikum wr.wb. Puji syukur kita bisa dipertemukan lagi di kesempatan kali ini, semoga semuanya sehat-sehat ya. Pada kesempatan kali ini saya akan membahas bagaimana Cara Membuat Aplikasi Jadwal Shalat Menggunakan Kotlin Android Studio.

Tutorial sederhana ini dirasa bisa membantu kalian untuk membuat aplikasi Android, walaupun tidak sempurna dan bisa dikatakan sederhana mudah-mudahan bermanfaat untuk kalian yang ingin belajar tentang Android.

Aplikasi ini di desain dengan sedemikian rupa dan pastinya untuk pemula sangat mudah untuk mempelajarinya. Aplikasi ini dibangun dengan bahasa pemrograman kotlin. Kalian search aja digoogle bagi yang belum tau kotlin itu apa. Dan kalau tertarik dengan bahasa kotlin kita bisa sharing-sharing tentang bahasa kotlin.

Sebelum memulai alangkah baiknya mengambil data API disini.

Aplikasi ini sangat disarankan untuk membuat tugas Android sebagai referensi kalian untuk tugas-tugas mobile, buat tugas akhir atau skripsi juga tidak apa-apa asalkan kalian memperbaharuinya (tambahkan yang belum ada).

Langsung saja kita masuk ke cara pengaplikasiannya dengan mengikuti step-step di bawah ini.

1. Buat Project Baru di Android Studio

Klik File - Project Baru. Ketika diminta untuk memilih Default Activity, kita memilih Empty Activity dan klik Next. (Untuk minSDK, saya set API 21)

2. Kita buat dan ubah isi activity_main.xml seperti dibawah ini.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#fff"
        android:orientation="vertical">

    <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:layout_gravity="center">

        <ImageView
                android:id="@+id/greeting_img"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:scaleType="fitXY"/>

        <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true">

            <androidx.cardview.widget.CardView
                    android:id="@+id/car4"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="11dp"
                    android:background="#fff"
                    app:cardCornerRadius="10dp"
                    app:cardElevation="5dp">

                <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="5dp"
                        android:gravity="center">

                    <TextView
                            android:id="@+id/tv_tanggal"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="15dp"
                            android:layout_marginTop="5dp"
                            android:textColor="#000"
                            android:textSize="16sp"
                            android:textStyle="bold"/>

                    <LinearLayout
                            android:id="@+id/garis"
                            android:layout_width="match_parent"
                            android:layout_height="1dp"
                            android:layout_below="@id/tv_tanggal"
                            android:layout_marginTop="10dp"
                            android:background="#f0efef"
                            android:orientation="horizontal"/>

                    <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_below="@id/garis"
                            android:layout_marginTop="10dp"
                            android:orientation="horizontal">

                        <RelativeLayout
                                android:layout_width="match_parent"
                                android:layout_height="70dp"
                                android:layout_marginRight="25dp"
                                android:layout_marginLeft="25dp"
                                android:background="?attr/selectableItemBackground"
                                android:gravity="center">

                            <Spinner
                                    android:id="@+id/kota"
                                    android:layout_width="match_parent"
                                    android:layout_height="wrap_content"/>

                        </RelativeLayout>

                    </LinearLayout>

                </RelativeLayout>

            </androidx.cardview.widget.CardView>

        </RelativeLayout>

    </RelativeLayout>

    <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="vertical"
                android:padding="8.0dip">

            <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:gravity="center_vertical">

                <TextView
                        android:id="@+id/greeting_text"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="10dp"
                        android:layout_marginRight="10dp"
                        android:gravity="center"
                        android:textColor="#000"
                        android:textSize="15dp"
                        android:textStyle="bold"/>

                

            </RelativeLayout>

            <LinearLayout android:layout_width="match_parent"
                          android:layout_height="match_parent"
                          android:gravity="center"
                          android:orientation="vertical">

                <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:clipToPadding="false"
                        android:gravity="center"
                        android:orientation="horizontal">

                    <androidx.cardview.widget.CardView
                            android:id="@+id/noWhatsapp"
                            android:layout_width="340dp"
                            android:layout_height="wrap_content"
                            android:layout_margin="10dp"
                            app:cardBackgroundColor="@android:color/holo_blue_light"
                            android:foreground="?android:attr/selectableItemBackground"
                            app:cardCornerRadius="8dp">

                        <LinearLayout
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:gravity="center"
                                android:orientation="vertical">

                            <ImageView
                                    android:layout_width="80dp"
                                    android:layout_marginTop="5dp"
                                    android:src="@drawable/adzan"
                                    android:layout_height="80dp"/>

                            <View
                                    android:layout_width="match_parent"
                                    android:layout_height="1dp"
                                    android:layout_margin="10dp"
                                    android:background="#fff"/>

                            <TextView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:gravity="center"
                                    android:padding="5dp"
                                    android:text="Waktu Adzan Subuh"
                                    android:textColor="#fff"
                                    android:textStyle="bold"/>

                            <TextView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:gravity="center"
                                    android:padding="5dp"
                                    android:id="@+id/tv_subuh"
                                    android:text="Subuh"
                                    android:textColor="#fff"
                                    android:textStyle="bold"/>

                        </LinearLayout>

                    </androidx.cardview.widget.CardView>

                </LinearLayout>

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

                    <androidx.cardview.widget.CardView
                            android:layout_width="160dp"
                            android:layout_height="170dp"
                            android:layout_margin="10dp"
                            app:cardBackgroundColor="@android:color/holo_purple"
                            android:foreground="?android:attr/selectableItemBackground"
                            app:cardCornerRadius="10dp"
                            app:cardElevation="5dp">

                        <LinearLayout
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:gravity="center"
                                android:orientation="vertical">

                            <ImageView
                                    android:layout_width="80dp"
                                    android:src="@drawable/adzan"
                                    android:layout_height="80dp"/>

                            <View
                                    android:layout_width="match_parent"
                                    android:layout_height="1dp"
                                    android:layout_margin="10dp"
                                    android:background="#fff"/>

                            <TextView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:gravity="center"
                                    android:padding="5dp"
                                    android:text="Waktu Adzan Dzuhur"
                                    android:textColor="#fff"
                                    android:textStyle="bold"/>

                            <TextView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:gravity="center"
                                    android:padding="5dp"
                                    android:id="@+id/tv_dzuhur"
                                    android:text="Dzuhur"
                                    android:textColor="#fff"
                                    android:textStyle="bold"/>

                        </LinearLayout>

                    </androidx.cardview.widget.CardView>

                    <androidx.cardview.widget.CardView
                            android:layout_width="160dp"
                            android:layout_height="170dp"
                            android:layout_margin="10dp"
                            app:cardBackgroundColor="@android:color/holo_orange_light"
                            android:foreground="?android:attr/selectableItemBackground"
                            app:cardCornerRadius="10dp"
                            app:cardElevation="5dp">

                        <LinearLayout
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:gravity="center"
                                android:orientation="vertical">

                            <ImageView
                                    android:layout_width="80dp"
                                    android:src="@drawable/adzan"
                                    android:layout_height="80dp"/>

                            <View
                                    android:layout_width="match_parent"
                                    android:layout_height="1dp"
                                    android:layout_margin="10dp"
                                    android:background="#fff"/>

                            <TextView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:gravity="center"
                                    android:padding="5dp"
                                    android:text="Waktu Adzan Ashar"
                                    android:textColor="#fff"
                                    android:textStyle="bold"/>

                            <TextView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:gravity="center"
                                    android:padding="5dp"
                                    android:id="@+id/tv_ashar"
                                    android:text="Ashar"
                                    android:textColor="#fff"
                                    android:textStyle="bold"/>

                        </LinearLayout>

                    </androidx.cardview.widget.CardView>

                </LinearLayout>

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

                    <androidx.cardview.widget.CardView
                            android:layout_width="160dp"
                            android:layout_height="170dp"
                            android:layout_margin="10dp"
                            app:cardBackgroundColor="@android:color/holo_red_light"
                            android:foreground="?android:attr/selectableItemBackground"
                            app:cardCornerRadius="10dp"
                            app:cardElevation="5dp">

                        <LinearLayout
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:gravity="center"
                                android:orientation="vertical">

                            <ImageView
                                    android:layout_width="80dp"
                                    android:src="@drawable/adzan"
                                    android:layout_height="80dp"/>

                            <View
                                    android:layout_width="match_parent"
                                    android:layout_height="1dp"
                                    android:layout_margin="10dp"
                                    android:background="#fff"/>

                            <TextView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:gravity="center"
                                    android:padding="5dp"
                                    android:text="Waktu Adzan Maghrib"
                                    android:textColor="#fff"
                                    android:textStyle="bold"/>

                            <TextView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:gravity="center"
                                    android:padding="5dp"
                                    android:id="@+id/tv_maghrib"
                                    android:text="Maghrib"
                                    android:textColor="#fff"
                                    android:textStyle="bold"/>

                        </LinearLayout>

                    </androidx.cardview.widget.CardView>

                    <androidx.cardview.widget.CardView
                            android:layout_width="160dp"
                            android:layout_height="170dp"
                            android:layout_margin="10dp"
                            app:cardBackgroundColor="@android:color/holo_green_light"
                            android:foreground="?android:attr/selectableItemBackground"
                            app:cardCornerRadius="10dp"
                            app:cardElevation="5dp">

                        <LinearLayout
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:gravity="center"
                                android:orientation="vertical">

                            <ImageView
                                    android:layout_width="80dp"
                                    android:src="@drawable/adzan"
                                    android:layout_height="80dp"/>

                            <View
                                    android:layout_width="match_parent"
                                    android:layout_height="1dp"
                                    android:layout_margin="10dp"
                                    android:background="#fff"/>

                            <TextView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:gravity="center"
                                    android:padding="5dp"
                                    android:text="Waktu Adzan Isya"
                                    android:textColor="#fff"
                                    android:textStyle="bold"/>

                            <TextView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:gravity="center"
                                    android:padding="5dp"
                                    android:id="@+id/tv_isya"
                                    android:text="Isya"
                                    android:textColor="#fff"
                                    android:textStyle="bold"/>

                        </LinearLayout>

                    </androidx.cardview.widget.CardView>

                </LinearLayout>

            </LinearLayout>

        </LinearLayout>

    </ScrollView>

</LinearLayout>

3. Buat dan ubah isi MainActivity.kt seperti dibawah.

package com.wijaba.jadwalsholat

import android.annotation.SuppressLint
import android.graphics.Color
import android.os.Bundle
import android.util.Log
import android.view.View
import android.widget.AdapterView
import android.widget.ArrayAdapter
import android.widget.ImageView
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import com.azhar.jadwalsholat.networking.ClientAsyncTask
import com.azhar.jadwalsholat.networking.DaftarKota
import kotlinx.android.synthetic.main.activity_main.*
import org.json.JSONException
import org.json.JSONObject
import java.text.SimpleDateFormat
import java.util.*
import kotlin.collections.ArrayList

@Suppress("RECEIVER_NULLABILITY_MISMATCH_BASED_ON_JAVA_ANNOTATIONS")
class MainActivity : AppCompatActivity() {

    private var listDaftarKota: MutableList? = null
    private var mDaftarKotaAdapter: ArrayAdapter? = null
    private var greetImg: ImageView? = null
    private var greetText: TextView? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        greetImg = findViewById(R.id.greeting_img)
        greetText = findViewById(R.id.greeting_text)

        listDaftarKota = ArrayList()
        mDaftarKotaAdapter = ArrayAdapter(this, android.R.layout.simple_spinner_item, listDaftarKota)
        mDaftarKotaAdapter!!.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item)
        kota.adapter = mDaftarKotaAdapter
        kota.onItemSelectedListener = object : AdapterView.OnItemSelectedListener {
            override fun onNothingSelected(p0: AdapterView<*>?) {

            }

            override fun onItemSelected(p0: AdapterView<*>?, view: View?, position: Int, id: Long) {

                val kota = mDaftarKotaAdapter!!.getItem(position)
                loadJadwal(kota.id)
            }

        }

        loadKota()
        greeting()
    }

    @SuppressLint("SetTextI18n")
    private fun greeting() {
        val calendar = Calendar.getInstance()
        val timeOfDay = calendar.get(Calendar.HOUR_OF_DAY)
        if (timeOfDay >= 0 && timeOfDay < 12) {
            greetText?.setText("Selamat Pagi, sudah sholat Subuh?")
            greetImg?.setImageResource(R.drawable.img_default_half_morning)
        } else if (timeOfDay >= 12 && timeOfDay < 15) {
            greetText?.setText("Selamat Siang, sudah sholat Dzuhur?")
            greetImg?.setImageResource(R.drawable.img_default_half_afternoon)
        } else if (timeOfDay >= 15 && timeOfDay < 18) {
            greetText?.setText("Selamat Sore, sudah sholat Ashar?")
            greetImg?.setImageResource(R.drawable.img_default_half_without_sun)
        } else if (timeOfDay >= 18 && timeOfDay < 24) {
            greetText?.setText("Selamat Malam, sudah sholat Maghrib?\njangan tidur dulu ya, lanjut sholat Isya")
            greetText?.setTextColor(Color.BLACK)
            greetImg?.setImageResource(R.drawable.img_default_half_night)
        }
    }

    @SuppressLint("SimpleDateFormat")
    private fun loadJadwal(id: Int?) {
        try {
            val idKota = id.toString()

            val current = SimpleDateFormat("yyyy-MM-dd")
            val tanggal = current.format(Date())

            val url = "https://api.banghasan.com/sholat/format/json/jadwal/kota/$idKota/tanggal/$tanggal"
            val task = ClientAsyncTask(this, object : ClientAsyncTask.OnPostExecuteListener {
                override fun onPostExecute(result: String) {

                    Log.d("JadwalData", result)
                    try {
                        val jsonObj = JSONObject(result)
                        val objJadwal = jsonObj.getJSONObject("jadwal")
                        val obData = objJadwal.getJSONObject("data")

                        tv_tanggal.text = obData.getString("tanggal")
                        tv_subuh.text = obData.getString("subuh")
                        tv_dzuhur.text = obData.getString("dzuhur")
                        tv_ashar.text = obData.getString("ashar")
                        tv_maghrib.text = obData.getString("maghrib")
                        tv_isya.text = obData.getString("isya")

                        Log.d("dataJadwal", obData.toString())

                    } catch (e: JSONException) {
                        e.printStackTrace()
                    }
                }

            })
            task.execute(url)
        } catch (e: Exception) {
            e.printStackTrace()
        }

    }

    private fun loadKota() {
        try {
            val url = "https://api.banghasan.com/sholat/format/json/kota"
            val task = ClientAsyncTask(this, object : ClientAsyncTask.OnPostExecuteListener {
                override fun onPostExecute(result: String) {

                    Log.d("KotaData", result)
                    try {
                        val jsonObj = JSONObject(result)
                        val jsonArray = jsonObj.getJSONArray("kota")
                        var daftarKota: DaftarKota?
                        for (i in 0 until jsonArray.length()) {
                            val obj = jsonArray.getJSONObject(i)
                            daftarKota = DaftarKota()
                            daftarKota.id = obj.getInt("id")
                            daftarKota.nama = obj.getString("nama")
                            listDaftarKota!!.add(daftarKota)
                        }
                        mDaftarKotaAdapter!!.notifyDataSetChanged()

                    } catch (e: JSONException) {
                        e.printStackTrace()
                    }
                }

            })
            task.execute(url)
        } catch (e: Exception) {
            e.printStackTrace()
        }
    }
}

4. Selanjutnya buat ClientAsyncTask.kt seperti dibawah, fungsinya untuk koneksi API.

package com.wijaba.jadwalsholat.networking

import android.content.Context
import android.os.AsyncTask
import java.io.BufferedReader
import java.io.InputStream
import java.io.InputStreamReader
import java.net.HttpURLConnection
import java.net.URL

@Suppress("UNREACHABLE_CODE")
class ClientAsyncTask constructor(private val mContext: Context, postExecuteListener: OnPostExecuteListener) :
    AsyncTask() {
    val CONNECTON_TIMEOUT_MILLISECONDS = 60000
    private val mPostExecuteListener : OnPostExecuteListener = postExecuteListener

    interface OnPostExecuteListener {
        fun onPostExecute(result: String)
    }

    /*init {
        if (mPostExecuteListener == null)
            throw Exception("Param cannot be null.")
    }*/

    override fun onPostExecute(result: String) {
        super.onPostExecute(result)
        mPostExecuteListener.onPostExecute(result)
    }

    override fun doInBackground(vararg urls: String?): String {
        var urlConnection: HttpURLConnection? = null

        try {
            val url = URL(urls[0])

            urlConnection = url.openConnection() as HttpURLConnection
            urlConnection.connectTimeout = CONNECTON_TIMEOUT_MILLISECONDS
            urlConnection.readTimeout = CONNECTON_TIMEOUT_MILLISECONDS

            val inString = streamToString(urlConnection.inputStream)

            return inString
        } catch (ex: Exception) {

        } finally {
            if (urlConnection != null) {
                urlConnection.disconnect()
            }
        }

        return ""
    }

    fun streamToString(inputStream: InputStream): String {

        val bufferReader = BufferedReader(InputStreamReader(inputStream))
        var line: String
        var result = ""

        try {
            do {
                line = bufferReader.readLine()
                if (line != null) {
                    result += line
                }
            } while (true)
            inputStream.close()
        } catch (ex: Exception) {

        }

        return result
    }

}

5. Selanjutnya buat DaftarKota.kt isi seperti dibawah, fungsinya untuk data Spinner kota.

package com.wijaba.jadwalsholat.networking

class DaftarKota {
    var id: Int? = null
    var nama: String? = null

    override fun toString(): String {
        return nama.toString()
    }
}

Setelah sudah mengikuti langkah-langkah diatas dengan baik, tinggal kalian Run saja. InsyaAllah akan berhasil seperti gambar dibawah ini.

Jika kalian mendapati error silahkan kalian cek kembali, jika sudah di cek masih error silahkan kalian berkomentar dibawah agar kita bisa diskusikan bersama.

Jika kalian ingin langsung source codenya tanpa tutorial diatas silahkan didownload:
Link 1 / Link 2

Sekian tutorial Cara Membuat Aplikasi Jadwal Shalat Menggunakan Kotlin Android Studio semoga bermanfaat. Dan jangan lupa membagikan artikel ini kepada teman-teman kalian yang ingin belajar membuat aplikasi Android sederhana, jangan pelit ilmu pokoknya.

Jangan lupa kunjungi maswijaba.my.id untuk artikel bermanfaat lainnya.