FluentView In Android Using Android Studio

Introduction

This article demonstrates the use of FluentView in an Android application using the Android Studio. Follow the below-given steps.

Step 1

Create a new project in Android Studio.
Give a name to the project and click "Next".
Select the "Phone and Tablet" and click "Next".
Select an empty activity and click "Next".
At last, give the activity name and click "Finish".

Step 2

Next, go to Gradle Scripts >> build.gradle (Module:app).

Select build.gradle (Module:app). The app Gradle compiles the code so buildTypes will appear. Just replace that with the following code.

Compile Code

dependencies {
implementation 'com.vlstr:fluentappbar:1.1.0'
}

Step 3

Next, go to App >> res >> layout >> activity_main.xml. Select the activity_main.xml page. The XML code will appear. Just select and replace the following code.

activity_main Code

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
android:orientation="vertical"
tools:context=".MainActivity">
<com.vlstr.fluentappbar.FluentAppBar
android:id="@+id/fluent_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:fluent_background_colour="@color/colorPrimary"
app:fluent_foreground_colour="#FFFFFF"
app:fluent_app_bar_type="FULL_FLUENT"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior" />
</android.support.design.widget.CoordinatorLayout>

Step 4

Verify the preview. After the code is applied, the preview will appear like this.

Step 5

Next, go to app >> java>>Mainactivity.java. Select the Mainactivity page. Just type the code given below.

MainActivity Code

onClick(View view){}

In Android, when the onclicklistener method is called, it returns View as an argument. This View is an object of View class.

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import com.vlstr.fluentappbar.FluentAppBar;
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
FluentAppBar fluentAppBar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
fluentAppBar = (FluentAppBar) findViewById(R.id.fluent_app_bar);
fluentAppBar.setNavigationMenu(R.menu.menu, this);
fluentAppBar.setSecondaryMenu(R.menu.menu2, this);
fluentAppBar.setBlurRadius(10);
}
@Override
public void onClick(View view) {
int resId = (int) view.getTag();
switch (resId){
//Navigation Menu
case R.id.nav_all:
fluentAppBar.collapse();
break;
case R.id.nav_album:
break;
case R.id.nav_keywords:
break;
// Secondary Menu
case R.id.menu_sync:
fluentAppBar.collapse();
break;
case R.id.menu_assistant:
break;
case R.id.menu_shared:
break;
}
}
}

Step 6

After syncing all the dependency Gradles, you have to copy some files from one directory to another before the actual build process happens. A Gradle build script can do this.

Step 7

Next, go to Android Studio and deploy the application.
Select an Emulator or your Android mobile with USB debugging enabled.
Give it a few seconds to make the installations and set permission.

Step 8

Run the application in your desired emulator (Shift + F10).

OUTPUT

We have successfully created an Android application that uses FluentView, using Android Studio.

Refer to my previous article Retrieve Real-Time Data In Firebase Using Android Studio - Part Two to get started with the basics of Firebase.