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 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
