Issue #17: Add setting option to change font family

Author: AmrDeveloper

app/src/main/java/com/amrdeveloper/linkhub/ui/explorer/ExplorerFragment.kt

@@ -33,7 +33,10 @@ class ExplorerFragment : Fragment() {
 
             val safeArguments by navArgs<ExplorerFragmentArgs>()
             setContent {
-                LinkhubAppTheme(isSystemInDarkTheme = uiPreferences.getThemeType() == Theme.DARK) {
+                LinkhubAppTheme(
+                    isSystemInDarkTheme = uiPreferences.getThemeType() == Theme.DARK,
+                    fontFamilyName = uiPreferences.getFontFamilyName()
+                ) {
                     ExplorerScreen(
                         currentFolder = safeArguments.folder,
                         viewModel = viewModel(),

app/src/main/java/com/amrdeveloper/linkhub/ui/folder/FolderFragment.kt

@@ -33,7 +33,10 @@ class FolderFragment : Fragment() {
             )
 
             setContent {
-                LinkhubAppTheme(isSystemInDarkTheme = uiPreferences.getThemeType() == Theme.DARK) {
+                LinkhubAppTheme(
+                    isSystemInDarkTheme = uiPreferences.getThemeType() == Theme.DARK,
+                    fontFamilyName = uiPreferences.getFontFamilyName()
+                ) {
                     FolderScreen(
                         currentFolder = safeArguments.folder,
                         viewModel = viewModel(),

app/src/main/java/com/amrdeveloper/linkhub/ui/folders/FoldersFragment.kt

@@ -31,7 +31,10 @@ class FoldersFragment : Fragment() {
             )
 
             setContent {
-                LinkhubAppTheme(isSystemInDarkTheme = uiPreferences.getThemeType() == Theme.DARK) {
+                LinkhubAppTheme(
+                    isSystemInDarkTheme = uiPreferences.getThemeType() == Theme.DARK,
+                    fontFamilyName = uiPreferences.getFontFamilyName()
+                ) {
                     FoldersScreen(
                         viewModel = viewModel(),
                         uiPreferences = uiPreferences,

app/src/main/java/com/amrdeveloper/linkhub/ui/home/HomeFragment.kt

@@ -31,7 +31,10 @@ class HomeFragment : Fragment() {
             )
 
             setContent {
-                LinkhubAppTheme(isSystemInDarkTheme = uiPreferences.getThemeType() == Theme.DARK) {
+                LinkhubAppTheme(
+                    isSystemInDarkTheme = uiPreferences.getThemeType() == Theme.DARK,
+                    fontFamilyName = uiPreferences.getFontFamilyName()
+                ) {
                     HomeScreen(
                         viewModel = viewModel(),
                         navController = findNavController(),

app/src/main/java/com/amrdeveloper/linkhub/ui/link/LinkFragment.kt

@@ -24,24 +24,24 @@ class LinkFragment : Fragment() {
     lateinit var uiPreferences: UiPreferences
 
     override fun onCreateView(
-        inflater: LayoutInflater,
-        container: ViewGroup?,
-        savedInstanceState: Bundle?
+        inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?
     ): View {
-         val safeArguments by navArgs<LinkFragmentArgs>()
+        val safeArguments by navArgs<LinkFragmentArgs>()
         return ComposeView(requireContext()).apply {
             setViewCompositionStrategy(
                 ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed
             )
 
             val sharedLink = arguments?.getString("shared_link")
             val isSharedLink = sharedLink != null
-            val currentLink =
-                if (isSharedLink) Link(title = "", subtitle = "", url = sharedLink)
-                else safeArguments.link
+            val currentLink = if (isSharedLink) Link(title = "", subtitle = "", url = sharedLink)
+            else safeArguments.link
 
             setContent {
-                LinkhubAppTheme(isSystemInDarkTheme = uiPreferences.getThemeType() == Theme.DARK) {
+                LinkhubAppTheme(
+                    isSystemInDarkTheme = uiPreferences.getThemeType() == Theme.DARK,
+                    fontFamilyName = uiPreferences.getFontFamilyName()
+                ) {
                     LinkScreen(
                         currentLink = currentLink,
                         isSharedLink = isSharedLink,

app/src/main/java/com/amrdeveloper/linkhub/ui/setting/SettingFragment.kt

@@ -31,7 +31,10 @@ class SettingFragment : Fragment() {
             )
 
             setContent {
-                LinkhubAppTheme(isSystemInDarkTheme = uiPreferences.getThemeType() == Theme.DARK) {
+                LinkhubAppTheme(
+                    isSystemInDarkTheme = uiPreferences.getThemeType() == Theme.DARK,
+                    fontFamilyName = uiPreferences.getFontFamilyName()
+                ) {
                     SettingsScreen(
                         uiPreferences = uiPreferences,
                         navController = findNavController()

app/src/main/java/com/amrdeveloper/linkhub/ui/setting/SettingsScreen.kt

@@ -6,12 +6,17 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.DropdownMenuItem
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.ExposedDropdownMenuBox
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Switch
@@ -34,6 +39,7 @@ import androidx.navigation.NavController
 import com.amrdeveloper.linkhub.BuildConfig
 import com.amrdeveloper.linkhub.R
 import com.amrdeveloper.linkhub.data.Theme
+import com.amrdeveloper.linkhub.ui.theme.supportedFontFamilies
 import com.amrdeveloper.linkhub.util.UiPreferences
 import com.amrdeveloper.linkhub.util.openLinkIntent
 import com.amrdeveloper.linkhub.util.packageName
@@ -60,13 +66,15 @@ fun SettingsScreen(
     }
 
     Column(modifier = Modifier.padding(8.dp)) {
-        TextMenuOption(
+        // Info section
+        SimpleSettingOption(
             text = "Version ${BuildConfig.VERSION_NAME}",
             icon = R.drawable.ic_version,
             onClick = {}
         )
 
-        TextSwitchMenuOption(
+        // UI Settings section
+        SwitchSettingOption(
             text = "Dark mode",
             icon = R.drawable.ic_dark_mode,
             isChecked = uiPreferences.getThemeType() == Theme.DARK,
@@ -80,7 +88,18 @@ fun SettingsScreen(
             }
         )
 
-        TextSwitchMenuOption(
+        DropdownSettingOption(
+            text = "Font family",
+            icon = R.drawable.ic_font,
+            defaultSelectedIndex = supportedFontFamilies.keys.indexOf(uiPreferences.getFontFamilyName())
+                .coerceAtLeast(0),
+            options = supportedFontFamilies.keys.toList(),
+            onOptionSelected = { fondFamily ->
+                uiPreferences.setFontFamilyName(fondFamily)
+            }
+        )
+
+        SwitchSettingOption(
             text = "Show Counter",
             icon = R.drawable.ic_click,
             isChecked = uiPreferences.isClickCounterEnabled(),
@@ -89,7 +108,7 @@ fun SettingsScreen(
             }
         )
 
-        TextSwitchMenuOption(
+        SwitchSettingOption(
             text = "Auto saving",
             icon = R.drawable.ic_save,
             isChecked = uiPreferences.isAutoSavingEnabled(),
@@ -98,7 +117,7 @@ fun SettingsScreen(
             }
         )
 
-        TextSwitchMenuOption(
+        SwitchSettingOption(
             text = "Remember last folder",
             icon = R.drawable.ic_folders,
             isChecked = uiPreferences.isDefaultFolderEnabled(),
@@ -107,50 +126,50 @@ fun SettingsScreen(
             }
         )
 
-        TextMenuOption(
+        SimpleSettingOption(
             text = "Password",
             icon = R.drawable.ic_password,
             onClick = { navController.navigate(R.id.configPasswordFragment) }
         )
 
-        TextMenuOption(
+        SimpleSettingOption(
             text = "Import/Export",
             icon = R.drawable.ic_import_export,
             onClick = { navController.navigate(R.id.importExportFragment) }
         )
 
-        // Open source
-        TextMenuOption(
+        // Open source section
+        SimpleSettingOption(
             text = "Source code",
             icon = R.drawable.ic_code,
             onClick = { selectedUrlOptionToOpen = REPOSITORY_URL }
         )
 
-        TextMenuOption(
+        SimpleSettingOption(
             text = "Sponsor",
             icon = R.drawable.ic_github_sponsor,
             onClick = {
                 selectedUrlOptionToOpen = REPOSITORY_SPONSORSHIP_URL
             }
         )
 
-        TextMenuOption(
+        SimpleSettingOption(
             text = "Contributors",
             icon = R.drawable.ic_team,
             onClick = {
                 selectedUrlOptionToOpen = REPOSITORY_CONTRIBUTORS_URL
             }
         )
 
-        TextMenuOption(
+        SimpleSettingOption(
             text = "Issues",
             icon = R.drawable.ic_problems,
             onClick = {
                 selectedUrlOptionToOpen = REPOSITORY_ISSUES_URL
             }
         )
 
-        TextMenuOption(
+        SimpleSettingOption(
             text = "Share",
             icon = R.drawable.ic_share,
             onClick = { selectedUrlOptionToOpen = PLAY_STORE_URL }
@@ -159,19 +178,15 @@ fun SettingsScreen(
 }
 
 @Composable
-private fun TextMenuOption(text: String, icon: Int, onClick: () -> Unit = {}) {
+private fun SimpleSettingOption(text: String, icon: Int, onClick: () -> Unit = {}) {
     Card(
         modifier = Modifier
             .fillMaxWidth()
             .clickable { onClick() }
             .padding(4.dp),
         shape = RoundedCornerShape(12.dp),
-        colors = CardDefaults.cardColors(
-            containerColor = MaterialTheme.colorScheme.surfaceVariant,
-        ),
-        elevation = CardDefaults.cardElevation(
-            defaultElevation = 6.dp
-        )
+        colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceVariant),
+        elevation = CardDefaults.cardElevation(defaultElevation = 6.dp)
     ) {
         Row(
             verticalAlignment = Alignment.CenterVertically,
@@ -195,7 +210,7 @@ private fun TextMenuOption(text: String, icon: Int, onClick: () -> Unit = {}) {
 }
 
 @Composable
-private fun TextSwitchMenuOption(
+private fun SwitchSettingOption(
     text: String,
     icon: Int,
     isChecked: Boolean = false,
@@ -249,3 +264,91 @@ private fun TextSwitchMenuOption(
         }
     }
 }
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+private fun DropdownSettingOption(
+    text: String,
+    icon: Int,
+    options: List<String>,
+    defaultSelectedIndex: Int = 0,
+    onOptionSelected: (String) -> Unit = {}
+) {
+    var expanded by remember { mutableStateOf(false) }
+    var selectedIndex by remember { mutableStateOf(defaultSelectedIndex) }
+
+    Card(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(4.dp),
+        shape = RoundedCornerShape(12.dp),
+        colors = CardDefaults.cardColors(
+            containerColor = MaterialTheme.colorScheme.surfaceVariant,
+        ),
+        elevation = CardDefaults.cardElevation(
+            defaultElevation = 6.dp
+        )
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier.padding(8.dp)
+        ) {
+            Icon(
+                painter = painterResource(icon),
+                contentDescription = "Font Icon",
+                tint = Color.Unspecified,
+                modifier = Modifier.size(20.dp)
+            )
+
+            Spacer(modifier = Modifier.width(8.dp))
+
+            Text(
+                text = text,
+                style = MaterialTheme.typography.bodyLarge
+            )
+
+            Spacer(modifier = Modifier.weight(1f))
+
+            ExposedDropdownMenuBox(
+                expanded = expanded,
+                onExpandedChange = { expanded = !expanded }) {
+
+                Row(
+                    modifier = Modifier.clickable {
+                        expanded = true
+                    },
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    Icon(
+                        painter = painterResource(R.drawable.ic_arrow_down),
+                        contentDescription = "Arrow down",
+                        tint = Color.Unspecified,
+                        modifier = Modifier.size(20.dp)
+                    )
+                    Spacer(modifier = Modifier.width(4.dp))
+                    Text(options[selectedIndex])
+                }
+
+                ExposedDropdownMenu(
+                    expanded = expanded,
+                    onDismissRequest = { expanded = false },
+                    modifier = Modifier
+                        .heightIn(max = 200.dp)
+                        .widthIn(min = 100.dp)
+                ) {
+                    options.forEachIndexed { index, selectionOption ->
+                        DropdownMenuItem(
+                            text = { Text(selectionOption) },
+                            onClick = {
+                                expanded = false
+                                selectedIndex = index
+                                onOptionSelected(selectionOption)
+                            },
+                        )
+                    }
+                }
+            }
+        }
+    }
+
+}

app/src/main/java/com/amrdeveloper/linkhub/ui/theme/Theme.kt

@@ -5,6 +5,7 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.darkColorScheme
 import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.text.font.FontFamily
 
 private val LightColors = lightColorScheme(
     primary = lightBlue600,
@@ -35,11 +36,12 @@ private val DarkColors = darkColorScheme(
 @Composable
 fun LinkhubAppTheme(
     isSystemInDarkTheme: Boolean = isSystemInDarkTheme(),
+    fontFamilyName: String = "Default",
     content: @Composable () -> Unit
 ) {
     MaterialTheme(
         colorScheme = if (isSystemInDarkTheme) DarkColors else LightColors,
-        typography = Typography,
+        typography = getLinkhubTypography(supportedFontFamilies[fontFamilyName] ?: FontFamily.Default),
         content = content
     )
 }