Floating Action Button with Bottom Navigation Bar in Android

The floating action button differs from typical buttons. Floating action buttons are implemented in the app's UI for primary user activities, and the developer prioritises the actions under the floating action button. Examples include activities such as adding an item to an existing list. Bottom navigation bars allow you to travel between the app's key destinations.

In this article, you will learn how to create your Floating Example of Floating​ in Android. So let’s take example of Floating  activity codes  in Android of Mobile application.  

 Example of Floating

                                                                                           

Step-by-Step Im​plementation
​Step 1: Create a New Project in Android ​studio (File >new  project).  
               
Step 2: Create an activity_main.xml file in your layout folder . path (res>layout)
Implement the same in​voke the following code inside activity_main.xml file.   
 <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout 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:orientation="vertical"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText,MissingClass">
    
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/company_logo" />

    <androidx.cardview.widget.CardView
        android:id="@+id/crd"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="-8dp"
        android:background="@color/transparent"
        android:backgroundTint="@android:color/transparent"
        app:cardCornerRadius="10dp"
        app:cardElevation="0dp"
        app:layout_constraintBottom_toBottomOf="parent">

        <com.velodate.myapplication.CustomBottomNavigationView1
            android:id="@+id/customBottomBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            app:itemIconTint="@color/white"
            app:itemTextColor="@color/white"
            app:labelVisibilityMode="labeled"
            app:layout_constraintBottom_toBottomOf="@+id/recyclerView"
            tools:ignore="MissingConstraints" />
    </androidx.cardview.widget.CardView>

    <ImageView
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/crd"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="-28dp"
        android:background="@drawable/one"
        android:src="@drawable/add"
        app:layout_constraintBottom_toTopOf="@+id/crd"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

 </RelativeLayout>
Step 3: Create an bottom_menu.xml file in your layout folder . path (res>menu)
Implement the same in​voke the following code inside bottom_menu.xml file.   
 <?xml version="1.0" encoding="utf-8"?>
 <menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_favorites"
        android:enabled="true"
        android:icon="@drawable/home"
        android:title="Home"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/action_schedules"
        android:enabled="true"
        android:title="Profile"
        android:icon="@drawable/person"
        app:showAsAction="ifRoom"/>
    <item
        android:enabled="false"
        android:title=""
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/action_music"
        android:enabled="true"
        android:icon="@drawable/person_pin"
        android:title="person pin"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/action_schedules1"
        android:enabled="true"
        android:title="Add"
        android:icon="@drawable/person_add"
        app:showAsAction="ifRoom"/>
 </menu>
