updated to not scale with font scaling of device

Gurupreet · Feb 24, 2021 · d470c47 · d470c47
1 parent 7e046a9
commit d470c47
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 10 deletions.
diff --git a/FontAwesomeComposeLib/src/main/java/com/guru/fontawesomecomposelib/FaIcon.kt b/FontAwesomeComposeLib/src/main/java/com/guru/fontawesomecomposelib/FaIcon.kt
@@ -1,14 +1,19 @@
 package com.guru.fontawesomecomposelib
 
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.text.BasicText
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.Font
 import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.TextUnit
+import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 
 /**
@@ -18,8 +23,8 @@ import androidx.compose.ui.unit.sp
  * @param faIconType supports solid, regular and brand icons.
  * @param iconType for checking which font to load for the given iconType
  * @param modifier to apply layout changes.
- * @param size Since these icons use fonts to render the Glyph we expect size to be in
- * TextUnit which is in sp. Default size is 24.sp
+ * @param size Provide the Icon size in DP. Since it's a font to not change Icon size with
+ * font scaling of device it ignores device font scaling.
  * @param tint By default it uses the onSurface color of the theme if not provided
  * You can provide any color you want to set tint for
  */
@@ -28,15 +33,25 @@ import androidx.compose.ui.unit.sp
 fun FaIcon(
     faIcon: FaIconType,
     modifier: Modifier = Modifier,
-    size: TextUnit = 24.sp,
+    size: Dp = 24.dp,
     tint: Color = Color.Unspecified
 ) {
+    val scaleFactor = LocalConfiguration.current.fontScale
+
+    val scaleIndependentFontSize =
+        remember(size) {
+            scaleIndependentFontSize(
+                sizeInDp = size,
+                scaleFactor = scaleFactor
+            )
+        }
+
     val faTextStyle =
         remember(faIcon) {
             TextStyle(
                 color = tint,
                 fontFamily = getFontFamily(faIcon),
-                fontSize = size
+                fontSize = scaleIndependentFontSize
             )
         }
 
@@ -61,6 +76,9 @@ private fun getFontFamily(faIconType: FaIconType): FontFamily {
     }
 }
 
+private fun scaleIndependentFontSize(sizeInDp: Dp, scaleFactor: Float): TextUnit {
+    return (sizeInDp.value/scaleFactor).sp
+}
 
 private fun Int.codePointToString() = this.toChar().toString()
 

diff --git a/app/src/main/java/com/guru/fontawesomecompose/MainActivity.kt b/app/src/main/java/com/guru/fontawesomecompose/MainActivity.kt
@@ -24,7 +24,7 @@ class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContent {
-            FontAwesomeComposeTheme(darkTheme = isSystemInDarkTheme()) {
+            FontAwesomeComposeTheme(darkTheme = false) {
                 // A surface container using the 'background' color from the theme
                 Surface(color = MaterialTheme.colors.background) {
                     Demo()
@@ -142,11 +142,11 @@ fun SizeIcons() {
             .padding(16.dp),
         horizontalArrangement = Arrangement.SpaceAround
     ) {
-        FaIcon(faIcon = FaIcons.Airbnb, size = 24.sp)
-        FaIcon(faIcon = FaIcons.Airbnb, size = 28.sp)
-        FaIcon(faIcon = FaIcons.Airbnb, size = 32.sp)
-        FaIcon(faIcon = FaIcons.Airbnb, size = 36.sp)
-        FaIcon(faIcon = FaIcons.Airbnb, size = 48.sp)
+        FaIcon(faIcon = FaIcons.Airbnb, size = 24.dp)
+        FaIcon(faIcon = FaIcons.Airbnb, size = 28.dp)
+        FaIcon(faIcon = FaIcons.Airbnb, size = 32.dp)
+        FaIcon(faIcon = FaIcons.Airbnb, size = 36.dp)
+        FaIcon(faIcon = FaIcons.Airbnb, size = 48.dp)
     }
 }