Tutorial Membuat Aplikasi Jadwal Sholat dengan Android Studio | Rivaldi 48

Tutorial Membuat Aplikasi Jadwal Sholat dengan Android Studio
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 http://api.banghasan.com/sholat/. 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 :

TRENDING:  Tutorial Membuat Aplikasi Rental Mobil dengan Android Studio
Tutorial Membuat Aplikasi Jadwal Sholat dengan Android Studio
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 @rafelpranata21