Feature/add meditation UI (#157)

* - add meditation demo ui

* update readme.md for addition of meditation gif ui

README.md

@@ -63,9 +63,9 @@ Spotify             |  Instagram Demo | Twitter, Gmail, Youtube
 :-------------------------:|:-------------------------: | :-------------------------: | :-------------------------:
 ![](https://media.giphy.com/media/IddlpOpdboqJwdhxMS/giphy.gif)  |  ![](https://media.giphy.com/media/XSh4SKvAgr6Moj3SDH/giphy.gif) | ![](https://media.giphy.com/media/sEe1vREivaK7ieMPYj/giphy.gif) | ![](https://media.giphy.com/media/n3UTF9SzLpBGneFyj3/giphy.gif)
 
-Gmail full             |  Tiktok
-:-------------------------:|:-------------------------:
-![](https://media.giphy.com/media/hrOVD7rbST5shclGkQ/giphy.gif)  |  ![](https://media.giphy.com/media/cimocpJnmSBeJIPxu2/giphy.gif)
+Gmail full             |  Tiktok             |  Meditation
+:-------------------------:|:-------------------------:|:-------------------------:
+![](https://media.giphy.com/media/hrOVD7rbST5shclGkQ/giphy.gif)  |  ![](https://media.giphy.com/media/cimocpJnmSBeJIPxu2/giphy.gif)  |  ![](https://media.giphy.com/media/4ijPfCItGfgdGJmTfA/giphy.gif)
 
 ### Apps with Api, Retrofit, Room, Flow, Livedata Integration
 CryptoApp MVVM             |  MovieApp MVI              | Dating APP DEMO UI         | Betty

app/build.gradle.kts

@@ -78,6 +78,7 @@ dependencies {
     implementation(project(":demos:paint"))
     implementation(project(":demos:cryptoapp:app"))
     implementation(project(":demos:moviesapp:app"))
+    implementation(project(":demos:meditation"))
     implementation(project(":templates:onboarding"))
     implementation(project(":templates:paymentcard"))
     implementation(project(":templates:pinlock"))

app/src/main/java/com/guru/composecookbook/ui/demoapps/DemoUIList.kt

@@ -20,6 +20,7 @@ import com.guru.composecookbook.data.DemoDataProvider
 import com.guru.composecookbook.datingapp.DatingHomeActivity
 import com.guru.composecookbook.gmail.ui.GmailActivity
 import com.guru.composecookbook.instagram.InstagramActivity
+import com.guru.composecookbook.meditation.MeditationActivity
 import com.guru.composecookbook.moviesapp.ui.home.MoviesHomeActivity
 import com.guru.composecookbook.paint.PaintActivity
 import com.guru.composecookbook.spotify.ui.home.SpotifyActivity
@@ -95,6 +96,11 @@ fun DemoUIList() {
                                         TiktokActivity.newIntent(context)
                                     )
                                 }
+                                "Meditation" -> {
+                                    context.startActivity(
+                                        MeditationActivity.newIntent(context)
+                                    )
+                                }
                                 else -> TODO("Create your activity to launch any new demo app")
                             }
                         },

data/src/main/java/com/guru/composecookbook/data/DemoDataProvider.kt

@@ -358,7 +358,8 @@ object DemoDataProvider {
         "MoviesApp+MVVM",
         "DatingApp",
         "TikTok",
-        "Paint"
+        "Paint",
+        "Meditation"
     )
 
 }

demos/meditation/.gitignore

@@ -0,0 +1 @@
+/build

demos/meditation/build.gradle.kts

@@ -0,0 +1,17 @@
+import com.guru.composecookbook.build.dependencies.addComposeOfficialDependencies
+import com.guru.composecookbook.build.dependencies.addCoreAndroidUiDependencies
+
+plugins {
+    /**
+     * See [common-compose-module-configs-script-plugin.gradle.kts] file
+     */
+    id("common-compose-module-configs-script-plugin")
+}
+
+dependencies {
+    implementation(project(":theme"))
+    implementation(project(":components:verticalgrid"))
+
+    addComposeOfficialDependencies()
+    addCoreAndroidUiDependencies()
+}

demos/meditation/proguard-rules.pro

@@ -0,0 +1,21 @@
+# Add project specific ProGuard rules here.
+# You can control the set of applied configuration files using the
+# proguardFiles setting in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile

demos/meditation/src/androidTest/java/com/guru/composecookbook/meditation/ExampleInstrumentedTest.kt

@@ -0,0 +1,24 @@
+package com.guru.composecookbook.meditation
+
+import androidx.test.platform.app.InstrumentationRegistry
+import androidx.test.ext.junit.runners.AndroidJUnit4
+
+import org.junit.Test
+import org.junit.runner.RunWith
+
+import org.junit.Assert.*
+
+/**
+ * Instrumented test, which will execute on an Android device.
+ *
+ * See [testing documentation](http://d.android.com/tools/testing).
+ */
+@RunWith(AndroidJUnit4::class)
+class ExampleInstrumentedTest {
+    @Test
+    fun useAppContext() {
+        // Context of the app under test.
+        val appContext = InstrumentationRegistry.getInstrumentation().targetContext
+        assertEquals("com.guru.composecookbook.meditation.test", appContext.packageName)
+    }
+}

demos/meditation/src/main/AndroidManifest.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="com.guru.composecookbook.meditation">
+
+    <application>
+        <activity
+            android:name=".MeditationActivity"
+            android:label="@string/title_activity_meditation"
+            android:theme="@style/Theme.ComposeCookBook.NoActionBar" />
+    </application>
+</manifest>

demos/meditation/src/main/java/com/guru/composecookbook/meditation/MeditaionActivity.kt

@@ -0,0 +1,26 @@
+package com.guru.composecookbook.meditation
+
+import android.content.Context
+import android.content.Intent
+import android.os.Bundle
+import androidx.activity.ComponentActivity
+import androidx.activity.compose.setContent
+import androidx.compose.foundation.ExperimentalFoundationApi
+import com.guru.composecookbook.meditation.ui.screen.MeditationHome
+import com.guru.composecookbook.meditation.ui.theme.MeditationAppTheme
+
+class MeditationActivity : ComponentActivity() {
+    @OptIn(ExperimentalFoundationApi::class)
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContent {
+            MeditationAppTheme {
+                MeditationHome()
+            }
+        }
+    }
+
+    companion object {
+        fun newIntent(context: Context) = Intent(context, MeditationActivity::class.java)
+    }
+}

