.
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>
<include layout="@layout/content_main" />
<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">
<!--First button as menu button-->
<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"
/>
<!-- Other button as menu items-->
<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
.
Hey! Glad to see you're using my library :). I put it on Bintray so it can now easily be added with a line of code in your Gradle build file.
ReplyDeleteThanx for visiting this site :-)
ReplyDeleteThanks for the tutorial! It was very useful for me :)
ReplyDelete