coco
109 lines
4.4 KiB
Markdown
109 lines
4.4 KiB
Markdown
# curved-bottom-navigation
|
|
|
|
[](https://maven-badges.herokuapp.com/maven-central/np.com.susanthapa/curved_bottom_navigation)
|
|
|
|
A simple curved bottom navigation for Android with AnimatedVectorDrawable and Jetpack Navigation support.
|
|
|
|
## Demo
|
|
|
|
|
|
## Setup
|
|
Update your **module** level `build.gradle` file and add the following dependency. Please check the project releases for latest versions.
|
|
```groovy
|
|
dependencies {
|
|
implementation 'np.com.susanthapa:curved_bottom_navigation:latest_version'
|
|
}
|
|
```
|
|
|
|
**Important!** This project uses AndroidX so make sure you have AndroidX enabled by adding these lines to `gradle.properties`
|
|
```properties
|
|
android.useAndroidX=true
|
|
android.enableJetifier=true
|
|
```
|
|
|
|
## Usage
|
|
|
|
### Setup in XML
|
|
Add `CurvedBottomNavigationView` in your layout xml file.
|
|
```xml
|
|
<np.com.susanthapa.curved_bottom_navigation.CurvedBottomNavigationView
|
|
android:id="@+id/nav_view"
|
|
android:layout_width="match_parent"
|
|
android:layout_height="wrap_content" />
|
|
```
|
|
|
|
### Setup in Code
|
|
In your `onCreate()` of Activity create a list of `CbnMenuItem` that you want to appear in the `CurvedBottomNavigationView`. Then pass the list to the `setMenuItems()` function that also takes activeIndex(which is 0 by default) from which you can control which position item should be active when it is initialized.
|
|
```kotlin
|
|
val menuItems = arrayOf(
|
|
CbnMenuItem(
|
|
R.drawable.ic_notification, // the icon
|
|
R.drawable.avd_notification, // the AVD that will be shown in FAB
|
|
R.id.navigation_notifications // optional if you use Jetpack Navigation
|
|
),
|
|
CbnMenuItem(
|
|
R.drawable.ic_dashboard,
|
|
R.drawable.avd_dashboard,
|
|
R.id.navigation_dashboard
|
|
),
|
|
CbnMenuItem(
|
|
R.drawable.ic_home,
|
|
R.drawable.avd_home,
|
|
R.id.navigation_home
|
|
),
|
|
CbnMenuItem(
|
|
R.drawable.ic_profile,
|
|
R.drawable.avd_profile,
|
|
R.id.navigation_profile
|
|
),
|
|
CbnMenuItem(
|
|
R.drawable.ic_settings,
|
|
R.drawable.avd_settings,
|
|
R.id.navigation_settings
|
|
)
|
|
)
|
|
binding.navView.setMenuItems(menuItems, 2)
|
|
```
|
|
|
|
### Handling Navigation with Listener
|
|
To listen whenever the menu item is clicked you can pass a lambda to `setOnMenuItemClickListener`.
|
|
```kotlin
|
|
binding.navView.setOnMenuItemClickListener { cbnMenuItem, index ->
|
|
// handle your own navigation here
|
|
}
|
|
```
|
|
|
|
### Handling Navigaiton with Jetpack Navigation
|
|
If you are like me and :heart: Jetpack then there is a method called `setupWithNavController()` that accepts `NavController` and will handle the navigaiton for you. Just don't forget to pass the `id` of the destination when you are creating `CbnMenuItem`.
|
|
|
|
**Note:** Make sure the home destination in your navigation graph corresponds to the `activeIndex` that you have passed to `setMenuItems()`.
|
|
```kotlin
|
|
binding.navView.setupWithNavController(navController)
|
|
```
|
|
|
|
### Manually setting the active item
|
|
If you need to manually set the active item you can call the `onMenuItemClick()` function and pass in the index that you would like to be selected.
|
|
```kotlin
|
|
binding.navView.onMenuItemClick(2)
|
|
```
|
|
|
|
### Handling configuration changes
|
|
Due to animations, you need to manually handle the configuration changes. You can refer to the sample app for simple implementation.
|
|
|
|
### XML Attribues
|
|
Attribute | Description | Default Value
|
|
--------- | ----------- | -------------
|
|
app:cbn_selectedColor | Tint for the icon in selected state | `#000000`
|
|
app:cbn_unSelectedColor | Tint for the icon in unselected state | `#8F8F8F`
|
|
app:cbn_animDuration | Duration in millisecond for the curve animation | `300L`
|
|
app:cbn_fabElevation | Elevation for the Floating Action Button | `4dp`
|
|
app:cbn_elevation | Elevaton for the Curved Bottom Navigation View | `6dp`
|
|
app:cbn_fabBg | Background color of the Floating Action Button | `#FFFFFF`
|
|
app:cbn_bg | Background color of the Curved Bottom Navigation | `#FFFFFF`
|
|
|
|
### Note
|
|
The height of the `CurvedBottomNavigationView` is fixed to `56dp` and the size of the `FloatingActionButton` is also fixed to `56dp` for now.
|
|
Also the `AnimatedVectorDrawable` animation duration is taken as it is defined in the xml file.
|
|
|
|
Here is the [link](https://medium.com/@susuthapa19961227/curved-cut-out-bottom-navigation-with-animation-in-android-c630c867958c) to my blog post that explains this library in some detail.
|