การใช้ไลบลารี Floating Toolbar และ Floating Navigation View (อลังการ)

build.gradle(Module: app)

apply plugin: 'com.android.application'

android {
    compileSdkVersion 26
    defaultConfig {
        applicationId "com.phaisarn.myapplication"
        minSdkVersion 21
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:26.1.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    implementation 'com.android.support:design:26.1.0'
    implementation 'com.github.andremion:floatingnavigationview:1.0.1'
    implementation 'com.github.rubensousa:floatingtoolbar:1.2.1'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

apply plugin: 'com.android.application'

android {

compileSdkVersion 26

defaultConfig {

applicationId "com.phaisarn.myapplication"

minSdkVersion 21

targetSdkVersion 26

versionCode 1

versionName "1.0"

testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"

}

buildTypes {

release {

minifyEnabled false

proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'

}

dependencies {

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

implementation 'com.android.support:appcompat-v7:26.1.0'

implementation 'com.android.support.constraint:constraint-layout:1.1.3'

implementation 'com.android.support:design:26.1.0'

implementation 'com.github.andremion:floatingnavigationview:1.0.1'

implementation 'com.github.rubensousa:floatingtoolbar:1.2.1'

testImplementation 'junit:junit:4.12'

androidTestImplementation 'com.android.support.test:runner:1.0.2'

androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'

}

menu/floating_nav_view.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/nav_camera"
        android:icon="@drawable/ic_camera"
        android:title="Camera" />
    <item
        android:id="@+id/nav_photo"
        android:icon="@drawable/ic_photo"
        android:title="Photo" />
    <item
        android:id="@+id/nav_video"
        android:icon="@drawable/ic_video"
        android:title="Video" />
    <item
        android:id="@+id/nav_audio"
        android:icon="@drawable/ic_volume"
        android:title="Audio" />

    <item
        android:id="@+id/nav_file"
        android:icon="@drawable/ic_library"
        android:title="Files" />
</menu>

<?xml version="1.0" encoding="utf-8"?>

<item

android:id="@+id/nav_camera"

android:icon="@drawable/ic_camera"

android:title="Camera" />

<item

android:id="@+id/nav_photo"

android:icon="@drawable/ic_photo"

android:title="Photo" />

<item

android:id="@+id/nav_video"

android:icon="@drawable/ic_video"

android:title="Video" />

<item

android:id="@+id/nav_audio"

android:icon="@drawable/ic_volume"

android:title="Audio" />

<item

android:id="@+id/nav_file"

android:icon="@drawable/ic_library"

android:title="Files" />

</menu>

menu/floating_toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/action_floating_1"
        android:icon="@drawable/ic_internet"
        android:title="Internet" />

    <item
        android:id="@+id/action_floating_2"
        android:icon="@drawable/ic_call"
        android:title="Phone Call" />

    <item
        android:id="@+id/action_floating_3"
        android:icon="@drawable/ic_bluetooth"
        android:title="Bluetooth" />

    <item
        android:id="@+id/action_floating_4"
        android:icon="@drawable/ic_wifi"
        android:title="Wi-Fi" />

    <item
        android:id="@+id/action_floating_5"
        android:icon="@drawable/ic_swap"
        android:title="Mobile Data" />

</menu>

<?xml version="1.0" encoding="utf-8"?>

<item

android:id="@+id/action_floating_1"

android:icon="@drawable/ic_internet"

android:title="Internet" />

<item

android:id="@+id/action_floating_2"

android:icon="@drawable/ic_call"

android:title="Phone Call" />

<item

android:id="@+id/action_floating_3"

android:icon="@drawable/ic_bluetooth"

android:title="Bluetooth" />

<item

android:id="@+id/action_floating_4"

android:icon="@drawable/ic_wifi"

android:title="Wi-Fi" />

<item

android:id="@+id/action_floating_5"

android:icon="@drawable/ic_swap"

android:title="Mobile Data" />

</menu>

values/styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

    <style name="FloatingNavStyle">
        <item name="android:textSize">18sp</item>
        <item name="android:background">#080</item>
    </style>

</resources>

<item name="colorPrimary">@color/colorPrimary</item>

<item name="colorPrimaryDark">@color/colorPrimaryDark</item>

<item name="colorAccent">@color/colorAccent</item>

</style>

<item name="windowActionBar">false</item>

</style>

</style>

</resources>

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_width="match_parent"
        android:layout_height="wrap_content"
        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" />

    <com.andremion.floatingnavigationview.FloatingNavigationView
        android:id="@+id/floating_navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        app:backgroundTint="#080"
        app:drawMenuBelowFab="true"
        app:layout_anchor="@id/toolbar"
        app:layout_anchorGravity="bottom|end"
        app:menu="@menu/floating_nav_view"
        app:theme="@style/FloatingNavStyle" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:backgroundTint="#080"
        app:srcCompat="@drawable/ic_3dots" />

    <com.github.rubensousa.floatingtoolbar.FloatingToolbar
        android:id="@+id/floatingToolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="#080"
        app:floatingMenu="@menu/floating_toolbar" />

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

<?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_width="match_parent"

android:layout_height="wrap_content"

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>

<com.andremion.floatingnavigationview.FloatingNavigationView

android:id="@+id/floating_navigation_view"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_margin="@dimen/fab_margin"

app:backgroundTint="#080"

app:drawMenuBelowFab="true"

app:layout_anchor="@id/toolbar"

app:layout_anchorGravity="bottom|end"

app:menu="@menu/floating_nav_view"

app:theme="@style/FloatingNavStyle" />

<android.support.design.widget.FloatingActionButton

android:id="@+id/fab"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="bottom|end"

android:layout_margin="@dimen/fab_margin"

app:backgroundTint="#080"

app:srcCompat="@drawable/ic_3dots" />

<com.github.rubensousa.floatingtoolbar.FloatingToolbar

android:id="@+id/floatingToolbar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_gravity="bottom"

android:background="#080"

app:floatingMenu="@menu/floating_toolbar" />

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

content_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="@+id/content_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity"
    tools:showIn="@layout/activity_main">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout 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:id="@+id/content_main"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior"

tools:context=".MainActivity"

tools:showIn="@layout/activity_main">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Hello World!" />

</RelativeLayout>

MainActivity.java

package com.phaisarn.myapplication;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.support.design.widget.NavigationView;
import android.widget.Toast;

import com.andremion.floatingnavigationview.FloatingNavigationView;
import com.github.rubensousa.floatingtoolbar.FloatingToolbar;

public class MainActivity extends AppCompatActivity {

    private FloatingNavigationView mFloatingNavigationView;
    private FloatingToolbar mFloatingToolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

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

        mFloatingToolbar = (FloatingToolbar) findViewById(R.id.floatingToolbar);
        mFloatingToolbar.attachFab(fab);
        mFloatingToolbar.setClickListener(new FloatingToolbar.ItemClickListener() {
            @Override
            public void onItemClick(MenuItem item) {
                int id = item.getItemId();
                //if(id == R.id.action_floating_1) {
                //...
                //}
                Toast.makeText(getBaseContext(), item.getTitle(), Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onItemLongClick(MenuItem item) {
            }
        });

        mFloatingNavigationView = (FloatingNavigationView) findViewById(R.id.floating_navigation_view);
        mFloatingNavigationView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mFloatingNavigationView.open();
            }
        });

        mFloatingNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem item) {
                Toast.makeText(getBaseContext(), item.getTitle(), Toast.LENGTH_SHORT).show();
                mFloatingNavigationView.close();
                return true;
            }
        });
    }

    @Override
    public void onBackPressed() {
        if (mFloatingNavigationView.isOpened() || mFloatingToolbar.isShowing()) {
            mFloatingNavigationView.close();
            mFloatingToolbar.hide();
        } else {
            super.onBackPressed();
        }
    }

    @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);
    }
}

