Bottom Navigation using design Library in Android - Kotlin

-

Introduction:

Let's implement BottomNavigationView in our layout using Design Support Library. First, we have to go through the factors like, when  and how to use that.

When to use?

As per Material Design specs, the following criteria is there:

(a) Tabs (TabLayout) - Should be used when there are two navigations.

(b) Bottom Navigation - Should be used when there are 3 to 5 navigations.

(c) Navigation Drawer - Should be used when there are 6 or more navigations.

Also to remember that, Viewpager shouldn't be used with BottomNavigationView. You can read the complete design specs, here.

How to use?

BottomNavigationView have to be added  at the bottom of the screen. Also, the following are some of the important attributes:

app:itemBackground - to apply background color 
app:itemTextColor - to apply the color for the text of BottomNavigation item.
app:itemIconTint - to apply the color for the icon of BottomNavigation item.
app:menu - to display navigation item (menu file)

Design:

build.gradle

Include the following in app-level gradle's dependencies.

 implementation 'com.android.support:design:26.1.0'

bottom_navigation.xml

Since, we can't use ViewPager with BottomNavigation, we have to use Fragment with it. Here, the root layout should be CoordinatorLayout, if you would like to do some more customization like hiding bottom navigation when scrolling down and showing when scrolling up.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <FrameLayout
        android:id="@+id/frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottomNavigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        app:menu="@menu/navigation_menu"
        app:itemBackground="@color/colorPrimary"
        android:foreground="?attr/selectableItemBackground"
        app:itemIconTint="@android:color/white"
        app:itemTextColor="@android:color/white"
        app:elevation="4dp"
        android:layout_gravity="bottom"/>

</android.support.design.widget.CoordinatorLayout>

navigation_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/home"
        android:title="@string/home"
        android:icon="@drawable/home" />

    <item
        android:id="@+id/cart"
        android:title="@string/cart"
        android:icon="@drawable/cart" />

    <item
        android:id="@+id/notification"
        android:title="@string/notification"
        android:icon="@drawable/notification" />

    <item
        android:id="@+id/profile"
        android:title="@string/profile"
        android:icon="@drawable/profile" />

</menu>

list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dp">

    <android.support.v7.widget.CardView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:elevation="3dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_margin="10dp"
                android:scaleType="centerCrop"
                android:src="@drawable/user" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="10dp"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/name"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="5dp"
                    android:text="Name" />

                <TextView
                    android:id="@+id/phone"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:paddingLeft="5dp"
                    android:paddingRight="5dp"
                    android:text="453345435" />

            </LinearLayout>

        </LinearLayout>
    </android.support.v7.widget.CardView>

</android.support.constraint.ConstraintLayout>

Code:

Bottombar.kt

We have to set OnNavigationItemSelectedListener to BottomNavigation, to fire particular actions while selection. Here I have only changed toolbar title while selection. You can invoke individual Fragment for each selection. 

class BottomBar : AppCompatActivity() {

    lateinit var toolBar: ActionBar

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContentView(R.layout.bottom_navigation)

        supportActionBar?.let { toolBar = it }


        toolBar.title = getString(R.string.home)
        switchContent(HomeFragment())

        bottomNavigation.setOnNavigationItemSelectedListener(object : BottomNavigationView.OnNavigationItemSelectedListener {
            override fun onNavigationItemSelected(item: MenuItem): Boolean {
                when (item.itemId) {
                    R.id.home -> {
                        toolBar.title = getString(R.string.home)
                        switchContent(HomeFragment())
                        return true
                    }

                    R.id.cart -> {
                        toolBar.title = getString(R.string.cart)
                        return true
                    }

                    R.id.notification -> {
                        toolBar.title = getString(R.string.notification)
                        return true
                    }

                    R.id.profile -> {
                        toolBar.title = getString(R.string.profile)
                        switchContent(ProfileFragment())
                        return true
                    }
                }
                return false
            }

        })

    }

    private fun switchContent(fragment: Fragment) {
        val transaction = supportFragmentManager.beginTransaction()
        transaction.replace(R.id.frame, fragment)
        transaction.addToBackStack(null)
        transaction.commit()
    }

   
}

HomeFragment.kt

