Floating Action Button in Android
In this tutorial, we are going to learn how to create the Floating Action Button in android material design.
Step 1. Start android studio, create a new blank project. Before we do anything we need to create a custom circle shape drawable. To do that, go to res -> drawable right-click and create a new drawable resource circle.xml file .Add the following code to it.
<?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>
Step 2. Now go to res -> layout folser , right-click and select create a new layout resource file , tool_bar.xml and the add the following code to it.
<?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" />
Step 3. Now go to res -> values create a new resource file colors.xml and add the following code to it
<?xml version="1.0" encoding="utf-8"?>
<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.
<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="Floating Button Example"
android:textSize="25dp" />
<ImageButton
android:layout_margin="15dp"
android:layout_width="70dp"
android:layout_height="70dp"
android:src="@drawable/ic_floating"
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.anupam;
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 ibFab;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
ibFab= (ImageButton) findViewById(R.id.imageButton);
ibFab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"Hello World",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) {
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
Find Us :
Facebook : @apnaandroid
Google+ : Apna Java
Youtube : Android & Java Tutorial
Comments
Post a Comment