added material icons comparison and offset

Gurupreet · Mar 14, 2021 · 4061b83 · 4061b83
1 parent 6e5ae8a
commit 4061b83
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 14 deletions.
diff --git a/FontAwesomeComposeLib/src/main/java/com/guru/fontawesomecomposelib/FaIcon.kt b/FontAwesomeComposeLib/src/main/java/com/guru/fontawesomecomposelib/FaIcon.kt
@@ -66,8 +66,18 @@ private fun getFontFamily(faIconType: FaIconType): FontFamily {
     }
 }
 
+/** @fun scaleIndependentFontSize: Since FA icons are font that requires Scale pixel
+ * to render and will resize on device font settings. We want to keep icon size
+ * constant to provided DP value so we calculate scale factor and cancel it if Any
+ *
+ * @materialIconOffset: FA icons at same dp taking more space then the Material Icon
+ * Since we will be using both icons side by side this value offset Fa Icons to stay in line
+ * with Material icons sizes.
+ */
+
 private fun scaleIndependentFontSize(sizeInDp: Dp, scaleFactor: Float): TextUnit {
-    return (sizeInDp.value / scaleFactor).sp
+    val materialIconOffset = 3.dp
+    return ((sizeInDp - materialIconOffset).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
@@ -12,8 +12,9 @@ import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.*
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.DateRange
-import androidx.compose.material.icons.filled.PlayArrow
+import androidx.compose.material.icons.filled.*
+import androidx.compose.material.icons.outlined.Email
+import androidx.compose.material.icons.outlined.ShoppingCart
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -52,6 +53,7 @@ fun Demo() {
         item { SolidIcons() }
         item { RegularIcons() }
         item { BrandIcons() }
+        item { MaterialVsFaIcons() }
         item { SizeIcons() }
         item { ColorIcons() }
         item { BackgroundClickable() }
@@ -128,7 +130,7 @@ fun BrandIcons() {
 @Composable
 fun SizeIcons() {
     Text(
-        text = "Icons Sizes",
+        text = "Icons Sizes (FA vs Material)",
         style = MaterialTheme.typography.h6.copy(fontSize = 14.sp),
         modifier = Modifier.padding(start = 16.dp, top = 16.dp)
     )
@@ -150,11 +152,42 @@ fun SizeIcons() {
             .padding(16.dp),
         horizontalArrangement = Arrangement.SpaceAround
     ) {
-        FaIcon(faIcon = FaIcons.Airbnb, size = 12.dp)
-        FaIcon(faIcon = FaIcons.Airbnb, size = 16.dp)
-        FaIcon(faIcon = FaIcons.Airbnb, size = 24.dp)
-        FaIcon(faIcon = FaIcons.Airbnb, size = 32.dp)
-        FaIcon(faIcon = FaIcons.Airbnb, size = 48.dp)
+        FaIcon(faIcon = FaIcons.HeartRegular, size = 12.dp)
+        FaIcon(faIcon = FaIcons.Star, size = 16.dp)
+        FaIcon(faIcon = FaIcons.Trash, size = 24.dp)
+        FaIcon(faIcon = FaIcons.HeartRegular, size = 32.dp)
+        FaIcon(faIcon = FaIcons.HeartRegular, size = 48.dp)
+    }
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(16.dp),
+        horizontalArrangement = Arrangement.SpaceAround
+    ) {
+        Icon(
+            imageVector = Icons.Default.FavoriteBorder,
+            contentDescription = null,
+            modifier = Modifier.size(12.dp)
+        )
+        Icon(
+            imageVector = Icons.Default.Star,
+            contentDescription = null,
+            modifier = Modifier.size(16.dp)
+        )
+        Icon(
+            imageVector = Icons.Default.Delete,
+            contentDescription = null,
+        )
+        Icon(
+            imageVector = Icons.Default.FavoriteBorder,
+            contentDescription = null,
+            modifier = Modifier.size(32.dp)
+        )
+        Icon(
+            imageVector = Icons.Default.FavoriteBorder,
+            contentDescription = null,
+            modifier = Modifier.size(48.dp)
+        )
     }
 }
 
@@ -240,24 +273,23 @@ fun IconsWithAppBar() {
 
 @Composable
 fun IconsInBottomNavigation() {
-    val iconSize = 20.dp
     BottomNavigation {
         BottomNavigationItem(
-            icon = { FaIcon(faIcon = FaIcons.Home, size = iconSize, tint = LocalContentColor
+            icon = { FaIcon(faIcon = FaIcons.Home, tint = LocalContentColor
                 .current.copy(alpha = LocalContentAlpha.current)) },
             selected = true,
             onClick = {},
             label = { Text(text = "Home") },
         )
         BottomNavigationItem(
-            icon = { FaIcon(faIcon = FaIcons.SearchLocation, size = iconSize, tint = LocalContentColor
+            icon = { FaIcon(faIcon = FaIcons.SearchLocation, tint = LocalContentColor
                 .current.copy(alpha = LocalContentAlpha.current)) },
             selected = false,
             onClick = {},
             label = { Text(text = "Discover") },
         )
         BottomNavigationItem(
-            icon = { FaIcon(faIcon = FaIcons.PersonBooth, size = iconSize, tint = LocalContentColor
+            icon = { FaIcon(faIcon = FaIcons.PersonBooth, tint = LocalContentColor
                 .current.copy(alpha = LocalContentAlpha.current)) },
             selected = false,
             onClick = {},
@@ -270,7 +302,9 @@ fun IconsInBottomNavigation() {
 @Composable
 fun IconsInListItem() {
         Row(modifier = Modifier.fillMaxWidth()) {
-            Column(modifier = Modifier.weight(1f).padding(8.dp)) {
+            Column(modifier = Modifier
+                .weight(1f)
+                .padding(8.dp)) {
                 Text(
                     text = "Title content",
                     style = MaterialTheme.typography.h6,
@@ -300,6 +334,37 @@ fun IconsInListItem() {
         }
 }
 
+@Composable
+fun MaterialVsFaIcons() {
+    Text(
+        text = "FaIcon vs Material Icons",
+        style = MaterialTheme.typography.h6.copy(fontSize = 14.sp),
+        modifier = Modifier.padding(start = 16.dp, top = 16.dp)
+    )
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(16.dp),
+        horizontalArrangement = Arrangement.SpaceAround
+    ) {
+        Column {
+            FaIcon(faIcon = FaIcons.HeartRegular)
+            Spacer(modifier = Modifier.height(8.dp))
+            Icon(imageVector = Icons.Default.FavoriteBorder, contentDescription = null)
+        }
+        Column {
+            FaIcon(faIcon = FaIcons.Envelope)
+            Spacer(modifier = Modifier.height(8.dp))
+            Icon(imageVector = Icons.Default.Email, contentDescription = null)
+        }
+        Column {
+            FaIcon(faIcon = FaIcons.CheckCircle)
+            Spacer(modifier = Modifier.height(8.dp))
+            Icon(imageVector = Icons.Filled.CheckCircle, contentDescription = null)
+        }
+    }
+}
+
 @Preview(showBackground = true)
 @Composable
 fun DefaultPreview() {