How to Use AwesomeBar Library in Android App?

AwesomeBar is a library that animates and makes it really easy to integrate various features and functionalities in the app bar such as a navigation drawer, action button, and overflow menu. In this article, we will be implementing this library in an Android App using Java language. A sample GIF is given below to get an idea about what we are going to do in this article. 

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Add the library dependency 

Navigate to the Gradle Scripts > build.gradle(Module:app), add the library in the dependencies section, and sync the project.

dependencies {
    implementation 'com.github.florent37:awesomebar:1.0.3'
}

Step 3: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. 

XML

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <com.github.florent37.awesomebar.AwesomeBar
            android:id="@+id/bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/white"
            android:elevation="4dp" />

        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <!-- Add main content here-->
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="@string/app_name" />

        </ScrollView>

    </LinearLayout>

    <!-- Layout for navigation drawer -->
    <FrameLayout
        android:id="@+id/left_drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@android:color/white" />

</android.support.v4.widget.DrawerLayout>

Step 4: Working with the MainActivity.java file

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

Java

import android.os.Bundle;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.view.Gravity;
import android.view.View;
import android.widget.Toast;

import com.github.florent37.awesomebar.ActionItem;
import com.github.florent37.awesomebar.AwesomeBar;

public class MainActivity extends AppCompatActivity {

    AwesomeBar bar;
    DrawerLayout drawerLayout;

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

        drawerLayout = findViewById(R.id.drawer_layout);
        bar = findViewById(R.id.bar);

        // adding action button in AwesomeBar with drawable and text
        bar.addAction(R.drawable.awsb_ic_edit_animated, "Add Post");

        // adding the OverFlowItem item in AwesomeBar
        bar.addOverflowItem("Settings");
        bar.addOverflowItem("About");

        bar.setActionItemClickListener(new AwesomeBar.ActionItemClickListener() {
            @Override
            public void onActionItemClicked(int position, ActionItem actionItem) {
                // toast is shown when action item is pressed.
                Toast.makeText(getBaseContext(), actionItem.getText() + " clicked",Toast.LENGTH_SHORT).show();
            }
        });

        bar.setOverflowActionItemClickListener(new AwesomeBar.OverflowActionItemClickListener() {
            @Override
            public void onOverflowActionItemClicked(int position, String item) {
                // toast is shown when an OverFlowAction item is pressed.
                Toast.makeText(getBaseContext(), item + " clicked", Toast.LENGTH_SHORT).show();
            }

        });

        bar.setOnMenuClickedListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // opens the navigation drawer from start
                Toast.makeText(getBaseContext(), "Opening Navigation  Drawer",Toast.LENGTH_SHORT).show();
                drawerLayout.openDrawer(Gravity.START);
            }
        });

        // setting true changes the clickable icon as "<"
        bar.displayHomeAsUpEnabled(false);
    }
}

Output:  

GitHub Repository: AwesomeBar Library