In this tutorial, we are going to learn how to implement the Floating Action Button (a.k.a FAB) which is one of the newest component brought into android with the introduction of material design. Floating Action Button is the button which prompts the main task of your application and is not compulsory to add FAB to your app if you want to avoid the FAB you are free to do that as well, FAB as said earlier is used to access the main task of the app for example a video player app will use FAB to play the videos, Social network app will use the FAB to post status, photos etc. With all that explained let's begin the tutorial.
To Demonstrate how to make the Floating Action Button, I would be using the Toolbar project I made previously, you can check the Toolbar project here. If you are already aware of building toolbar then you can directly jump into the project.
To implement the Floating Action Button (FAB) from scratch we would be building a custom drawable, it is required that you understand how drawable works in android, especially layer-list. If you are not familiar with drawables don't worry I would be explaining as much as I can.
Step 3. Now go to res -> values create a new resource file name it colors.xml and add the following code.Prerequisites
To implement the Floating Action Button (FAB) from scratch we would be building a custom drawable, it is required that you understand how drawable works in android, especially layer-list. If you are not familiar with drawables don't worry I would be explaining as much as I can.
Requirments
Android Studio 1.0.1 (Version I am using)
Icon for the FAB
Icon for the FAB
That's it, noting else.
Let's Understand How the Floating Action Button (FAB) Can Be Implemented
I would be showing you two ways of building Floating Action Button.
1. Building FAB from scratch with custom drawable.
2. Building FAB from available libraries and best FAB libraries. (Coming soon)
Using libraries is the simplest way and as you are always going to need the FAB from now on you should probably get familiar with one of the library and start implementing FAB with it.
But sometimes when you have very specific need and you need complete control over your FAB then you have to build it from scratch.
Building Floating Action Button From Scratch with custom drawables.
So for making a custom FAB follow the steps as shown below. after you complete the following steps your result would look something like this.
Step 1. Start android studio, create a new blank project. Now before we do anything we need to first make custom circle shape drawable. to do that, go to res -> drawable right-click and create a new drawable resource and name it circle.xml. Now in the newly created file add the following code.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="8px">
<layer-list>
<item>
<shape android:shape="oval">
<solid android:color="#08000000"/>
<padding
android:bottom="3px"
android:left="3px"
android:right="3px"
android:top="3px"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#09000000"/>
<padding
android:bottom="2px"
android:left="2px"
android:right="2px"
android:top="2px"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#10000000"/>
<padding
android:bottom="2px"
android:left="2px"
android:right="2px"
android:top="2px"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#11000000"/>
<padding
android:bottom="1px"
android:left="1px"
android:right="1px"
android:top="1px"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#12000000"/>
<padding
android:bottom="1px"
android:left="1px"
android:right="1px"
android:top="1px"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#13000000"/>
<padding
android:bottom="1px"
android:left="1px"
android:right="1px"
android:top="1px"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#14000000"/>
<padding
android:bottom="1px"
android:left="1px"
android:right="1px"
android:top="1px"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#15000000"/>
<padding
android:bottom="1px"
android:left="1px"
android:right="1px"
android:top="1px"
/>
</shape>
</item>
</layer-list>
</item>
<item >
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item android:id="@android:id/mask">
<shape android:shape="oval">
<solid android:color="#FFBB00" />
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="@color/ColorPrimary" />
</shape>
</item>
</ripple>
</item>
</layer-list>
Now what we have done in the above xml drawable is we have created structure like this.
<layer-list>
<layer-list>
<Item>
<layer-list>
<item> (Layer of shadow)
<item>
<item>
<item>
.....
</layer-list>
</Item>
<Item>
<shape> (Oval shape)
</shape>
</Item>
<layer-list>
we have created the drawable by defining layers the root layer consists of 2 items
1. layers of shadows
<layer-list>
<item> (Layer of shadow)
<item>
<item>
<item>
.....
</layer-list>
</Item>
<Item>
<shape> (Oval shape)
</shape>
</Item>
<layer-list>
we have created the drawable by defining layers the root layer consists of 2 items
1. layers of shadows
2. circular shape;
You must notice that the circular shape is enclosed in a ripple tag this tag ensures the circle reacts to on touch with the ripple effect on lollipop devices.
Now if you set the circle.xml as background of any view it will form a cirlce. we are going to use this circle as background to image-button view.
Step 2. Now go to res -> layout right-click and select create a new layout resource, name it tool_bar.xml and the add the following code to that file. (Everything about toolbar is explained in my previous posts )
Now if you set the circle.xml as background of any view it will form a cirlce. we are going to use this circle as background to image-button view.
Step 2. Now go to res -> layout right-click and select create a new layout resource, name it tool_bar.xml and the add the following code to that file. (Everything about toolbar is explained in my previous posts )
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:elevation="2dp"
android:theme="@style/Base.ThemeOverlay.AppCompat.Dark"
android:background="@color/ColorPrimary"
xmlns:android="http://schemas.android.com/apk/res/android" />
<?xml version="1.0" encoding="utf-8"?>Everything about colors is explained in previous posts, make sure you go through it if you dont understand.
<resources>
<color name="ColorPrimary">#FF5722</color>
<color name="ColorPrimaryDark">#E64A19</color>
</resources>
Step 4. Now go to activity_main.xml and add the following code to it. also make sure you add the icon which you want to show inside your FAB to your project. I have downloaded the icon from www.icons4android.com and named it ic_action, and added it to the drawables folder of the project
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<include
android:id="@+id/toolbar"
layout="@layout/tool_bar"
></include>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:id="@+id/frameLayout">
<TextView
android:id="@+id/TextAct1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:text="This is the first Activity, Say Hi"
android:textSize="25dp" />
<ImageButton
android:layout_margin="15dp"
android:layout_width="70dp"
android:layout_height="70dp"
android:src="@drawable/ic_action"
android:background="@drawable/circle"
android:id="@+id/imageButton"
android:layout_gravity="right|bottom" />
</FrameLayout>
</RelativeLayout>
Step 5. Now go to your MainActivity.java and add the following code to it.
package com.example.hp1.floatingactionbuttonfab;
import android.content.Intent;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageButton;
import android.widget.Toast;
public class MainActivity extends ActionBarActivity {
Toolbar toolbar;
ImageButton FAB;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
FAB = (ImageButton) findViewById(R.id.imageButton);
FAB.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"Hello Worl",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);
}
}
So If you run your app at this stage you would get something like this.
Pretty good, When you click on the FAB a toast message appears saying "Hello World". But we want some action to be performed when the user clicks the Floating Action Button, just to keep the tutorial simple I am going to start a new activity when the FAB is clicked. So let's start with that now.
Step 6. Go to java -> [package-name] right-click and select new -> activity -> blank activity give your activity name as SecondActivity and layout name as activity_second.xml. now go to activity_second.xml and add the following code to it.
<?xml version="1.0" encoding="utf-8"?>Now for the purose of the tutorial I have added some random text and edit boxes to the second activity. I have also included a toolbar in this activity as well
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<include
android:id="@+id/toolbar"
layout="@layout/tool_bar"
></include>
<LinearLayout
android:layout_below="@id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_marginTop="10dp"
android:textColor="#000000"
android:textSize="25dp"
android:layout_width="242dp"
android:layout_height="wrap_content"
android:text="Enter Your Details"
android:id="@+id/details"
android:layout_gravity="center_horizontal" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:text="Name"
android:layout_marginLeft="100dp"
android:id="@+id/Name"
android:textSize="20dp"
/>
<EditText
android:layout_marginLeft="100dp"
android:layout_marginTop="5dp"
android:layout_height="25dp"
android:layout_width="150dp"
android:id="@+id/editname" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:text="Address"
android:layout_marginLeft="100dp"
android:id="@+id/Address"
android:textSize="20dp"
/>
<EditText
android:layout_marginLeft="100dp"
android:layout_marginTop="5dp"
android:layout_height="25dp"
android:layout_width="150dp"
android:id="@+id/editadd" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:text="Phone "
android:layout_marginLeft="100dp"
android:id="@+id/phone"
android:textSize="20dp"
/>
<EditText
android:layout_marginLeft="100dp"
android:layout_marginTop="5dp"
android:layout_height="25dp"
android:layout_width="150dp"
android:id="@+id/editphone" />
<Button
android:layout_marginLeft="130dp"
android:layout_marginTop="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Save"
android:id="@+id/save" />
</LinearLayout>
</RelativeLayout>
Step 7. Go to SecondActivity.java and add the following code to it.
package com.example.hp1.floatingactionbuttonfab;Nothing much happening here, just initializing the toolbar for the second activity.
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
public class SecondActivity extends ActionBarActivity {
Toolbar toolbar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_second);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
@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_second, 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);
}
}
Step 8. Now just go to the MainActivity and replace the Code where we made the toast saying "hello world" on click of Floating Action button to the code as shown below.
As you can see we have added a intetnt to start the new activity, now when you run the app you would get results as you had seen at the start of this tutorial
package com.example.hp1.floatingactionbuttonfab;
import android.content.Intent;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageButton;
public class MainActivity extends ActionBarActivity {
Toolbar toolbar;
ImageButton FAB;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
FAB = (ImageButton) findViewById(R.id.imageButton);
FAB.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent i = new Intent(MainActivity.this,SecondActivity.class);
startActivity(i);
}
});
}
@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);
}
}
Thats it, Thats how you implement the FAB with custom drwable. In the next post I would be providing you with the best Floating Action Button ( FAB ) libraries which you could use in your next project also I have recieved requests from visitors asking for the downloadable projects so starting from this tutorial I am also providing you with downloadable project. if you like this post please comment, subscribe and share
To Download The Project - Click Here
0 komentar: