Build a File Explorer in Kotlin – Part 4 – Adding Breadcrumbs

In this tutorial you will add the functionality which enables the user to navigate back to any position in the backstack. This will be achieved by adding breadcrumbs. If you don’t know about breadcrumbs please read about it here before continuing with the article.

In short, breadcrumbs are trail of of paths/pages visited by the user. Almost all websites provide  navigation using breadcrumbs. Below is an example (image from EggHead).

In our Kotlin File Explorer application we will add breadcrumbs in the app bar using a RecyclerView.

Setting up RecyclerView for Breadcrumbs

Let’s first set up the item view for the RecyclerView. I have named the file item_recycler_breadcrumb.xml. A single item will look like this:

Create a new class named BreadcrumbRecyclerAdapter that extends RecyclerView.Adapter. The data for this RecyclerAdapter will be a list of FileModel. As the user clicks and navigates through the file system, we will keep updating the FileModel list. All the other methods inside this class are basic for a RecyclerView.Adapter.

In the AppBar of activity_main.xml add a RecyclerView.

Backstack Manager

Before going ahead and wiring up the RecyclerAdapter with the RecyclerView, lets do some extra work that will keep our MainActivity clean. Now we can directly add the list of FileModel to the adapter and keep updating it as user moves too and fro, but that will be too much mess in MainActivity and as you know, mess always grows! So what we are going to do is maintain a stack of the FileModel the user has visited. So if the user taps on a folder, we will push the corresponding FileModel on top of the stack.

Create a class named BackStackManager.

Add a mutable list of FileModel which we will use as our stack.

Let’s add method to push and pop from the stack.

We will add a method to get the top of the stack, not pop it!, just get what is at the top of the stack.

Our BackStackManger class is pretty straight forward till now. Let’s add a little more complex, yet quite simple function to it. A function that removes keeps popping items from the stack till a particular point.

These are all the methods we need to manipulate our BackStackManager. There is one more convenient thing that we will add here is, a stack change listener. Basically when the stack is modified we want to notify the listener attached to our back stack. Listener functionality is simple and similar to click listener in our recycler adapter.

We are done with BackStackManager. Lets wire up the RecyclerView for breadcrumbs!

Never miss a post from TheTechnoCafe

Displaying the Breadcrumbs

If have been following the tutorial properly, your MainActivity.kt should look like this.

Define a variable for BackStackManager and initialise it.

(Hidden most of the code that is being repeated from previous tutorials.)

Now lets initialise the breadcrumb RecyclerView with BreadcrumbRecyclerAdapter.

On line 34 you can see we are popping the fragments when the user clicks on a particular breadcrumb. First argument is the name given to the path when it is added to the container (which in our case is the path that the fragment represents), the second arguments is a flag which denotes that when the fragment manager starts removing the fragments should it remove the matched fragment as well, in our case we don’t want that so we give any number greater than 1.

Whenever the user clicks on a folder, we need to update the back stack manager, which we will do in the addFileFragment method (already defined in our MainActivity). We also need to pop from back stack when the user presses back button, we do that in onBackPressed.

All there is left is to update the BreadcrumbRecyclerAdapter whenever the backstack changes.

On line 50, whenever the back stack changes, we smooth scroll the recycler view to the last element.

Now the application should look and behave as follow:

That is it in this tutorial. In the next tutorial you will implement features to create new folders and files, our BackStackManager will prove helpful in that case as well.

<< Previous Tutorial – Part 3 – Navigating through file system

Next Tutorial – Part 5 – Creating/Deleting Files and Folders >>