How to Add a Floating Action Button to a Bottom Navigation - Android Studio Tutorial

In this video you will learn how you can make a BottomNavigationView with a FloatingActionButton in the middle.
⭐ Get certificates for your future job
⭐ Save countless hours of time
⭐ 100% money back guarantee for 30 days
⭐ Become a professional Android developer now:
pl-coding.com/...
Material Design Dependency:
implementation 'com.google.android.material:material:1.3.0-alpha03'
Get the source code for this video here:
github.com/phi...
Regular Android tutorials on my Instagram: / philipplackner_official
Checkout my GitHub: github.com/phi...
You like my free content? Here you can me a coffee:
www.buymeacoff...

[@ktamilselvan1]

almost viewed all your videos !!! app:contentInsetStart="0dp" app:contentInsetLeft="0dp" u can use to remove the left margin

[@PhilippLackner]

Thanks! :)

[@ashokas5812]

Tkz...

[@alexandrecloutier816]

There is a shadow because the layout is elevated by default, just like it is the case with buttons and card views when there is a background drawable. The solution is to add : android:elevation="0dp" to remove the default value. Good video Philipp 😃

[@fathiyajourney]

"This video sponsored by my self" 😂 I've been waiting for this 👍

[@PhilippLackner]

Hope you enjoyed it!

[@waheed_akhtar]

A german with a good sense of humor. A very rare thing :D

[@crateer]

Damn, you're growing so fast! Keep it up :)

[@PhilippLackner]

Thanks man!

[@miranmustafa7637]

You can fix the shadow by seting: app:elevation="0dp" to bottom nav view

[@PhilippLackner]

Cool, thanks!

[@yechielbabani1726]

ty

[@mohamedghazali4914]

Thanks Alllot, Much thanks you saved my Time!!!

[@creativearts4917]

we can get rid of that shadow in the bottom view with the help of this line of code : android:outlineSpotShadowColor="@android:color/transparent" followed in BottomNavigationView✌

[@jchrisml25]

Thanks

[@rezanurramadhan7850]

thanks

[@swetblack6]

Thanks!

[@Blue_1208]

Thanks

[@sumitsuryawanshi9060]

You're AMAZING brother ;D Sending Love from India.

[@ThienNguyen-cd6rn]

Thank for this helpful video ! From Vietnam with love !

[@supremecrackerr4687]

Thank you so much for this video, really helepd me in a pinch! adding < app:contentInsetStart="0dp" > to the BottomAppBar removed that left margin space for me!

[@Berk45632]

The video I have waited for so long! ❤️❤️

[@PhilippLackner]

There you go :D

[@jaypanchal8284]

Good One Philip. had been thinking about doing the same and i found your video here, great explanation and great implementation without using any library.

[@devendravarma5074]

Adding bottom navigation inside bottom appbar was the great idea, you are just awesome.. Btw, you can also disable the centre menu from your XML file; Happy Coding :)

[@Indently]

Also I'm looking forward to seeing your curly hipster moustache

[@agytfreefire]

D:

[@moriz8549]

That's a useful tutorial, Thanks dear Philipp , and awesome as always ⭐⭐⭐⭐⭐

[@santriptmehta1964]

I was really waiting for this.

[@Sweetironman]

Damn Man Your Voice and accent is just awesome 🤩💥💥

[@artem9114]

right when i needed, thanks a lot bro!

[@bjugdbjk]

OMG..ur videos save tons f time man ... waiting for fr ur kotlin stuff man...

[@AWNHACKS]

That's one unique tutorial man. Appreciate it.....😊👍

[@volchok1001]

Thanks a lot. Worked as expected

[@diegoribeiro5992]

Thank you, Phill!!

[@gadeern1586]

Amazing tutorial! Thank you very much 😍🔥

[@Peter-Petes]

Just Add android:outlineSpotShadowColor="@android:color/transparent" inside BottomNavigationView tag to make the shadow disappear. Dosen't require anything on MainActivity.Kt. -----> This works only on API level 28 and above ! Requires Override.

[@sharadregoti7742]

Thanks it worked

[@sajantamang4926]

Can we apply this UX in other layouts beside CoordinatorLayout?

[@st.libertos]

This tutorial is awesome!

[@mazoochian]

Man Beff Jezos got some abs!

[@PhilippLackner]

Yea he's a strong guy

[@vanduong9602]

Thank you so much, other channels always use library.

[@aaryan6577]

So did he😂

