A simple & curved & material bottom navigation for Android written in Kotlin with ♥ .
Update your build.gradle (project path) like below :
buildscript {
repositories {
jcenter()
}
}Update your build.gradle (module path) like below :
dependencies {
implementation 'com.etebarian:meow-bottom-navigation:1.3.1'
}Use androidx by adding this lines to gradle.properties. If you want more info, just google AndroidX.
android.useAndroidX=true
android.enableJetifier=trueIf you want to add this library to a JAVA Project, you must add kotlin library to build.gradle.
dependencies {
implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.3.61"
}We are developing this framework in open source community without financial planning but the maintenance & preparing updates at periodic times is Time-consuming. If you like this project and you want to give us peace of mind, you can support us by clicking this button :
Add Meow Bottom Navigation in you layout xml file.
<meow.meowbottomnavigation.MeowBottomNavigation
android:layout_width="match_parent"
android:layout_height="wrap_content"/>Add menu items in code.
val bottomNavigation = findView(R.id.bottomNavigation)
bottomNavigation.add(MeowBottomNavigation.Model(1, R.drawable.ic_home))
bottomNavigation.add(MeowBottomNavigation.Model(2, R.drawable.ic_explore))
bottomNavigation.add(MeowBottomNavigation.Model(3, R.drawable.ic_message))Add vectorDrawables.useSupportLibrary = true to your build.gradle inside defaultConfig{ ... } to use vector drawable icons.
<com.etebarian.meowbottomnavigation.MeowBottomNavigation
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:mbn_circleColor="#ffffff"
app:mbn_backgroundBottomColor="#ffffff"
app:mbn_countBackgroundColor="#ff6f00"
app:mbn_countTextColor="#ffffff"
app:mbn_countTypeface="fonts/SourceSansPro-Regular.ttf"
app:mbn_defaultIconColor="#90a4ae"
app:mbn_rippleColor="#2f424242"
app:mbn_selectedIconColor="#3c415e"
app:mbn_shadowColor="#1f212121"
app:mbn_hasAnimation="true"
/>- You can change this properties in Kotlin/Java Realtime⌚.
Use setOnShowListener() function to access when a cell has been shown.
bottomNavigation.setOnShowListener {
// YOUR CODES
}Use setOnClickMenuListener() function to access when a cell has been clicked.
bottomNavigation.setOnClickMenuListener {
// YOUR CODES
}If you are Java Developer, use this examples :
bottomNavigation.setOnClickMenuListener(new Function1<MeowBottomNavigation.Model, Unit>() {
@Override
public Unit invoke(MeowBottomNavigation.Model model) {
// YOUR CODES
return null;
}
});
bottomNavigation.setOnShowListener(new Function1<MeowBottomNavigation.Model, Unit>() {
@Override
public Unit invoke(MeowBottomNavigation.Model model) {
// YOUR CODES
return null;
}
});Set counter badge on a specific cell by setCount(Int,String).
bottomNavigation.setCount(CELL_ID, YOUR_STRING)Clear counter badge on a specific cell by clearCount(Int).
bottomNavigation.clearCount(CELL_ID)Clear all counter badges on a specific cell by clearCount(Int).
bottomNavigation.clearAllCounts(TAB_ID)Use this function :
bottomNavigation.show(CELL_ID)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent