├── .gitignore ├── .idea ├── .gitignore ├── .name ├── compiler.xml ├── gradle.xml ├── misc.xml └── vcs.xml ├── README.md ├── app ├── .gitignore ├── build.gradle ├── proguard-rules.pro └── src │ ├── androidTest │ └── java │ │ └── com │ │ └── steve │ │ └── bottomnavigationcompose │ │ └── ExampleInstrumentedTest.kt │ ├── main │ ├── AndroidManifest.xml │ ├── java │ │ └── com │ │ │ └── steve │ │ │ └── bottomnavigationcompose │ │ │ ├── MainActivity.kt │ │ │ ├── Screen.kt │ │ │ ├── navigationscreen │ │ │ ├── Home.kt │ │ │ ├── Profile.kt │ │ │ ├── Search.kt │ │ │ └── Settings.kt │ │ │ └── ui │ │ │ └── theme │ │ │ ├── Color.kt │ │ │ ├── Shape.kt │ │ │ ├── Theme.kt │ │ │ └── Type.kt │ └── res │ │ ├── drawable-v24 │ │ └── ic_launcher_foreground.xml │ │ ├── drawable │ │ └── ic_launcher_background.xml │ │ ├── mipmap-anydpi-v26 │ │ ├── ic_launcher.xml │ │ └── ic_launcher_round.xml │ │ ├── mipmap-hdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── mipmap-mdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── mipmap-xhdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── mipmap-xxhdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── mipmap-xxxhdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── values-night │ │ └── themes.xml │ │ └── values │ │ ├── colors.xml │ │ ├── strings.xml │ │ └── themes.xml │ └── test │ └── java │ └── com │ └── steve │ └── bottomnavigationcompose │ └── ExampleUnitTest.kt ├── build.gradle ├── gradle.properties ├── gradle └── wrapper │ ├── gradle-wrapper.jar │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat └── settings.gradle /.gitignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | .gradle 3 | /local.properties 4 | /.idea/caches 5 | /.idea/libraries 6 | /.idea/modules.xml 7 | /.idea/workspace.xml 8 | /.idea/navEditor.xml 9 | /.idea/assetWizardSettings.xml 10 | .DS_Store 11 | /build 12 | /captures 13 | .externalNativeBuild 14 | .cxx 15 | local.properties 16 | -------------------------------------------------------------------------------- /.idea/.gitignore: -------------------------------------------------------------------------------- 1 | # Default ignored files 2 | /shelf/ 3 | /workspace.xml 4 | -------------------------------------------------------------------------------- /.idea/.name: -------------------------------------------------------------------------------- 1 | BottomNavigation Compose -------------------------------------------------------------------------------- /.idea/compiler.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/gradle.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 18 | 19 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 | 12 | 13 | 14 | 15 | 17 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Compose-Bottom-Navigation 2 | Implementing bottom navigation in jetpack compose 3 | 4 | ### Add the Navigation dependency 5 | Open the app's build file, found at ```app/build.gradle. ``` In the dependencies section, add the ```navigation-compose ``` dependency. 6 | 7 | ```kotlin 8 | 9 | dependencies { 10 | implementation "androidx.navigation:navigation-compose:2.4.0-alpha04" 11 | // other dependencies 12 | } 13 | 14 | ``` 15 | 16 | You can create a```NavController``` by using the ```rememberNavController() ```method in your composable: 17 | ```kotlin 18 | val navController = rememberNavController() 19 | 20 | ``` 21 | ### Add screens 22 | ```kotlin 23 | sealed class Screen (var route: String, @StringRes val resourceId: Int, var icon: ImageVector) { 24 | object Home : Screen("home", R.string.home, Icons.Default.Home) 25 | object Search : Screen("search",R.string.search, Icons.Default.Search ) 26 | object Settings : Screen("library", R.string.settings, Icons.Default.Settings) 27 | object Profile : Screen("profile", R.string.profile, Icons.Default.Person) 28 | } 29 | 30 | 31 | ``` 32 | 33 | Then place those items in a list that can be used by the BottomNavigationItem 34 | ```kotlin 35 | val items = listOf(Screen.Home, Screen.Search, Screen.Settings, Screen.Profile) 36 | ) 37 | ``` 38 | Set bottom navigation at your composable function 39 | ```kotlin 40 | val navController = rememberNavController() 41 | 42 | Scaffold( 43 | bottomBar = { 44 | BottomNavigation { 45 | 46 | val navBackStackEntry by navController.currentBackStackEntryAsState() 47 | val currentDestination = navBackStackEntry?.destination 48 | items.forEach { screen -> 49 | BottomNavigationItem( 50 | icon = { Icon(screen.icon, contentDescription = null) }, 51 | label = { Text(stringResource(screen.resourceId)) }, 52 | selected = currentDestination?.hierarchy?.any { it.route == screen.route } == true, 53 | onClick = { 54 | navController.navigate(screen.route) { 55 | // Pop up to the start destination of the graph to 56 | // avoid building up a large stack of destinations 57 | // on the back stack as users select items 58 | popUpTo(navController.graph.findStartDestination().id) { 59 | saveState = true 60 | } 61 | // Avoid multiple copies of the same destination when 62 | // reselecting the same item 63 | launchSingleTop = true 64 | // Restore state when reselecting a previously selected item 65 | restoreState = true 66 | } 67 | } 68 | ) 69 | } 70 | 71 | } 72 | 73 | } 74 | ) { innerPadding -> 75 | NavHost(navController, startDestination = Screen.Home.route, Modifier.padding(innerPadding)) { 76 | composable(Screen.Home.route) { Home(navController) } 77 | composable(Screen.Search.route) { Search(navController) } 78 | composable(Screen.Settings.route) {Settings(navController) } 79 | composable(Screen.Profile.route) { Profile(navController) } 80 | } 81 | } 82 | } 83 | 84 | ``` 85 | -------------------------------------------------------------------------------- /app/.gitignore: -------------------------------------------------------------------------------- 1 | /build -------------------------------------------------------------------------------- /app/build.gradle: -------------------------------------------------------------------------------- 1 | plugins { 2 | id 'com.android.application' 3 | id 'kotlin-android' 4 | } 5 | 6 | android { 7 | compileSdk 30 8 | 9 | defaultConfig { 10 | applicationId "com.steve.bottomnavigationcompose" 11 | minSdk 21 12 | targetSdk 30 13 | versionCode 1 14 | versionName "1.0" 15 | 16 | testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner" 17 | vectorDrawables { 18 | useSupportLibrary true 19 | } 20 | } 21 | 22 | buildTypes { 23 | release { 24 | minifyEnabled false 25 | proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro' 26 | } 27 | } 28 | compileOptions { 29 | sourceCompatibility JavaVersion.VERSION_1_8 30 | targetCompatibility JavaVersion.VERSION_1_8 31 | } 32 | kotlinOptions { 33 | jvmTarget = '1.8' 34 | useIR = true 35 | } 36 | buildFeatures { 37 | compose true 38 | } 39 | composeOptions { 40 | kotlinCompilerExtensionVersion compose_version 41 | kotlinCompilerVersion '1.5.10' 42 | } 43 | packagingOptions { 44 | resources { 45 | excludes += '/META-INF/{AL2.0,LGPL2.1}' 46 | } 47 | } 48 | } 49 | 50 | dependencies { 51 | 52 | implementation 'androidx.core:core-ktx:1.6.0' 53 | implementation 'androidx.appcompat:appcompat:1.3.1' 54 | implementation 'com.google.android.material:material:1.4.0' 55 | implementation "androidx.compose.ui:ui:$compose_version" 56 | implementation "androidx.compose.material:material:$compose_version" 57 | implementation "androidx.compose.ui:ui-tooling-preview:$compose_version" 58 | implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1' 59 | implementation 'androidx.activity:activity-compose:1.3.1' 60 | testImplementation 'junit:junit:4.+' 61 | androidTestImplementation 'androidx.test.ext:junit:1.1.3' 62 | androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0' 63 | androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version" 64 | debugImplementation "androidx.compose.ui:ui-tooling:$compose_version" 65 | 66 | implementation "androidx.navigation:navigation-compose:2.4.0-alpha06" 67 | } -------------------------------------------------------------------------------- /app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # You can control the set of applied configuration files using the 3 | # proguardFiles setting in build.gradle. 4 | # 5 | # For more details, see 6 | # http://developer.android.com/guide/developing/tools/proguard.html 7 | 8 | # If your project uses WebView with JS, uncomment the following 9 | # and specify the fully qualified class name to the JavaScript interface 10 | # class: 11 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 12 | # public *; 13 | #} 14 | 15 | # Uncomment this to preserve the line number information for 16 | # debugging stack traces. 17 | #-keepattributes SourceFile,LineNumberTable 18 | 19 | # If you keep the line number information, uncomment this to 20 | # hide the original source file name. 21 | #-renamesourcefileattribute SourceFile -------------------------------------------------------------------------------- /app/src/androidTest/java/com/steve/bottomnavigationcompose/ExampleInstrumentedTest.kt: -------------------------------------------------------------------------------- 1 | package com.steve.bottomnavigationcompose 2 | 3 | import androidx.test.platform.app.InstrumentationRegistry 4 | import androidx.test.ext.junit.runners.AndroidJUnit4 5 | 6 | import org.junit.Test 7 | import org.junit.runner.RunWith 8 | 9 | import org.junit.Assert.* 10 | 11 | /** 12 | * Instrumented test, which will execute on an Android device. 13 | * 14 | * See [testing documentation](http://d.android.com/tools/testing). 15 | */ 16 | @RunWith(AndroidJUnit4::class) 17 | class ExampleInstrumentedTest { 18 | @Test 19 | fun useAppContext() { 20 | // Context of the app under test. 21 | val appContext = InstrumentationRegistry.getInstrumentation().targetContext 22 | assertEquals("com.steve.bottomnavigationcompose", appContext.packageName) 23 | } 24 | } -------------------------------------------------------------------------------- /app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 12 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /app/src/main/java/com/steve/bottomnavigationcompose/MainActivity.kt: -------------------------------------------------------------------------------- 1 | package com.steve.bottomnavigationcompose 2 | 3 | import android.os.Bundle 4 | import androidx.activity.ComponentActivity 5 | import androidx.activity.compose.setContent 6 | import androidx.compose.foundation.ExperimentalFoundationApi 7 | import androidx.compose.foundation.layout.padding 8 | import androidx.compose.material.* 9 | import androidx.compose.runtime.Composable 10 | import androidx.compose.runtime.getValue 11 | import androidx.compose.ui.Modifier 12 | import androidx.compose.ui.graphics.toArgb 13 | import androidx.compose.ui.res.stringResource 14 | import androidx.compose.ui.tooling.preview.Preview 15 | import androidx.navigation.NavDestination.Companion.hierarchy 16 | import androidx.navigation.NavGraph.Companion.findStartDestination 17 | import androidx.navigation.compose.NavHost 18 | import androidx.navigation.compose.composable 19 | import androidx.navigation.compose.currentBackStackEntryAsState 20 | import androidx.navigation.compose.rememberNavController 21 | import com.steve.bottomnavigationcompose.ui.theme.BottomNavigationComposeTheme 22 | import com.steve.bottomnavigationcompose.ui.theme.DeepBlue 23 | 24 | class MainActivity : ComponentActivity() { 25 | @ExperimentalFoundationApi 26 | override fun onCreate(savedInstanceState: Bundle?) { 27 | super.onCreate(savedInstanceState) 28 | setContent { 29 | // window.statusBarColor=MaterialTheme.colors.background.toArgb() 30 | // window.navigationBarColor=MaterialTheme.colors.background.toArgb() 31 | BottomNavigationComposeTheme { 32 | // A surface container using the 'background' color from the theme 33 | Surface(color = DeepBlue) { 34 | BottomNavigation() 35 | } 36 | } 37 | } 38 | } 39 | } 40 | 41 | @ExperimentalFoundationApi 42 | @Composable 43 | fun BottomNavigation() { 44 | val items = listOf(Screen.Home, Screen.Search, Screen.Settings, Screen.Profile) 45 | 46 | val navController = rememberNavController() 47 | 48 | Scaffold( 49 | bottomBar = { 50 | BottomNavigation { 51 | 52 | val navBackStackEntry by navController.currentBackStackEntryAsState() 53 | val currentDestination = navBackStackEntry?.destination 54 | items.forEach { screen -> 55 | BottomNavigationItem( 56 | icon = { Icon(screen.icon, contentDescription = null) }, 57 | label = { Text(stringResource(screen.resourceId)) }, 58 | selected = currentDestination?.hierarchy?.any { it.route == screen.route } == true, 59 | onClick = { 60 | navController.navigate(screen.route) { 61 | // Pop up to the start destination of the graph to 62 | // avoid building up a large stack of destinations 63 | // on the back stack as users select items 64 | popUpTo(navController.graph.findStartDestination().id) { 65 | saveState = true 66 | } 67 | // Avoid multiple copies of the same destination when 68 | // reselecting the same item 69 | launchSingleTop = true 70 | // Restore state when reselecting a previously selected item 71 | restoreState = true 72 | } 73 | } 74 | ) 75 | } 76 | 77 | } 78 | 79 | } 80 | ) { innerPadding -> 81 | NavHost(navController, startDestination = Screen.Home.route, Modifier.padding(innerPadding)) { 82 | composable(Screen.Home.route) { Home(navController) } 83 | composable(Screen.Search.route) { Search(navController) } 84 | composable(Screen.Settings.route) {Settings(navController) } 85 | composable(Screen.Profile.route) { Profile(navController) } 86 | } 87 | } 88 | } 89 | 90 | 91 | 92 | 93 | @ExperimentalFoundationApi 94 | @Preview(showBackground = true) 95 | @Composable 96 | fun DefaultPreview() { 97 | BottomNavigationComposeTheme { 98 | BottomNavigation() 99 | } 100 | } -------------------------------------------------------------------------------- /app/src/main/java/com/steve/bottomnavigationcompose/Screen.kt: -------------------------------------------------------------------------------- 1 | package com.steve.bottomnavigationcompose 2 | 3 | import androidx.annotation.StringRes 4 | import androidx.compose.material.icons.Icons 5 | import androidx.compose.material.icons.filled.* 6 | import androidx.compose.ui.graphics.vector.ImageVector 7 | 8 | sealed class Screen (var route: String, @StringRes val resourceId: Int, var icon: ImageVector) { 9 | object Home : Screen("home", R.string.home, Icons.Default.Home) 10 | object Search : Screen("search",R.string.search, Icons.Default.Search ) 11 | object Settings : Screen("library", R.string.settings, Icons.Default.Settings) 12 | object Profile : Screen("profile", R.string.profile, Icons.Default.Person) 13 | } 14 | -------------------------------------------------------------------------------- /app/src/main/java/com/steve/bottomnavigationcompose/navigationscreen/Home.kt: -------------------------------------------------------------------------------- 1 | package com.steve.bottomnavigationcompose 2 | 3 | import androidx.compose.foundation.ExperimentalFoundationApi 4 | import androidx.compose.foundation.background 5 | import androidx.compose.foundation.clickable 6 | import androidx.compose.foundation.layout.* 7 | import androidx.compose.foundation.lazy.LazyRow 8 | import androidx.compose.foundation.lazy.LazyVerticalGrid 9 | import androidx.compose.foundation.shape.CircleShape 10 | import androidx.compose.foundation.shape.RoundedCornerShape 11 | import androidx.compose.material.* 12 | import androidx.compose.material.icons.Icons 13 | import androidx.compose.material.icons.filled.PlayArrow 14 | import androidx.compose.material.icons.filled.Search 15 | import androidx.compose.material.icons.filled.Star 16 | import androidx.compose.runtime.* 17 | import androidx.compose.ui.Alignment 18 | import androidx.compose.ui.Modifier 19 | import androidx.compose.ui.draw.clip 20 | import androidx.compose.ui.graphics.Color 21 | import androidx.compose.ui.tooling.preview.Preview 22 | import androidx.compose.ui.unit.dp 23 | import androidx.compose.ui.unit.sp 24 | import androidx.navigation.NavHostController 25 | import androidx.navigation.compose.rememberNavController 26 | import com.steve.bottomnavigationcompose.ui.theme.* 27 | 28 | 29 | 30 | @ExperimentalFoundationApi 31 | @Composable 32 | fun Home(navController: NavHostController) { 33 | Box(modifier = Modifier 34 | .background(DeepBlue) 35 | .fillMaxHeight()) { 36 | Column { 37 | Gretings() 38 | ChipsSection(chips = listOf("Retrofit", "Paging","WorkManager","Navigation", "Dager-Hilt","Koin")) 39 | CurrentMedia() 40 | 41 | 42 | } 43 | } 44 | } 45 | 46 | 47 | 48 | 49 | @Composable 50 | fun Gretings(name:String="Stephen Chacha"){ 51 | Row( 52 | horizontalArrangement = Arrangement.SpaceBetween, 53 | verticalAlignment = Alignment.CenterVertically, 54 | modifier = Modifier 55 | .padding(15.dp) 56 | .fillMaxWidth()) { 57 | 58 | Column(verticalArrangement = Arrangement.Center) { 59 | 60 | Text(text = "Good Morning, $name", 61 | style = MaterialTheme.typography.h5, 62 | color = Color.White) 63 | 64 | Text(text = "Good Day!", 65 | style = MaterialTheme.typography.body2, 66 | color = Color.White) 67 | } 68 | Icon(imageVector = Icons.Filled.Search, contentDescription ="Play" , 69 | tint = Color.Black, 70 | modifier = Modifier.size(16.dp)) 71 | 72 | 73 | } 74 | } 75 | 76 | @Composable 77 | fun ChipsSection(chips: List){ 78 | var selectChip by remember { 79 | mutableStateOf(0) 80 | } 81 | LazyRow{ 82 | items (chips.size){ 83 | Box(modifier = Modifier 84 | .padding(start = 15.dp, top = 15.dp, bottom = 15.dp) 85 | .clickable { 86 | selectChip = it 87 | 88 | } 89 | .clip(RoundedCornerShape(10.dp)) 90 | .background( 91 | if (selectChip == it) ButtonBlue 92 | else DarkerButtonBlue 93 | ) 94 | .padding(15.dp) 95 | ) 96 | { 97 | Text(text = chips[it],color= TextWhite) 98 | } 99 | 100 | } 101 | } 102 | 103 | } 104 | @Composable 105 | fun CurrentMedia(color: Color= LightRed){ 106 | 107 | Row(verticalAlignment = Alignment.CenterVertically, 108 | horizontalArrangement = Arrangement.SpaceBetween, 109 | modifier = Modifier 110 | .padding(15.dp) 111 | .clip(RoundedCornerShape(10.dp)) 112 | .background(color) 113 | .fillMaxWidth() 114 | .padding(horizontal = 15.dp, vertical = 20.dp)) { 115 | 116 | Column { 117 | Text(text = "Jetpack Compose", 118 | style = MaterialTheme.typography.h5) 119 | 120 | Text(text = "Let's do it!", 121 | style = MaterialTheme.typography.h6, color= TextWhite) 122 | 123 | } 124 | Box(modifier = Modifier 125 | .size(40.dp) 126 | .clip(CircleShape) 127 | .background(ButtonBlue) 128 | .padding(10.dp)) 129 | { 130 | Icon(imageVector = Icons.Filled.Star, contentDescription ="Play" , 131 | tint = Color.White, 132 | modifier = Modifier.size(16.dp)) 133 | } 134 | 135 | 136 | } 137 | } 138 | 139 | 140 | 141 | 142 | @Preview(showBackground = true) 143 | @Composable 144 | fun PreviewHome(){ 145 | val navController = rememberNavController() 146 | BottomNavigation { 147 | 148 | } 149 | } 150 | 151 | -------------------------------------------------------------------------------- /app/src/main/java/com/steve/bottomnavigationcompose/navigationscreen/Profile.kt: -------------------------------------------------------------------------------- 1 | package com.steve.bottomnavigationcompose 2 | 3 | import androidx.compose.foundation.layout.Arrangement 4 | import androidx.compose.foundation.layout.Column 5 | import androidx.compose.foundation.layout.fillMaxWidth 6 | import androidx.compose.material.Text 7 | import androidx.compose.runtime.Composable 8 | import androidx.compose.ui.Alignment 9 | import androidx.compose.ui.Modifier 10 | import androidx.navigation.NavHostController 11 | 12 | @Composable 13 | fun Profile(navController: NavHostController) { 14 | Column (modifier = Modifier.fillMaxWidth(), 15 | horizontalAlignment = Alignment.CenterHorizontally,verticalArrangement = Arrangement.Center){ 16 | Text(text = "Profile") 17 | } 18 | 19 | } 20 | -------------------------------------------------------------------------------- /app/src/main/java/com/steve/bottomnavigationcompose/navigationscreen/Search.kt: -------------------------------------------------------------------------------- 1 | package com.steve.bottomnavigationcompose 2 | 3 | import androidx.compose.foundation.layout.Arrangement 4 | import androidx.compose.foundation.layout.Column 5 | import androidx.compose.foundation.layout.fillMaxWidth 6 | import androidx.compose.material.Text 7 | import androidx.compose.runtime.Composable 8 | import androidx.compose.ui.Alignment 9 | import androidx.compose.ui.Modifier 10 | import androidx.navigation.NavHostController 11 | 12 | @Composable 13 | fun Search(navController: NavHostController) { 14 | 15 | Column (modifier = Modifier.fillMaxWidth(), 16 | horizontalAlignment = Alignment.CenterHorizontally,verticalArrangement = Arrangement.Center){ 17 | Text(text = "Search") 18 | } 19 | 20 | } -------------------------------------------------------------------------------- /app/src/main/java/com/steve/bottomnavigationcompose/navigationscreen/Settings.kt: -------------------------------------------------------------------------------- 1 | package com.steve.bottomnavigationcompose 2 | 3 | import androidx.compose.foundation.layout.Arrangement 4 | import androidx.compose.foundation.layout.Column 5 | import androidx.compose.foundation.layout.fillMaxWidth 6 | import androidx.compose.material.Text 7 | import androidx.compose.runtime.Composable 8 | import androidx.compose.ui.Alignment 9 | import androidx.compose.ui.Modifier 10 | import androidx.navigation.NavController 11 | 12 | @Composable 13 | fun Settings(navController: NavController){ 14 | Column (modifier = Modifier.fillMaxWidth(), 15 | horizontalAlignment = Alignment.CenterHorizontally, 16 | verticalArrangement = Arrangement.Center){ 17 | Text(text = "Settings") 18 | } 19 | 20 | } 21 | -------------------------------------------------------------------------------- /app/src/main/java/com/steve/bottomnavigationcompose/ui/theme/Color.kt: -------------------------------------------------------------------------------- 1 | package com.steve.bottomnavigationcompose.ui.theme 2 | 3 | import androidx.compose.ui.graphics.Color 4 | 5 | val Purple200 = Color(0xFFBB86FC) 6 | val Purple500 = Color(0xff06164c) 7 | val Purple700 = Color(0xff06164c) 8 | val Teal200 = Color(0xFF03DAC5) 9 | 10 | 11 | val TextWhite = Color(0xffeeeeee) 12 | val DeepBlue = Color(0xff06164c) 13 | val ButtonBlue = Color(0xff505cf3) 14 | val DarkerButtonBlue = Color(0xff566894) 15 | val LightRed = Color(0xfffc879a) 16 | val AquaBlue = Color(0xff9aa5c4) 17 | val OrangeYellow1 = Color(0xfff0bd28) 18 | val OrangeYellow2 = Color(0xfff1c746) 19 | val OrangeYellow3 = Color(0xfff4cf65) 20 | val Beige1 = Color(0xfffdbda1) 21 | val Beige2 = Color(0xfffcaf90) 22 | val Beige3 = Color(0xfff9a27b) 23 | val LightGreen1 = Color(0xff54e1b6) 24 | val LightGreen2 = Color(0xff36ddab) 25 | val LightGreen3 = Color(0xff11d79b) 26 | val BlueViolet1 = Color(0xffaeb4fd) 27 | val BlueViolet2 = Color(0xff9fa5fe) 28 | val BlueViolet3 = Color(0xff8f98fd) 29 | -------------------------------------------------------------------------------- /app/src/main/java/com/steve/bottomnavigationcompose/ui/theme/Shape.kt: -------------------------------------------------------------------------------- 1 | package com.steve.bottomnavigationcompose.ui.theme 2 | 3 | import androidx.compose.foundation.shape.RoundedCornerShape 4 | import androidx.compose.material.Shapes 5 | import androidx.compose.ui.unit.dp 6 | 7 | val Shapes = Shapes( 8 | small = RoundedCornerShape(4.dp), 9 | medium = RoundedCornerShape(4.dp), 10 | large = RoundedCornerShape(0.dp) 11 | ) -------------------------------------------------------------------------------- /app/src/main/java/com/steve/bottomnavigationcompose/ui/theme/Theme.kt: -------------------------------------------------------------------------------- 1 | package com.steve.bottomnavigationcompose.ui.theme 2 | 3 | import androidx.compose.foundation.isSystemInDarkTheme 4 | import androidx.compose.material.MaterialTheme 5 | import androidx.compose.material.darkColors 6 | import androidx.compose.material.lightColors 7 | import androidx.compose.runtime.Composable 8 | 9 | private val DarkColorPalette = darkColors( 10 | primary = Purple200, 11 | primaryVariant = Purple700, 12 | secondary = Teal200 13 | ) 14 | 15 | private val LightColorPalette = lightColors( 16 | primary = Purple500, 17 | primaryVariant = Purple700, 18 | secondary = Teal200 19 | 20 | /* Other default colors to override 21 | background = Color.White, 22 | surface = Color.White, 23 | onPrimary = Color.White, 24 | onSecondary = Color.Black, 25 | onBackground = Color.Black, 26 | onSurface = Color.Black, 27 | */ 28 | ) 29 | 30 | @Composable 31 | fun BottomNavigationComposeTheme( 32 | darkTheme: Boolean = isSystemInDarkTheme(), 33 | content: @Composable() () -> Unit 34 | ) { 35 | val colors = if (darkTheme) { 36 | DarkColorPalette 37 | } else { 38 | LightColorPalette 39 | } 40 | 41 | MaterialTheme( 42 | colors = colors, 43 | typography = Typography, 44 | shapes = Shapes, 45 | content = content 46 | ) 47 | } -------------------------------------------------------------------------------- /app/src/main/java/com/steve/bottomnavigationcompose/ui/theme/Type.kt: -------------------------------------------------------------------------------- 1 | package com.steve.bottomnavigationcompose.ui.theme 2 | 3 | import androidx.compose.material.Typography 4 | import androidx.compose.ui.text.TextStyle 5 | import androidx.compose.ui.text.font.FontFamily 6 | import androidx.compose.ui.text.font.FontWeight 7 | import androidx.compose.ui.unit.sp 8 | 9 | // Set of Material typography styles to start with 10 | val Typography = Typography( 11 | body1 = TextStyle( 12 | fontFamily = FontFamily.Default, 13 | fontWeight = FontWeight.Normal, 14 | fontSize = 16.sp 15 | ) 16 | /* Other default text styles to override 17 | button = TextStyle( 18 | fontFamily = FontFamily.Default, 19 | fontWeight = FontWeight.W500, 20 | fontSize = 14.sp 21 | ), 22 | caption = TextStyle( 23 | fontFamily = FontFamily.Default, 24 | fontWeight = FontWeight.Normal, 25 | fontSize = 12.sp 26 | ) 27 | */ 28 | ) -------------------------------------------------------------------------------- /app/src/main/res/drawable-v24/ic_launcher_foreground.xml: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 15 | 18 | 21 | 22 | 23 | 24 | 30 | -------------------------------------------------------------------------------- /app/src/main/res/drawable/ic_launcher_background.xml: -------------------------------------------------------------------------------- 1 | 2 | 7 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 95 | 100 | 105 | 110 | 115 | 120 | 125 | 130 | 135 | 140 | 145 | 150 | 155 | 160 | 165 | 170 | 171 | -------------------------------------------------------------------------------- /app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /app/src/main/res/mipmap-hdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevechacha/Compose-Bottom-Navigation/7d96a5dd0a93a1868205b1ceb058c00726892994/app/src/main/res/mipmap-hdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-hdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevechacha/Compose-Bottom-Navigation/7d96a5dd0a93a1868205b1ceb058c00726892994/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-mdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevechacha/Compose-Bottom-Navigation/7d96a5dd0a93a1868205b1ceb058c00726892994/app/src/main/res/mipmap-mdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-mdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevechacha/Compose-Bottom-Navigation/7d96a5dd0a93a1868205b1ceb058c00726892994/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xhdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevechacha/Compose-Bottom-Navigation/7d96a5dd0a93a1868205b1ceb058c00726892994/app/src/main/res/mipmap-xhdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevechacha/Compose-Bottom-Navigation/7d96a5dd0a93a1868205b1ceb058c00726892994/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxhdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevechacha/Compose-Bottom-Navigation/7d96a5dd0a93a1868205b1ceb058c00726892994/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevechacha/Compose-Bottom-Navigation/7d96a5dd0a93a1868205b1ceb058c00726892994/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevechacha/Compose-Bottom-Navigation/7d96a5dd0a93a1868205b1ceb058c00726892994/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevechacha/Compose-Bottom-Navigation/7d96a5dd0a93a1868205b1ceb058c00726892994/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/values-night/themes.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 16 | -------------------------------------------------------------------------------- /app/src/main/res/values/colors.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | #FFBB86FC 4 | #FF6200EE 5 | #FF3700B3 6 | #FF03DAC5 7 | #FF018786 8 | #FF000000 9 | #9C27B0 10 | -------------------------------------------------------------------------------- /app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | BottomNavigation Compose 3 | Home 4 | Search 5 | Settings 6 | Profile 7 | -------------------------------------------------------------------------------- /app/src/main/res/values/themes.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 16 | 17 | 21 | 22 |