ViewPager2 with Navigation Component - Onboarding Screens

ViewPager2 with Navigation Component - Onboarding Screens | Android Studio Tutorial

Рет қаралды 96,448

Күн бұрын

🏆 My Online Courses
⭐Discount Coupon: LAUNCH-STEVDZA-SAN
stevdza-san.com
🐱‍👤 Wanna become a member? Join!
/ @stevdzasan
📸 Instagram
/ stevdza_san
ViewPager2 allows us display a collection of fragments or views to display to the user in a swipe-able format, especially popular within on-boarding and content display screens.
In this video we are going to implement ViewPager2 with Navigation component to create Onboarding screens. You will learn how to show Onboarding screens only the first time a user launches your app. And with Navigation component we can manage to do that in an elegant way.
If you haven't watched following videos I highly recommend you to do that before watching this one:
Navigation Component: • Navigation Component -...
Live Templates: • Live Templates - Andro...
Project Files: github.com/stevdza-san/ViewPa...
Timestamps
0:00 - Introduction
0:21 - Create Splash Screen (Fragment)
1:02 - Create Navigation Graph
1:23 - Add NavHost Fragment
1:50 - Create ViewPager Fragment
2:50 - Create ViewPager Adapter
3:58 - Create 3 Onboarding Screens (Fragments)
7:13 - Implement Logic for Splash Screen
8:51 - Implement Logic for Onboarding Screens
12:12 - Check if user has Completed Onboarding
15:46 - Fix Navigation Backstack

Пікірлер: 132

@RodrigoGTomaz 3 жыл бұрын

You've been helping me constantly with your very good video tutorials! Thank you very much!

@infsamples460 3 жыл бұрын

You are a life saver! Excellent tutorial. Thanks a lot.

@SertuncSELEN 4 жыл бұрын

you always share the things we need, thank you my friend, you are awesome

@bjugdbjk 3 жыл бұрын

Wow ..hell lot of crazy concepts covered in super simple way, Thanks a lot, and the best part is u did all the complex stuff using nav graph console not from the Kotlin code, That was really useful..Thanks again.

@VenewebTV Жыл бұрын

As always your videos are very educational and useful, I learned a lot. Keep growing. I wish you success on your channel, of which I am one more subscriber. Greetings from Caracas, Venezuela

@ErtBaran 3 жыл бұрын

That was clear and complete. Thank you very very very much :)

@abdelazizkhalid4231 Жыл бұрын

man i love your tutorials

@randy4443 3 жыл бұрын

theses videos are really helpful. I was working on a totally different project and was having with viewpager inside fragment

@mozhdehnouri4931 3 жыл бұрын

Very cool and easy to learn!! thank you

@ravindraghate2814 3 жыл бұрын

thanks stevdza-san you are amazing

@l1keeN 3 ай бұрын

Great tutorial! Small and simple but very functuional project. Exactly what i needed

@cvtamilkannan4670 3 жыл бұрын

Thanks for all your videos brother Keep rocking

@rafaeldias8671 4 жыл бұрын

Sensacional. Parabéns pelo excelente conteúdo. ♡

@baklazhann 8 ай бұрын

you are the best, for honest!!! thanks for your videos, bro!!!

@cvtamilkannan4670 3 жыл бұрын

We shall keep supporting you

@Lowbob55 3 жыл бұрын

17 minute video - "Ah that's gonna be a quick one." 2 hours later - "Wait, what...?" *video paused for the 300th time* so much information 😂 but helped me very well

@joshuawiley6506 3 жыл бұрын

@Entertainment Same...Hahaha!

@mohameddekow873 3 жыл бұрын

i thought i was i lone here, but wait kkkkkk

@iJuce 3 жыл бұрын

it worked, thanks!

@anayurquina6293 3 жыл бұрын

Thank you very much !!! I needed help ... I made my app with ViewPager and wanted to migrate to ViewPager2 but it didn't work. I didn't know why. You saved me!

@sid00760 4 жыл бұрын

Loved it 🙌🏻😍

@tejasjani2544 3 жыл бұрын

You make my day

@progtom7585 3 жыл бұрын

the first youtube video ive had to slow down 🤣 thanks heaps for the video

@preetishsrivastav9785 10 ай бұрын

You are a life saver ❤️

@2004michaelpeer 3 жыл бұрын

Great Video, looking forward to more content

@weistkfly 4 жыл бұрын

These videos makes me like android even more, thank you!

