How to Create Floating Action Button in Android For Special Type of Promoted Action

0
Shares
How to Create Floating Action Button in Android For Special Type of Promoted Action
4 (80%) 3 votes

Back in 2014, during Google I/O, Google announced a new visual language called Material Design. This language was announced with guides to help Android developers create user experience that work well on different devices, with different input methods, and on different platforms. And, since then, Google is working on Material Design to introduce new ways to create rich user experience in Android applications.

In 2015 Google I/O, Google announced their new Android Design Support Library including Floating Action Button. This means, now developers won’t have to create Android Floating Action Button from scratch.

In fact, Android Floating Action Button is a good start to start converting existing applications into new version of Android. Though, there are many ways you might apply this new pattern incorrectly, which is why in today’s Android app tutorial, we’ll see how to implement Floating Action Button with new Android Design Support Library.

Let’s Get Started

Open your Android Studio and create a new project under file menu.

ss1

In the next tab, select your targeted Android device.

ss2

Select Empty Activity and click on next.

ss3

Lastly, customize the activity.

ss4

Start Code Integration

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="fabdemo.spaceo.com.fabdemo.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>

Create menu.xml in res/menu folder

<menu 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"
tools:context="fabdemo.spaceo.com.fabdemo.MainActivity">
<item
android:id="@+id/action_settings"
android:orderInCategory="100"
android:title="@string/action_settings"
app:showAsAction="never" />
</menu>

MainActivity.java

package fabdemo.spaceo.com.fabdemo;

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 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!

device-2017-02-20-163118

With just handful of XML files and its code, you can kick off the redesign of your Android app and implement Floating Action Button. Although, there is a lot more in the Material Design, and if your startup Android app is outdated or needs a reskin, hire Android app development company to apply Material Design patterns in your Android application to give a new look.

 
0
Shares
 

Want to Develop Android App From Scratch? Contact Us Now