# AnimatedBottomBarCompose
**AnimatedBottomBarCompose** is a Jetpack Compose library that simplifies the creation of stylish
Bottom Navigation Bars with
customizable animations. It allows you to easily integrate attractive navigation bars into your
Android app, enhancing the user experience.
LINE INDICATOR
FILLED INDICATOR
DOT INDICATOR
WORM INDICATOR
## Features
- **Multiple Styles:** Choose from a variety of pre-defined styles for your Bottom Navigation Bar or
create your custom style.
- **Animation Options:** Choose from variety of eye-catching animations for your navigation bar
elements, making your app more engaging.
- **Customization:** Customize colors, icons, and animations to match your app's branding and
design.
## Configuration
Available on [Maven Central](https://central.sonatype.com/artifact/com.canopas.compose-animated-navigationbar/bottombar).
Add the dependency
```gradle
implementation 'com.canopas.compose-animated-navigationbar:bottombar:1.0.1'
```
## Sample Usage
Integrating **AnimatedBottomBarCompose** into your Android app is a breeze! Follow these simple
steps to get started:
1. First, set up your navigation controller:
```
val navController = rememberNavController()
val navBackStackEntry by navController.currentBackStackEntryAsState()
val currentRoute = navBackStackEntry?.destination?.route
val navigationItems = MainNavigation::class.nestedClasses.map {
it.objectInstance as MainNavigation
}
var selectedItem by remember { mutableIntStateOf(0) }
```
2. Next, add **AnimatedBottomBarCompose** to your app's Scaffold as the bottom bar:
```
Scaffold(
bottomBar = {
AnimatedBottomBar(
selectedItem = selectedItem,
itemSize = navigationItems.take(3).size,
containerColor = Color.LightGray,
indicatorStyle = IndicatorStyle.LINE
) {
navigationItems.forEachIndexed { index, navigationItem ->
BottomBarItem(
selected = currentRoute == navigationItem.route,
onClick = {
if (currentRoute != navigationItem.route) {
selectedItem = index
// ... Navigation Stuff
}
},
imageVector = navigationItem.icon,
label = navigationItem.title,
containerColor = Color.Transparent
)
}
}
}
) {
// ... (rest of your app content)
}
```
## Demo
To see **AnimatedBottomBarCompose** in action, check out
our [Sample](https://github.com/canopas/AnimatedBottomBarCompose/tree/master/app) app where you can
explore various styles and animation options.
## Bugs and Feedback
For bugs, questions and discussions please use
the [Github Issues](https://github.com/canopas/AnimatedBottomBarCompose/issues)
## Credits
**AnimatedBottomBarCompose** is owned and maintained by the [Canopas team](https://canopas.com/).
For project updates and releases, you can follow them on X
at [@canopassoftware](https://x.com/canopassoftware).
# Licence
```
Copyright 2023 Canopas Software LLP
Licensed under the Apache License, Version 2.0 (the "License");
You won't be using this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
```
================================================
FILE: app/.gitignore
================================================
/build
================================================
FILE: app/build.gradle.kts
================================================
plugins {
id("com.android.application")
id("org.jetbrains.kotlin.android")
}
android {
namespace = "com.example.animatedbottombarcompose"
compileSdk = 34
defaultConfig {
applicationId = "com.example.animatedbottombarcompose"
minSdk = 24
versionCode = 1
versionName = "1.0"
testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
vectorDrawables {
useSupportLibrary = true
}
}
buildTypes {
release {
isMinifyEnabled = false
proguardFiles(
getDefaultProguardFile("proguard-android-optimize.txt"),
"proguard-rules.pro",
)
}
}
compileOptions {
sourceCompatibility = JavaVersion.VERSION_11
targetCompatibility = JavaVersion.VERSION_11
}
kotlinOptions {
jvmTarget = "11"
}
buildFeatures {
compose = true
}
composeOptions {
kotlinCompilerExtensionVersion = "1.5.3"
}
packaging {
resources {
excludes += "/META-INF/{AL2.0,LGPL2.1}"
}
}
}
dependencies {
implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.8.1")
implementation("androidx.activity:activity-compose:1.9.0")
implementation(platform("androidx.compose:compose-bom:2024.05.00"))
implementation("androidx.compose.ui:ui")
implementation("androidx.compose.ui:ui-graphics")
implementation("androidx.navigation:navigation-compose:2.7.7")
implementation("androidx.compose.ui:ui-tooling-preview")
implementation("androidx.compose.material3:material3")
testImplementation("junit:junit:4.13.2")
androidTestImplementation("androidx.test.ext:junit:1.1.5")
androidTestImplementation("androidx.test.espresso:espresso-core:3.5.1")
androidTestImplementation(platform("androidx.compose:compose-bom:2024.05.00"))
androidTestImplementation("androidx.compose.ui:ui-test-junit4")
debugImplementation("androidx.compose.ui:ui-tooling")
debugImplementation("androidx.compose.ui:ui-test-manifest")
implementation(project(":bottombar"))
implementation(kotlin("reflect"))
}
================================================
FILE: app/proguard-rules.pro
================================================
# 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
================================================
FILE: app/src/androidTest/java/com/example/animatedbottombarcompose/ExampleInstrumentedTest.kt
================================================
package com.example.animatedbottombarcompose
import androidx.test.ext.junit.runners.AndroidJUnit4
import androidx.test.platform.app.InstrumentationRegistry
import org.junit.Assert.*
import org.junit.Test
import org.junit.runner.RunWith
/**
* 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.example.animatedbottombarcompose", appContext.packageName)
}
}
================================================
FILE: app/src/main/AndroidManifest.xml
================================================
================================================
FILE: app/src/main/java/com/example/animatedbottombarcompose/MainActivity.kt
================================================
package com.example.animatedbottombarcompose
import android.annotation.SuppressLint
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.Scaffold
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.graphics.Color
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.currentBackStackEntryAsState
import androidx.navigation.compose.rememberNavController
import com.example.animatedbottombarcompose.composables.Screen1
import com.example.animatedbottombarcompose.composables.Screen2
import com.example.animatedbottombarcompose.composables.Screen3
import com.example.animatedbottombarcompose.model.MainNavigation
import com.example.animatedbottombarcompose.ui.theme.AnimatedBottomBarComposeTheme
import com.example.bottombar.AnimatedBottomBar
import com.example.bottombar.components.BottomBarItem
import com.example.bottombar.model.IndicatorStyle
class MainActivity : ComponentActivity() {
@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
AnimatedBottomBarComposeTheme {
val navController = rememberNavController()
val navBackStackEntry by navController.currentBackStackEntryAsState()
val currentRoute = navBackStackEntry?.destination?.route
val navigationItems =
MainNavigation::class.nestedClasses.map {
it.objectInstance as MainNavigation
}
var selectedItem by remember { mutableIntStateOf(0) }
Scaffold(
bottomBar = {
AnimatedBottomBar(
selectedItem = selectedItem,
itemSize = navigationItems.take(3).size,
containerColor = Color.LightGray,
indicatorStyle = IndicatorStyle.DOT,
) {
navigationItems.take(3).forEachIndexed { index, navigationItem ->
BottomBarItem(
selected = currentRoute == navigationItem.route,
onClick = {
if (currentRoute != navigationItem.route) {
selectedItem = index
navController.popBackStack()
navController.navigate(navigationItem.route) {
navController.graph.startDestinationRoute?.let { route ->
popUpTo(route) {
saveState = true
}
}
launchSingleTop = true
restoreState = true
}
}
},
imageVector = navigationItem.icon,
label = navigationItem.title,
containerColor = Color.Transparent,
)
}
}
},
) {
NavHost(
navController = navController,
startDestination = MainNavigation.ScreenA.route,
) {
composable(MainNavigation.ScreenA.route) {
Screen1(navigationItems)
}
composable(MainNavigation.ScreenB.route) {
Screen2(navigationItems)
}
composable(MainNavigation.ScreenC.route) {
Screen3(navigationItems)
}
}
}
}
}
}
}
================================================
FILE: app/src/main/java/com/example/animatedbottombarcompose/composables/Screen1.kt
================================================
package com.example.animatedbottombarcompose.composables
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
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.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import com.example.animatedbottombarcompose.model.MainNavigation
import com.example.bottombar.AnimatedBottomBar
import com.example.bottombar.components.BottomBarItem
import com.example.bottombar.model.IndicatorDirection
import com.example.bottombar.model.IndicatorStyle
import com.example.bottombar.model.ItemStyle
import com.example.bottombar.model.VisibleItem
@Composable
fun Screen1(navigationItems: List) {
var selectedItem by remember { mutableIntStateOf(0) }
Column(
modifier =
Modifier
.fillMaxSize()
.verticalScroll(rememberScrollState()),
verticalArrangement = Arrangement.Top,
) {
Text(
text = "**Checkout INDICATORS with different STYLES(animations)**",
style = MaterialTheme.typography.titleMedium,
modifier =
Modifier
.fillMaxWidth()
.padding(top = 20.dp),
textAlign = TextAlign.Center,
)
Spacer(modifier = Modifier.height(50.dp))
Text(
text = "LINE INDICATOR",
style = MaterialTheme.typography.headlineSmall,
modifier = Modifier.fillMaxWidth(),
textAlign = TextAlign.Center,
)
Spacer(modifier = Modifier.height(25.dp))
AnimatedBottomBar(
selectedItem = selectedItem,
itemSize = navigationItems.size,
indicatorStyle = IndicatorStyle.LINE,
containerShape = RoundedCornerShape(topStart = 10.dp, topEnd = 10.dp),
containerColor = MaterialTheme.colorScheme.secondaryContainer,
) {
navigationItems.forEachIndexed { index, navigationItem ->
val selected = index == selectedItem
BottomBarItem(
selected = selected,
onClick = {
selectedItem = index
},
imageVector = navigationItem.icon,
label = navigationItem.title,
visibleItem = VisibleItem.ICON,
itemStyle = ItemStyle.STYLE1,
)
}
}
Spacer(modifier = Modifier.height(25.dp))
AnimatedBottomBar(
selectedItem = selectedItem,
itemSize = navigationItems.size,
indicatorStyle = IndicatorStyle.LINE,
containerShape = RoundedCornerShape(topStart = 10.dp, topEnd = 10.dp),
containerColor = MaterialTheme.colorScheme.secondaryContainer,
) {
navigationItems.forEachIndexed { index, navigationItem ->
val selected = index == selectedItem
BottomBarItem(
selected = selected,
onClick = {
selectedItem = index
},
imageVector = navigationItem.icon,
label = navigationItem.title,
visibleItem = VisibleItem.LABEL,
itemStyle = ItemStyle.STYLE1,
)
}
}
Spacer(modifier = Modifier.height(25.dp))
AnimatedBottomBar(
selectedItem = selectedItem,
itemSize = navigationItems.size,
indicatorStyle = IndicatorStyle.LINE,
containerShape = RoundedCornerShape(topStart = 10.dp, topEnd = 10.dp),
containerColor = MaterialTheme.colorScheme.secondaryContainer,
) {
navigationItems.forEachIndexed { index, navigationItem ->
val selected = index == selectedItem
BottomBarItem(
selected = selected,
onClick = {
selectedItem = index
},
imageVector = navigationItem.icon,
label = navigationItem.title,
visibleItem = VisibleItem.BOTH,
itemStyle = ItemStyle.STYLE1,
)
}
}
Spacer(modifier = Modifier.height(25.dp))
AnimatedBottomBar(
selectedItem = selectedItem,
itemSize = navigationItems.size,
indicatorStyle = IndicatorStyle.LINE,
containerShape = RoundedCornerShape(topStart = 10.dp, topEnd = 10.dp),
indicatorDirection = IndicatorDirection.BOTTOM,
containerColor = MaterialTheme.colorScheme.secondaryContainer,
) {
navigationItems.forEachIndexed { index, navigationItem ->
val selected = index == selectedItem
BottomBarItem(
selected = selected,
onClick = {
selectedItem = index
},
imageVector = navigationItem.icon,
label = navigationItem.title,
visibleItem = VisibleItem.ICON,
itemStyle = ItemStyle.STYLE3,
)
}
}
Spacer(modifier = Modifier.height(25.dp))
AnimatedBottomBar(
selectedItem = selectedItem,
itemSize = navigationItems.size,
indicatorStyle = IndicatorStyle.LINE,
containerShape = RoundedCornerShape(topStart = 10.dp, topEnd = 10.dp),
indicatorDirection = IndicatorDirection.BOTTOM,
containerColor = MaterialTheme.colorScheme.secondaryContainer,
) {
navigationItems.forEachIndexed { index, navigationItem ->
val selected = index == selectedItem
BottomBarItem(
selected = selected,
onClick = {
selectedItem = index
},
imageVector = navigationItem.icon,
label = navigationItem.title,
visibleItem = VisibleItem.LABEL,
itemStyle = ItemStyle.STYLE4,
)
}
}
Spacer(modifier = Modifier.height(25.dp))
AnimatedBottomBar(
selectedItem = selectedItem,
itemSize = navigationItems.size,
indicatorStyle = IndicatorStyle.LINE,
containerShape = RoundedCornerShape(topStart = 10.dp, topEnd = 10.dp),
indicatorDirection = IndicatorDirection.BOTTOM,
containerColor = MaterialTheme.colorScheme.secondaryContainer,
) {
navigationItems.forEachIndexed { index, navigationItem ->
val selected = index == selectedItem
BottomBarItem(
selected = selected,
onClick = {
selectedItem = index
},
imageVector = navigationItem.icon,
label = navigationItem.title,
visibleItem = VisibleItem.BOTH,
itemStyle = ItemStyle.STYLE5,
)
}
}
Spacer(modifier = Modifier.height(50.dp))
Text(
text = "DOT INDICATOR",
style = MaterialTheme.typography.headlineSmall,
modifier = Modifier.fillMaxWidth(),
textAlign = TextAlign.Center,
)
Spacer(modifier = Modifier.height(25.dp))
AnimatedBottomBar(
selectedItem = selectedItem,
itemSize = navigationItems.size,
containerColor = MaterialTheme.colorScheme.errorContainer,
indicatorStyle = IndicatorStyle.DOT,
) {
navigationItems.forEachIndexed { index, navigationItem ->
val selected = index == selectedItem
BottomBarItem(
selected = selected,
onClick = {
selectedItem = index
},
imageVector = navigationItem.icon,
label = navigationItem.title,
itemStyle = ItemStyle.STYLE1,
)
}
}
Spacer(modifier = Modifier.height(25.dp))
AnimatedBottomBar(
selectedItem = selectedItem,
itemSize = navigationItems.size,
containerColor = MaterialTheme.colorScheme.errorContainer,
indicatorStyle = IndicatorStyle.DOT,
) {
navigationItems.forEachIndexed { index, navigationItem ->
val selected = index == selectedItem
BottomBarItem(
selected = selected,
onClick = {
selectedItem = index
},
imageVector = navigationItem.icon,
label = navigationItem.title,
iconColor = if (selected) Color.Black else Color.Black.copy(0.8f),
textColor = if (selected) Color.Black else Color.Black.copy(0.8f),
itemStyle = ItemStyle.STYLE3,
)
}
}
Spacer(modifier = Modifier.height(25.dp))
AnimatedBottomBar(
selectedItem = selectedItem,
itemSize = navigationItems.size,
containerColor = MaterialTheme.colorScheme.errorContainer,
indicatorStyle = IndicatorStyle.DOT,
) {
navigationItems.forEachIndexed { index, navigationItem ->
val selected = index == selectedItem
BottomBarItem(
selected = selected,
onClick = {
selectedItem = index
},
imageVector = navigationItem.icon,
label = navigationItem.title,
iconColor = if (selected) Color.Black else Color.Black.copy(0.8f),
textColor = if (selected) Color.Black else Color.Black.copy(0.8f),
itemStyle = ItemStyle.STYLE4,
activeIndicatorColor = Color.White,
)
}
}
Spacer(modifier = Modifier.height(25.dp))
AnimatedBottomBar(
selectedItem = selectedItem,
itemSize = navigationItems.size,
containerColor = MaterialTheme.colorScheme.errorContainer,
indicatorStyle = IndicatorStyle.DOT,
) {
navigationItems.forEachIndexed { index, navigationItem ->
val selected = index == selectedItem
BottomBarItem(
selected = selected,
onClick = {
selectedItem = index
},
imageVector = navigationItem.icon,
label = navigationItem.title,
iconColor = if (selected) Color.Black else Color.Black.copy(0.8f),
textColor = if (selected) Color.Black else Color.Black.copy(0.8f),
itemStyle = ItemStyle.STYLE5,
activeIndicatorColor = Color.White,
)
}
}
Spacer(modifier = Modifier.height(50.dp))
Text(
text = "WORM INDICATOR",
style = MaterialTheme.typography.headlineSmall,
modifier = Modifier.fillMaxWidth(),
textAlign = TextAlign.Center,
)
Spacer(modifier = Modifier.height(25.dp))
AnimatedBottomBar(
selectedItem = selectedItem,
itemSize = navigationItems.size,
containerColor = MaterialTheme.colorScheme.tertiaryContainer,
indicatorStyle = IndicatorStyle.WORM,
) {
navigationItems.forEachIndexed { index, navigationItem ->
val selected = index == selectedItem
BottomBarItem(
selected = selected,
onClick = {
selectedItem = index
},
imageVector = navigationItem.icon,
label = navigationItem.title,
iconColor = if (selected) Color.Black else Color.Black.copy(0.8f),
textColor = if (selected) Color.Black else Color.Black.copy(0.8f),
itemStyle = ItemStyle.STYLE1,
)
}
}
Spacer(modifier = Modifier.height(25.dp))
AnimatedBottomBar(
selectedItem = selectedItem,
itemSize = navigationItems.size,
containerColor = MaterialTheme.colorScheme.tertiaryContainer,
indicatorStyle = IndicatorStyle.WORM,
) {
navigationItems.forEachIndexed { index, navigationItem ->
val selected = index == selectedItem
BottomBarItem(
selected = selected,
onClick = {
selectedItem = index
},
imageVector = navigationItem.icon,
label = navigationItem.title,
iconColor = if (selected) Color.Black else Color.Black.copy(0.8f),
textColor = if (selected) Color.Black else Color.Black.copy(0.8f),
itemStyle = ItemStyle.STYLE3,
)
}
}
Spacer(modifier = Modifier.height(25.dp))
AnimatedBottomBar(
selectedItem = selectedItem,
itemSize = navigationItems.size,
containerColor = MaterialTheme.colorScheme.tertiaryContainer,
indicatorStyle = IndicatorStyle.WORM,
) {
navigationItems.forEachIndexed { index, navigationItem ->
val selected = index == selectedItem
BottomBarItem(
selected = selected,
onClick = {
selectedItem = index
},
imageVector = navigationItem.icon,
label = navigationItem.title,
iconColor = if (selected) Color.Black else Color.Black.copy(0.8f),
textColor = if (selected) Color.Black else Color.Black.copy(0.8f),
itemStyle = ItemStyle.STYLE4,
)
}
}
Spacer(modifier = Modifier.height(25.dp))
AnimatedBottomBar(
selectedItem = selectedItem,
itemSize = navigationItems.size,
containerColor = MaterialTheme.colorScheme.tertiaryContainer,
indicatorStyle = IndicatorStyle.WORM,
) {
navigationItems.forEachIndexed { index, navigationItem ->
val selected = index == selectedItem
BottomBarItem(
selected = selected,
onClick = {
selectedItem = index
},
imageVector = navigationItem.icon,
label = navigationItem.title,
iconColor = if (selected) Color.Black else Color.Black.copy(0.8f),
textColor = if (selected) Color.Black else Color.Black.copy(0.8f),
itemStyle = ItemStyle.STYLE5,
activeIndicatorColor = Color.White,
)
}
}
Spacer(modifier = Modifier.height(50.dp))
Text(
text = "FILLED INDICATOR",
style = MaterialTheme.typography.headlineSmall,
modifier = Modifier.fillMaxWidth(),
textAlign = TextAlign.Center,
)
Spacer(modifier = Modifier.height(25.dp))
AnimatedBottomBar(
selectedItem = selectedItem,
itemSize = navigationItems.size,
containerColor = MaterialTheme.colorScheme.secondaryContainer,
indicatorStyle = IndicatorStyle.FILLED,
indicatorColor = MaterialTheme.colorScheme.background,
) {
navigationItems.forEachIndexed { index, navigationItem ->
val selected = index == selectedItem
BottomBarItem(
selected = selected,
onClick = {
selectedItem = index
},
imageVector = navigationItem.icon,
label = navigationItem.title,
itemStyle = ItemStyle.STYLE1,
)
}
}
Spacer(modifier = Modifier.height(25.dp))
AnimatedBottomBar(
selectedItem = selectedItem,
itemSize = navigationItems.size,
containerColor = MaterialTheme.colorScheme.secondaryContainer,
indicatorStyle = IndicatorStyle.FILLED,
indicatorColor = MaterialTheme.colorScheme.background,
) {
navigationItems.forEachIndexed { index, navigationItem ->
val selected = index == selectedItem
BottomBarItem(
selected = selected,
onClick = {
selectedItem = index
},
imageVector = navigationItem.icon,
label = navigationItem.title,
itemStyle = ItemStyle.STYLE3,
)
}
}
Spacer(modifier = Modifier.height(25.dp))
AnimatedBottomBar(
selectedItem = selectedItem,
itemSize = navigationItems.size,
containerColor = MaterialTheme.colorScheme.secondaryContainer,
indicatorStyle = IndicatorStyle.FILLED,
indicatorColor = MaterialTheme.colorScheme.background,
) {
navigationItems.forEachIndexed { index, navigationItem ->
val selected = index == selectedItem
BottomBarItem(
selected = selected,
onClick = {
selectedItem = index
},
imageVector = navigationItem.icon,
label = navigationItem.title,
itemStyle = ItemStyle.STYLE4,
)
}
}
Spacer(modifier = Modifier.height(25.dp))
AnimatedBottomBar(
selectedItem = selectedItem,
itemSize = navigationItems.size,
containerColor = MaterialTheme.colorScheme.secondaryContainer,
indicatorStyle = IndicatorStyle.FILLED,
indicatorColor = MaterialTheme.colorScheme.background,
) {
navigationItems.forEachIndexed { index, navigationItem ->
val selected = index == selectedItem
BottomBarItem(
selected = selected,
onClick = {
selectedItem = index
},
imageVector = navigationItem.icon,
label = navigationItem.title,
itemStyle = ItemStyle.STYLE5,
iconColor = if (selected) Color.White else Color.Black,
glowingBackground =
Brush.radialGradient(
listOf(
Color.Black,
Color.Transparent,
Color.Transparent,
),
),
)
}
}
Spacer(modifier = Modifier.height(25.dp))
AnimatedBottomBar(
selectedItem = selectedItem,
itemSize = navigationItems.size,
containerColor = MaterialTheme.colorScheme.secondaryContainer,
) {
navigationItems.forEachIndexed { index, navigationItem ->
val selected = index == selectedItem
BottomBarItem(
selected = selected,
onClick = {
selectedItem = index
},
imageVector = navigationItem.icon,
label = navigationItem.title,
itemStyle = ItemStyle.STYLE2,
iconColor = if (selected) Color.Black else Color.White,
textColor = if (selected) Color.Black else Color.White,
activeIndicatorColor = Color.White,
)
}
}
Spacer(modifier = Modifier.height(150.dp))
}
}
================================================
FILE: app/src/main/java/com/example/animatedbottombarcompose/composables/Screen2.kt
================================================
package com.example.animatedbottombarcompose.composables
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
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.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.RadioButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.example.animatedbottombarcompose.model.MainNavigation
import com.example.bottombar.AnimatedBottomBar
import com.example.bottombar.components.BottomBarItem
import com.example.bottombar.model.IndicatorStyle
import com.example.bottombar.model.ItemStyle
@Composable
fun Screen2(navigationItems: List) {
var selectedItem by remember { mutableIntStateOf(0) }
var itemStyle: ItemStyle by remember {
mutableStateOf(ItemStyle.STYLE3)
}
var indicatorStyle: IndicatorStyle by remember {
mutableStateOf(IndicatorStyle.WORM)
}
val itemStyles =
listOf(
ItemStyle.STYLE1,
ItemStyle.STYLE2,
ItemStyle.STYLE3,
ItemStyle.STYLE4,
ItemStyle.STYLE5,
)
val indicatorStyles =
listOf(
IndicatorStyle.NONE,
IndicatorStyle.LINE,
IndicatorStyle.DOT,
IndicatorStyle.WORM,
)
Column(
modifier =
Modifier
.fillMaxSize()
.verticalScroll(rememberScrollState()),
) {
Spacer(modifier = Modifier.height(50.dp))
Text(
text = "Item Style:",
style = MaterialTheme.typography.titleMedium,
modifier = Modifier.padding(horizontal = 8.dp),
)
Column(
modifier =
Modifier
.fillMaxWidth()
.padding(horizontal = 8.dp),
) {
Row(verticalAlignment = Alignment.CenterVertically) {
itemStyles.take(3).forEach {
RadioButton(selected = it == itemStyle, onClick = {
itemStyle = it
})
Text(text = it.name)
}
}
Row(verticalAlignment = Alignment.CenterVertically) {
itemStyles.takeLast(2).forEach {
RadioButton(selected = it == itemStyle, onClick = {
itemStyle = it
})
Text(text = it.name)
}
}
}
Text(
text = "Indicator Style:",
style = MaterialTheme.typography.titleMedium,
modifier = Modifier.padding(horizontal = 8.dp),
)
Column(
modifier =
Modifier
.fillMaxWidth()
.padding(horizontal = 8.dp),
) {
Row(verticalAlignment = Alignment.CenterVertically) {
indicatorStyles.take(2).forEach {
RadioButton(selected = it == indicatorStyle, onClick = {
indicatorStyle = it
})
Text(text = it.name)
}
}
Row(verticalAlignment = Alignment.CenterVertically) {
indicatorStyles.takeLast(2).forEach {
RadioButton(selected = it == indicatorStyle, onClick = {
indicatorStyle = it
})
Text(text = it.name)
}
}
}
Spacer(modifier = Modifier.height(100.dp))
AnimatedBottomBar(
selectedItem = selectedItem,
itemSize = navigationItems.size,
indicatorStyle = if (itemStyle != ItemStyle.STYLE2) indicatorStyle else IndicatorStyle.NONE,
containerColor = Color.Transparent,
indicatorColor = Color.Red,
) {
navigationItems.forEachIndexed { index, navigationItem ->
val selected = index == selectedItem
BottomBarItem(
selected = selected,
onClick = {
selectedItem = index
},
imageVector = navigationItem.icon,
label = navigationItem.title,
iconColor = if (selected) Color.Red else Color.Black,
textColor = if (selected) Color.Red else Color.Black,
itemStyle = itemStyle,
glowingBackground =
Brush.radialGradient(
listOf(
Color.Red.copy(0.5f),
Color.Transparent,
Color.Transparent,
),
),
)
}
}
Spacer(modifier = Modifier.height(50.dp))
AnimatedBottomBar(
selectedItem = selectedItem,
itemSize = navigationItems.size,
indicatorStyle = if (itemStyle != ItemStyle.STYLE2) indicatorStyle else IndicatorStyle.NONE,
indicatorColor = Color.White,
) {
navigationItems.forEachIndexed { index, navigationItem ->
val selected = index == selectedItem
BottomBarItem(
selected = selected,
onClick = {
selectedItem = index
},
imageVector = navigationItem.icon,
label = navigationItem.title,
iconColor = if (selected) Color.White else Color.Black,
textColor = if (selected) Color.White else Color.Black,
itemStyle = itemStyle,
glowingBackground =
Brush.radialGradient(
listOf(
Color.Black,
Color.Transparent,
Color.Transparent,
),
),
)
}
}
Spacer(modifier = Modifier.height(150.dp))
}
}
================================================
FILE: app/src/main/java/com/example/animatedbottombarcompose/composables/Screen3.kt
================================================
package com.example.animatedbottombarcompose.composables
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
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.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.RadioButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.example.animatedbottombarcompose.model.MainNavigation
import com.example.bottombar.AnimatedBottomBar
import com.example.bottombar.components.BottomBarItem
import com.example.bottombar.model.IndicatorStyle
import com.example.bottombar.model.ItemStyle
@Composable
fun Screen3(navigationItems: List) {
var selectedItem by remember { mutableIntStateOf(0) }
var itemStyle: ItemStyle by remember {
mutableStateOf(ItemStyle.STYLE3)
}
val itemStyles =
listOf(
ItemStyle.STYLE1,
ItemStyle.STYLE2,
ItemStyle.STYLE3,
ItemStyle.STYLE4,
ItemStyle.STYLE5,
)
Column(
modifier =
Modifier
.fillMaxSize()
.verticalScroll(rememberScrollState()),
) {
Spacer(modifier = Modifier.height(50.dp))
Text(
text = "Item Style:",
style = MaterialTheme.typography.titleMedium,
modifier = Modifier.padding(horizontal = 8.dp),
)
Column(
modifier =
Modifier
.fillMaxWidth()
.padding(horizontal = 8.dp),
) {
Row(verticalAlignment = Alignment.CenterVertically) {
itemStyles.take(3).forEach {
RadioButton(selected = it == itemStyle, onClick = {
itemStyle = it
})
Text(text = it.name)
}
}
Row(verticalAlignment = Alignment.CenterVertically) {
itemStyles.takeLast(2).forEach {
RadioButton(selected = it == itemStyle, onClick = {
itemStyle = it
})
Text(text = it.name)
}
}
}
Spacer(modifier = Modifier.height(100.dp))
AnimatedBottomBar(
selectedItem = selectedItem,
itemSize = navigationItems.size,
indicatorStyle = if (itemStyle != ItemStyle.STYLE2) IndicatorStyle.FILLED else IndicatorStyle.NONE,
containerColor = Color.Transparent,
indicatorColor = Color.Red.copy(0.5f),
) {
navigationItems.forEachIndexed { index, navigationItem ->
val selected = index == selectedItem
BottomBarItem(
selected = selected,
onClick = {
selectedItem = index
},
imageVector = navigationItem.icon,
label = navigationItem.title,
iconColor = if (selected) Color.White else Color.Black,
textColor = if (selected) Color.White else Color.Black,
itemStyle = itemStyle,
activeIndicatorColor = Color.Red.copy(0.5f),
)
}
}
Spacer(modifier = Modifier.height(50.dp))
AnimatedBottomBar(
selectedItem = selectedItem,
itemSize = navigationItems.size,
indicatorStyle = if (itemStyle != ItemStyle.STYLE2) IndicatorStyle.FILLED else IndicatorStyle.NONE,
indicatorColor = Color.White,
) {
navigationItems.forEachIndexed { index, navigationItem ->
val selected = index == selectedItem
BottomBarItem(
selected = selected,
onClick = {
selectedItem = index
},
imageVector = navigationItem.icon,
label = navigationItem.title,
iconColor = if (selected) Color.Black else Color.White,
textColor = if (selected) Color.Black else Color.White,
itemStyle = itemStyle,
activeIndicatorColor = Color.White,
)
}
}
Spacer(modifier = Modifier.height(150.dp))
}
}
================================================
FILE: app/src/main/java/com/example/animatedbottombarcompose/model/MainNavigation.kt
================================================
package com.example.animatedbottombarcompose.model
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.Email
import androidx.compose.material.icons.outlined.FavoriteBorder
import androidx.compose.material.icons.outlined.Home
import androidx.compose.material.icons.outlined.Notifications
import androidx.compose.ui.graphics.vector.ImageVector
sealed class MainNavigation(
val title: String,
val route: String,
val icon: ImageVector,
) {
data object ScreenA : MainNavigation(
title = "Screen1",
route = "Screen1",
icon = Icons.Outlined.Home,
)
data object ScreenB : MainNavigation(
title = "Screen2",
route = "Screen2",
icon = Icons.Outlined.Notifications,
)
data object ScreenC : MainNavigation(
title = "Screen3",
route = "Screen3",
icon = Icons.Outlined.FavoriteBorder,
)
data object ScreenD : MainNavigation(
title = "Screen4",
route = "Screen4",
icon = Icons.Outlined.Email,
)
}
================================================
FILE: app/src/main/java/com/example/animatedbottombarcompose/ui/theme/Color.kt
================================================
package com.example.animatedbottombarcompose.ui.theme
import androidx.compose.ui.graphics.Color
val Purple80 = Color(0xFFD0BCFF)
val PurpleGrey80 = Color(0xFFCCC2DC)
val Pink80 = Color(0xFFEFB8C8)
val Purple40 = Color(0xFF6650a4)
val PurpleGrey40 = Color(0xFF625b71)
val Pink40 = Color(0xFF7D5260)
================================================
FILE: app/src/main/java/com/example/animatedbottombarcompose/ui/theme/Theme.kt
================================================
package com.example.animatedbottombarcompose.ui.theme
import android.app.Activity
import android.os.Build
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.dynamicDarkColorScheme
import androidx.compose.material3.dynamicLightColorScheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.SideEffect
import androidx.compose.ui.graphics.toArgb
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalView
import androidx.core.view.WindowCompat
private val DarkColorScheme =
darkColorScheme(
primary = Purple80,
secondary = PurpleGrey80,
tertiary = Pink80,
)
private val LightColorScheme =
lightColorScheme(
primary = Purple40,
secondary = PurpleGrey40,
tertiary = Pink40,
/* Other default colors to override
background = Color(0xFFFFFBFE),
surface = Color(0xFFFFFBFE),
onPrimary = Color.White,
onSecondary = Color.White,
onTertiary = Color.White,
onBackground = Color(0xFF1C1B1F),
onSurface = Color(0xFF1C1B1F),
*/
)
@Composable
fun AnimatedBottomBarComposeTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
// Dynamic color is available on Android 12+
dynamicColor: Boolean = true,
content: @Composable () -> Unit,
) {
val colorScheme =
when {
dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
val context = LocalContext.current
if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
}
darkTheme -> DarkColorScheme
else -> LightColorScheme
}
val view = LocalView.current
if (!view.isInEditMode) {
SideEffect {
val window = (view.context as Activity).window
window.statusBarColor = colorScheme.primary.toArgb()
WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
}
}
MaterialTheme(
colorScheme = colorScheme,
typography = Typography,
content = content,
)
}
================================================
FILE: app/src/main/java/com/example/animatedbottombarcompose/ui/theme/Type.kt
================================================
package com.example.animatedbottombarcompose.ui.theme
import androidx.compose.material3.Typography
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp
// Set of Material typography styles to start with
val Typography =
Typography(
bodyLarge =
TextStyle(
fontFamily = FontFamily.Default,
fontWeight = FontWeight.Normal,
fontSize = 16.sp,
lineHeight = 24.sp,
letterSpacing = 0.5.sp,
),
/* Other default text styles to override
titleLarge = TextStyle(
fontFamily = FontFamily.Default,
fontWeight = FontWeight.Normal,
fontSize = 22.sp,
lineHeight = 28.sp,
letterSpacing = 0.sp
),
labelSmall = TextStyle(
fontFamily = FontFamily.Default,
fontWeight = FontWeight.Medium,
fontSize = 11.sp,
lineHeight = 16.sp,
letterSpacing = 0.5.sp
)
*/
)
================================================
FILE: app/src/main/res/drawable/ic_launcher_background.xml
================================================
================================================
FILE: app/src/main/res/drawable/ic_launcher_foreground.xml
================================================
================================================
FILE: app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml
================================================
================================================
FILE: app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml
================================================
================================================
FILE: app/src/main/res/values/colors.xml
================================================
#FFBB86FC#FF6200EE#FF3700B3#FF03DAC5#FF018786#FF000000#FFFFFFFF
================================================
FILE: app/src/main/res/values/strings.xml
================================================
AnimatedBottomBarCompose
================================================
FILE: app/src/main/res/values/themes.xml
================================================
================================================
FILE: app/src/main/res/xml/backup_rules.xml
================================================
================================================
FILE: app/src/main/res/xml/data_extraction_rules.xml
================================================
================================================
FILE: app/src/test/java/com/example/animatedbottombarcompose/ExampleUnitTest.kt
================================================
package com.example.animatedbottombarcompose
import org.junit.Assert.assertEquals
import org.junit.Test
/**
* Example local unit test, which will execute on the development machine (host).
*
* See [testing documentation](http://d.android.com/tools/testing).
*/
class ExampleUnitTest {
@Test
fun addition_isCorrect() {
assertEquals(4, 2 + 2)
}
}
================================================
FILE: bottombar/.gitignore
================================================
/build
================================================
FILE: bottombar/build.gradle.kts
================================================
plugins {
id("com.android.library")
id("org.jetbrains.kotlin.android")
}
ext {
set("PUBLISH_GROUP_ID", "com.canopas.compose-animated-navigationbar")
set("PUBLISH_ARTIFACT_ID", "bottombar")
}
apply {
from("$rootDir/scripts/publish-module.gradle")
}
android {
namespace = "com.example.bottombar"
compileSdk = 34
defaultConfig {
minSdk = 24
targetSdk = 34
testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
consumerProguardFiles("consumer-rules.pro")
vectorDrawables {
useSupportLibrary = true
}
}
buildTypes {
release {
isMinifyEnabled = false
proguardFiles(
getDefaultProguardFile("proguard-android-optimize.txt"),
"proguard-rules.pro",
)
}
}
compileOptions {
sourceCompatibility = JavaVersion.VERSION_17
targetCompatibility = JavaVersion.VERSION_17
}
kotlinOptions {
jvmTarget = "17"
}
buildFeatures {
compose = true
}
composeOptions {
kotlinCompilerExtensionVersion = "1.5.3"
}
packaging {
resources {
excludes += "/META-INF/{AL2.0,LGPL2.1}"
}
}
publishing {
singleVariant("release") {
withSourcesJar()
}
}
}
dependencies {
implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.8.1")
implementation("androidx.activity:activity-compose:1.9.0")
implementation(platform("androidx.compose:compose-bom:2024.05.00"))
implementation("androidx.compose.ui:ui")
implementation("androidx.compose.ui:ui-graphics")
implementation("androidx.compose.ui:ui-tooling-preview")
implementation("androidx.compose.material3:material3")
testImplementation("junit:junit:4.13.2")
androidTestImplementation("androidx.test.ext:junit:1.1.5")
androidTestImplementation("androidx.test.espresso:espresso-core:3.5.1")
}
================================================
FILE: bottombar/consumer-rules.pro
================================================
================================================
FILE: bottombar/proguard-rules.pro
================================================
# 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
================================================
FILE: bottombar/src/androidTest/java/com/example/bottombar/ExampleInstrumentedTest.kt
================================================
package com.example.bottombar
import androidx.test.ext.junit.runners.AndroidJUnit4
import androidx.test.platform.app.InstrumentationRegistry
import org.junit.Assert.*
import org.junit.Test
import org.junit.runner.RunWith
/**
* 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.example.bottombar.test", appContext.packageName)
}
}
================================================
FILE: bottombar/src/main/AndroidManifest.xml
================================================
================================================
FILE: bottombar/src/main/java/com/example/bottombar/AnimatedBottomBar.kt
================================================
package com.example.bottombar
import androidx.compose.animation.core.AnimationSpec
import androidx.compose.animation.core.Spring
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.core.spring
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.BoxWithConstraints
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.selection.selectableGroup
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.example.bottombar.components.DotIndicator
import com.example.bottombar.components.FilledIndicator
import com.example.bottombar.components.LineIndicator
import com.example.bottombar.components.WormIndicator
import com.example.bottombar.model.IndicatorDirection
import com.example.bottombar.model.IndicatorStyle
import com.example.bottombar.utils.conditional
val DEFAULT_INDICATOR_HEIGHT = 4.dp
/**
* A composable function that creates layout for bottom navigation & indicator over it.
*
*@param [modifier] Modifier to be applied to the navigation bar.
*@param [bottomBarHeight] The default height of the bottom bar.
*@param [containerColor] The color of the navigation bar/container.
*@param [contentColor] The color of the content.
*@param [containerShape] The shape of the navigation bar.
*@param [selectedItem] The index of currently selected item.
*@param [itemSize] The count of items that will be shown in bottom bar.
*@param [indicatorStyle] The type of indicator that need to be shown. Select from [IndicatorStyle]
*@param [indicatorColor] The color to be applied on the indicator.
*@param [indicatorHeight] The height of the indicator - `applicable only for line indicator`.
*@param [animationSpec] The animation that will be applied to tab indicators when offset changes.
*@param [indicatorDirection] The direction where indicator need to be placed. Select from [IndicatorDirection]
*@param [indicatorShape] The shape to be applied on the indicator.
*@param [content] The composable content of the navigation bar.
*/
@Composable
fun AnimatedBottomBar(
modifier: Modifier = Modifier,
bottomBarHeight: Dp = 64.dp,
containerColor: Color = MaterialTheme.colorScheme.primaryContainer,
contentColor: Color = MaterialTheme.colorScheme.onPrimaryContainer,
containerShape: Shape = RectangleShape,
selectedItem: Int? = null,
itemSize: Int? = null,
indicatorStyle: IndicatorStyle = IndicatorStyle.NONE,
indicatorColor: Color = MaterialTheme.colorScheme.onPrimaryContainer,
indicatorHeight: Dp = DEFAULT_INDICATOR_HEIGHT,
animationSpec: AnimationSpec =
spring(
dampingRatio = 1f,
stiffness = Spring.StiffnessMediumLow,
),
indicatorDirection: IndicatorDirection = IndicatorDirection.TOP,
indicatorShape: RoundedCornerShape = RoundedCornerShape(25.dp),
content: @Composable RowScope.() -> Unit,
) {
Surface(
color = containerColor,
contentColor = contentColor,
modifier = modifier,
shape = containerShape,
) {
BoxWithConstraints(
modifier =
Modifier
.fillMaxWidth()
.padding(horizontal = Dp(bottomBarHeight / (bottomBarHeight / 16))),
) {
selectedItem?.let {
itemSize?.let {
val maxWidth = this.maxWidth
val indicatorOffset: Dp by animateDpAsState(
targetValue =
(
maxWidth / (
itemSize.takeIf { it != 0 }
?: 1
)
) * selectedItem,
animationSpec = animationSpec,
label = "indicator",
)
when (indicatorStyle) {
IndicatorStyle.NONE -> {}
IndicatorStyle.DOT -> {
DotIndicator(
indicatorOffset = indicatorOffset,
arraySize = itemSize.takeIf { it != 0 } ?: 1,
indicatorColor = indicatorColor,
modifier =
Modifier
.height(bottomBarHeight),
)
}
IndicatorStyle.WORM -> {
WormIndicator(
indicatorOffset = indicatorOffset,
indicatorColor = indicatorColor,
modifier =
Modifier
.height(bottomBarHeight),
itemWidth = maxWidth / (itemSize.takeIf { it != 0 } ?: 1),
)
}
IndicatorStyle.LINE -> {
LineIndicator(
indicatorOffset = indicatorOffset,
arraySize = itemSize.takeIf { it != 0 } ?: 1,
indicatorHeight = indicatorHeight,
indicatorColor = indicatorColor,
modifier =
Modifier
.conditional(indicatorDirection == IndicatorDirection.TOP) {
align(Alignment.TopStart)
}
.conditional(indicatorDirection == IndicatorDirection.BOTTOM) {
align(Alignment.BottomStart)
},
indicatorShape = indicatorShape,
)
}
IndicatorStyle.FILLED -> {
FilledIndicator(
indicatorOffset = indicatorOffset,
arraySize = itemSize.takeIf { it != 0 } ?: 1,
indicatorColor = indicatorColor,
modifier =
Modifier
.height(bottomBarHeight),
indicatorShape = indicatorShape,
)
}
}
}
}
Row(
modifier =
Modifier
.fillMaxWidth()
.height(bottomBarHeight)
.selectableGroup(),
horizontalArrangement = Arrangement.SpaceBetween,
content = content,
)
}
}
}
================================================
FILE: bottombar/src/main/java/com/example/bottombar/components/BottomBarItem.kt
================================================
package com.example.bottombar.components
import androidx.compose.foundation.layout.RowScope
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.graphics.vector.rememberVectorPainter
import com.example.bottombar.model.ItemStyle
import com.example.bottombar.model.VisibleItem
/**
* A composable function that creates view for navigation items according to provided item style.
* @param [modifier] Modifier to be applied to the navigation bar.
* @param [selected] The index of the currently selected item.
* @param [onClick] The handler that will be invoked when user clicks on bottom bar item.
* @param [imageVector] The image vector that will be used to show item icon.
* @param [containerColor] The color to be applied on the container.
* @param [contentColor] The color to be applied on the content.
* @param [iconColor] The color to be applied on the icon.
* @param [textColor] The color to be applied on the text.
* @param [activeIndicatorColor] The color to be applied on the indicator when its selected/active. Applicable only for [ItemStyle.STYLE2]
* @param [inactiveIndicatorColor] The color to be applied on the indicator when its inactive. Applicable only for [ItemStyle.STYLE2]
* @param [glowingBackground] The glowing background which will be applied behind image. Applicable only for [ItemStyle.STYLE5]
* @param [label] The text to be shown on bottom bar.
* @param [visibleItem] The item(either LABEL/ICON) that need to be shown when it is selected. Select from [VisibleItem]
* @param [itemStyle] The style to be applied on bottom bar items. Select from [ItemStyle]
*/
@Composable
fun RowScope.BottomBarItem(
modifier: Modifier = Modifier,
selected: Boolean,
onClick: () -> Unit,
imageVector: ImageVector,
containerColor: Color = Color.Transparent,
contentColor: Color = MaterialTheme.colorScheme.onPrimaryContainer,
iconColor: Color = MaterialTheme.colorScheme.onPrimaryContainer,
textColor: Color = MaterialTheme.colorScheme.onPrimaryContainer,
activeIndicatorColor: Color = MaterialTheme.colorScheme.onPrimaryContainer.copy(0.2f),
inactiveIndicatorColor: Color = Color.Transparent,
glowingBackground: Brush =
Brush.radialGradient(
listOf(
Color.White,
Color.Transparent,
Color.Transparent,
),
),
label: String,
visibleItem: VisibleItem = VisibleItem.ICON,
itemStyle: ItemStyle = ItemStyle.STYLE1,
) {
when (itemStyle) {
ItemStyle.STYLE1 -> {
NavigationBarItem(
modifier,
selected,
onClick,
rememberVectorPainter(image = imageVector),
containerColor,
contentColor,
iconColor,
textColor,
label,
visibleItem,
)
}
ItemStyle.STYLE2 -> {
NavigationBarItem(
modifier,
selected,
onClick,
rememberVectorPainter(image = imageVector),
contentColor,
iconColor,
textColor,
label,
activeIndicatorColor,
inactiveIndicatorColor,
)
}
ItemStyle.STYLE3 -> {
NavigationBarItem(
modifier,
selected,
onClick,
rememberVectorPainter(image = imageVector),
containerColor,
contentColor,
iconColor,
textColor,
label,
)
}
ItemStyle.STYLE4 -> {
NavigationBarItem(
modifier,
selected,
onClick,
rememberVectorPainter(image = imageVector),
containerColor,
contentColor,
iconColor,
)
}
ItemStyle.STYLE5 -> {
NavigationBarItem(
modifier,
selected,
onClick,
rememberVectorPainter(image = imageVector),
containerColor,
contentColor,
iconColor,
glowingBackground = glowingBackground,
)
}
}
}
================================================
FILE: bottombar/src/main/java/com/example/bottombar/components/Indicators.kt
================================================
package com.example.bottombar.components
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
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.Icon
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.dp
import com.example.bottombar.R
import com.example.bottombar.utils.customWormTransition
@Composable
internal fun LineIndicator(
indicatorOffset: Dp,
arraySize: Int,
indicatorColor: Color,
indicatorHeight: Dp,
modifier: Modifier,
indicatorShape: RoundedCornerShape,
) {
Box(
modifier =
modifier
.height(indicatorHeight)
.fillMaxWidth(1f / arraySize)
.offset(
x = indicatorOffset,
)
.clip(shape = indicatorShape)
.background(indicatorColor, shape = indicatorShape),
)
}
@Composable
internal fun DotIndicator(
indicatorOffset: Dp,
arraySize: Int,
indicatorColor: Color,
modifier: Modifier,
) {
Box(
modifier =
modifier
.fillMaxWidth(1f / arraySize)
.offset(
x = indicatorOffset,
),
) {
Column(modifier = Modifier.align(Alignment.BottomCenter)) {
Icon(
painter = painterResource(id = R.drawable.ic_dot_indicator),
contentDescription = "",
tint = indicatorColor,
modifier =
Modifier
.size(8.dp),
)
Spacer(modifier = Modifier.height(4.dp))
}
}
}
@Composable
internal fun WormIndicator(
indicatorOffset: Dp,
indicatorColor: Color,
modifier: Modifier,
itemWidth: Dp,
) {
Box(
modifier =
modifier
.width(itemWidth),
) {
Box(
modifier =
Modifier
.align(Alignment.BottomCenter)
.padding(bottom = 4.dp)
.customWormTransition(indicatorOffset, indicatorColor, itemWidth)
.size(8.dp),
)
}
}
@Composable
internal fun FilledIndicator(
indicatorOffset: Dp,
arraySize: Int,
indicatorColor: Color,
modifier: Modifier,
indicatorShape: RoundedCornerShape,
) {
Box(
modifier =
modifier
.fillMaxWidth(1f / arraySize)
.offset(
x = indicatorOffset,
)
.padding(vertical = 8.dp)
.clip(indicatorShape)
.background(indicatorColor, shape = indicatorShape),
)
}
================================================
FILE: bottombar/src/main/java/com/example/bottombar/components/NavigationBarItem.kt
================================================
package com.example.bottombar.components
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.LinearEasing
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutVertically
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxWithConstraints
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.ripple.rememberRipple
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.scale
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.bottombar.model.AnimationState
import com.example.bottombar.model.VisibleItem
import com.example.bottombar.utils.DefaultAlpha
import com.example.bottombar.utils.DefaultScale
import com.example.bottombar.utils.LargeScale
import com.example.bottombar.utils.LongDuration
import com.example.bottombar.utils.LowestAlpha
import com.example.bottombar.utils.MediumDuration
import com.example.bottombar.utils.ShortDuration
import com.example.bottombar.utils.SmallScale
/**
* A composable function that creates view for **STYLE1** where selected item will
* change on the basis of value provided in `visibleItem`
*/
@Composable
internal fun RowScope.NavigationBarItem(
modifier: Modifier = Modifier,
selected: Boolean,
onClick: () -> Unit,
iconPainter: Painter,
containerColor: Color = MaterialTheme.colorScheme.primaryContainer,
contentColor: Color = MaterialTheme.colorScheme.onPrimaryContainer,
iconColor: Color = MaterialTheme.colorScheme.onPrimaryContainer,
textColor: Color = MaterialTheme.colorScheme.onPrimaryContainer,
label: String,
visibleItem: VisibleItem = VisibleItem.LABEL,
) {
var animationState by remember { mutableStateOf(AnimationState.Start) }
val scaleAnimation: Float by animateFloatAsState(
if (animationState == AnimationState.Start) DefaultScale else SmallScale,
tween(easing = LinearEasing),
label = "",
)
LaunchedEffect(key1 = selected, key2 = Unit, block = {
animationState =
if (selected && visibleItem == VisibleItem.BOTH) AnimationState.Finish else AnimationState.Start
})
Surface(
color = containerColor,
contentColor = contentColor,
modifier =
Modifier
.weight(1f)
.clickable(
onClick = {
onClick()
},
interactionSource = remember { MutableInteractionSource() },
indication = rememberRipple(bounded = false, radius = 30.dp),
),
) {
Column(
modifier =
modifier
.fillMaxHeight()
.scale(scaleAnimation),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center,
) {
AnimatedVisibility(
visible = (visibleItem == VisibleItem.BOTH && !selected),
enter =
fadeIn() +
slideInVertically(
tween(easing = LinearEasing),
) { fullHeight -> -fullHeight },
exit =
slideOutVertically(
tween(easing = LinearEasing),
) { fullHeight -> -fullHeight } + fadeOut(),
) {
Icon(
painter = iconPainter,
contentDescription = null,
tint = iconColor,
)
}
AnimatedVisibility(
visible = (visibleItem == VisibleItem.BOTH && selected),
enter =
fadeIn() +
slideInVertically(
tween(easing = LinearEasing),
) { fullHeight -> fullHeight },
exit =
slideOutVertically(
tween(easing = LinearEasing),
) { fullHeight -> fullHeight } + fadeOut(),
) {
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Icon(
painter = iconPainter,
contentDescription = null,
tint = iconColor,
)
Text(
text = label,
color = textColor,
style = MaterialTheme.typography.labelMedium,
maxLines = 1,
softWrap = false,
overflow = TextOverflow.Clip,
)
}
}
if (visibleItem == VisibleItem.BOTH) return@Surface
AnimatedVisibility(
visible = if (visibleItem == VisibleItem.LABEL) !selected else selected,
enter =
fadeIn() +
slideInVertically(
tween(
easing = LinearEasing,
),
) { fullHeight -> -fullHeight },
exit =
slideOutVertically(
tween(
easing = LinearEasing,
),
) { fullHeight -> -fullHeight } + fadeOut(),
) {
Icon(
painter = iconPainter,
contentDescription = null,
tint = iconColor,
)
}
AnimatedVisibility(
visible = if (visibleItem == VisibleItem.LABEL) selected else !selected,
enter =
fadeIn() +
slideInVertically(
tween(
easing = LinearEasing,
),
) { fullHeight -> fullHeight },
exit =
slideOutVertically(
tween(
easing = LinearEasing,
),
) { fullHeight -> fullHeight } + fadeOut(),
) {
Text(
text = label,
color = textColor,
style = MaterialTheme.typography.labelMedium,
maxLines = 1,
softWrap = false,
overflow = TextOverflow.Clip,
)
}
}
}
}
/**
* A composable function that creates view for **STYLE2** where selected item will
* have **FILLED** indicators and horizontal item placement
*/
@Composable
internal fun NavigationBarItem(
modifier: Modifier,
selected: Boolean,
onClick: () -> Unit,
iconPainter: Painter,
contentColor: Color,
iconColor: Color,
textColor: Color,
label: String,
activeIndicatorColor: Color,
inactiveIndicatorColor: Color,
) {
val color by animateColorAsState(
targetValue = if (selected) activeIndicatorColor else inactiveIndicatorColor,
animationSpec = tween(easing = LinearEasing),
label = "",
)
BoxWithConstraints(
modifier =
modifier
.fillMaxHeight(),
contentAlignment = Alignment.Center,
) {
Surface(
color = color,
contentColor = contentColor,
shape = RoundedCornerShape(maxHeight / 2),
modifier =
Modifier.clickable(
interactionSource = remember { MutableInteractionSource() },
indication = rememberRipple(bounded = false, radius = 30.dp),
) { onClick() },
) {
Row(
modifier =
Modifier
.padding(
vertical = maxHeight / 12,
horizontal = maxHeight / 4,
),
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically,
) {
Icon(
modifier = Modifier.height(this@BoxWithConstraints.maxHeight / 2),
painter = iconPainter,
contentDescription = null,
tint = iconColor,
)
AnimatedVisibility(
visible = selected,
) {
Text(
text = label,
color = textColor,
style = MaterialTheme.typography.labelMedium,
maxLines = 1,
softWrap = false,
overflow = TextOverflow.Clip,
modifier = Modifier.padding(horizontal = 4.dp),
)
}
}
}
}
}
/**
* A composable function that creates view for **STYLE3** where selected item will
* have `scale animation` and vertical item placement
*/
@Composable
internal fun RowScope.NavigationBarItem(
modifier: Modifier = Modifier,
selected: Boolean,
onClick: () -> Unit,
iconPainter: Painter,
containerColor: Color = MaterialTheme.colorScheme.primaryContainer,
contentColor: Color = MaterialTheme.colorScheme.onPrimaryContainer,
iconColor: Color = MaterialTheme.colorScheme.onPrimaryContainer,
textColor: Color = MaterialTheme.colorScheme.onPrimaryContainer,
label: String,
) {
var animationState by remember { mutableStateOf(AnimationState.Start) }
val scaleAnimation: Float by animateFloatAsState(
if (animationState == AnimationState.Start) DefaultScale else SmallScale,
tween(durationMillis = LongDuration, delayMillis = ShortDuration, easing = LinearEasing),
label = "",
)
val alphaAnimation: Float by animateFloatAsState(
if (animationState == AnimationState.Start) LowestAlpha else DefaultAlpha,
tween(
durationMillis = if (animationState == AnimationState.Start) MediumDuration else LongDuration,
delayMillis = if (animationState == AnimationState.Start) 0 else ShortDuration,
easing = LinearEasing,
),
label = "",
)
val paddingAnimation: Dp by animateDpAsState(
if (animationState == AnimationState.Start) 20.dp else 16.dp,
tween(durationMillis = LongDuration, delayMillis = ShortDuration, easing = LinearEasing),
label = "",
)
LaunchedEffect(key1 = selected, key2 = Unit, block = {
animationState = if (selected) AnimationState.Finish else AnimationState.Start
})
Surface(
color = containerColor,
contentColor = contentColor,
modifier =
Modifier
.clickable(
onClick = {
onClick()
},
interactionSource = remember { MutableInteractionSource() },
indication = rememberRipple(bounded = false, radius = 30.dp),
)
.weight(1f),
) {
Box(
modifier =
modifier
.fillMaxHeight(),
contentAlignment = Alignment.TopCenter,
) {
Icon(
painter = iconPainter,
contentDescription = null,
tint = iconColor,
modifier =
Modifier
.scale(scaleAnimation)
.padding(top = paddingAnimation),
)
Text(
text = label,
color = textColor,
fontSize = 10.sp,
maxLines = 1,
softWrap = false,
overflow = TextOverflow.Clip,
modifier =
Modifier
.align(Alignment.BottomCenter)
.alpha(alphaAnimation)
.padding(bottom = 12.dp),
)
}
}
}
/**
* A composable function that creates view for **STYLE4** where selected item will
* have active color and rest all will be grayed out.
*/
@Composable
internal fun RowScope.NavigationBarItem(
modifier: Modifier,
selected: Boolean,
onClick: () -> Unit,
iconPainter: Painter,
containerColor: Color,
contentColor: Color,
iconColor: Color,
) {
var animationState by remember { mutableStateOf(AnimationState.Start) }
val scaleAnimation: Float by animateFloatAsState(
if (animationState == AnimationState.Start) DefaultScale else LargeScale,
tween(durationMillis = MediumDuration, delayMillis = ShortDuration, easing = LinearEasing),
label = "",
)
val color by animateColorAsState(
targetValue = if (selected) iconColor else iconColor.copy(0.5f),
animationSpec = tween(easing = LinearEasing),
label = "",
)
LaunchedEffect(key1 = selected, key2 = Unit, block = {
animationState = if (selected) AnimationState.Finish else AnimationState.Start
})
Surface(
color = containerColor,
contentColor = contentColor,
modifier =
Modifier
.clickable(
onClick = {
onClick()
},
interactionSource = remember { MutableInteractionSource() },
indication = rememberRipple(bounded = false, radius = 30.dp),
)
.weight(1f),
) {
Box(
modifier =
modifier
.fillMaxHeight()
.scale(scaleAnimation),
contentAlignment = Alignment.Center,
) {
Icon(
painter = iconPainter,
contentDescription = null,
tint = color,
)
}
}
}
/**
* A composable function that creates view for **STYLE5** where selected item will
* have active color with glowing background.
*/
@Composable
internal fun RowScope.NavigationBarItem(
modifier: Modifier,
selected: Boolean,
onClick: () -> Unit,
iconPainter: Painter,
containerColor: Color,
contentColor: Color,
iconColor: Color,
glowingBackground: Brush,
) {
var animationState by remember { mutableStateOf(AnimationState.Start) }
val scaleAnimation: Float by animateFloatAsState(
if (animationState == AnimationState.Start) LowestAlpha else DefaultAlpha,
tween(durationMillis = MediumDuration, delayMillis = ShortDuration, easing = LinearEasing),
label = "",
)
LaunchedEffect(key1 = selected, key2 = Unit, block = {
animationState = if (selected) AnimationState.Finish else AnimationState.Start
})
Surface(
color = containerColor,
contentColor = contentColor,
modifier =
Modifier
.clickable(
onClick = {
onClick()
},
interactionSource = remember { MutableInteractionSource() },
indication = rememberRipple(bounded = false, radius = 30.dp),
)
.weight(1f),
) {
Box(
modifier =
modifier
.fillMaxHeight(),
contentAlignment = Alignment.Center,
) {
if (selected) {
Box(
modifier =
Modifier
.fillMaxSize()
.scale(scaleAnimation)
.background(glowingBackground),
)
}
Icon(
painter = iconPainter,
contentDescription = null,
tint = iconColor,
)
}
}
}
================================================
FILE: bottombar/src/main/java/com/example/bottombar/model/AnimationState.kt
================================================
package com.example.bottombar.model
internal enum class AnimationState {
Start,
Finish,
}
================================================
FILE: bottombar/src/main/java/com/example/bottombar/model/IndicatorDirection.kt
================================================
package com.example.bottombar.model
/**
* Indicates the direction where indicator need to be placed.
*
* [TOP]: Indicator will be placed at Top direction.
*
* [BOTTOM]: Indicator will be placed at Bottom direction.
*
*/
enum class IndicatorDirection {
TOP,
BOTTOM,
}
================================================
FILE: bottombar/src/main/java/com/example/bottombar/model/IndicatorStyle.kt
================================================
package com.example.bottombar.model
/**
* Indicates which type of indicator should be shown.
*
* [NONE]: No indicator will be shown.
*
* [DOT]: Dot indicator will be shown(only at bottom direction).
*
* [WORM]: Worm indicator will be shown(only at bottom direction).
*
* [LINE]: Line indicator(Horizontal Tab) will be shown at specified direction.
*
* [FILLED]: Rounded indicator(Filled) will be shown at center of bottom bar.
*/
enum class IndicatorStyle {
NONE,
DOT,
WORM,
LINE,
FILLED,
}
================================================
FILE: bottombar/src/main/java/com/example/bottombar/model/ItemStyle.kt
================================================
package com.example.bottombar.model
/**
*[STYLE1]: Any 1 item(either Icon or Label) will be visible at a time or both items can be visible
* at a time with slide-in & slide-out animation.
*
*[STYLE2]: Both items will be visible at a time with horizontal arrangement if it
* is currently selected with [IndicatorStyle.FILLED] as default indicator. (**NOTE:-** While using [STYLE2],
* make sure that indicatorStyle is [IndicatorStyle.NONE] in **AnimatedBottomBar**)
*
*[STYLE3]: Both items will be visible at a time with vertical arrangement and scaling animation if it
* is currently selected.
*
*[STYLE4]: Only Icon will be visible at a time with scale animation and
* only selected icon will have icon-color and others as grayed out.
*
*[STYLE5]: Only Icon will be visible at a time with glowing background for selected item.
*
*/
enum class ItemStyle {
STYLE1,
STYLE2,
STYLE3,
STYLE4,
STYLE5,
}
================================================
FILE: bottombar/src/main/java/com/example/bottombar/model/VisibleItem.kt
================================================
package com.example.bottombar.model
/**
* Indicates which thing will be visible when an item is selected.
*
* **[VisibleItem] will be applicable only for [ItemStyle.STYLE1]**
*
* [ICON]: Icon will be visible for selected item and Label for others.
*
* [LABEL]: Label will be visible for selected item and Icon for others.
*
* [BOTH]: Both Icon & Label will be visible for selected Item & only Icon for others.
*/
enum class VisibleItem {
ICON,
LABEL,
BOTH,
}
================================================
FILE: bottombar/src/main/java/com/example/bottombar/utils/Constants.kt
================================================
package com.example.bottombar.utils
// For Scaling Animations
const val LargeScale = 1.2f
const val DefaultScale = 1f
const val SmallScale = 0.8f
// For Alpha Animations
const val DefaultAlpha = 1f
const val LowestAlpha = 0f
// For Animation Durations
const val LongDuration = 600
const val MediumDuration = 300
const val ShortDuration = 100
================================================
FILE: bottombar/src/main/java/com/example/bottombar/utils/ModifierExtensions.kt
================================================
package com.example.bottombar.utils
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.composed
import androidx.compose.ui.draw.drawWithContent
import androidx.compose.ui.geometry.CornerRadius
import androidx.compose.ui.geometry.RoundRect
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.unit.Dp
internal fun Modifier.conditional(
condition: Boolean,
orElse: (@Composable Modifier.() -> Modifier)? = null,
modifier: @Composable Modifier.() -> Modifier,
): Modifier =
composed {
if (condition) {
modifier.invoke(this)
} else {
orElse?.invoke(this) ?: this
}
}
internal fun Modifier.customWormTransition(
offset: Dp,
indicatorColor: Color,
itemWidth: Dp,
) = composed {
drawWithContent {
val distance = itemWidth.roundToPx()
val scrollPosition = (offset.toPx().div(distance))
val wormOffset = (scrollPosition % 1) * 2
val xPos = scrollPosition.toInt() * distance
val head = xPos + distance * 0f.coerceAtLeast(wormOffset - 1)
val tail = xPos + size.width + distance * 1f.coerceAtMost(wormOffset)
val worm =
RoundRect(
head,
0f,
tail,
size.height,
CornerRadius(50f),
)
val path = Path().apply { addRoundRect(worm) }
// Draw the worm shape on top of the content
drawPath(path = path, color = indicatorColor)
}
}
================================================
FILE: bottombar/src/main/res/drawable/ic_dot_indicator.xml
================================================
================================================
FILE: bottombar/src/test/java/com/example/bottombar/ExampleUnitTest.kt
================================================
package com.example.bottombar
import org.junit.Assert.assertEquals
import org.junit.Test
/**
* Example local unit test, which will execute on the development machine (host).
*
* See [testing documentation](http://d.android.com/tools/testing).
*/
class ExampleUnitTest {
@Test
fun addition_isCorrect() {
assertEquals(4, 2 + 2)
}
}
================================================
FILE: build.gradle.kts
================================================
// Top-level build file where you can add configuration options common to all sub-projects/modules.
plugins {
id("com.android.application") version "8.4.1" apply false
id("org.jetbrains.kotlin.android") version "1.9.10" apply false
id("com.android.library") version "8.4.1" apply false
id("io.github.gradle-nexus.publish-plugin") version "1.3.0"
}
apply {
from("$rootDir/scripts/publish-root.gradle")
}
================================================
FILE: gradle/wrapper/gradle-wrapper.properties
================================================
#Wed Sep 27 17:49:33 IST 2023
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-8.6-bin.zip
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
================================================
FILE: gradle.properties
================================================
# Project-wide Gradle settings.
# IDE (e.g. Android Studio) users:
# Gradle settings configured through the IDE *will override*
# any settings specified in this file.
# For more details on how to configure your build environment visit
# http://www.gradle.org/docs/current/userguide/build_environment.html
# Specifies the JVM arguments used for the daemon process.
# The setting is particularly useful for tweaking memory settings.
org.gradle.jvmargs=-Xmx2048m -Dfile.encoding=UTF-8
# When configured, Gradle will run in incubating parallel mode.
# This option should only be used with decoupled projects. More details, visit
# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
# org.gradle.parallel=true
# AndroidX package structure to make it clearer which packages are bundled with the
# Android operating system, and which are packaged with your app's APK
# https://developer.android.com/topic/libraries/support-library/androidx-rn
android.useAndroidX=true
# Kotlin code style for this project: "official" or "obsolete":
kotlin.code.style=official
# Enables namespacing of each library's R class so that its R class includes only the
# resources declared in the library itself and none from the library's dependencies,
# thereby reducing the size of the R class for that library
android.nonTransitiveRClass=true
================================================
FILE: gradlew
================================================
#!/usr/bin/env sh
#
# Copyright 2015 the original author or authors.
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
# https://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.
#
##############################################################################
##
## Gradle start up script for UN*X
##
##############################################################################
# Attempt to set APP_HOME
# Resolve links: $0 may be a link
PRG="$0"
# Need this for relative symlinks.
while [ -h "$PRG" ] ; do
ls=`ls -ld "$PRG"`
link=`expr "$ls" : '.*-> \(.*\)$'`
if expr "$link" : '/.*' > /dev/null; then
PRG="$link"
else
PRG=`dirname "$PRG"`"/$link"
fi
done
SAVED="`pwd`"
cd "`dirname \"$PRG\"`/" >/dev/null
APP_HOME="`pwd -P`"
cd "$SAVED" >/dev/null
APP_NAME="Gradle"
APP_BASE_NAME=`basename "$0"`
# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
# Use the maximum available, or set MAX_FD != -1 to use that value.
MAX_FD="maximum"
warn () {
echo "$*"
}
die () {
echo
echo "$*"
echo
exit 1
}
# OS specific support (must be 'true' or 'false').
cygwin=false
msys=false
darwin=false
nonstop=false
case "`uname`" in
CYGWIN* )
cygwin=true
;;
Darwin* )
darwin=true
;;
MINGW* )
msys=true
;;
NONSTOP* )
nonstop=true
;;
esac
CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
# Determine the Java command to use to start the JVM.
if [ -n "$JAVA_HOME" ] ; then
if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
# IBM's JDK on AIX uses strange locations for the executables
JAVACMD="$JAVA_HOME/jre/sh/java"
else
JAVACMD="$JAVA_HOME/bin/java"
fi
if [ ! -x "$JAVACMD" ] ; then
die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
Please set the JAVA_HOME variable in your environment to match the
location of your Java installation."
fi
else
JAVACMD="java"
which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
Please set the JAVA_HOME variable in your environment to match the
location of your Java installation."
fi
# Increase the maximum file descriptors if we can.
if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
MAX_FD_LIMIT=`ulimit -H -n`
if [ $? -eq 0 ] ; then
if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
MAX_FD="$MAX_FD_LIMIT"
fi
ulimit -n $MAX_FD
if [ $? -ne 0 ] ; then
warn "Could not set maximum file descriptor limit: $MAX_FD"
fi
else
warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
fi
fi
# For Darwin, add options to specify how the application appears in the dock
if $darwin; then
GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
fi
# For Cygwin or MSYS, switch paths to Windows format before running java
if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
APP_HOME=`cygpath --path --mixed "$APP_HOME"`
CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
JAVACMD=`cygpath --unix "$JAVACMD"`
# We build the pattern for arguments to be converted via cygpath
ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
SEP=""
for dir in $ROOTDIRSRAW ; do
ROOTDIRS="$ROOTDIRS$SEP$dir"
SEP="|"
done
OURCYGPATTERN="(^($ROOTDIRS))"
# Add a user-defined pattern to the cygpath arguments
if [ "$GRADLE_CYGPATTERN" != "" ] ; then
OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
fi
# Now convert the arguments - kludge to limit ourselves to /bin/sh
i=0
for arg in "$@" ; do
CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option
if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition
eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
else
eval `echo args$i`="\"$arg\""
fi
i=`expr $i + 1`
done
case $i in
0) set -- ;;
1) set -- "$args0" ;;
2) set -- "$args0" "$args1" ;;
3) set -- "$args0" "$args1" "$args2" ;;
4) set -- "$args0" "$args1" "$args2" "$args3" ;;
5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
esac
fi
# Escape application args
save () {
for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
echo " "
}
APP_ARGS=`save "$@"`
# Collect all arguments for the java command, following the shell quoting and substitution rules
eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
exec "$JAVACMD" "$@"
================================================
FILE: gradlew.bat
================================================
@rem
@rem Copyright 2015 the original author or authors.
@rem
@rem Licensed under the Apache License, Version 2.0 (the "License");
@rem you may not use this file except in compliance with the License.
@rem You may obtain a copy of the License at
@rem
@rem https://www.apache.org/licenses/LICENSE-2.0
@rem
@rem Unless required by applicable law or agreed to in writing, software
@rem distributed under the License is distributed on an "AS IS" BASIS,
@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@rem See the License for the specific language governing permissions and
@rem limitations under the License.
@rem
@if "%DEBUG%" == "" @echo off
@rem ##########################################################################
@rem
@rem Gradle startup script for Windows
@rem
@rem ##########################################################################
@rem Set local scope for the variables with windows NT shell
if "%OS%"=="Windows_NT" setlocal
set DIRNAME=%~dp0
if "%DIRNAME%" == "" set DIRNAME=.
set APP_BASE_NAME=%~n0
set APP_HOME=%DIRNAME%
@rem Resolve any "." and ".." in APP_HOME to make it shorter.
for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
@rem Find java.exe
if defined JAVA_HOME goto findJavaFromJavaHome
set JAVA_EXE=java.exe
%JAVA_EXE% -version >NUL 2>&1
if "%ERRORLEVEL%" == "0" goto execute
echo.
echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
echo.
echo Please set the JAVA_HOME variable in your environment to match the
echo location of your Java installation.
goto fail
:findJavaFromJavaHome
set JAVA_HOME=%JAVA_HOME:"=%
set JAVA_EXE=%JAVA_HOME%/bin/java.exe
if exist "%JAVA_EXE%" goto execute
echo.
echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
echo.
echo Please set the JAVA_HOME variable in your environment to match the
echo location of your Java installation.
goto fail
:execute
@rem Setup the command line
set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
@rem Execute Gradle
"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
:end
@rem End local scope for the variables with windows NT shell
if "%ERRORLEVEL%"=="0" goto mainEnd
:fail
rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
rem the _cmd.exe /c_ return code!
if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
exit /b 1
:mainEnd
if "%OS%"=="Windows_NT" endlocal
:omega
================================================
FILE: scripts/publish-module.gradle
================================================
apply plugin: 'maven-publish'
apply plugin: 'signing'
tasks.register('androidSourcesJar', Jar) {
archiveClassifier.set('sources')
if (project.plugins.findPlugin("com.android.library")) {
from android.sourceSets.main.java.srcDirs
} else {
from sourceSets.main.java.srcDirs
}
}
artifacts {
archives androidSourcesJar
}
group = PUBLISH_GROUP_ID
version = rootProject.ext["publish_version"]
afterEvaluate {
publishing {
publications {
release(MavenPublication) {
tasks.named("generateMetadataFileForReleasePublication").configure { dependsOn("androidSourcesJar") }
groupId PUBLISH_GROUP_ID
artifactId PUBLISH_ARTIFACT_ID
version rootProject.ext["publish_version"]
if (project.plugins.findPlugin("com.android.library")) {
from components.release
} else {
artifact("$buildDir/libs/${project.getName()}-${version}.jar")
}
pom {
name = PUBLISH_ARTIFACT_ID
description = 'Bottom bar in Jetpack Compose with customizable styles & animations'
url = 'https://github.com/canopas/AnimatedBottomBarCompose'
licenses {
license {
name = 'License'
url = 'https://github.com/canopas/AnimatedBottomBarCompose/blob/master/License'
}
}
developers {
developer {
id = 'cp-megh-l'
name = 'Megh Canopas'
email = 'megh.l@canopas.com'
}
// Add all other devs here...
}
scm {
connection = 'scm:git:github.com/canopas/AnimatedBottomBarCompose.git'
developerConnection = 'scm:git:ssh://github.com/canopas/AnimatedBottomBarCompose.git'
url = 'https://github.com/canopas/AnimatedBottomBarCompose'
}
}
}
}
}
}
signing {
useInMemoryPgpKeys(
rootProject.ext["signing.keyId"],
rootProject.ext["signing.key"],
rootProject.ext["signing.password"],
)
sign publishing.publications
}
================================================
FILE: scripts/publish-root.gradle
================================================
// Create variables with empty default values
ext["ossrhUsername"] = ''
ext["ossrhPassword"] = ''
ext["sonatypeStagingProfileId"] = ''
ext["signing.keyId"] = ''
ext["signing.password"] = ''
ext["signing.key"] = ''
ext["snapshot"] = ''
ext["publish_version"] = ''
File secretPropsFile = project.rootProject.file('local.properties')
if (secretPropsFile.exists()) {
Properties p = new Properties()
new FileInputStream(secretPropsFile).withCloseable { is -> p.load(is) }
p.each { name, value -> ext[name] = value }
} else {
ext["ossrhUsername"] = System.getenv('OSSRH_USERNAME')
ext["ossrhPassword"] = System.getenv('OSSRH_PASSWORD')
ext["sonatypeStagingProfileId"] = System.getenv('SONATYPE_STAGING_PROFILE_ID')
ext["signing.keyId"] = System.getenv('SIGNING_KEY_ID')
ext["signing.password"] = System.getenv('SIGNING_PASSWORD')
ext["signing.key"] = System.getenv('SIGNING_KEY')
ext["snapshot"] = System.getenv('SNAPSHOT')
ext["publish_version"] = System.getenv('PUBLISH_VERSION')
}
nexusPublishing {
repositories {
sonatype {
stagingProfileId = sonatypeStagingProfileId
username = ossrhUsername
password = ossrhPassword
nexusUrl.set(uri("https://s01.oss.sonatype.org/service/local/"))
snapshotRepositoryUrl.set(uri("https://s01.oss.sonatype.org/content/repositories/snapshots/"))
}
}
}
================================================
FILE: settings.gradle.kts
================================================
pluginManagement {
repositories {
google()
mavenCentral()
gradlePluginPortal()
}
}
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
google()
mavenCentral()
}
}
rootProject.name = "AnimatedBottomBarCompose"
include(":app")
include(":bottombar")
# Licence
```
Copyright 2023 Canopas Software LLP
Licensed under the Apache License, Version 2.0 (the "License");
You won't be using this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
```
================================================
FILE: app/.gitignore
================================================
/build
================================================
FILE: app/build.gradle.kts
================================================
plugins {
id("com.android.application")
id("org.jetbrains.kotlin.android")
}
android {
namespace = "com.example.animatedbottombarcompose"
compileSdk = 34
defaultConfig {
applicationId = "com.example.animatedbottombarcompose"
minSdk = 24
versionCode = 1
versionName = "1.0"
testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
vectorDrawables {
useSupportLibrary = true
}
}
buildTypes {
release {
isMinifyEnabled = false
proguardFiles(
getDefaultProguardFile("proguard-android-optimize.txt"),
"proguard-rules.pro",
)
}
}
compileOptions {
sourceCompatibility = JavaVersion.VERSION_11
targetCompatibility = JavaVersion.VERSION_11
}
kotlinOptions {
jvmTarget = "11"
}
buildFeatures {
compose = true
}
composeOptions {
kotlinCompilerExtensionVersion = "1.5.3"
}
packaging {
resources {
excludes += "/META-INF/{AL2.0,LGPL2.1}"
}
}
}
dependencies {
implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.8.1")
implementation("androidx.activity:activity-compose:1.9.0")
implementation(platform("androidx.compose:compose-bom:2024.05.00"))
implementation("androidx.compose.ui:ui")
implementation("androidx.compose.ui:ui-graphics")
implementation("androidx.navigation:navigation-compose:2.7.7")
implementation("androidx.compose.ui:ui-tooling-preview")
implementation("androidx.compose.material3:material3")
testImplementation("junit:junit:4.13.2")
androidTestImplementation("androidx.test.ext:junit:1.1.5")
androidTestImplementation("androidx.test.espresso:espresso-core:3.5.1")
androidTestImplementation(platform("androidx.compose:compose-bom:2024.05.00"))
androidTestImplementation("androidx.compose.ui:ui-test-junit4")
debugImplementation("androidx.compose.ui:ui-tooling")
debugImplementation("androidx.compose.ui:ui-test-manifest")
implementation(project(":bottombar"))
implementation(kotlin("reflect"))
}
================================================
FILE: app/proguard-rules.pro
================================================
# 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
================================================
FILE: app/src/androidTest/java/com/example/animatedbottombarcompose/ExampleInstrumentedTest.kt
================================================
package com.example.animatedbottombarcompose
import androidx.test.ext.junit.runners.AndroidJUnit4
import androidx.test.platform.app.InstrumentationRegistry
import org.junit.Assert.*
import org.junit.Test
import org.junit.runner.RunWith
/**
* 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.example.animatedbottombarcompose", appContext.packageName)
}
}
================================================
FILE: app/src/main/AndroidManifest.xml
================================================