Implement New Figma Bottom App Bar

Author: Arinyadav1

cmp-navigation/src/commonMain/composeResources/values/strings.xml

@@ -24,4 +24,6 @@
     <string name="settings">Settings</string>
     <string name="about">About</string>
     <string name="offline_sync">Offline Sync</string>
+    <string name="powered_by">Powered By</string>
+
 </resources>

cmp-navigation/src/commonMain/kotlin/cmp/navigation/components/MifosBottomBar.kt

@@ -9,18 +9,67 @@
  */
 package cmp.navigation.components
 
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.BottomAppBar
 import androidx.compose.material3.BottomAppBarDefaults
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.ElevatedCard
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material.*
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.draw.dropShadow
+import androidx.compose.ui.draw.rotate
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.geometry.CornerRadius
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.geometry.Rect
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.BlendMode
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.graphics.Paint
+import androidx.compose.ui.graphics.drawscope.Fill
+import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.graphics.shadow.Shadow
+import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.testTag
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.DpOffset
 import androidx.compose.ui.unit.dp
 import cmp.navigation.authenticated.NavigationItem
+import com.mifos.core.designsystem.component.MifosCard
 import com.mifos.core.designsystem.component.MifosNavigationBarItem
 import com.mifos.core.designsystem.theme.AppColors
+import com.mifos.core.designsystem.theme.DesignToken
+import com.mifos.core.designsystem.theme.MifosTypography
+import core.designsystem.generated.resources.Res
+import core.designsystem.generated.resources.core_designsystem_app_title
+import org.jetbrains.compose.resources.painterResource
+import org.jetbrains.compose.resources.stringResource
+import org.jetbrains.compose.ui.tooling.preview.Preview
+import org.mifos.navigation.generated.resources.powered_by
+import org.mifos.navigation.generated.resources.topbarlogo
 
 @Composable
 fun MifosBottomBar(
@@ -50,3 +99,63 @@ fun MifosBottomBar(
         }
     }
 }
+
+@Composable
+fun MifosBottomBar(
+    modifier: Modifier = Modifier,
+    windowInsets: WindowInsets = BottomAppBarDefaults.windowInsets,
+) {
+    Box(
+        modifier = Modifier.dropShadow(
+            shape = DesignToken.shapes.bottomSheet,
+            shadow = Shadow(
+                radius = 10.dp,
+                spread = 5.dp,
+                color = Color.Gray.copy(alpha = 0.40f),
+                offset = DpOffset(x = 4.dp, 4.dp),
+            ),
+        )
+    ) {
+        BottomAppBar(
+            windowInsets = windowInsets,
+            modifier = modifier.fillMaxWidth().height(DesignToken.sizes.bottomAppBarHeight)
+                .clip(
+                    DesignToken.shapes.bottomSheet,
+                ),
+            containerColor = MaterialTheme.colorScheme.surfaceContainerLowest,
+        ) {
+            Box(
+                modifier.fillMaxSize().padding(DesignToken.padding.small),
+            ) {
+                Row(
+                    modifier = modifier.fillMaxWidth(),
+                    horizontalArrangement = Arrangement.Center,
+                    verticalAlignment = Alignment.CenterVertically,
+                ) {
+                    Text(
+                        text = stringResource(org.mifos.navigation.generated.resources.Res.string.powered_by) +" ",
+                        style = MifosTypography.tag,
+                        color = MaterialTheme.colorScheme.primary,
+                    )
+
+                    Image(
+                        painter = painterResource(org.mifos.navigation.generated.resources.Res.drawable.topbarlogo),
+                        contentDescription = null,
+                        colorFilter = ColorFilter.tint(
+                            MaterialTheme.colorScheme.primary,
+                            blendMode = BlendMode.SrcIn,
+                        ),
+                        modifier = Modifier.size(DesignToken.sizes.iconMiny),
+                    )
+
+                    Text(
+                        text = " " + stringResource(Res.string.core_designsystem_app_title),
+                        style = MifosTypography.tag,
+                        color = MaterialTheme.colorScheme.primary,
+                    )
+                }
+            }
+        }
+
+    }
+}

cmp-navigation/src/commonMain/kotlin/cmp/navigation/components/MifosScaffold.kt

@@ -87,13 +87,18 @@ fun MifosScaffold(
         containerColor = containerColor,
         contentColor = contentColor,
         bottomBar = {
-            AnimatedVisibility(
-                visible = isNavigationBarVisible,
-                enter = fadeIn() + slideInVertically(initialOffsetY = { it / 2 }),
-                exit = fadeOut() + slideOutVertically(targetOffsetY = { it / 2 }),
-            ) {
-                ScaffoldBottomAppBar(navigationData = requireNotNull(navigationData))
+            if(isNavigationBarVisible){
+                AnimatedVisibility(
+                    visible = isNavigationBarVisible,
+                    enter = fadeIn() + slideInVertically(initialOffsetY = { it / 2 }),
+                    exit = fadeOut() + slideOutVertically(targetOffsetY = { it / 2 }),
+                ) {
+                    ScaffoldBottomAppBar(navigationData = requireNotNull(navigationData))
+                }
+            }else{
+                MifosBottomBar()
             }
+
         },
         snackbarHost = {
             Box(modifier = Modifier.imePadding()) {

core/designsystem/src/commonMain/kotlin/com/mifos/core/designsystem/component/MifosScaffold.kt

@@ -50,7 +50,7 @@ fun MifosScaffold(
 ) {
     Scaffold(
         topBar = {},
-        bottomBar = bottomBar,
+        bottomBar = {},
         floatingActionButton = {
             floatingActionButtonContent?.let { content ->
                 FloatingActionButton(

core/designsystem/src/commonMain/kotlin/com/mifos/core/designsystem/theme/DesignToken.kt

@@ -89,6 +89,7 @@ data class AppSpacing(
     val medium: Dp = 12.dp,
     val large: Dp = 16.dp,
     val largeIncreased: Dp = 20.dp,
+    val largeMediumIncreased: Dp = 24.dp,
     val extraLarge: Dp = 28.dp,
     val extraLargeIncreased: Dp = 32.dp,
     val extraExtraLarge: Dp = 48.dp,
@@ -308,6 +309,7 @@ data class AppSizes(
     val topBarStandardHeight: Dp = 40.dp,
     val logoSizeTopAppBar: Dp = 28.dp,
     val topAppBarHeight: Dp = 85.dp,
+    val bottomAppBarHeight: Dp = 70.dp,
 )
 
 /**

gradle/libs.versions.toml

@@ -128,7 +128,7 @@ koin = "4.0.1-RC1"
 koinAnnotationsVersion = "1.4.0-RC4"
 
 # CMP Libraries
-compose-plugin = "1.8.2"
+compose-plugin = "1.9.0"
 coil = "3.2.0"
 backHandlerVersion = "2.1.0"
 constraintLayout = "0.4.0"