Quran Reading Application For Android

To create an Android Quran Reading App in Android Studio using Kotlin, you can follow these steps:

• Open Android Studio and create a new project.
• Choose the “Empty Activity” template and click “Next”.
• Give your project a name and select “Kotlin” as the language. Click “Finish” to create the project.
• In the “Project” panel on the left side of the window, navigate to the “app” directory and open the “res” folder.
• In the “app” folder, create a new directory called “Asset“.
• In the “Assets” folder, place the Quran text file that you want to use in your quran app. The text file should be in a format that can be read by your app, such as plain text or XML.
• In the “quran app” directory, open the “src” folder and then the “main” folder.
• In the “main” folder, open the “java” folder and then the package for your app (the package name is specified in the “build.gradle” file).
• Create a new Kotlin file called “MainActivity.kt” and add the following code to it:

class MainActivity : AppCompatActivity(),SurahListener {
    var binding:ActivityMainBinding?=null
    var surahArraylist:ArrayList<Surah> = ArrayList<Surah>()
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding  = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding!!.root)

        binding!!.recyclerview.setLayoutManager(LinearLayoutManager(this,
            LinearLayoutManager.VERTICAL,false))
        //Add Items to List
        //For getting Data i use Json FIle
        try {
            val myJsonStr:String = LoadJsonfromAssess("translation.json")!!
            val jsonArray=JSONArray(myJsonStr)
            for(i in 0 until jsonArray.length())
            {
                val surah =Surah()
                val surah_detail = jsonArray.getJSONObject(i)
                surah.setNumber(surah_detail.getInt("id"))
                surah.setName(surah_detail.getString("transliteration"))
                surah.setArabicName(surah_detail.getString("name"))
                surah.setRevelationType(surah_detail.getString("type"))
                surah.setNumberOfAyahs(surah_detail.getInt("total_verses"))
                surahArraylist.add(surah)
            }
        }catch (ex:Exception)
        {
ex.printStackTrace()
        }
        val recyclerViewAdapter = RecyclerViewAdapter(this,surahArraylist,this)
        binding!!.recyclerview.setAdapter(recyclerViewAdapter)
    }
    fun LoadJsonfromAssess(fileName:String?):String?
    {
        val json:String
        json=try
        {
            val Is = assets.open(fileName!!)
            val size=Is.available()
            val buffer = ByteArray(size)
            Is.read(buffer)
            Is.close()
            String(buffer,StandardCharsets.UTF_8)
        }catch (ex:Exception)
        {
            ex.printStackTrace()
            return null
        }
return json
    }
    override fun OnSurahListener(position: Int) {
        val it= Intent(this,SurahInfo::class.java)
        it.putExtra("No",surahArraylist.get(position).number)
        it.putExtra("Name",surahArraylist.get(position).getArabicName())
        it.putExtra("AYA",surahArraylist.get(position).getNumberOfAyahs())
        it.putExtra("TYPE",surahArraylist.get(position).getRevelationType())
        it.putExtra("EngName",surahArraylist.get(position).getName())
        startActivity(it)
    }
}

• MainActivity.xml Code

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:listitem="@layout/surah_list_item"
        />
</androidx.constraintlayout.widget.ConstraintLayout>

• Main Activity Surah List Item Code

<?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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="5dp">
    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="60dp"
        app:cardBackgroundColor="#4CAF50"
        app:cardCornerRadius="10dp">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <RelativeLayout
                android:id="@+id/rows1"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="@drawable/ic_bg_row"
          android:layout_alignParentStart="true"
                >
                <TextView
                    android:id="@+id/rows"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:text="1"
                    android:textColor="@color/white" />
            </RelativeLayout>
            <TextView
                android:id="@+id/engname"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="20dp"
                android:layout_toRightOf="@id/rows1"
                android:text="Al Fatiha"
                android:textColor="@color/white"
                android:textSize="16sp"
                android:textStyle="bold"
                android:layout_marginTop="5dp"/>
            <TextView
                android:id="@+id/type"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Madni"
                android:textColor="@color/white"
                android:textSize="16sp"
                android:textStyle="bold"
                android:layout_toRightOf="@id/rows1"
                android:layout_below="@id/engname"
                android:layout_marginStart="20dp"
                />
             <TextView
                android:id="@+id/totalaya"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="7"
                android:textColor="@color/white"
                android:textSize="16sp"
                android:textStyle="bold"
                android:layout_toRightOf="@id/type"
                android:layout_below="@id/engname"
                android:layout_marginStart="20dp"
                />
            <TextView
                android:id="@+id/arabicname"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:layout_centerInParent="true"
              android:layout_marginEnd="10dp"
                android:text="سُورَةُ ٱلْفَاتِحَةِ"
                android:textColor="@color/white"
                android:textSize="16sp"
                android:textStyle="bold" />
        </RelativeLayout>
    </androidx.cardview.widget.CardView>
