Using Urdu and Arabic Fonts Custom Font Styles Light and Dark Mode Theme

1. International Islamic University H-10, Islamabad, Pakistan
Mobile Applications Development
Week 04
Custom Fonts,
Styles & Theming
Engr. Rashid Farid Chishti
http://youtube.com/rfchishti
http://sites.google.com/site/chisht
i

2.  Learn to apply custom fonts to TextViews and Buttons.
 Understand style resources for consistent UI design.
 Explore app theming for light and dark modes.
Objectives

3.  Android allows developers to use custom fonts from the res/font/ directory.
 Fonts can be applied via XML or Kotlin code.
 Steps:
 Add font files (jameel.ttf) to res/font/
 Use it in XML or programmatically.
1. Applying Custom Fonts

4. <?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
<color name="navy_blue">#FF000080</color>
<color name="magenta">#FFE05194</color>
</resources>
1. Colors (res/values/colors.xml)

5. <resources>
<string name="app_name">My First App</string>
<string name="bismillah">ِ
‫م‬ْ
‫ی‬ِ
‫ح‬َ
ّ
‫ر‬‫ال‬ ِ
‫ن‬ٰ
‫م‬ْ
‫ح‬َ
ّ
‫ر‬‫ال‬ ِ
‫ه‬ٰ
ّ
‫ل‬‫ال‬ ِ
‫م‬ْ
‫س‬ِ
‫ب‬</string>
<string name="surah_heading">112. ‫الاخلاص‬ ‫سور‬
‫ۃ‬ </string>
<string name="surah">ٌ
‫د‬َ
‫ح‬َ
‫ا‬ ٰ
ّ
‫ل‬‫ال‬ َ
‫و‬ ُ
‫ق‬
ُ‫ہ‬ ُ‫ہ‬ ۡ
‫ل‬ <font color="#FF0707">﴿
ۚ ۱﴾</font> ٰ
ّ
‫ل‬‫َل‬
‫ا‬
ُ‫ہ‬
ُ
‫د‬َ
‫م‬َ
ّ
‫ص‬‫<ال‬font color="#FF0707">﴿
ۚ ۲﴾</font> َ
‫ل‬ ُ
‫ی‬ َ
‫ل‬ َ
‫و‬ ِ
‫ل‬َ
‫ی‬ َ
‫ل‬
ۡ‫د‬ ۡ‫و‬ ۡ‫م‬ ۙ۬ ۡ‫د‬ ۡ‫م‬ <font
color="#FF0707">﴿
ۙ ۳﴾</font> ٌ
‫د‬َ
‫ح‬َ
‫ا‬ ‫ًا‬
‫و‬ُ
‫ف‬ُ
‫ک‬ َ
ّ
‫ل‬ ُ
‫ک‬َ
‫ی‬ َ
‫ل‬ َ
‫و‬
ٗ‫ہ‬ ۡ
‫ن‬ ۡ‫م‬ <font color="#FF0707">
٪﴿۴﴾ </font></string>
<string name="urdu"> ﴿ ‫ایک‬ ) ( ‫الله‬ )‫نام‬ ‫کا‬ ‫جس‬ ‫پاک‬ ‫(ذات‬ ‫و‬ ‫ک‬ ‫و‬ ‫ک‬
‫ہے‬ ‫ہے‬ ‫ہ‬ ‫ہ‬ ‫ہ‬
۱
‫معبود‬ ﴾
﴿ ‫نیاز‬ ‫ب‬ ‫جو‬ ‫برحق‬
‫ہے‬ ‫ے‬
۲
﴿ ‫ا‬ ‫بی‬ ‫کا‬ ‫کسی‬ ‫ن‬ ‫اور‬ ‫باپ‬ ‫کا‬ ‫کسی‬ ‫ن‬ ﴾
‫ٹ‬ ‫ہ‬ ‫ہے‬ ‫ہ‬
۳
‫کا‬ ‫اس‬ ‫کوئی‬ ‫اور‬ ﴾
﴿ ‫ی‬ ‫ن‬ ‫مسر‬
‫ں‬ ‫ہ‬ ‫ہ‬
۴ ﴾</string>
</resources>
1. Strings (res/values/strings.xml)

6. <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@color/white"
android:id="@+id/main"
tools:context=".MainActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:fontFamily="@font/aslam"
android:gravity="right"
android:text="@string/surah_heading"
android:textColor="@color/magenta" android:textSize="24sp" />
1. Custom Fonts (activity_main.xml) (1/3)

7. <TextView
android:id="@+id/tv_bismillah"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:fontFamily="@font/noorehira"
android:gravity="center"
android:text="@string/bismillah"
android:textColor="@color/navy_blue"
android:textSize="24sp"/>
<TextView
android:id="@+id/tv_surah"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:fontFamily="@font/noorehira"
1. Custom Fonts (activity_main.xml) (2/3)

8. android:gravity="center"
android:textColor="@color/black"
android:textSize="24sp"
android:text="@string/surah" />
<TextView
android:id="@+id/tv_urdu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:fontFamily="@font/jameel"
android:gravity="center"
android:textColor="@color/black"
android:textSize="24sp"
android:text="@string/urdu"/>
</LinearLayout>
1. Custom Fonts (activity_main.xml) (3/3)

9. package com.example.myfirstapp
import android.graphics.Color
import android.os.Bundle
import android.widget.TextView
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.core.content.res.ResourcesCompat
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat
class MainActivity : AppCompatActivity() {
lateinit var tv_bismillah: TextView
lateinit var tv_surah: TextView
lateinit var tv_urdu: TextView
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContentView(R.layout.activity_main)
1. Custom Fonts (MainActivity.kt) (1/2)

10. ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main)) { v, insets -
>
val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
v.setPadding(systemBars.left, systemBars.top, systemBars.right,
systemBars.bottom)
insets
}
val typeface = ResourcesCompat.getFont(this, R.font.al_mushaf)
tv_bismillah = findViewById(R.id.tv_bismillah)
tv_surah = findViewById(R.id.tv_surah)
tv_urdu = findViewById(R.id.tv_urdu)
tv_bismillah.typeface = typeface
tv_bismillah.textSize = 36.0f
val Green = Color.parseColor("#4c9a2a")
tv_bismillah.setTextColor(Green)
}
1. Custom Fonts (MainActivity.xml) (1/2)

