Android BreadCrumbView

Best Android BreadCrumbView Libraries and Examples

It is possible to display breadcrumbs in your native android app built with kotlin or java. You can do via third party libraries. In this tutorial we want to look at some of these libraries.

(a). tiagohm/BreadCrumbView

Android Material Design Breadcrumb Navigation.

Android BreadCrumbView Example

Step 1: Install BreadCrumbView

The first step is to install it. First register jitpack as a maven url in your build.gradle file:

    allprojects {
        repositories {
            ...
            maven { url "https://jitpack.io" }
        }
    }

Then add the following implementation statement in your app level build.gradle:

implementation 'com.github.tiagohm:BreadCrumbView:0.1.2'

Step 2: Add BreadCrumbView Layout

Add it in your xml layout where you want the breadcrumbview to apperar, be it a toolbar or otherwise:

<br.tiagohm.breadcrumbview.BreadCrumbView
    android:id="@+id/breadcrumbview"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    app:bcv_separatorColor="#DFFF"
    app:bcv_textColor="#DFFF"
    app:bcv_textSize="16sp"/>

Step 3: Write Code

If you are using java the old style you can reference the breadcrumbiew:

BreadCrumbView bcv = findViewById(R.id.breadcrumbview);

Now construct the breadcrumbview using the builder pattern:

bcv.addItem(new BreadCrumbItem.Builder().icon(R.drawable.home).build());
    bcv.addItem(new BreadCrumbItem.Builder().icon(R.drawable.folder).itens("tiagohm").build());
    bcv.addItem(new BreadCrumbItem.Builder().icon(R.drawable.folder).itens("GitHub", "Documentos", "Download", "Imagens", "Música").build());
    bcv.addItem(new BreadCrumbItem.Builder().icon(R.drawable.folder).itens("Android", "Java", "C", "Arduino").build());
    bcv.addItem(new BreadCrumbItem.Builder().icon(R.drawable.folder).itens("BreadCrumbView", "MarkdownView", "CodeView", "BlueDroid").build());        

Here’s how you handle the breadcrumb item clicks:

bcv.setBreadCrumbListener(new BreadCrumbView.BreadCrumbListener() {
    @Override
    public void onItemClicked(BreadCrumbView view, BreadCrumbItem item, int level) {
        Toast.makeText(MainActivity.this, "pos: " + level + " " + item.getText(), Toast.LENGTH_SHORT).show();
    }

    @Override
    public boolean onItemValueChanged(BreadCrumbView view, BreadCrumbItem item, int level, Object oldSelectedItem, Object selectedItem) {
        Toast.makeText(MainActivity.this, "pos: " + level + " " + item.getText() + " old: " + oldSelectedItem + " new: " + selectedItem, Toast.LENGTH_SHORT).show();
        return true; //to apply the change of selected item
    }
        });

Example

Let’s look at a full example.

(a). activity_main.xml

Add the following in your main layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="br.tiagohm.breadcrumbview.app.MainActivity">

    <br.tiagohm.breadcrumbview.BreadCrumbView
        android:id="@+id/breadcrumbview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        app:bcv_separatorColor="#DFFF"
        app:bcv_textColor="#DFFF"
        app:bcv_textSize="16sp"/>
</LinearLayout>

(b). MainActivity.java

Now add the following code in your main activity:

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.Toast;

import br.tiagohm.breadcrumbview.BreadCrumbItem;
import br.tiagohm.breadcrumbview.BreadCrumbView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        if (getSupportActionBar() != null) {
            getSupportActionBar().setElevation(0);
        }

        BreadCrumbView bcv = findViewById(R.id.breadcrumbview);
        bcv.setSeparatorColor(0xCCFFFFFF);
        bcv.setTextColor(0xCCFFFFFF);
        bcv.addItem(new BreadCrumbItem.Builder().icon(R.drawable.home).build());
        bcv.addItem(new BreadCrumbItem.Builder().icon(R.drawable.folder).itens("tiagohm").build());
        bcv.addItem(new BreadCrumbItem.Builder().icon(R.drawable.folder).itens("GitHub", "Documentos", "Download", "Imagens", "Música", "Fotos de Bichinhos Fofinhos").build());
        bcv.addItem(new BreadCrumbItem.Builder().icon(R.drawable.folder).itens("Android", "Java", "C", "Arduino").build());
        bcv.addItem(new BreadCrumbItem.Builder().icon(R.drawable.folder).itens("BreadCrumbView", "MarkdownView", "CodeView", "BlueDroid").build());
        bcv.setBreadCrumbListener(new BreadCrumbView.BreadCrumbListener() {
            @Override
            public void onItemClicked(BreadCrumbView view, BreadCrumbItem item, int level) {
                Toast.makeText(MainActivity.this, "pos: " + level + " " + item.getText(), Toast.LENGTH_SHORT).show();
                //view.removeItemsAfter(level);
            }

            @Override
            public boolean onItemValueChanged(BreadCrumbView view, BreadCrumbItem item, int level, Object oldSelectedItem, Object selectedItem) {
                Toast.makeText(MainActivity.this, "pos: " + level + " " + item.getText() + " old: " + oldSelectedItem + " new: " + selectedItem, Toast.LENGTH_SHORT).show();
                return true;
            }
        });
    }
}

Download code here.

Reference

Find complete reference here.

BEFORE YOU GO

YOU'VE BEEN SELECTED FOR A GIFT

Thanks for stopping by. My name is Oclemy(Clement Ochieng) and we have selected you as a recipient of a GIFT you may like ! Together with Skillshare we are offering you PROJECTS and 1000s of PREMIUM COURSES at Skillshare for FREE for 1 MONTH. To be eligible all you need is by sign up right now using my profile .

Related Examples

Leave a Reply

Your email address will not be published. Required fields are marked *

*

code