Step 4: Create an CustomBottomNavigationview1.java file in your package 
Implement the same in​voke the following code inside CustomebottomNavigationView1.xml file. 
 import android.content.Context;
 import android.graphics.Canvas;
 import android.graphics.Color;
 import android.graphics.Paint;
 import android.graphics.Path;
 import android.graphics.Point;
 import android.util.AttributeSet;

 import androidx.core.content.ContextCompat;

 import com.google.android.material.bottomnavigation.BottomNavigationView;
 
 public class CustomBottomNavigationView1 extends BottomNavigationView {

    private Path mPath;
    private Paint mPaint;

    /** the CURVE_CIRCLE_RADIUS represent the radius of the fab button */
    private final int CURVE_CIRCLE_RADIUS = 145 / 2;
    // the coordinates of the first curve
    private Point mFirstCurveStartPoint = new Point();
    private Point mFirstCurveEndPoint = new Point();
    private Point mFirstCurveControlPoint1 = new Point();
    private Point mFirstCurveControlPoint2 = new Point();

    //the coordinates of the second curve
    @SuppressWarnings("FieldCanBeLocal")
    private Point mSecondCurveStartPoint = new Point();
    private Point mSecondCurveEndPoint = new Point();
    private Point mSecondCurveControlPoint1 = new Point();
    private Point mSecondCurveControlPoint2 = new Point();
    private int mNavigationBarWidth;
    private int mNavigationBarHeight;

    public CustomBottomNavigationView1(Context context) {
        super(context);
        init();
    }

    public CustomBottomNavigationView1(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CustomBottomNavigationView1(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mPath = new Path();
        mPaint = new Paint();
        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        mPaint.setColor(ContextCompat.getColor(getContext(), R.color.blue));
        setBackgroundColor(Color.TRANSPARENT);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);

    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        // get width and height of navigation bar
        // Navigation bar bounds (width & height)
        mNavigationBarWidth = getWidth();
        mNavigationBarHeight = getHeight();
        // the coordinates (x,y) of the start point before curve
        mFirstCurveStartPoint.set((mNavigationBarWidth / 2) - (CURVE_CIRCLE_RADIUS * 2) - (CURVE_CIRCLE_RADIUS / 3), 0);
        // the coordinates (x,y) of the end point after curve
        mFirstCurveEndPoint.set(mNavigationBarWidth / 2, CURVE_CIRCLE_RADIUS + (CURVE_CIRCLE_RADIUS / 4));
        // same thing for the second curve
        mSecondCurveStartPoint = mFirstCurveEndPoint;
        mSecondCurveEndPoint.set((mNavigationBarWidth / 2) + (CURVE_CIRCLE_RADIUS * 2) + (CURVE_CIRCLE_RADIUS / 3), 0);

        // the coordinates (x,y)  of the 1st control point on a cubic curve
        mFirstCurveControlPoint1.set(mFirstCurveStartPoint.x + CURVE_CIRCLE_RADIUS + (CURVE_CIRCLE_RADIUS / 4), mFirstCurveStartPoint.y);
        // the coordinates (x,y)  of the 2nd control point on a cubic curve
        mFirstCurveControlPoint2.set(mFirstCurveEndPoint.x - (CURVE_CIRCLE_RADIUS * 2) + CURVE_CIRCLE_RADIUS, mFirstCurveEndPoint.y);

        mSecondCurveControlPoint1.set(mSecondCurveStartPoint.x + (CURVE_CIRCLE_RADIUS * 2) - CURVE_CIRCLE_RADIUS, mSecondCurveStartPoint.y);
        mSecondCurveControlPoint2.set(mSecondCurveEndPoint.x - (CURVE_CIRCLE_RADIUS + (CURVE_CIRCLE_RADIUS / 4)), mSecondCurveEndPoint.y);

        mPath.reset();
        mPath.moveTo(0, 0);
        mPath.lineTo(mFirstCurveStartPoint.x, mFirstCurveStartPoint.y);

        mPath.cubicTo(mFirstCurveControlPoint1.x, mFirstCurveControlPoint1.y,
                mFirstCurveControlPoint2.x, mFirstCurveControlPoint2.y,
                mFirstCurveEndPoint.x, mFirstCurveEndPoint.y);

        mPath.cubicTo(mSecondCurveControlPoint1.x, mSecondCurveControlPoint1.y,
                mSecondCurveControlPoint2.x, mSecondCurveControlPoint2.y,
                mSecondCurveEndPoint.x, mSecondCurveEndPoint.y);

        mPath.lineTo(mNavigationBarWidth, 0);
        mPath.lineTo(mNavigationBarWidth, mNavigationBarHeight);
        mPath.lineTo(0, mNavigationBarHeight);
        mPath.close();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawPath(mPath, mPaint);
    }
 }
Step 5: Create an MainActivity.kt file in your package folder .

Implement the same invoke the fol​low​ing code inside MainActivity.kt file.

 import android.annotation.SuppressLint
 import android.os.Bundle
 import android.view.View
 import android.widget.ImageView
 import android.widget.Toast
 import androidx.appcompat.app.AppCompatActivity


 class MainActivity : AppCompatActivity() {
    @SuppressLint("MissingInflatedId")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val customBottomNavigationView1 =
            findViewById<CustomBottomNavigationView1>(R.id.customBottomBar)
        customBottomNavigationView1.inflateMenu(R.menu.bottom_menu)
        val img = findViewById<View>(R.id.img) as ImageView
        img.setOnClickListener {
            Toast.makeText(this@MainActivity, "Okay", Toast.LENGTH_SHORT).show()
        }
    }
 }

Step 6 : Output of above example.

                                                            

Happy coding!

365Bloggy July 24, 2024
Share this post
Tags
SUBSCRIBE THIS FORM

Subscribe Thanks

Recent Posts
How to add a Snackbar in Android
0 1214
Zoom In and Out to TextView in Android
0 415
How to underline text in textview
0 343
Shine Effect in Android
0 294
How to Create Marquee Text in Android?
0 265
Our blogs
Archive