</LinearLayout>

• Surah Info.kt Class Code

package com.example.newquranapp
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import android.widget.TextView
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import com.example.newquranapp.Adapter.SurahDetailAdapter
import com.example.newquranapp.model.Surah
import com.example.newquranapp.model.SurahDetail
import org.json.JSONArray
import java.nio.charset.StandardCharsets
class SurahInfo : AppCompatActivity() {
    var surahName:TextView?=null
    var Surahtype:TextView?=null
    var no = 0
    var recyclerView:RecyclerView?=null
    var list:ArrayList<SurahDetail> = ArrayList()
    var ayano=0
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_surah_info)
        init()
        no = intent.getIntExtra("No",0 )
        surahName!!.text=intent.getStringExtra("Name")
        Surahtype?.setText(intent.getStringExtra("TYPE")+" "+intent.getIntExtra("AYA",0)+"Aya" )
        ayano=intent.getIntExtra("AYA",0)
        list= ArrayList<SurahDetail>()
        try {
            val myJsonStr:String = LoadJsonfromAssess("translation.json")!!
            val jsonArray= JSONArray(myJsonStr)
            val mjsonObject =jsonArray.getJSONObject(no)
            val versesarray = mjsonObject.getJSONArray("verses")
            var surahdetail:SurahDetail? =null
            for(i in 0 until versesarray.length())
            {
                surahdetail = SurahDetail()
                val surah_detail = versesarray.getJSONObject(i)
                surahdetail.setId(surah_detail.getInt("id"))
                surahdetail.setText(surah_detail.getString("text"))
                surahdetail.setTrans(surah_detail.getString("translation"))
                Log.d("SURAH", surahdetail.id.toString())
                list.add(surahdetail)
            }
        }catch (ex:Exception)
        {
            ex.printStackTrace()
        }
        val surahDetailAdapter =SurahDetailAdapter(this,list)
        recyclerView?.layoutManager = LinearLayoutManager(this,RecyclerView.VERTICAL,false)
        recyclerView?.adapter = surahDetailAdapter
    }
    fun init()
    {
        surahName = findViewById(R.id.name)
        Surahtype=findViewById(R.id.type)
        recyclerView=findViewById(R.id.rev)
    }
    fun LoadJsonfromAssess(fileName:String?):String?
    {
        val json:String
        json=try
        {
            val Is = assets.open(fileName!!)
            val size=Is.available()
            val buffer = ByteArray(size)
            Is.read(buffer)
            Is.close()
            String(buffer, StandardCharsets.UTF_8)
        }catch (ex:Exception)
        {
            ex.printStackTrace()
            return null
        }
        return json
    }
}

• Surah Info.xml Code

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SurahInfo"
    android:background="#E8E7E7"
    >
<androidx.cardview.widget.CardView
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardElevation="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    app:cardCornerRadius="16dp">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#4CAF50">
        <TextView
            android:id="@+id/name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Fatiha"
            android:textColor="@color/white"
            android:textSize="28sp"
            android:textAlignment="center"
            android:gravity="center"
            />
        <TextView
            android:id="@+id/translation"
            android:layout_below="@id/name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="The Opening"
            android:textColor="@color/white"
            android:textSize="18sp"
            android:textAlignment="center"
            android:gravity="center"
            />
        <TextView
            android:id="@+id/type"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Mecca 7 aya"
            android:layout_below="@id/translation"
            android:textColor="@color/white"
            android:textSize="18sp"
            android:textAlignment="center"
            android:gravity="center"
            />
    </RelativeLayout>
</androidx.cardview.widget.CardView>
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rev"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/card_view"
        tools:listitem="@layout/surah_details_item"
        />
</RelativeLayout>

• Surah Detail item.xml Code

<?xml version="1.0" encoding="utf-8"?>

<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

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

        <RelativeLayout
            android:id="@+id/r1_top"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#F6F2F2">

            <LinearLayout
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:background="@drawable/bg_circle"
                android:layout_margin="5dp"
                android:gravity="center">

                <TextView
                    android:id="@+id/aya_no"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="1"
                    android:textSize="16sp"
                    android:textColor="@color/white"
                    android:textStyle="bold">


                </TextView>


            </LinearLayout>


        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/r1_top"
            android:layout_marginTop="10dp">

            <TextView
                android:id="@+id/arabic_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:layout_margin="5dp"
                android:textIsSelectable="true"
                android:textSize="28sp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/translation"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/arabic_text"
                android:layout_alignParentEnd="true"
                android:layout_margin="5dp"
                android:textIsSelectable="true"
                android:textSize="28sp" />


        </RelativeLayout>



    </RelativeLayout>

</androidx.cardview.widget.CardView>

• Adapter Classes Code