class HomeFragment : Fragment() {
    var list : MutableList<Human> = ArrayList<Human>()
    lateinit var adapter: RecyclerAdapter

    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater!!.inflate(R.layout.recycler, container, false);
    }

    override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)
        /** Adding values **/
        list.add(Human("Anisha","9876543210"))
        list.add(Human("Karthik","9876543210"))
        list.add(Human("Vino","9876543210"))
        list.add(Human("Percy","95673210"))

        list.add(Human("Aruvi","9876543210"))
        list.add(Human("Faritha","9876543210"))
        list.add(Human("Annabeth","9876543210"))
        list.add(Human("Jason","95673210"))

        list.add(Human("Leo","9876543210"))
        list.add(Human("Piper","9876543210"))
        list.add(Human("Thalia","9876543210"))
        list.add(Human("Frank","95673210"))


        Log.v("list","list=="+list);

        recyclerView.layoutManager = LinearLayoutManager(activity, LinearLayout.VERTICAL, false)
        adapter = RecyclerAdapter(activity, list);
        recyclerView.adapter = adapter

    }

     class RecyclerAdapter(val context: Context, val data: MutableList<Human>) :
            RecyclerView.Adapter<RecyclerAdapter.ViewHolder>() {


        override fun onBindViewHolder(holder: ViewHolder?, position: Int) {
            if (holder != null)
                holder.bindItems(data.get(position))
        }

        override fun onCreateViewHolder(parent: ViewGroup?, viewType: Int): ViewHolder {
            val v = LayoutInflater.from(context).inflate(R.layout.list_item, parent, false)
            return ViewHolder(v)
        }

        override fun getItemCount(): Int {
            return data.size
        }

        class ViewHolder(itemView: View?) : RecyclerView.ViewHolder(itemView) {
            fun bindItems(map: Human) {
                itemView.name.text = "Name : " + map.name
                itemView.phone.text = "Phone : " + map.phone
            }
        }
    }

}

Bonus things:

  • If you would like to make BottomNavigation to hide when scroll the RecyclerView down and show when scrolling up, you have to include the following class.
class BottomNavigationBehavior : CoordinatorLayout.Behavior<BottomNavigationView>() {

    private var height: Int = 0

    override fun onLayoutChild(parent: CoordinatorLayout?, child: BottomNavigationView?, layoutDirection: Int): Boolean {
        height = child!!.height
        return super.onLayoutChild(parent, child, layoutDirection)
    }

    override fun onStartNestedScroll(coordinatorLayout: CoordinatorLayout,
                            child: BottomNavigationView, directTargetChild: View, target: View,
                            axes: Int, type: Int): Boolean {
        return axes == ViewCompat.SCROLL_AXIS_VERTICAL
    }

    override fun onNestedScroll(coordinatorLayout: CoordinatorLayout, child: BottomNavigationView,
                                target: View, dxConsumed: Int, dyConsumed: Int,
                                dxUnconsumed: Int, dyUnconsumed: Int,
                                @ViewCompat.NestedScrollType type: Int) {
        if (dyConsumed > 0) {
            slideDown(child)
        } else if (dyConsumed < 0) {
            slideUp(child)
        }
    }

    private fun slideUp(child: BottomNavigationView) {
        child.clearAnimation()
        child.animate().translationY(0f)
    }

    private fun slideDown(child: BottomNavigationView) {
        child.clearAnimation()
        child.animate().translationY(height.toFloat())
    }
}

And include the following in OnCreate of BottomBar.kt

 val layoutParams = bottomNavigation.getLayoutParams() as CoordinatorLayout.LayoutParams
 layoutParams.behavior = BottomNavigationBehavior()
  • If you would like to disable the shifting animation in BottomNavigation, you can include the following class to accomplish it.
class BottomNavigationHelper {
    companion object {
        @JvmStatic
        fun disableShiftMode(view: BottomNavigationView) {
            val menuView = view.getChildAt(0) as BottomNavigationMenuView
            try {
                val shiftingMode = menuView.javaClass.getDeclaredField("mShiftingMode")
                shiftingMode.isAccessible = true
                shiftingMode.setBoolean(menuView, false)
                shiftingMode.isAccessible = false
                for (i in 0 until menuView.childCount) {
                    val item = menuView.getChildAt(i) as BottomNavigationItemView
                    item.setShiftingMode(false)
                    // set once again checked value, so view will be updated
                    item.setChecked(item.itemData.isChecked)
                }
            } catch (e: NoSuchFieldException) {
                Log.e("BottomNavigationHelper", "Unable to get shift mode field", e)
            } catch (e: IllegalAccessException) {
                Log.e("BottomNavigationHelper", "Unable to change value of shift mode", e)
            }

        }
    }
}

And include the following in OnCreate of BottomBar.kt

BottomNavigationHelper.disableShiftMode(bottomNavigation)

Run Application:

       (a) Simple                                         (b) Hide/Show                               (c) Shift disabled

Comments

Post a Comment

Popular posts from this blog

Retrofit Integration in Android - Kotlin

-
Image
Retrofit is a Networking library, which is faster to use and easier to develop. Let’s see how to integrate Retrofit in Android with Kotlin. If you'd like to integrate RxJava as well, you can check here . 1. Configure: Include the following in app-level build.gradle. build.gradle compile "com.squareup.retrofit2:retrofit:2.3.0" compile "com.squareup.retrofit2:converter-gson:2.3.0" Include internet permission in Manifest file. AndroidManifest.xml <uses-permission android:name="android.permission.INTERNET" /> 2. Preparing Helper classes: ApiInterface.kt interface ApiInterface {    @POST("get_users_detail") // Your url    fun getUser(@Body requestBody: RequestBody): Call<UserResponse> } Model classes:                      Response from Retrofit will be stored in POJO classes dir...
Read more

SOAP Client using ksoap2 in Android - Kotlin

-
Image
Introduction: SOAP stands for Simple Object Access Protocol. It is XML-based protocol that allows programs that run on different operating systems (like Windows, Linux, etc) to communicate using HTTP and XML. Pros: Security - SOAP provides its own security known as WS Security . Platform Independent - SOAP web services can be written in any programming language and executed in any platform Cons: Slow - It uses XML format that must be parsed, to be read. It defines many standards to be followed while developing. So its slow and consumes more bandwidth and resource. WSDL dependent - It uses WSDL mechanism and doesn't have any other mechanism to discover the service. Things to know: The following are the things we have to know before we proceed further:                     URL - It is the URL of WSDL file.                     NAMESPACE - It is ta...
Read more

Using Camera in Android - Kotlin

-
Image
Nowadays, most of our Android app require access to Camera to capture picture or Video. We can do that in two ways.                                 (i) Using built-in Camera,                                 (ii) Using custom Camera. Using Built-in Camera In this post, Let's see how to use the built-in camera to capture images and save it. Its a simple way to capture pics. We can use the mobile's built-in camera app using Intent.  val REQUEST_IMAGE_CAPTURE = 1 private fun takePictureIntent() { val takePictureIntent = Intent(MediaStore . ACTION_IMAGE_CAPTURE) if (takePictureIntent . resolveActivity(packageManager) != null) { startActivityForResult(takePictureIntent, REQUEST_IMAGE_CAPTURE) } } After the picture has been captured, the result will received on on...
Read more

RecyclerView with different number of columns using SpanSizeLookup

-
Image
We already know how to design RecyclerView. But how to create RecyclerView with different columns depending on its row? Like below image? Yeah, we can do that, by using two different layouts with different viewType on Adapter. Another way is do some logic to do so. But, it's cumbersome. Luckily, we have another simple way to do that using SpanSizeLookUp . Let's see how to implement that in this post. Implementation: build.gradle Include the following in app-level gradle file. implementation 'com.android.support:recyclerview-v7:27.0.2' implementation 'com.android.support.constraint:constraint-layout:1.1.0-beta5' recycler.xml <?xml version= "1.0" encoding= "utf-8" ?> <android.support.constraint.ConstraintLayout xmlns:android= "http://schemas.android.com/apk/res/android" android:layout_width= "match_parent" android:layout_height= "match_parent" xmlns:ap...
Read more

Room with LiveData, ViewModel - Android Architecture Components - Kotlin

