How To Add Floating Action Menu (TristanWiley ) To View Pager and Tab Layout Project

How To Add Floating Action Menu (TristanWiley

) To View Pager and Tab Layout Project

This tutorial uses the Floacting Action Menu Library by TristanWiley (Read the basic application here). It extends from the previous tutorial on View Pager and Tab Layout (Read the demo application here). This tutorial was implemented on Android Studio 1.4.

1) Follow the tutorial http://android-steps.blogspot.my/2015/10/how-to-implement-view-pager-and-tab.html to create a sample project.

2) Import the Floating Action Menu Library by TristanWiley.

2a) Download the library project from https://github.com/TristanWiley/FloatingActionMenu or from here (cached).

2b) Unzip the library folder.

2c) In the Android Studio, go to the menu File/New/Import Module…

2d) Android Studio will prompt you to provide the path to the module and give a name for the library that you want to import.

Select the path to folder in Step 2b.

Type a module name, e.g. :fam.

2e) Edit your dependency section to include a directive to compile the module.

File Name: build.gradle (Module: app)

dependencies {

compile fileTree(dir: 'libs', include: ['*.jar'])

testCompile 'junit:junit:4.12'

compile 'com.android.support:appcompat-v7:23.1.0'

compile 'com.android.support:design:23.1.0'

compile project(':fam')

}

2f) Clean and Build your project.

3) Edit Layout File.

File Name: res/layout/activity_main.xml

<?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:fitsSystemWindows="true"

tools:context=".MainActivity">

<android.support.design.widget.AppBarLayout android:layout_height="wrap_content"

android:layout_width="match_parent" android:theme="@style/AppTheme.AppBarOverlay">

<android.support.v7.widget.Toolbar android:id="@+id/toolbar"

android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"

android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" />

</android.support.design.widget.AppBarLayout>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:fab="http://schemas.android.com/apk/res-auto"

android:id="@+id/comicView"

android:layout_width="match_parent"

android:layout_height="match_parent">

<terranovaproductions.newcomicreader.FloatingActionMenu

android:id="@+id/fab_menu"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:padding="16dp">

<android.support.design.widget.FloatingActionButton

android:id="@+id/fab_main"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@android:drawable/ic_media_play"

fab:fabSize="normal"

<android.support.design.widget.FloatingActionButton

android:id="@+id/fab_random"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@android:drawable/ic_menu_add"

android:contentDescription="REPORT"

android:paddingBottom="20dp"

fab:fabSize="mini"

<android.support.design.widget.FloatingActionButton

android:id="@+id/fab_download"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@android:drawable/ic_menu_view"

android:contentDescription="UPDATE"

android:paddingBottom="20dp"

fab:fabSize="mini"

<android.support.design.widget.FloatingActionButton

android:id="@+id/fab_browser"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@android:drawable/ic_menu_agenda"

android:contentDescription="NEWS"

android:paddingBottom="20dp"

fab:fabSize="mini"

</terranovaproductions.newcomicreader.FloatingActionMenu>

</RelativeLayout>

</android.support.design.widget.CoordinatorLayout>

4) Edit the Main Controller file

4a) The Controller will bind control to the Floating Action Menu buttons.

4b) When each button is tapped/clicked, a call to to viewPager object’s method, setCurrentItem(INDEX_NUMBER), is triggered.

4c) This is followed by a call to the method setClickFabMain() to trigger a tap/click on the fab_main object so that the entire Floating Action Menu is hidden from the view.

File Name: MainActivity.java

package com.notarazi.myviewpagertablayout1;

import android.os.Bundle;

import android.support.design.widget.FloatingActionButton;

import android.support.design.widget.TabLayout;

import android.support.v4.view.ViewPager;

import android.support.v7.app.AppCompatActivity;

import android.support.v7.widget.Toolbar;

import android.view.Menu;

import android.view.MenuItem;

import android.view.View;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

setSupportActionBar(toolbar);

// Get the ViewPager and set it's PagerAdapter so that it can display items

final ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);

viewPager.setAdapter(new MainFragmentPagerAdapter(getSupportFragmentManager(),

MainActivity.this));

// Give the TabLayout the ViewPager

TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);

tabLayout.setupWithViewPager(viewPager);

FloatingActionButton fab_random = (FloatingActionButton) findViewById(R.id.fab_random);

fab_random.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

viewPager.setCurrentItem(0);

setClickFabMain();

}

});

FloatingActionButton fab_download = (FloatingActionButton) findViewById(R.id.fab_download);

fab_download.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

viewPager.setCurrentItem(1);

setClickFabMain();

}

});

FloatingActionButton fab_browser = (FloatingActionButton) findViewById(R.id.fab_browser);

fab_browser.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

viewPager.setCurrentItem(2);

setClickFabMain();

}

});

}

private void setClickFabMain() {

FloatingActionButton fab_main = (FloatingActionButton) findViewById(R.id.fab_main);

fab_main.performClick();

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.menu_main, menu);

return true;

}

@Override

public boolean onOptionsItemSelected(MenuItem item) {

// Handle action bar item clicks here. The action bar will

// automatically handle clicks on the Home/Up button, so long

// as you specify a parent activity in AndroidManifest.xml.

int id = item.getItemId();

//noinspection SimplifiableIfStatement

if (id == R.id.action_settings) {

return true;

}

return super.onOptionsItemSelected(item);

}

5) RUN.

6) DOWNLOAD: MyViewPagerTabLayout1-fam.zip