@ravindraghate2814 3 жыл бұрын

Hey i am facing problem about viewpager2 it's kotlin file didn't get id of its XML file View.viewPager.adapter = adapter Id is still present in XML file how to solve it

@its-shubham 2 жыл бұрын

@@ravindraghate2814 hey did you found any solution yet?

@huyhoangnguyen4560 2 жыл бұрын

nice, this is what I need, ty

@amazingmrbill7159 11 ай бұрын

For those having issues with "view.viewPager" in the code you can use View Binding By using View Binding, you directly access the views from the inflated layout without the need for findViewById. This can help avoid potential issues related to view references not being found. Remember to import the correct 'FragmentViewPagerBinding class', which is automatically generated based on the name of your layout file. In this case, the layout file is 'fragment_view_pager.xml', so the binding class would be 'FragmentViewPagerBinding'.

@leps7211 Ай бұрын

val viewPager = view.findViewById(R.id.viewPager) viewPager.adapter = adapter this code help this issues

@VlVALDl Жыл бұрын

Greatest tutorial! Thanks a lot, dude!

@StevdzaSan Жыл бұрын

You're welcome!

@jeetshah3373 Жыл бұрын

super explanation sir..

@Droidkris 2 жыл бұрын

One word! Excellent!

@StevdzaSan 2 жыл бұрын

Thanks 🙏💜

@whocodes9747 3 жыл бұрын

THANK U SO MUCH!

@jeckonly5853 3 жыл бұрын

good,you help me a lot!

@SuperMarkwel 3 жыл бұрын

thx man, very cool

@pallabjr8428 3 жыл бұрын

you are awesome man

@anyiamoscar8832 3 жыл бұрын

awesome nice , very helpful

@waynemutai3341 3 жыл бұрын

Thank you so much

@ArjunVerma-lq4cf 3 жыл бұрын

Hey really great video keep up the good work. If you want one suggestion what you can do is make things like these in one video and explain the things used like view pager 2 in detail in another video.

@shashankgupta006 3 жыл бұрын

Nice tutorial.

@muhammedhalilakkaynak4619 3 жыл бұрын

thanks for tutorial

@Bloggerlar_xayoti 2 жыл бұрын

Thank you Bro

@DiamodChorobekov 7 ай бұрын

thanks

@MrRahulmalik 4 жыл бұрын

Nice video!

@jeanlucrotolo3525 3 жыл бұрын

You should have also included the onBackPressedDispatcher method to handle back press events while in the onboarding pages

@ri7az 3 жыл бұрын

with splash screen. thanks so much

@nghiemmanhhung6100 3 жыл бұрын

greatful

@versatileman6129 2 жыл бұрын

Спасибо большое)

@AbdulRehman-py7yj 7 ай бұрын

seeing this tutorial reminds me of how much I hate android development but have to do it bcs I have no other option.

@whocodes9747 3 жыл бұрын

ADAMSIN SEN LAN ADAAAAAMMMMM

@user-th1xy1qo4t 3 жыл бұрын

Thanks, amazing tutorial. Could you tell how to make such vector drawables?

@youngindiapoetry3648 3 жыл бұрын

If anyone's facing an issue setting up the view pager adapter value, do check that you have the 'kotlin-android-extensions' plugin added to your app.gradle file.

@jackyrachman233 2 жыл бұрын

thanks buddy, I stuck in here

@gaddamrajeshkumar5961 3 жыл бұрын

Awesome. Could you please let me know, how to remove and add fragments.

@maqcoders8148 11 ай бұрын

Thanks, amazing tutorial. can we add a bottom navigation view or drawer layout on the home screen which you have shown in the previous video? how can we handle navigation for those as well? if possible, please make a video that covers these scenarios as well. it will help for beginners like me. any hints will also be fine. thank you!

@wonmirzo 2 жыл бұрын

sensacional

@samstoyroom 3 жыл бұрын

Great tutorial! Btw, may I know your screen recording software, please?

@Njay-music 3 жыл бұрын

wish i had it in java

@MADNESION 3 жыл бұрын

Me too

@ismailkoyuncu5518 3 жыл бұрын

Tanks for tutorial. I want ask you something.For the responsive desing... background picture which one the hdpi to use should to be ?

@alexhaifa 10 ай бұрын

Your video is very good! Thanks for teaching us on this issue. I downloaded your project from guit and tried to open it in Android Studio Giraffe 2023 - Unfortunately, it didn't work and as I am a newbie in Android Studio, I wasn't able to fix it. Could you try to open it in Android Studio updated and fix it? Regards Alex from Brazil

