A simple & curved & material bottom navigation for Android written in Kotlin with ♥ .
Update your build.gradle (project path) like below :
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
mavenCentral()
maven { url 'https://jitpack.io' }
}
}Update your build.gradle (module path) like below :
dependencies {
implementation 'com.github.Foysalofficial:NafisBottomNav:5.0'
}dependencies {
implementation ("com.github.Foysalofficial:NafisBottomNav:5.0")
}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"
}android {
namespace "com.demo.paka"
compileSdkVersion 34
defaultConfig {
applicationId "com.demo.paka"
minSdkVersion 21
//noinspection EditedTargetSdkVersion
targetSdkVersion 34
versionCode 3
versionName "1.1"
}
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
kotlinOptions {
jvmTarget = "1.8"
}
buildFeatures {
dataBinding true
}
}
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.
<com.nafis.bottomnavigation.NafisBottomNavigation
android:layout_width="match_parent"
android:layout_height="wrap_content"/>Add menu items in code.
val bottomNavigation = findView(R.id.bottomNavigation)
bottomNavigation.add(NafisBottomNavigation.Model(1, R.drawable.ic_home))
bottomNavigation.add(NafisBottomNavigation.Model(2, R.drawable.ic_explore))
bottomNavigation.add(NafisBottomNavigation.Model(3, R.drawable.ic_message))Add vectorDrawables.useSupportLibrary = true to your build.gradle inside defaultConfig{ ... } to use vector drawable icons.
<com.nafis.bottomnavigation.NafisBottomNavigation
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<NafisBottomNavigation.Model, Unit>() {
@Override
public Unit invoke(NafisBottomNavigation.Model model) {
// YOUR CODES
return null;
}
});
bottomNavigation.setOnShowListener(new Function1<NafisBottomNavigation.Model, Unit>() {
@Override
public Unit invoke(NafisBottomNavigation.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)public class MainActivity extends AppCompatActivity {
private static final int ID_HOME = 1;
private static final int ID_EXPLORE = 2;
private static final int ID_MESSAGE = 3;
private static final int ID_NOTIFICATION = 4;
private static final int ID_ACCOUNT = 5;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
this.enableEdgeToEdge();
setContentView(R.layout.activity_main);
ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main),
new OnApplyWindowInsetsListener() {
@Override
public WindowInsetsCompat onApplyWindowInsets(View v, WindowInsetsCompat insets) {
Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
return insets;
}
});
// Find views by ID
TextView tvSelected = findViewById(R.id.tv_selected);
NafisBottomNavigation bottomNavigation = findViewById(R.id.bottomNavigation);
Button btShow = findViewById(R.id.btShow);
EditText etPageId = findViewById(R.id.etPageId);
// Set custom typeface for tvSelected
tvSelected.setTypeface(Typeface.createFromAsset(getAssets(), "fonts/SourceSansPro-Regular.ttf"));
// Set up bottom navigation
bottomNavigation.add(new NafisBottomNavigation.Model(ID_HOME, R.drawable.ic_home));
bottomNavigation.add(new NafisBottomNavigation.Model(ID_EXPLORE, R.drawable.ic_explore));
bottomNavigation.add(new NafisBottomNavigation.Model(ID_MESSAGE, R.drawable.ic_message));
bottomNavigation.add(new NafisBottomNavigation.Model(ID_NOTIFICATION, R.drawable.ic_notification));
bottomNavigation.add(new NafisBottomNavigation.Model(ID_ACCOUNT, R.drawable.ic_account));
bottomNavigation.setCount(ID_NOTIFICATION, "115");
bottomNavigation.setOnShowListener(new Function1<NafisBottomNavigation.Model, Unit>() {
@Override
public Unit invoke(NafisBottomNavigation.Model model) {
String name = "";
if (model.getId() == ID_HOME) {
name = "HOME";
} else if (model.getId() == ID_EXPLORE) {
name = "EXPLORE";
} else if (model.getId() == ID_MESSAGE) {
name = "MESSAGE";
} else if (model.getId() == ID_NOTIFICATION) {
name = "NOTIFICATION";
} else if (model.getId() == ID_ACCOUNT) {
name = "ACCOUNT";
}
return null;
}
});
bottomNavigation.setOnClickMenuListener(new Function1<NafisBottomNavigation.Model, Unit>() {
@Override
public Unit invoke(NafisBottomNavigation.Model model) {
String name = "";
if (model.getId() == ID_HOME) {
name = "HOME";
} else if (model.getId() == ID_EXPLORE) {
name = "EXPLORE";
} else if (model.getId() == ID_MESSAGE) {
name = "MESSAGE";
} else if (model.getId() == ID_NOTIFICATION) {
name = "NOTIFICATION";
} else if (model.getId() == ID_ACCOUNT) {
name = "ACCOUNT";
}
}
});
bottomNavigation.setOnReselectListener(new Function1<NafisBottomNavigation.Model, Unit>() {
@Override
public Unit invoke(NafisBottomNavigation.Model model) {
Toast.makeText(MainActivity.this, "Item " + model.getId() + " is reselected.", Toast.LENGTH_LONG).show();
return null;
}
});
bottomNavigation.show(ID_HOME);
// Button click to show page by ID
btShow.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int id;
try {
id = Integer.parseInt(etPageId.getText().toString());
} catch (Exception e) {
id = ID_HOME;
}
if (id >= ID_HOME && id <= ID_ACCOUNT) {
bottomNavigation.show(id);
}
}
});
}
private void enableEdgeToEdge() {
// Implementation for enabling edge-to-edge display, if applicable
}
}Use this function :
bottomNavigation.show(CELL_ID)