11.  Styles allow you to reuse design attributes across UI components.
 Defined inside res/values/styles.xml.
2. Creating Styles

12. <?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Custom Font Style -->
<style name="TextStyle_Bismillah">
<item name="android:fontFamily">@font/noorehira</item>
<item name="android:textSize">32sp</item>
<item name="android:textColor">#FFFFFF</item>
<item name="android:textStyle">bold</item>
<item name="android:paddingLeft">5dp</item>
<item name="android:paddingRight">5dp</item>
<item name="android:gravity">center</item>
<item name="android:layout_marginLeft">10dp</item>
<item name="android:layout_marginRight">10dp</item>
</style>
2. Creating Styles (res/values/styles.xml) (1/2)

13. <!-- Custom Font Style -->
<style name="TextStyle_Urdu">
<item name="android:fontFamily">@font/jameel</item>
<item name="android:textSize">32sp</item>
<item name="android:textColor">@color/black</item>
<item name="android:paddingLeft">5dp</item>
<item name="android:paddingRight">5dp</item>
<item name="android:gravity">center</item>
<item name="android:layout_marginLeft">10dp</item>
<item name="android:layout_marginRight">10dp</item>
</style>
</resources>
2. Creating Styles (res/values/styles.xml) (2/2)

14. <?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:width="2dp" android:color="#0000FF" />
<corners
android:bottomLeftRadius="10dp" android:bottomRightRadius="10dp"
android:topLeftRadius="10dp" android:topRightRadius="10dp"/>
<!-- <solid android:color="#92D050"> </solid> -->
<gradient android:angle="90"
android:type="linear" android:gradientRadius="200"
android:startColor="#92D050" android:endColor="#ffff00" />
<padding
android:top="1dp" android:bottom="1dp"
android:left="1dp" android:right="1dp" />
</shape>
2. Creating Styles (res/drawable/bg_round.xml) (2/2)

15. <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@color/white"
android:id="@+id/main"
tools:context=".MainActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:fontFamily="@font/aslam"
android:gravity="right"
android:text="@string/surah_heading"
android:textColor="@color/magenta"
2. Creating Styles (activity_main.xml) (1/3)

16. android:textSize="24sp" />
<TextView
android:id="@+id/tv_bismillah"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/bismillah"
style="@style/TextStyle_Bismillah"
android:background="@drawable/bg_round"
/>
<TextView
android:id="@+id/tv_surah"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:fontFamily="@font/noorehira"
android:gravity="center"
2. Creating Styles (activity_main.xml) (2/3)

17. android:textColor="@color/black"
android:textSize="24sp"
android:text="@string/surah"
android:background="@drawable/bg_round"
/>
<TextView
android:id="@+id/tv_urdu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/urdu"
style="@style/TextStyle_Urdu"
android:background="@drawable/bg_round"
/>
</LinearLayout>
2. Creating Styles (activity_main.xml) (3/3)

18. package com.example.myfirstapp
import android.os.Bundle
import android.widget.TextView
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat
class MainActivity : AppCompatActivity() {
lateinit var tv_bismillah: TextView
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContentView(R.layout.activity_main)
2. Creating Styles (MainActivity.kt) (1/2)

19. ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main)) { v, insets ->
val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
v.setPadding(systemBars.left, systemBars.top, systemBars.right,
systemBars.bottom)
insets
}
tv_bismillah = findViewById(R.id.tv_bismillah)
// tv_bismillah.setTextAppearance(
// R.style.TextStyle_Urdu
// )
}
}
2. Creating Styles (MainActivity.kt) (2/2)

20.  Theme defines the look and feel of the entire app.
 Common attributes:
 Primary color
 Accent color
 Background color
 Font styles
 Defined inside res/values/themes.xml.
3. Themes Overview

21.  Android supports DayNight themes to automatically switch UI.
 System-Wide Dark Mode (Android 10+)
 When the user switches their phone to Dark Mode, apps can automatically
adapt if you provide both light and dark themes.
 Values Folders for Themes
 You define colors separately for light and dark themes
 /res/values/colors.xml → Light theme colors
 res/values-night/colors.xml → Dark theme colors
3. Light & Dark Mode Theming

22. <resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style
name="Base.Theme.MyFirstApp"
parent="Theme.Material3.DayNight.NoActionBar">
<!-- Customize your light theme here. -->
<!-- <item name="colorPrimary">@color/my_light_primary</item> -->
<item name="android:textColor">#000000</item>
<item name="android:colorBackground">#f8f8f8</item>
</style>
<style name="Theme.MyFirstApp" parent="Base.Theme.MyFirstApp" />
</resources>
3. Light Mode Theme values/themes/themes.xml)

23. <resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style
name="Base.Theme.MyFirstApp"
parent="Theme.Material3.DayNight.NoActionBar">
<!-- Customize your dark theme here. -->
<!-- <item name="colorPrimary">@color/my_dark_primary</item> -->
<item name="android:textColor">#FFFFFF</item>
<item name="android:colorBackground">#000000</item>
</style>
</resources>
3. Dark Mode Theme (themes/themes.xml) (night)

24. <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="@+id/tv_urdu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:gravity="center"
android:fontFamily="@font/jameel"
android:textSize="32sp"
android:text="@string/urdu"
3. Theme (activity_main.xml) (1/3)

25. app:layout_constraintTop_toTopOf="parent"/>
<LinearLayout
android:id="@+id/btn_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_margin="10dp"
app:layout_constraintBottom_toBottomOf="parent">
<Button
android:id="@+id/btn_night"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Night"
android:layout_marginLeft="4dp"
android:layout_marginRight="2dp"/>
<Button
android:id="@+id/btn_day"
3. Theme (activity_main.xml) (2/3)

26. android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Day"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"/>
<Button
android:id="@+id/btn_system"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="System"
android:layout_marginLeft="2dp"
android:layout_marginRight="4dp"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
3. Theme (activity_main.xml) (3/3)

27. package com.example.myfirstapp
import android.os.Bundle
import android.widget.Button
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.appcompat.app.AppCompatDelegate
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContentView(R.layout.activity_main)
3. Forcing Theme (MainActivity.kt) (1/2)

28. ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main)) { v, insets -
>
val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
v.setPadding(systemBars.left, systemBars.top, systemBars.right,
systemBars.bottom)
insets
}
val btnNight = findViewById<Button>(R.id.btn_night)
val btnDay = findViewById<Button>(R.id.btn_day)
val btnSystem = findViewById<Button>(R.id.btn_system)
btnNight.setOnClickListener {
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)
}
btnDay.setOnClickListener {
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)
}
btnSystem.setOnClickListener {
3. Forcing Theme (MainActivity.kt) (2/2)

29.  Use styles and themes for reusability.
 Always keep light & dark mode in mind.
 Test UI on multiple screen sizes.
 Use Material Design guidelines for modern apps.
Best Practices