-
Image
Introduction: We have already learnt about Room in last post,  Room-Kotlin . In this post, lets learn about how to use ViewModel and LiveData with Room to improve usablity. Using LiveData with Room, allows views to be notified about data changes automatically. LiveData: LiveData is nothing but observable data holder class. It allows us to observer changes in data across multiple components of app. It is also aware of and respects lifecycle of Activities/Fragments. It also ensures that LiveData only updates app component observers that are in an active lifecycle state. The following image depicts the Lifecycle and States: Here, CREATED, STARTED, RESUMED - Active States           INTIALIZED, DESTROYED - InActive States So, LiveData will remove the updates automatically while in InActive States, i.e., INTIALIZED and DESTROYED. ViewModel: ViewModel is an entity that is free of Activity/Fragment's lifecycle. So it allows us...
Read more

Map, Location update and AutoComplete Places - Kotlin

-
Image
Let's see how to show current location in Maps and also show the location which is chosen from AutoComplete in Maps with the updated Google play services. That is, for location listening we gonna use   FusedLocationProviderClient and for autocomplete places, we gonna use, GeoDataClient with AutoCompletePrediction, i.e., no need to call places url from our end, Google Playservices will do that work for you. Okiee, Let's start now. You can find the project in Github . PreRequisite: Navigate to  https://developers.google.com/maps/documentation/android-api/signup and do as per the instructions to start. Manifest: Include your API key, which you got from previous step in AndroidManifest.xml <meta-data android:name= "com.google.android.geo.API_KEY" android:value= "AIzXXXXXXXXXX_XXXXXXXXXXXXXX" /> Gradle: Include the following in app-level build 's dependencies. implementation 'com...
Read more

Stripe Integration in Android - Kotlin

-
Image
Stripe is one of the simplest payment gateway to be used. It enables us to process payments in minutes. Let's see how to integrate Stripe in Android using Kotlin. Operational Flow:             1. App should provide order details to Stripe server and the order total will be returned to App.             2. Then the user will enter the payment/card details. That will be sent to Stripe server and the result of the request will be sent back to the App. Create Stripe Account: (a) Go to  https://dashboard.stripe.com/register and enter all your details and create account.   (b) Click API in side tab. Make sure that the Account is in Test mode. And make a note of          Publishable Key and Secret Key for use. Code: build.gradle:   compile 'com.stripe:stripe-android:5.1.0' Layout files: main_layout.xml: <?xml version="1.0" encoding...
Read more

Shimmer Layout like Facebook in Android - Kotlin

-
Image
While loading data from API, we used to show boring loaders. But in Facebook's app, one loading screen will be displayed. That one looks interesting know. We can also do that shimmer effect in our Andorid App using Shimmer library by Facebook. Let's start. Implementation: build.gradle Include the following in app-level gradle file. implementation 'com.facebook.shimmer:shimmer:0.1.0' colors.xml Include the following color in values -> colors.xml <color name= "placeholder_color" > #dddddd </color> Design: 1. First we have to design placeholder layout that is similar to your RecyclerView's adapter layout. placeholder.xml <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:app= "http://schemas.android.com/apk/res-auto" android:layout_width...
Read more

TabLayout in Android with Kotlin

-
Image
1. Create New Project:            Lets create New Project with Kotlin support as follows: 2. Adding design library:           Add design library in app's build.gradle file. build.gradle         implementation 'com.android.support:design:26.1.0' 3. Drawing layouts:  Create a layout with TabLayout and ViewPager slide_page.xml <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout      xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     android:layout_width="match_parent"     android:layout_height="match_parent">     <LinearLayout         android:layout_width="0dp"         android:layout_height="0dp"         android:orientation="vertical...
Read more

Exploring Android Slices - JetPack

-
Image
Introduction: Slices are a new way of embedding our app's content in other surfaces, like Google Search and later in other places like Google Assistant. Slices are UI templates, which gives look and feel at home in whatever surface, they get hosts in. Also they are rich, interactive and dynamically updatable. Before jumping into that, first migrate your project to AndroidX, (Android Studio 3.2 & above), by navigating as,                                         Refactor --> Migrate  to AndroidX  Setup: build.gradle implementation 'androidx.slice:slice-core:1.0.0' implementation 'androidx.slice:slice-builders-ktx:1.0.0-alpha6' implementation 'androidx.slice:slice-builders:1.0.0' Creating Slice Provider: Slice Provider is a component that let us display the slices we are creating, on outside our application. We can create the Slice Pro...
Read more