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
  1. dependencies {
  2. implementation 'com.vlstr:fluentappbar:1.1.0'
  3. }
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
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:app="http://schemas.android.com/apk/res-auto"
  4. xmlns:tools="http://schemas.android.com/tools"
  5. android:layout_width="match_parent"
  6. android:layout_height="match_parent"
  7. android:orientation="vertical"
  8. tools:context=".MainActivity">
  10. <com.vlstr.fluentappbar.FluentAppBar
  11. android:id="@+id/fluent_app_bar"
  12. android:layout_width="match_parent"
  13. android:layout_height="wrap_content"
  14. app:fluent_background_colour="@color/colorPrimary"
  15. app:fluent_foreground_colour="#FFFFFF"
  16. app:fluent_app_bar_type="FULL_FLUENT"
  17. app:layout_behavior="android.support.design.widget.BottomSheetBehavior" />
  19. </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.
  1. import android.os.Bundle;
  2. import android.support.v7.app.AppCompatActivity;
  3. import android.view.View;
  5. import com.vlstr.fluentappbar.FluentAppBar;
  7. public class MainActivity extends AppCompatActivity implements View.OnClickListener{
  9. FluentAppBar fluentAppBar;
  11. @Override
  12. protected void onCreate(Bundle savedInstanceState) {
  13. super.onCreate(savedInstanceState);
  14. setContentView(R.layout.activity_main);
  16. fluentAppBar = (FluentAppBar) findViewById(R.id.fluent_app_bar);
  17. fluentAppBar.setNavigationMenu(R.menu.menu, this);
  18. fluentAppBar.setSecondaryMenu(R.menu.menu2, this);
  19. fluentAppBar.setBlurRadius(10);
  20. }
  22. @Override
  23. public void onClick(View view) {
  24. int resId = (int) view.getTag();
  25. switch (resId){
  26. //Navigation Menu
  27. case R.id.nav_all:
  28. fluentAppBar.collapse();
  29. break;
  30. case R.id.nav_album:
  31. break;
  32. case R.id.nav_keywords:
  33. break;
  34. // Secondary Menu
  35. case R.id.menu_sync:
  36. fluentAppBar.collapse();
  37. break;
  38. case R.id.menu_assistant:
  39. break;
  40. case R.id.menu_shared:
  41. break;
  42. }
  43. }
  44. }
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.