A simple android library which helps you to create a curved bottom navigation

Overview

CurvedBottomNavigation

A simple android library which helps you to create a curved bottom navigation

DEMO

alt text

Setup

Update your module level build.gradle file and add the following dependency. Please check the project releases for latest versions.

dependencies {
 implementation 'com.github.qamarelsafadi:CurvedBottomNavigation:0.1.3'
}

Important! if your android studio version is fox and higher please add the following dependency in your project level build.gradle above plugins

buildscript {
    repositories {
        google()
        mavenCentral()
        maven { url 'https://jitpack.io' }
    }
}

Usage

Add com.qamar.curvedbottomnaviagtion.CurvedBottomNavigation in your layout xml file.

    <com.qamar.curvedbottomnaviagtion.CurvedBottomNavigation
        android:id="@+id/bottomNavigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cbn_background="@color/black"
        app:cbn_fabColor="@color/purple_200"
        app:cbn_iconColor="@color/white"
        app:cbn_height="76dp"
        app:cbn_icon_size="24dp"
        app:cbn_curve_radius="26dp"
        app:cbn_selected_icon_size="48dp"
        app:cbn_selectedIconColor="@color/white"
        app:cbn_titleColor="@color/white"
        app:cbn_titleFont="@font/book"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

XML Attributes

Attribute Description
app:cbn_background Background for bottom navigation view
app:cbn_fabColor Background for FAB view
app:cbn_iconColor Icon color tint
app:cbn_height Bottom navigation height
app:cbn_icon_size Icon item size
app:cbn_curve_radius Curve raduis
app:cbn_selected_icon_size Selected icon item size
app:cbn_selectedIconColor FAB icon tint color
app:cbn_titleColor Item title text color
app:cbn_titleFont Item title font type

Setup on code

In your Activiy defined the ids of your items

    companion object {
        // you can put any unique id here, but because I am using Navigation Component I prefer to put it as
        // the fragment id.
        const val HOME_ITEM = R.id.homeFragment
        const val OFFERS_ITEM = R.id.offersFragment
        const val MORE_ITEM = R.id.moreFragment
        const val SECTION_ITEM = R.id.sectionFragment
        const val CART_ITEM = R.id.cartFragment
        const val BLANK_ITEM = R.id.blankFragment
    }

In onCreate

  initNavHost()
  setUpBottomNavigation()

Let's setup our Navigation Component // this step is optional but I prefer it

  private fun initNavHost() {
        val navHostFragment = supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
        navController = navHostFragment.navController
    }

Now let's create our CurvedNavigationBottomItems

   private fun ActivityMainBinding.setUpBottomNavigation() {
        val bottomNavigationItems = mutableListOf(
            CurvedBottomNavigation.Model(HOME_ITEM, getString(R.string.home), R.drawable._01_home),
            CurvedBottomNavigation.Model(OFFERS_ITEM, getString(R.string.offers), R.drawable.offers),
            CurvedBottomNavigation.Model(SECTION_ITEM, getString(R.string.sections), R.drawable.section),
            CurvedBottomNavigation.Model(CART_ITEM, getString(R.string.cart), R.drawable.cart),
            CurvedBottomNavigation.Model(MORE_ITEM, getString(R.string.more), R.drawable.more),
            CurvedBottomNavigation.Model(BLANK_ITEM, getString(R.string.more), R.drawable.more),
        )
        bottomNavigation.apply {
            bottomNavigationItems.forEach { add(it) }
            setOnClickMenuListener {
                navController.navigate(it.id)
            }
            show(HOME_ITEM)
            // optional
            setupNavController(navController)
        }
    }

And

  // if you need your backstack of your items always back to home please override this method
    override fun onBackPressed() {
        if (navController.currentDestination!!.id == HOME_ITEM)
            super.onBackPressed()
        else {
            when (navController.currentDestination!!.id) {
              OFFERS_ITEM -> {
                    navController.popBackStack(R.id.homeFragment, false)
                }
               SECTION_ITEM -> {
                    navController.popBackStack(R.id.homeFragment, false)
                }
                CART_ITEM -> {
                    navController.popBackStack(R.id.homeFragment, false)
                }
               MORE_ITEM -> {
                    navController.popBackStack(R.id.homeFragment, false)
                }
                else -> {
                    navController.navigateUp()
                }
            }
        }
    }

