The new floating action button represents a primary action in an application and has a shape of a circled icon floating above the UI. It’s inspired by the material design introduced by google.
This tutorial will explain how to implement the floating action button using Android Studio and the latest support libraries, change the buttons background color and implement an onclick event.
You can combine this tutorial with our Android Toolbar Example to learn how to implement the new toolbar from material design.
Let’s start with the tutorial.
Dependencies
Add the latest support libraries to your app build.gradle file and build your project.
dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:23.0.0' compile 'com.android.support:design:23.0.1' }
Layout
File: activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_height="match_parent" tools:context=".MainActivity"> <android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:id="@+id/viewOne" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="0.6" android:background="@android:color/holo_blue_light" android:orientation="horizontal"/> <LinearLayout android:id="@+id/viewTwo" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="0.4" android:background="@android:color/holo_orange_light" android:orientation="horizontal"/> </LinearLayout> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="16dp" android:clickable="true" android:src="@drawable/ic_done" app:layout_anchor="@id/viewOne" app:layout_anchorGravity="bottom|right|end" app:backgroundTint="#FF0000" app:rippleColor="#FFF" /> </android.support.design.widget.CoordinatorLayout> </RelativeLayout>
Make sure to add the schema xmlns:app=”http://schemas.android.com/apk/res-auto” to the top, so you can use the app attributes in the FloatingActionButton element.
You can change the background color of the floating action button with the attribute app:backgroundTint and the pressed color with app:rippleColor.
The position can be changed using app:layout_anchor and app:layout_anchorGravity. Change layout_anchor to app:layout_anchor=”@id/viewTwo” to position the button in the bottom right corner of the screen.
Floating Action Button Click Event
File: MainActivity.java
package com.ahotbrew.floatingactionbutton; import android.support.design.widget.FloatingActionButton; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.widget.Toast; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); FloatingActionButton FAB = (FloatingActionButton) findViewById(R.id.fab); FAB.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(MainActivity.this, "Would you like a coffee?", Toast.LENGTH_SHORT).show(); } }); } @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); } }
That’s it. The click event logic is in the OnCreate method.
Sit back, take a sip from your hot brew and run your project.