[@sindupratama8966]

thanks mate you save my life, subscribed +1

[@alejandrogonzalez2783]

it was useful for me. Thank you

[@noahhcams]

Super helpful!

[@kamzz8651]

this is amazing tutorial 100/100

[@mohammadmirzakhanidehkordi8561]

wow it is awesome video, where is the step which you connected it to navigation component lib ?

[@theonlyarjun]

It's 2020 and we still need to do hacky stuff to get things done on android.... Nice tutorial btw.

[@PhilippLackner]

Yea that's one reason why I don't like designing

[@fahrican9708]

very useful video! thanks

[@MaNaa2000]

great video, really really helpful

[@syednoorullahshah9194]

great tutorial mate 👌

[@PhilippLackner]

Thank you 👍

[@lalaley2026nis-dm3oj]

pefrect! Thanks! Рахмет!

[@navamragulan2017]

Thank you .very useful.....

[@yahia9266]

Thank you bruh

[@user-ez4ol2ri4h]

Impressive design😍

[@Trosydman]

Thank you for this tutorial!!!! I was looking for something like this for my app. I was wondering if it is possible that the ripple effects, of each item, don't go beyond the boundaries of the BottomAppBar view. Thank you in advance!

[@PhilippLackner]

Don't know if this is possible out of the box. There is essentially a background you need to apply to make something have that click effect, there might be different versions of that background, idk. But for sure with a custom view it's possible

[@IonutNegru87]

The left margin can be fixed by using "app:contentInsetStart="0dp"" on your BottomAppBar widget.

[@kumar_k19]

Thanks bro 👍

[@mrdeveloper4438]

Awesome bro .....

[@yanaungphyo9807]

thanks

[@iamvahitkeskin]

Very thanks :)

[@sikander_rafique]

Thank you

[@nolant3728]

mate when I've tried to use this design, all my fragments which contain scrollview end up pushing the bottom nav menu down off screen. Do you know how to fix this?

[@MCStarYT]

Facebook is doomed in the face of your social media app! ;-)

[@PhilippLackner]

They are :D

[@parulson6274]

Youre awesome❤️❤️

[@hassanammer7854]

How to increase my work experience as a junior android developer to get work in a company or a freelance ?

[@ethiomusic3158]

How can we use "home" fragment as an activity_main?... Can we also make fragments inside other activities (not only in main_activity)? Most of the examples are made on main_activity... How can we make fragments into other activities? May be I misunderstood something about fragments. I can make fragments but the icons are not working properly with the fragments.

[@Indy293]

thanks a lot

[@chewataapp7021]

Actually you can disable the item in menu itself. android:enabled="false" Quick and easy fix.

[@truongpham7279]

very useful!

[@sat_talk]

didn't get you bro.. where pl. tell me what should I do where?

[@paviyarasanv4192]

sir i am faced "Manifest merger failed with multiple errors, see logs" !error ,what i do ?

[@mehulbisht9708]

what about the music player series ? now that Google Play Music is going away, it's your time to shine come on !! finish that series 😂😂

[@robertoc2678]

excelente tutorial, un saludo desde México, una duda, como implementar la lógica para que funcione o haga algo en los botones, tengo entendido que se usan fragmentos pero tengo problemas al entender eso, no se si tienes algún otro video donde expliques como implementar lo demás me seria de gran ayuda sin mas, un excelente tutorial

[@dipagove8963]

I follow your tutorials, its help me.Thanks a lot. Can you help me out for animation to add color curve start to end below fab onselection of bottom item with getting its color.

[@vinaykumarpatel649]

Awesome 👌🏻👌🏻

[@PhilippLackner]

Thanks 🤗

[@linox20]

great body phillips😂

[@yechielbabani1726]

i see you do this with kotlin is there any chance it wont be able to work with java?

[@lukassxx8989]

BottomNavigationView a=(BottomNavigationView) findViewById(R.id.bottomNavigationview); a.getMenu().getItem(2).setEnabled(false);

[@ij1316]

Type the code in notepad/text editor. Paste the code directly into the .java file with Android Studio. It will ask if you want to convert it to Java. Click "Yes". Then the code will be converted to Java.

[@mohsanikram3569]

Amazing

[@AryanvedhFromIndia]

hey philipp, i am watching your video now, layout_anchor isn't working. what else can i do to follow your tutorial and get same result?

[@ujanglukman3797]