Credits

This library is inspired by Meow Bottom Navigation it helps me a lot to do this but seems like the owner is not reciveing the pull requests and I needed more custome components this Library comes out 🚀 .

Comments
  • [Feature] Color selection based on user input

    [Feature] Color selection based on user input

    Noticed colors are fixed and not based on user input which limits developers to follow their application theme. I recommend to allow developers to specify the colors.

    question 
    opened by mutairibassam 3
  • [bug] TypedArray.getFont()

    [bug] TypedArray.getFont()

    The run-time error is not caused because of the setAttributeFromXml function, it's cased from the getFont().

    The suggested solution is a workaround. The workaround is about finding the resource ID of the font from the TypedArray, and then use ResourcesCompat to load the font.

    good first issue 
    opened by mutairibassam 1
  • Error: Call requires API level 26 (current min is 21): setAttributeFromXml [NewApi]

    Error: Call requires API level 26 (current min is 21): setAttributeFromXml [NewApi]

    @qamarelsafadi After doing a health check in the code, I found one of the used APIs requires minimum level 26 without putting any condition. So, I did a test in API 24 and caused a run time error.

    Before applying any fixes, can you please let me know if you did any test for APIs less than 26?

    Code: https://github.com/qamarelsafadi/CurvedBottomNavigation/blob/fc119e80ab54e29ef005032616e2bd442249154c/curvedBottomNaviagtion/src/main/java/com/qamar/curvedbottomnaviagtion/CurvedBottomNavigation.kt#L136

    https://github.com/qamarelsafadi/CurvedBottomNavigation/blob/fc119e80ab54e29ef005032616e2bd442249154c/curvedBottomNaviagtion/src/main/java/com/qamar/curvedbottomnaviagtion/CurvedBottomNavigation.kt#L145

    opened by mutairibassam 1
  • Hotfix/err set attribute from xml

    Hotfix/err set attribute from xml

    Fixes #1 and enhancements:

    • run-time error: set attribute API support minimum level 26 and there is no validation for apis less than 26 which cause a run-time error.
    • upgrade gradle from 7.1.2 to 7.1.3 (the latest).
    • apply lint fixes.
    • add additional files in .gitignore file.
    • navigation typo.
    opened by mutairibassam 0
  • Unable to add as a module

    Unable to add as a module

    Hi, I am unable to add this repository as a module. Because of this: Caused by: groovy.lang.MissingMethodException: No signature of method: build_qlp6tlm9omvjh9w6yqvl6qug.android() is applicable for argument types: (build_qlp6tlm9omvjh9w6yqvl6qug$_run_closure1) values: [build_qlp6tlm9omvjh9w6yqvl6qug$_run_closure1@403db0a0] Can you please help? Thanks.

    opened by Bukhari386 1
Releases(0.1.3)
Owner
Qama A. Safadi
Android developer, passionate about learning new things, be part of great teams and do great apps.
Qama A. Safadi
SeatBookView is an Android Studio Library that helps to make it easier to create Bus, Train, Cinema Theater Seat UI and all functionalities are given.

SeatBookView SeatBookView is an Android Studio Library that helps to make it easier to create Bus ?? , Train ?? , Cinema Theater Seat UI and all funct

Md. Zahidul Islam 3 Oct 15, 2022
To help to promote your android app by prompting users to rate your app in a bottom Sheet.

RateBottomSheet This an Android library to help to promote your Android App by prompting users to rate your app in the Google Play Store with a materi

Farham Hosseini 5 Jul 8, 2022
Waple helps you share your Wi-Fi password quickly.💭🧇

waple Waple helps you share your Wi-Fi password quickly. ?? ?? Production intention ?? Wi-Fi passwords are usually complicated for security purposes.

Euphony 5 Jul 21, 2022
BindsAdapter is an Android library to help you create and maintain Adapter class easier via ksp( Kotlin Symbol Processing).

