Cara Membuat Aplikasi Jadwal Shalat Menggunakan Kotlin di Android Studio
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.
Jangan lupa kunjungi maswijaba.my.id untuk artikel bermanfaat lainnya.
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"/>
<!--<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>
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 disini
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.
Post a Comment for "Cara Membuat Aplikasi Jadwal Shalat Menggunakan Kotlin di Android Studio"