Voorbeeld Tutorial van Android Zwevende Actieknop

Vandaag zullen we leren over de Android Zwevende Actieknop. We zullen de FloatingActionButton bespreken, dat is een nieuwe component opgenomen in de Material Design Richtlijnen en SnackBar, die een Material Design vervanging is van een Toast.

Android Zwevende Actieknop

De Android Zwevende Actieknop wordt gebruikt om de nadruk te leggen op de belangrijkste functie op het scherm. Het is een coole en stijlvolle manier om de aandacht van de gebruiker te trekken.

Overzicht van de Android Zwevende Actieknop

Om Material Design-widgets in ons project te gebruiken, moeten we de volgende afhankelijkheid compileren in ons build.gradle-bestand zoals hieronder getoond.

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

De FloatingActionButton-widget is gedefinieerd in de xml-indeling als volgt:

<android.support.design.widget.FloatingActionButton
      android:id="@+id/fab"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@android:drawable/ic_dialog_email"
      android:layout_gravity="bottom|end"
      app:elevation="6dp"
      app:pressedTranslationZ="12dp"/>

Enkele waarnemingen gedaan vanuit de bovenstaande gedefinieerde xml-indeling zijn:

1. FloatingActionButton breidt de ImageView-klasse uit. Dit blijkt uit het android:src-attribuut dat is gedefinieerd.
2. In de bovenstaande xml-layout wordt het attribuut elevatie gebruikt om een schaduw over de knop te werpen en pressedTranslationZ zorgt ervoor dat de schaduw groter wordt wanneer erop wordt gedrukt.

A FloatingActionButton is placed within a CoordinatorLayout. A CoordinatorLayout helps facilitate interactions between views contained within it, which will be useful later to describe how to animate the button depending on scroll changes. SnackBar is a more enhanced widget when compared to a Toast. A SnackBar is invoked as follows:

Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();

We hebben SnackBar uitvoerig besproken in een andere tutorial. Belangrijke opmerking: Als je deze Android Tutorials goed hebt gevolgd, heb je vast gemerkt dat met de nieuwe buildtools-update naar 23.1.1 de projectstructuur van een nieuw leeg project is gewijzigd en de bovengenoemde widgets standaard aanwezig zijn in een nieuw Android Studio-project. Dus in plaats van de bovengenoemde widgets te implementeren, laten we snel de nieuwe projectstructuur bekijken.

Voorbeeldprojectstructuur van Android Floating Action Button

Zoals je kunt zien, is er een nieuw xml-layoutbestand met de naam content_main.xml toegevoegd. Het is hetzelfde als het eerdere activity_main.xml.

Voorbeeld van Android Floating Action Button

De nieuwe activity_main.xml wordt hieronder gegeven:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.journaldev.floatingactionbutton.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" />

    <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"
        android:src="@android:drawable/ic_dialog_email" />

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

A toolbar is added by default as a replacement of an ActionBar. It’s added inside an AppBarLayout which is a direct child of CoordinatorLayout The AppBarLayout is used to achieve various scrolling behaviours such as collapse, flex space, and quick return. The MainActivity.java is defined as given below:

package com.journaldev.floatingactionbutton;

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

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

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate het menu; dit voegt items toe aan de actiebalk als deze aanwezig is.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Behandel hier klikgebeurtenissen van de actiebalk-items. De actiebalk zal
        // automatisch klikken op de Home/Up-knop afhandelen, zolang
        // je een ouderactiviteit specificeert in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

A new attribute is added to the application tag inside the AndroidManifest.xml named android:supportsRtl="true". This enables right to left layouts in the application. Running this default application produces an output like below: As you can see, on clicking the floating action button, a SnackBar is displayed. This brings an end to this tutorial. You can create a new project in Android Studio and run it to see these features. Note: Make sure that you’re using the latest build tools. Reference: Android Reference Doc