Android Add a Floating Action Button and Sub Floating button .
Hey everyone least start on how to create floating button in android and implement its and create with multi-pal sub floating button , friends its show easy not be take presser so lets start
Step 1 : First one to Start Android Studio
Step 2 : Seconds step to Create a New Project Project Click On ==> File ==> NEW ==> New Project
Step 3 : After create on your project open your java file and xml file and you can just cope the code and paste on your file and run your project .
Step 4: Create a layout xml File fab_subfab_menu.xml
fab_subfab_menu.xml file compete Code
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/fabFrame" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginTop="?attr/actionBarSize" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:orientation="vertical"> <LinearLayout android:id="@+id/layoutFb" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center_vertical" android:layout_gravity="bottom|end" android:layout_marginRight="8dp" android:layout_marginBottom="120dp" android:layout_marginEnd="8dp" android:orientation="horizontal"> <android.support.v7.widget.CardView android:layout_width="wrap_content" android:layout_height="wrap_content" app:cardBackgroundColor="@color/cardview_light_background" app:cardCornerRadius="@dimen/cardCornerRadius" app:cardElevation="@dimen/cardElevation" app:cardUseCompatPadding="true" > <TextView android:id="@+id/cvtSave" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Facebook" android:textAppearance="?android:attr/textAppearanceSmall" android:textStyle="bold" android:paddingRight="@dimen/cardview_horizontal_padding" android:paddingLeft="@dimen/cardview_horizontal_padding" android:paddingBottom="@dimen/cardview_vertical_padding" android:paddingTop="@dimen/cardview_vertical_padding" /> </android.support.v7.widget.CardView> <android.support.design.widget.FloatingActionButton android:id="@+id/fabSave" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/facebook" android:tint="@color/colorPrimaryDark" app:backgroundTint="@android:color/white" app:fabSize="mini" /> </LinearLayout> <LinearLayout android:id="@+id/layoutCall" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center_vertical" android:layout_gravity="bottom|end" android:layout_marginRight="8dp" android:layout_marginEnd="8dp" android:layout_marginBottom="170dp" android:orientation="horizontal"> <android.support.v7.widget.CardView android:layout_width="wrap_content" android:layout_height="wrap_content" app:cardBackgroundColor="@color/cardview_light_background" app:cardCornerRadius="@dimen/cardCornerRadius" app:cardElevation="@dimen/cardElevation" app:cardUseCompatPadding="true" > <TextView android:id="@+id/cvtEdit" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="call" android:textAppearance="?android:attr/textAppearanceSmall" android:textStyle="bold" android:paddingRight="@dimen/cardview_horizontal_padding" android:paddingLeft="@dimen/cardview_horizontal_padding" android:paddingBottom="@dimen/cardview_vertical_padding" android:paddingTop="@dimen/cardview_vertical_padding" /> </android.support.v7.widget.CardView> <android.support.design.widget.FloatingActionButton android:id="@+id/fabEdit" android:layout_width="wrap_content" android:layout_height="wrap_content" android:tint="@color/colorPrimaryDark" android:src="@drawable/phone2" app:backgroundTint="@android:color/white" app:fabSize="mini" /> </LinearLayout> <LinearLayout android:id="@+id/layoutWhatsApp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center_vertical" android:layout_gravity="bottom|end" android:layout_marginRight="8dp" android:layout_marginEnd="8dp" android:layout_marginBottom="220dp" android:orientation="horizontal"> <android.support.v7.widget.CardView android:layout_width="wrap_content" android:layout_height="wrap_content" app:cardBackgroundColor="@color/cardview_light_background" app:cardCornerRadius="@dimen/cardCornerRadius" app:cardElevation="@dimen/cardElevation" app:cardUseCompatPadding="true" > <TextView android:id="@+id/cvtPhoto" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceSmall" android:text="whatsApp" android:textStyle="bold" android:paddingRight="@dimen/cardview_horizontal_padding" android:paddingLeft="@dimen/cardview_horizontal_padding" android:paddingBottom="@dimen/cardview_vertical_padding" android:paddingTop="@dimen/cardview_vertical_padding" /> </android.support.v7.widget.CardView> <android.support.design.widget.FloatingActionButton android:id="@+id/fabPhoto" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/whatsapp" app:backgroundTint="@color/white" android:tint="@color/colorPrimaryDark" app:fabSize="mini" /> </LinearLayout> <LinearLayout android:id="@+id/layoutFabSettings" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center_vertical" android:layout_gravity="bottom|end" android:layout_marginBottom="50dp" android:orientation="horizontal"> <android.support.design.widget.FloatingActionButton android:id="@+id/fabSetting" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" android:src="@drawable/ic_email_white_24dp" app:backgroundTint="?attr/colorPrimary" android:tint="@color/white" app:fabSize="normal" /> </LinearLayout> </FrameLayout>
After Complete these Step you can include the xml file to main.xml file
Step 5: Main.xml file compete Code
<?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" tools:context="codeplayon.com.jewwllery.Home"> <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" app:layout_scrollFlags="scroll|enterAlways" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" /> </android.support.design.widget.AppBarLayout> <include layout="@layout/layout_fab_submenu"/> </android.support.design.widget.CoordinatorLayout>
Step 6: After complete these step Open your java file and used these In your java file inside your fav button and use his id to implement these
Main.java File Complete Code
public class Home extends AppCompatActivity { private boolean fabExpanded = false; private FloatingActionButton fabSettings; private LinearLayout layoutFb; private LinearLayout layoutCall; private LinearLayout layoutWhatsApp; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_home); // setupSlider(); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); fabSettings = (FloatingActionButton) this.findViewById(R.id.fabSetting); layoutFb = (LinearLayout) this.findViewById(R.id.layoutFb); layoutFb.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { } }); layoutCall = (LinearLayout) this.findViewById(R.id.layoutCall); layoutCall.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { } }); layoutWhatsApp = (LinearLayout) this.findViewById(R.id.layoutWhatsApp); layoutWhatsApp.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { } }); //layoutFabSettings = (LinearLayout) this.findViewById(R.id.layoutFabSettings); //When main Fab (Settings) is clicked, it expands if not expanded already. //Collapses if main FAB was open already. //This gives FAB (Settings) open/close behavior fabSettings.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { if (fabExpanded == true){ closeSubMenusFab(); } else { openSubMenusFab(); } } }); //Only main FAB is visible in the beginning closeSubMenusFab(); } //closes FAB submenus private void closeSubMenusFab(){ layoutFb.setVisibility(View.INVISIBLE); layoutCall.setVisibility(View.INVISIBLE); layoutWhatsApp.setVisibility(View.INVISIBLE); fabSettings.setImageResource(R.drawable.ic_menu_send); fabExpanded = false; } //Opens FAB submenus private void openSubMenusFab(){ layoutFb.setVisibility(View.VISIBLE); layoutCall.setVisibility(View.VISIBLE); layoutWhatsApp.setVisibility(View.VISIBLE); //Change settings icon to 'X' icon fabSettings.setImageResource(R.drawable.ic_menu_send); fabExpanded = true; }
And Used the dependancy in your App base build.gradle
dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', { exclude group: 'com.android.support', module: 'support-annotations' }) compile 'com.android.support:appcompat-v7:27.0.2' compile 'com.android.support:design:27.0.2' compile 'com.android.support:support-v4:27.0.2' compile 'com.android.support.constraint:constraint-layout:1.0.2' compile 'com.joanzapata.iconify:android-iconify-fontawesome:2.1.+' testCompile 'junit:junit:4.12' }
