Tutorial Membuat Aplikasi Jadwal Sholat dengan Android Studio | Rivaldi 48

Azhar Rivaldi    9/22/2019    Tutorial Android Studio    28 comments   

Baca Juga

Aplikasi Jadwal Sholat

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُه sobat 48😁. Kali ini saya akan membagikan sebuah artikel yang membahas tentang Tutorial Membuat Aplikasi Jadwal Sholat dengan Android Studio. Aplikasi ini saya buat sebagai referensi teman-teman, siapa tahu membutuhkannnya untuk tugas skripsi atau yang lain. Bahasa pemrograman yang digunakan untuk sample ini adalah Kotlin. Karena saya sendiri sedang belajar Kotlin juga gan, harap maklum ya😂

Jadwal Sholat datanya saya ambi dari https://api.banghasan.com/. Disana juga ada API untuk surah-surah dan ayat-ayat Al-Qur`an loh! Jika kalian ingin SOURCE CODE sample aplikasi ini, silahkan download di GITHUB saya DISINI. Tetapi jika kalian ingin tahu cara mengaplikasikannya, silahkan lanjut baca artikel ini sampai selesai. Untuk kalian yang ingin mencoba membuat aplikasi ini dengan tutorial versi video, berikut saya berikan Videonya:

Jangan lupa subscribe Channel Youtube saya juga ya Azhar Rivaldi, karena disana ada banyak tutorial-tutorial untuk membuat aplikasi lainnya. Oke langsung saja tanpa basa-basi lagi kita langsung ke langkah pertama :

1. Buat project baru di Android Studio dengan cara klik File ⇒ Project Baru. Ketika diminta untuk memilih Default Activity, pilih Empty Activity dan klik next. Untuk minSDK, disini saya set API 21 ya.

2. Ubah MainActivity.kt menjadi seperti ini :

package com.azhar.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()
        }
    }
}

3. Ubah isi activity_main.xml menjadi seperti 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"/>

                <!--<TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/greeting_text"
                        android:layout_marginLeft="10dp"
                        android:layout_marginRight="10dp"
                        android:gravity="center"
                        android:text="Jangan lupa sholat..."
                        android:textColor="#000"
                        android:textSize="10dp"/>-->

            </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>

4. Buat ClientAsyncTask.kt untuk koneksi ke API :

package com.azhar.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. Buat DaftarKota.kt untuk data Spinner Kota :

package com.azhar.jadwalsholat.networking

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

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

6. Selesai dan kalian Run. Jika kalian mengikuti langkah-langkah diatas dengan baik, pasti aplikasi yang kalian buat akan berjalan sebagaimana mestinya. Namun jika mengalami Error, silahkan berikan komentar dan kita diskusikan bersama. Berikut hasilnya :

Aplikasi Jadwal Sholat

Demikian informasi yang saya bagikan untuk kalian. Jangan lupa bagikan artikel ini ke teman-teman kalian agar ikut membaca Tutorial Membuat Aplikasi Jadwal Sholat dengan Android Studio ini. Subscribe juga blog Rivaldi 48 ini agar kalian mendapatkan notifikasi saat Admin update artikel terbaru. Semoga kalian lebih nyaman dan mudah dalam mengakses Blog Rivaldi 48 dimanapun kalian berada. Terima Kasih. Follow Instagram Admin @azhardvls_