BindsAdapter BindsAdapter is an Android library to help you create and maintain Adapter class easier via ksp( Kotlin Symbol Processing). Installation

Jintin 5 Jul 30, 2022
A webapp which generates a simple Discord profile banner image in real-time which shows user's status and activity.

DiscordProfileBanner This tool generates a Discord profile banner image in realtime. I wrote it for use in my AniList profile. An example in action: H

Quanta 11 Oct 17, 2022
Modular Android architecture which showcase Kotlin, MVVM, Navigation, Hilt, Coroutines, Jetpack compose, Retrofit, Unit test and Kotlin Gradle DSL.

SampleCompose Modular Android architecture which showcase Kotlin, MVVM, Navigation, Hilt, Coroutines, Jetpack compose, Retrofit, Unit test and Kotlin

Mohammadali Rezaei 7 Nov 28, 2022
A Simple Android library to get the number of words and give you the time it will take you to finish an article/story.

MinRead A Simple Android library to get the number of words and give you the time it will take you to finish an article/story. Prerequisite Androidx K

Nwokocha wisdom maduabuchi 36 Nov 17, 2021
Simple view which allow you to customise your pizza's toppings and size as per your choice.

TwistedPizzaToppingsView Overview Simple view which allows options to customize your pizza toppings and size as per your choice. Features Android 12 s

MindInventory 19 Dec 18, 2022
A simple tool used to check the users you follow that do not follow you back.

instafbchecker - Instagram no life guide Current Release: v1.0.1 (30/08/2022) A command line tool used to check which users dont follow you back on In

Nathan 2 Aug 30, 2022
Plannr is an organizational platform developed using Java, in the form of an Android app, that helps university students coordinate their everyday routine.

Plannr Plannr is an organizational platform developed using Java, in the form of an Android app, that helps university students coordinate their every

Dana Al Shekerchi 2 Sep 8, 2022
A project that helps us generate the test project to test the Gradle plugin.

Ktlint Gradle Provides the function to generate a Gradle project for us to test your Gradle plugin Latest plugin version: [1.0.0] Table of content How

Jack Chen 5 Jul 20, 2022
Starter project to create a simple RESTful web service in Kotlin

Modified: Adding Koin for DI Using JWT for authentication and authorization Dropping proprietary FlyAway tool Single Page Application support Starter

null 1 Oct 23, 2021
Kotlin multi-platform application navigation library.

navigation Kotlin multi-platform application navigation library. Supports Jetpack Compose. val navigator = rememberNavigatorByKey("Greeting") { key ->

Christopher 9 Jan 2, 2023
A ksp library to automatically generate navigation functions for jetpack compose.

Compose/Navigation/Generator ⚠️ This library is still under development and not considered stable! Content Introduction Usage Example: Single destinat

Steffen Eckardt 4 Sep 13, 2022
Kotlin Symbol Processor library to create Mutable and Immutable variants of objects.

implier Kotlin Symbol Processor plugin to create Mutable and Immutable variants of objects. Examples @ImmutableImpl @MutableImpl public interface Samp

Vadim Yaroschuk 14 Nov 8, 2022
This is a practice app. An app that you can find random recipes and choose the ones you like.

A food suggestion app like Tinder This is a practice app. In this app, you can find random recipes and choose the ones you like. This is main menu. Yo

Yunus Emre OCAK 4 May 25, 2022
sample project that shows you how you can use Ktor to creat a server for real Project.

Ktor-Sample This is a sample project that shows you how you can use Ktor to creat a server for real Project. What is done Save data to database (Get a

Mohamed Emad 4 Dec 23, 2022
If you had one month to visit the best places in Kenya, where would you go?

VisitKenya If you had one month to visit the best places in Kenya, where would you go? This app just shows you sample places where you could visit, wi

Alan Derich 1 Oct 20, 2022
A simple App which fetches data from NewYork times api and show news to the user

Stay-TheNewsApp This is a simple java app, which fetches data from NewYork times api and show news to the user, News can be seen from various categori

Gautam Garg 0 Dec 7, 2021