@gauravmaurya8602 4 жыл бұрын

Can you please make video on scrollable bottom navigation drawer .. Like which is present in photo editor app

@fzn125 2 жыл бұрын

For new version add : if (isAdded) before Handler in SplashFragment

@jalajgambhir.1 4 жыл бұрын

Hi, I have two ViewPager2 layouts, one is a vertical scrollable one and the other is a card stack like layout. I want to include both these ViewPager2 layouts inside a root Recycler View. How can this be done? Any suggestions? Thanks!

@harwinderbenipal5332 Жыл бұрын

Great presentation. I have some doubts if you dont mind. What if i want to add information collection fragments as onboarding screens for examlple asking to select country or language? Should i go the same way. and secodn thing is when we are redirected to home fragment how to play with bottom nav bar to switch between fragments like home, favorite and more

@serdarbilgili88 4 жыл бұрын

Can you explain the email verification system and communication screen in the next video?

@iabrarabr8609 3 жыл бұрын

if I want to remove one of those fragment how could I do that ?? .. I mean I did as you do but in my app inside each fragment there is a counter where user can press and it count.. I wanted if it reached certain number that fragment will be removed.. do you know how I may do that? .. Thank you I love your channel I have learned a lot

@lu93 3 жыл бұрын

HELP ME PLEASE: There is an error message: E/RecyclerView: No adapter attached; skipping layout How can i fix this error? I think this error regards to the code line from ViewPagerFragments: view.findViewById(R.id.viewPager).adapter = adapter

@romipatel3254 3 жыл бұрын

Hi @Stevdza-San This is amazing helping me a lot. However, I have questions So instead of home fragment I did empty activity and last bit of video where it nav back to the onboarding screen. It still happen to mine so it navigate to the finish onboarding screen if I click back. Also I am able to scroll the screen without click on "Next" Not sure why, could you please help here. Thank you

@dukeno.1944 3 жыл бұрын

same problem

@user-pf2lq7jh1q Жыл бұрын

i have a problem in the ViewPagerFragment, at the view.viewPager.adapter = adapter, the viewPager always error

@1719pankaj 3 жыл бұрын

What if I don't have a splash screen at all? Is there a way to just change the home destination after first run?

@stocklin9831 19 күн бұрын

At 11 minutes and 40 seconds, what plug-in do you use to generate SharedPreferences? Thanks

@Roosevelth 4 жыл бұрын

hello, I have the same problem 7:47 in that minute how can I solve it, and not only that also when I put some images in other activities I get the same error problem in the application would help me a lot thanks.

@ravindraghate2814 3 жыл бұрын

please make video on handler deprecated

@67Diadem 3 жыл бұрын

Can we put edit text on Onboarding screens, I mean app can take user input and press next and again input from user then next and so on..

@MohitYadav-ve3jn 3 жыл бұрын

awesome video but the app crashes when screen is rotated. i too have been working for few days to handle screen orientation change , it would be great if u could shed some light on it

@ayushranjan3472 3 жыл бұрын

6:48 xml name-> viewPager is showing unresolved reference. Please help!!!!

@StevdzaSan 3 жыл бұрын

Kotlinx.synthetic is deprecated, use View Binding instead. I already made a video about it.

@AndroidTutorialsyt 3 жыл бұрын

How to get more illustration as you have on the onboarding screen.

@korolli4628 2 жыл бұрын

hi there，I have a question，my app logic is splashFragment->loginFragment->mainFragment,but my mainFragment is contain a BottomNavigationView, how can i do this,please help me

@Binary2.0 2 жыл бұрын

Bro when type arraylistof in my ide it get red and Says unable to resolve

@abghifareihand 2 жыл бұрын

With dots?

@binaryshrey2291 Жыл бұрын

The tutorial works well under normal circumstances, but has a major flaw when one rotates the screen. The app crashes with null exception as its not able to get the id of the viewpager

@MohitYadav-or4kn Жыл бұрын

maybe viewModel and Live data can solve this problem

@hojatghanbarzadeh17 3 жыл бұрын

How transfer from activity to fragment in another activity?

@robertosanabria2023 2 жыл бұрын

Thanks for the video. Im gettin next error : "Unresolved reference: viewPager" help please!

@andrea17FJ 2 жыл бұрын