HEllo. Thank you for video. it is very usefull. May I ask you a question about this theme setting up. In the video it change to Theme.MaterialComponents, but I need to use Material3 theme. Is there any suggestion? Thank you.

[@truongxuan8322d]

Theme.MaterialComponents.DayNight.NoActionBar

[@hosseinmirzazadeh290]

Great 👍

[@PhilippLackner]

Thank you 👍

[@bekaryssailaukul1006]

How to set fragment with nav graph above that bottom app bar in coordinator layout? Please

[@sjsjsjsjsjxnxjjssjjs]

so nice

[@acebookwisdom]

How to use it with fragment connected to navigation resource?

[@giorgioferrari8114]

Hi! and thank you for the android code ! i use it and it works good ! is possible to express the same code but in HTML and CSS ? i'm trying to develope an apache cordova app that will be the same as the android one, but i have some problems with that. i 've try to write html and css code to express the same functions of the android, but it doesn't works ! do you have the html and css code ? thank's !

[@mountrat]

How to go to different tabs when clicking Home, search, profile, settings...? Can anybody help me

[@alextokarev7750]

nice beard mate!

[@PhilippLackner]

Thanks! :D

[@ducnguyendinhtrung4745]

How can i click to each item and go to another fragment, can you show me or recommend another videos?

[@amoljunghare3610]

Can you animate fab also.I just want to open a curve shaped dialog when fabis clicked .Do you have idea of it??

[@hnim2292]

wow nice

[@mosfeqhossain2226]

Beff Jezos looking hench 🤣🤣🤣

[@tonymac249]

Hi, Can anybody tell me how to add another view to this such as a recyclerView or any view and stop it overlapping the bottom navigation.

[@kondalraotirumalasetty3908]

can you make curved bottom navigation with animation and text as well for the menus

[@ChiragVariya-df3ty]

Hello, Good morning! I want light theme set bottom navigation with same round

[@spidey5324]

Can you set the bottom appBar in a constraint layout?

[@nearmint8350]

Followed the same steps, even tried copying the code but my bottomNavigationView just does not appear... It is there but i cannot see it

[@yuvalanteby9564]

How can I change the bottom navigation's color while still using the transparent method you used?

[@PhilippLackner]

Don't change the color of the bottom nav, change the color of the bottom app bar

[@chorauoc139]

@@PhilippLackner Can you tell how to do this, because I have tried by adding a style but not working

[@alirezazarghi4682]

@@PhilippLackner hi can help me , not change color ?

[@PaulLui512]

@@alirezazarghi4682 ​ try android:backgroundTint="@color/red"

[@fengchin3567]

very good vidoe , can you make a video which use jetpack buttomnavigation and float button together

[@iam_omar]

Bruh is that johny on the app 😂😂

[@PhilippLackner]

That's Beff

[@vantangle2563]

Hi, How we can reach fabCradleRoundedCornerRadius on Jetpeck Compose?

[@shekharsaini9069]

can you make a video for this tutorial in Jatpack compose

[@shreyashchoudhary7413]

Epic!

[@introvertsdiary]

I cant remove the shadow by putting bottomnavigationview to null.. the code is error how to fix it? Im using java

[@sharadregoti7742]

How can i always display menu item names ?, currently it show the titles only when the item is clicked

[@alvinimbuka8283]

hello, my bottom navigation view on the main activity is not being refernced and is giving me an error

[@hemantriffs]

Thank you for the tutorial but bottomNavigationView cannot be resolved in MainActivity.class

[@codercoder7270]

İ have a question , can we create web application in kotlin , i create web app in spring which is framework of java , Does kotlin have any framework for web app?

[@PhilippLackner]

Yes, Kotlin has a very awesome backend framework called Ktor. I have a premium course about that here on my website pl-coding.com/courses/powerful-kotlin-rest-apis-with-ktor/

[@bilalaslam571]

how to set bottomNavigationView.background= null in java because it didn't showing the background attribute.

[@ojiidroid]

do you play substratum?

[@ChiragVariya-df3ty]

Hi, How to set getOrCreateBadge text and number

[@pickemparty]

Is this a Kotlin or Java solution?

[@eagleeye77568]

do you have this in java?

[@pickemparty]

Where is the item bottomNavigationView being init in the MainActvity ?

[@slaviboy]

You can set xml property android:background="@null"

[@Indently]

How to set on click listener

[@PhilippLackner]

My next premium course will cover that

[@Imelec]

pastebin.com/TqV9FsmA