 |
| Aplikasi Jadwal Sholat |
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 :
 |
| Aplikasi Jadwal Sholat |
