News App in Android Studio using Kotlin | Last Part 6 - Fragments & Final Output

hey everyone welcome back to my channel in this video we will continue with our news app in previous video we have set up view model so if you have not yet watched it I'll highly recommend you to watch that first and then watch this video now in this video we will be covering fragments and also this is our last video of the news app series okay so now let's create it open Android Studio we have already created all the fragments that is article fragment headlines fragment favorite fragment and search fragment so first let me quickly remove all the unnecessary code from all the fragments like this way and then I'll do the same thing for other three fragments as well and done now let's start with article fragment first I'll mention the XML layout file here then inside it we need to implement three things declare variable override on VI created function and set up Floating Action button got it but listen to me as this is an article fragment so here an entire article will be displayed in a web view hence we will write the code for web view which will be present in on view created function so first let's declare all the variables okay so all your responses API everything is connected in view model only so it's a must to declare news view model then if you remember in part three I guess we have created an argument tag in news Nave graph inside article fragment that we need to access here as well arguments then article fragment Arc this is an automatically generated class by safe arguments plug-in basically it will help to pass arguments between fragments in a safe way then by NA AR means na AR navigation Arc is an extensive function provided by navigation compan component and it is used to retrieve the argument pass to a fragment so whenever we will use ARS in the code it means that we are accessing the arguments passed to the fragment got it then next we will create an override function as on view created where we will initializer view so for that we will use finding so let me quickly set it up and done this is how we declare and initialize binding in fragments got it now inside on view created we will set up web view so to do that first we need to initialize news View model and done then I'll initialize article variable as ARS do article this article is the name given to the argument then call the web view through binding and use apply function then inside the apply block here we will set the web view client for the web view so web view client is responsible for handling various events in the web view such as when a new URL is about to be loaded then article. URL with a safe call operator and the let function basically the let function is used here to execute a block of code on the nonnull that is article URL safely then inside the Le function load URL an argument as it means article fragment itself and now below it I'll set on click on Feb which will add the article to favorites in technical language it will insert the favorite article in the database got it so first access FB through binding then set on click listener on it and then inside it we need to call add to favorite method which we created in view model so for that I'll write news view model dot add to favorite method and pass the argument as article simple then to inform the user that article has been added to the favorite we will create a snack bar if you want you can simply create a toast as well not a problem and that's it our artical fragment is ready now next we need to create headlines fragment there is a lot of code to write here basically here we will set our recycler view with all the Articles freshed from API not just that but we also need to handle pagination as well as progress bar and error message so first let's declare all the variables and and done see we have news view Model news adapter then we have retrive button and error text both of this UI component is a part of item error layout and that item error layout is exist in fragment headlines as item headlines error so in case of any internet error this UI components will be used got it then I will overwrite on view created function and inside it let me quickly set a binding and then then inside on view created function we need to initialize as well as to fetch data from API through live data but to do that we will require few functions so outside on view created function we will create other required functions and then later we will call all those function inside on view created got it before creating those function we will require few Boolean variables such as is er as false is loading as again false then is last page also has false and then is scrolling also as false and then we will use all these variables in functions so let's create our first function as hide progress bar there will be a situation where we will require to hide the progress bar once the loading is done so for that call pagination progress bar dot visibility as invisible then is loading as false and then next we will create another function as show progress bar where will display the progress bar this will be the situation where a data is getting fetched and in that situation we will require a loading or a progress bar hence here I'll keep it loading as true the next function is hide error message this will be required when internet is working perfectly fine and hence we will keep the error messages invisible the next function is show error message this will be required in case of any error where error message will be displayed on the screen got it next we need to set up pagination I have already explained what is pagination but still it helps you load and display small chunks of data at a time so to create it write well scroll listener as object and extend it as recycler view dot onscroll listener now inside it there will be two methods onscroll and onscroll state changed onscroll method will be called after the scroll is completed and ons scroll State change method will be called when the scroll State changes so first let me write the code for onscroll method and done now see we have an error over here because sarey page size should be integer hence it should be not in double Cotes so remove it also same goes goes for this one too and now see error is gone then this block retrieves the linear layout manager from the recycler View and gathers information about first visible item the count of visible item and the total item count then it defines several conditions like is no error and is not loading and not last page that must be satisfy for pagination to occur then based on this conditions it determines whether pagination should happen if should pagate is true then it triggers the get headlines method of the news view model and updates the state by setting is scrolling to false and done then let me quickly write on scroll State change method as well and then now see the new state parameter represents the new scroll State then scroll State touch scroll indicates that the user is currently dragging the screen causing recycler view to scroll then if the condition is true then it sets the is scrolling to true and done next we will set up headline recycler view we have already created an adapter for it so all we have to do is to attach it with the layout first let me write the code and done now see again an error but it's a silly mistake of brackets so rearrange it this way then first we have created an instance of news adapter that will bind the data to the recycler view then this is the idea of recycler view present in headlines fragment that is recycler headlines and then apply on it inside the apply block we have set the linear layout manager as layout manager for the recycler view this means that the items in the recycler view will be arranged in a vertical scrolling list then I have added the scroll listener to the recycler view for page ination and done now come inside the on view created here we need to initialize few things so first is item headlines error that is present in headlines fragment only then next we need to initialize retry button and error text that is present in item error XML right so to exess that we need to inflate the respective lay out here so let me write the code and done see this is how we inflate another layout in fragment so this is our item error layout now once we have the layout then we can easily initialize retry Button as well as error text and done next we will attach the news view model to an activity like this way okay and don't forget to call setup headlines recycler below it and done then next we'll set on item click listener means what will happen when the user will click on recycler view item it will lead the user to article web view right so let me write the code and done now see we have set on item click listener on news adapter then inside it a bundle is created when item is clicked and then inside it serializable with the key article is added to the bundle and it is the item clicked got it then outside the apply blog there is a n controller which will navigate the user from headlines fragment to article fragment with Bund containing the serialized article and then next we need to create few conditions like if the response is Success then what are we supposed to do or if the response is error then what are we supposed to do or if the response is in loading State then what we are supposed to do that we have to mention in The Observer first thing what will it observe headlines right so news model do headlines do observe with its parameter as view life cycle owner comma Observer and variable as response that inside it when response is success or error or loading these are the three condition so let me write the code for it and then first if the response is Success then obviously hide the progress bar and also hide the error message then save call Operator to check if the response data is not null and if it is not null then let fun function is invoked and that non- null value will be a news response variable then this line updates the data in the news adapter by submitting the list of Articles from the news response to the adapter got it then this line calculates the total number of pages based on the total number of results and the page size also I have added plus two to provide some buffer then this line checks if the current page that is headlines page is the last page by comparing it with the calculated total pages and if it is the last page then adjust the padding of the recycler View and done next let me write the code and done now if the response is error then hide the progress bar then again same way check if response message is not null and if it is not null then let function is invoked and that non-null value will be a message variable then inside it I'll write a tost as sorry error and whatever the message is then below it I'll call show error message method and pass the argument as message next if the response is loading then simply show a progress bar then come outside the observe here will set on click listener on retry button so let me write the code first and done see it's like if there is no internet then this retry button will be shown right so if the user will click on retrive button once the internet is available then it will display all the headlines using get headlines method from news view model with country code as us and that's it our headlines fragment is also ready next let's go to favorite fragment here four important things first is to display all the favorite articles that is saved in the database second is to make sure that if the user clicks on an item then it should navigate to that particular article only third the article should be deleted if the users swipe left on it and fourth user can undo its delete action got it so let's implement it step by step first is to declare all the necessary variables such as news view model and news adapter then overwrite on view created function and inside it let me quickly set up fragment binding and done next to display all the favorite articles most of the code will be similar to the previous code from headlines fragment so whichever one will be same we will simply copy paste it so first let's start with favorite recycler view setup come outside the on view created and here create a new function as set up favorite recycler and inside it copy the code from here and paste it here now here we don't require scroll listen now so remove this line and also here it will be recycler favorite not recycler headlines right and done then inside on view created copy the code from here and paste it here now see obviously instead of set headlines recycler it will be favorite recycler and then set on item click listener will be as it is except that it will navigate from favorite fragment to article fragment then we don't require item addon layout so remove all this line and done then next we need to set up Swip left feature so Focus first we will create a class item touch helper call back and extend it as item touch helper dot simple call back then inside it I'll pass two parameters up and down will allow vertical movement and left and right will allow horizontal movement got it then inside it we will have two override functions on move which will return true and on swiped so let me write the code first and done now see on more function is invoked when an item is dragged from the recycler View and return true means moving item is allowed but we don't require it then on Swipe function is invoked when item is swiped either to left or right then it takes the position of the swiped item in the adapter then retrieves the associated article from the current list in the adapter later it removes the article from the favorite database and then displays a snack bar as removed from favorite with an action as undo so in case of undo it will add that particular article back to favorites then show will display and done at the end we will create an instance of item touch helper with the item touch helper call back and apply on it then inside the apply block I'll attach the item touch helper to the recycler View and then lastly we will create a get favorite news method from the news view model using live data that represents a list of favorite news articles then set up an observer on the object with its two parameters as view life cycle owner which is used as life cycle owner only then Observer will be triggered when the whenever the data healed by the live data changes and finally inside the call back the new list of favorite articles is submitted to the news adapter and that's it our favorite fragment is also ready now it's time for our last fragment that is search fragment there is a lot of code here as well but it's very similar to headlines fragment so we'll do a little bit of copy pasting okay now let's create it first we will declare all the necessary variables let's start with view model then adapter then declare all the error UI components retrive button error text and item search addor then override on view created and inside it let me quickly set a binding and done next outside on view created we will create same functions which we created in headlines fragment like height progress bar or show error message and all so copy all the four functions with its variable and paste it here and done make sure to change the variable name then again we want pagination on search as well so we will use the same code as we used in headlines for pagination so let me copy paste it and done I have already explained the cod in headline fragment here we have two methods in it ons scroll and ons scroll State change everything will be same only except the input see here headlines was retrieving get headlines from the news view model and here it will be retrieving search news keyword from the edit text through news view model then next we need to set up search recycler view again it will be same except the IDS so let me copy paste it and done make sure to change ID as recycler search and this as search fragment and done make sure to add missing brackets now come inside on view created here again we will copy paste and then make sure to change the IDS then this as setup search recycler and this as search fragment to article fragment and then then next we need to set up code routines so let me write the code first and then this job is a co- routine job that can be used to manage the life cycle of a Coe routine then this sets up the text change listener on the search edit view basically it listens for the changes in the text of the edit text then if there is an existing Co routin job it cancels it basically to prevent from multiple overlapping Co routines then it launches a new Co routine within the main C routine scope then inside it there is a delay of search news time delay milliseconds before executing the code inside the core routine it will suspend the code routine for the specified time period Then editable is a save call combined with let function it checks if the editable is not null and then executes a code inside the lead block later it checks if the text is editable is not empty if it is not empty then it call search news to perform search operation based on the keyword entered in the edit text then next we need to observe search news through view model so let me quickly copy paste it and then then remember we have a situation where if response is Success then this action will be performed and if response is error error then this actions will be performed and if response is loading then this actions will be performed got it then obviously change it to search news then this one as search news page also change this IDs recycler search make sure to import Observer and done last thing is to set on click listener on retry button this one is different so let me quickly write the code [Music] and done now see if the internet is not available then it will show a retry button so if the user will click on it following actions will be performed if search edit text is not empty means keyword is present then search news from the news view model else simply hide the error message and that's it our search fragment is also ready and now it's time for moment of truth let's run the app I'll highly recommend you to run the app on device not on emulator here it is but it's not displaying any news so let me check what's the issue and then I will let you know I am back very silly mistake we have not mentioned the XML layouts in the fragments like this way we will do it for other fragments as well and done now see we have latest news displaying on the screen then if I click on any of the article it will open in web view see you can literally read entire article here also if I click on this favorite button it will add the article into favorite fragment see here it is now we can also remove it by swiping left and see the article is removed from favorite and also add it back using undo not just that but we can also search any keyword in search fragment and see here it is all the results with the same keyword and that's it also there will be few articles which will throw error or crash because they might be null so take care of that otherwise it will work perfectly fine and with that said our news app series is completed now for your convenience I'll be releasing source code of the news app series soon so if you're facing any error then you can simply compare your code with the source code okay also for more updates you can follow us on Instagram or join our telegram group Link in the description box so yeah that is it for the video if you're new to this channel then please consider subscribing to my channel and I'll see you in the next [Music] video

Channel: Android Knowledge

Views: 2,306

Keywords: android studio, android tuto, android studio tutorial 2023, news app, news api integrate, android, how to make news app, how to create news app, how to integrate news api, beginners, mvvm, room, navigation component, coroutines, retrofit, dependency injection, dagger, hilt, learn android, android tutorials, kotlin, android knowledge, learn kotlin android, database, projects in android, full tutorial, learn android studio, learn kotlin projects, create an app, create android app, app

Id: 8UYkPwAx1qo

Length: 42min 34sec (2554 seconds)

Published: Tue Dec 05 2023