package com.phaisarn.myapplication;

import android.os.Bundle;

import android.support.design.widget.FloatingActionButton;

import android.support.v7.app.AppCompatActivity;

import android.support.v7.widget.Toolbar;

import android.view.View;

import android.view.Menu;

import android.view.MenuItem;

import android.support.design.widget.NavigationView;

import android.widget.Toast;

import com.andremion.floatingnavigationview.FloatingNavigationView;

import com.github.rubensousa.floatingtoolbar.FloatingToolbar;

public class MainActivity extends AppCompatActivity {

private FloatingNavigationView mFloatingNavigationView;

private FloatingToolbar mFloatingToolbar;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

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

setSupportActionBar(toolbar);

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

mFloatingToolbar = (FloatingToolbar) findViewById(R.id.floatingToolbar);

mFloatingToolbar.attachFab(fab);

mFloatingToolbar.setClickListener(new FloatingToolbar.ItemClickListener() {

@Override

public void onItemClick(MenuItem item) {

int id = item.getItemId();

//if(id == R.id.action_floating_1) {

//...

//}

Toast.makeText(getBaseContext(), item.getTitle(), Toast.LENGTH_SHORT).show();

}

@Override

public void onItemLongClick(MenuItem item) {

}

});

mFloatingNavigationView = (FloatingNavigationView) findViewById(R.id.floating_navigation_view);

mFloatingNavigationView.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

mFloatingNavigationView.open();

}

});

mFloatingNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {

@Override

public boolean onNavigationItemSelected(MenuItem item) {

Toast.makeText(getBaseContext(), item.getTitle(), Toast.LENGTH_SHORT).show();

mFloatingNavigationView.close();

return true;

}

});

}

@Override

public void onBackPressed() {

if (mFloatingNavigationView.isOpened() || mFloatingToolbar.isShowing()) {

mFloatingNavigationView.close();

mFloatingToolbar.hide();

} else {

super.onBackPressed();

}

@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);

}

รูปที่ใช้

Phaisarn Sutheebanjard

blog.phaisarn.com

การใช้ไลบลารี Floating Toolbar และ Floating Navigation View (อลังการ)