demos/meditation/src/main/java/com/guru/composecookbook/meditation/ui/component/BottomMenuItem.kt

@@ -0,0 +1,62 @@
+package com.guru.composecookbook.meditation.ui.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Icon
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.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.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.guru.composecookbook.meditation.ui.model.BottomMenuContent
+import com.guru.composecookbook.meditation.ui.spacerHeight5
+import com.guru.composecookbook.meditation.ui.theme.AquaBlue
+import com.guru.composecookbook.meditation.ui.theme.ButtonBlue
+import com.guru.composecookbook.meditation.ui.theme.Gray
+
+@Composable
+fun BottomMenuItem(
+    item: BottomMenuContent,
+    isSelected: Boolean = false,
+    activeHighlightColor: Color = ButtonBlue,
+    activeTextColor: Color = Color.White,
+    inactiveTextColor: Color = AquaBlue,
+    onItemClick: () -> Unit
+) {
+    Column(
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center,
+    ) {
+        Box(
+            contentAlignment = Alignment.Center,
+            modifier = Modifier
+                .clip(RoundedCornerShape(15.dp))
+                .background(if (isSelected) activeHighlightColor else Color.Transparent)
+                .clickable {
+                    onItemClick()
+                }
+                .padding(15.dp)
+        ) {
+            Icon(
+                painter = painterResource(id = item.iconId),
+                contentDescription = item.title,
+                tint = if (isSelected) Color.White else Gray,
+                modifier = Modifier.size(20.dp)
+            )
+        }
+        spacerHeight5()
+        Text(
+            text = item.title,
+            style = MaterialTheme.typography.h2,
+            color = if(isSelected) activeTextColor else inactiveTextColor,
+            fontSize = 14.sp
+        )
+    }
+}

demos/meditation/src/main/java/com/guru/composecookbook/meditation/ui/component/CategoryItem.kt

@@ -0,0 +1,65 @@
+package com.guru.composecookbook.meditation.ui.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Icon
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.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.res.painterResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.guru.composecookbook.meditation.ui.model.Categories
+import com.guru.composecookbook.meditation.ui.spacerHeight5
+import com.guru.composecookbook.meditation.ui.theme.Blue
+import com.guru.composecookbook.meditation.ui.theme.DeepBlue
+import com.guru.composecookbook.meditation.ui.theme.Gray
+import com.guru.composecookbook.meditation.ui.theme.TextWhite
+import org.w3c.dom.Text
+
+@Composable
+fun CategoryItem(
+    category: Categories,
+    selectedItem : Boolean,
+    onItemClick: () -> Unit
+) {
+    Column(
+        horizontalAlignment = Alignment.CenterHorizontally,
+        modifier = Modifier
+            .padding(end = 15.dp)
+
+    ) {
+        Box(
+            modifier = Modifier
+                .clip(RoundedCornerShape(18.dp))
+                .background(color = if (selectedItem) Blue else Gray)
+                .clickable {
+                    onItemClick()
+                }
+        ) {
+            Icon(
+                painter = painterResource(id = category.icon),
+                contentDescription = "Category Icon",
+                tint = TextWhite,
+                modifier = Modifier.padding(18.dp).size(20.dp)
+            )
+        }
+        spacerHeight5()
+        Text(
+            text = category.title,
+            style = MaterialTheme.typography.body1,
+            fontSize = 12.sp,
+            color = if (selectedItem) DeepBlue else Gray,
+            fontWeight = FontWeight.Bold
+        )
+    }
+}