package com.example.newquranapp.Adapter
import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
import com.example.newquranapp.R
import com.example.newquranapp.listener.SurahListener
import com.example.newquranapp.model.Surah
import java.lang.String
import kotlin.Int
class RecyclerViewAdapter(context: Context,surahArraylist:ArrayList<Surah>,surahListener: SurahListener)
    : RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder>()
{
var surahListener:SurahListener?=null
private var mList :ArrayList<Surah> = ArrayList<Surah>()
    init {
        mList=surahArraylist
        this.surahListener=surahListener
    }
    override fun getItemCount(): Int {
        return mList.size
    }
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
val view:View = LayoutInflater.from(parent.context).inflate(R.layout.surah_list_item,parent,false)
    return ViewHolder(view, surahListener!!)
    }
    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
//        holder.sno.setText(mList.get(position).number)
        holder.sno.text = (position + 1).toString()
        holder.name.setText(mList.get(position).name)
        holder.arabicnaeme.setText(mList.get(position).Arabicname)
        holder.ayas.setText(String.valueOf(mList.get(position).numberofaya))
        holder.type.setText(mList.get(position).Revtype)
    }
class ViewHolder(itemview: View,surahListener: SurahListener):RecyclerView.ViewHolder(itemview) {
 var sno:TextView = itemview.findViewById(R.id.rows)
    var name:TextView = itemview.findViewById(R.id.engname)
    var arabicnaeme:TextView = itemview.findViewById(R.id.arabicname)
    var type:TextView = itemview.findViewById(R.id.type)
    var ayas:TextView = itemview.findViewById(R.id.totalaya)
    init {
        itemview.setOnClickListener({
            surahListener.OnSurahListener(adapterPosition)
        })
    }
}
}

• Surah Detail Adapter Class Code

package com.example.newquranapp.Adapter
import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
import com.example.newquranapp.R
import com.example.newquranapp.model.SurahDetail
import java.*
import java.lang.String
import kotlin.Int
class SurahDetailAdapter(val context: Context,list: List<SurahDetail>):
    RecyclerView.Adapter<SurahDetailAdapter.ViewHolder>() {
    var list:List<SurahDetail>
    init {
        this.list=list
    }
    override fun getItemCount(): Int {
return list.size
    }
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
  val view: View = LayoutInflater.from(parent.context).inflate(R.layout.surah_details_item,parent,false)
  return ViewHolder(view)
    }
    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
holder.ayaNo.setText(String.valueOf(list[position].getId()))
        holder.arabictext.setText(list[position].getText())
        holder.transaltion?.setText(list[position].getTrans())
    }
    class ViewHolder(itemview:View):RecyclerView.ViewHolder(itemview) {
        var ayaNo:TextView
        var arabictext:TextView
        var transaltion:TextView
        init {
            ayaNo=itemview.findViewById(R.id.aya_no)
            arabictext=itemview.findViewById(R.id.arabic_text)
            transaltion=itemview.findViewById(R.id.translation)
        }
    }
}

• Surah Model Class

package com.example.newquranapp.model
class Surah {
var number= 0
    var name:String?=null
    var Arabicname:String?=null
    var numberofaya=0
    var Revtype:String?=null
    @JvmName("getNumber1")
    fun getNumber(): Int {
        return number
    }
    @JvmName("setNumber1")
    fun setNumber(number: Int) {
        this.number = number
    }
    @JvmName("getName1")
    fun getName(): String? {
        return name
    }
    @JvmName("setName1")
    fun setName(name: String?) {
        this.name = name
    }
    fun getArabicName(): String? {
        return Arabicname
    }
    fun setArabicName(ArabicName: String) {
        this.Arabicname = ArabicName
    }
    fun getNumberOfAyahs(): Int {
        return numberofaya
    }
    fun setNumberOfAyahs(numberOfAyahs: Int) {
        numberofaya = numberOfAyahs
    }
    fun getRevelationType(): String? {
        return Revtype
    }
    fun setRevelationType(revelationType: String) {
        this.Revtype = revelationType
    }
}

• surah Detail model class

package com.example.newquranapp.model
class SurahDetail {
     var id: Int = 0
    var text: String? = null
    var translation:String?=null
    @JvmName("getId1")
    fun getId(): Int {
        return id
    }
    @JvmName("setId1")
    fun setId(id: Int) {
        this.id = id
    }
    @JvmName("getText1")
    fun getText(): String? {
        return text
    }
    @JvmName("setText1")
    fun setText(text: String?) {
        this.text = text
    }
    @JvmName("getTrans1")
    fun getTrans(): String? {
        return translation
    }
    @JvmName("setTrans1")
    fun setTrans(tran: String?) {
        this.translation = tran
    }
}

• Surah Listener class

interface SurahListener {
    fun OnSurahListener(position:Int)
}