I have the same problem :(

@imene9939 2 жыл бұрын

Hi sir ! i want to call 3 screens from home, i'm using java and binding to get id of viewPager. What i need is how can i convert this instruction "viewPager = activity?.findViewById(R.id.viewPager) "? could you help me, please?

@jerrymatera 3 жыл бұрын

how about working with kotlin viewBinding `binding.root.rootView.findViewById(R.id.viewPager).currentItem = 1` works for me

@ravindraghate2814 3 жыл бұрын

Viewpager id it does not acces in viewpagerfragment.kt how to solve it

@nimazero9129 3 жыл бұрын

I have a problem, so my home screen does not fragment and its activity so the popup method is not going to work, I wonder there is any solution for that???

@rikanuradila6175 2 жыл бұрын

this is java/kotlin?

@sandhunba 3 жыл бұрын

no java :(

@h.r.60 4 жыл бұрын

😁

@zeeshanali-uq8tz 3 жыл бұрын

how to download that drawings

@rajaazrol9790 2 жыл бұрын

i cannot declalare view.viewPager...its said unresolved refference....anyone know the solution?

@isawitbfore 2 жыл бұрын

can anyone tell me how to make it back to homeFragment without having splashFragment first?

@venkateshkoppisetti9935 2 жыл бұрын

Iam gettin error viewpager in viewpagerfragment and next in first screen and next in second screen and finish in third screen plz help me

@markmagallanes6185 2 жыл бұрын

Yes, same here. Same error I am getting. Please help

@venkateshkoppisetti9935 2 жыл бұрын

@@markmagallanes6185 now android syntax main is disparated in java we can't use it . Use view binding instead of it ✅✅

@markmagallanes6185 2 жыл бұрын

@@venkateshkoppisetti9935 ok thank you for replying. I’m a little confused, is there another video I could follow that you know of on here?

@newuser4633 2 жыл бұрын

The app crashes when screen is rotated, any help?

@dagurarnason9224 3 жыл бұрын

i can't seem to reference the viewPager id inside ViewPagerFragment, any idea how to resolve this?

@Firentis1 3 жыл бұрын

Had the same problem - just add to build.gradle: apply plugin: 'kotlin-android-extensions'

@jadephillips 3 жыл бұрын

@@Firentis1 THANK YOU!!!

@feyyaz3559 3 жыл бұрын

You should use View Binding. I had a same problem and i solved it with this. Here you go: developer.android.com/topic/libraries/view-binding

@its-shubham 2 жыл бұрын

getting error Type mismatch: inferred type is ViewPagerAdapter but PagerAdapter? was expected

@sharathsr6864 Жыл бұрын

same error

@dung_gl 3 жыл бұрын

How to use BottomNavigation with ViewPager?

@CeciLWeb 2 жыл бұрын

The app encounters an error when you turn the phone. Because live data is not used :(

@astaghfirullahalzimastaghf3648 3 жыл бұрын

That ":" is really confusing me.. It can be anything like "extends", "object", or "variable". For object, for example : @Override OnCreate(Bundle: ?savedInstanceState){super(savedInstanceState); }

@techcollege3762 3 жыл бұрын

u did not initialize the life cycle before passing to adapter

@ayushranjan3472 3 жыл бұрын

9:23 as Kotlinx.synthetic is deprecated, how to navigate from screenOne to screenTwo with textView onClickListener.

@StevdzaSan 3 жыл бұрын

I already made a video about migrating from Kotlinx.synthetic.

@ayushranjan3472 3 жыл бұрын

@@StevdzaSan I am sorry to disturb you again but i am not able to navigate from page 1 to page 2

@arslanaziz3831 3 жыл бұрын

this will not work if we want multiple navigations

@stunnaman8803 3 жыл бұрын

My huge problem now is, how can we move back to an activity from the last fragment

@tarmagoyf95 3 жыл бұрын

//add this code to the method of the event who controls the end of tutorial i = Intent(this, MyActivity::class.java) activity?.startActivity(i) activity?.finish()

@stunnaman8803 3 жыл бұрын

@@tarmagoyf95 I want to move from the third screen to an activity when I click the finish button. And replace that home fragment with an activity. So do you mean in the third screen fragment. Instead of writing findNavController(). navigate (R.id.action_viewPagerfragment_to_homeFragment) I should replace here with the code you just given to me?

@cagataya9792 2 жыл бұрын

@@stunnaman8803 Hi, I have the same problem, want to start an activity or turn back to MainActivity but cannot... Did you solve the problem ?