How to Make a News App | REST API | Android Project

[Music] hello everyone welcome to coding with evan and in this video we are going to make this news application where we will get all the news articles in a recycler view and on every recycler view will show the news headline the new source and the image of that particular news article and as you can see if we click on any of the news article it will open that in a new activity where we can read the news article let's go back and here at the top we have some news categories so if we select any of the category it will open or load the news articles of that particular category okay let's try science all right and we can also perform search for individual news articles for example if i search for olympic it will show us news articles which are about olympic all right so let's make this news application so at first as you can see i have opened a new project on my android studio and i have named it as news app and here we have our main activity.java and the activitymain.xml file so now at first let's see from where we are going to get the news articles as we are going to use rest api so for this we have to go to a website called newsapi.org so newspaper.org provides free api keys to get news articles i'll give the link of this site also in the description so after visiting this site you have to create a free account here and after creating that account you have to click on this get api key button that will take you to this page and there you can find your own api key so we have to just copy this api key and go back to our android studio and then we have to open the res folder inside the values we'll go into the strings.xml file and inside here let me zoom in here we'll create a new string object i'll name this as api underscore key and inside this will paste our api key that we just copied all right and now i'll go back to the website so now we have to click on this back to home button and then we'll click on this documentation here and from here i'll directly go to this top headlines here so here as you can see we have the documentations and the api url of our api okay you can read the documentation here like here is all the definitions that we we have to pass the api key that is mandatory and then we can pass the country code to get the news articles of that particular country we can also pass a category of news articles to get the news of this specific category we can also pass specific sources and we can also perform a search query all right and under this we have the documentation of the response objects like we will get a status object which is a string type and we'll also get total results which is integer and we'll get the articles which will be an array of the type articles so inside the articles we'll get all of this the source author title etc you can read all of them and from here we will get the url of our api and this will be a get method so from here let me just copy this url and then i'll open postman so if you don't have postman in your pc i'll give the download link of postman in the description okay so after going to postman i'll paste it here and i'll set the method of the url to get and then i'll hit send here so as you can see we have the response of our url and here we have got the status okay the total results is 38 and these are the articles that we have got so the articles is an json array and here we have few objects like the source author title description etc and inside this source we have two more objects which is the id and the name of that source okay so we have to make classes for all of these objects so let's go to our android studio and start the ui design first and then we'll make classes and objects of this response all right so let's go back to our android studio so from here i'll go to our activity main.xml file and inside here i'll just remove this constraint layout and i'll add a new linear layout here i'll set the orientation of this to vertical and then i'll change the text view here and i'll add a recycler view i'll set the width of this recycler view to match parent and the height also to match parent let's give this recycler view an id i'll call this recycler underscore main let's give this a margin also and set the margin to 8 gb and now i'll create a custom layout file for our single items of the recycler view so for this i'll go into this layout i'll right click on it and create a new layout resource file i'll name this headline underscore list underscore items okay let's click on ok here and go to the splits view and here i'll change the constraint layout to a card view let's shrink this okay so here for the card view i'll pass an id for it i'll pass let's say main underscore container and then i'll change the height of this card view to wrap content then i'll give this a card elevation of 8 db and i'll also pass a margin of 8 db and then inside this card view i'll create a new linear layout i'll set the width of this layout to match parent and the height of this layout to wrap content all right then i'll set the orientation of this linear layout to be horizontal i'll give this a layout margin of 6 db and i'll set the weight sum of this linear layout to 3 so inside this linear layout will show our news headline and the news source name besides of the news image so for this inside this linear layout i'll create another linear layout and this time i'll set its width to 0 dp as we're going to use weights here and for the height of this layout i'll pass wrap content let's set the weight of this to 2 all right and we'll also change its orientation here i'll set it to vertical because this linear layout will contain the text views which will show the news headline and the new source vertically all right let's also give this layout a margin of 80p okay now inside this linear layout we will add two text views to store the news headline and the new source so for this at first i will create a new text view here i'll set the width of this to match parent and the height to wrap content let's close this i'll give this text to you an id also i'll call this text underscore title i'll set the text size of this to 22 sp okay let's set the text style also to be bold here for the headline let's set the text color of this to color black all right and let's also set the maximum lines for the headline text view so i'll write max lines equals three so that's it for our title text view so now we have to create another text view to show the news source so for this i'll just copy this text view and paste it under here and here i'll change the id to text underscore source and i'll set the text size to 18 sp this time and text style let's keep it bold the text color i'll change it to what we have here okay add the red color slash purple 500 you can pass any color that you want you can also pass any hex code of any color and i'll also change the max lines here from three to one and then i'll also add a margin to the top of this text view so like margin top and here i'll pass 6 db is 6 db will be enough so now our text views are ready let's minimize this layout and under this will pass our image view to show the image of this particular news so i'll here add a new image view i'll set its width to 0 db as we're going to use weights here and for the height i'll pass match parent okay let's close this and let's give this an id for the id i'll call this img underscore headline let's set the weight here so for the layout underscore wait i'll pass one okay now let's use a placeholder image for the image view here so for the placeholder image i'll be using this one i'll give the download link of this image also in the description so i'll just copy this and go back to my android studio and here i'll go inside the drawable folder i'll right click on it and paste it here all right so insert the drawable folder here is our not underscore available.jpg so i'll add this to our image view here so let src equals at drawable slash not available and let's also change the scale type of this image view to center crop okay all right so now let's go to the postman to see the api response object name so that we can create custom model classes for them all right so here at first in the json object we have got the status the total results and the articles so articles is a json array of a custom model where there are multiple objects like the source author title description etc and for the source we have also a custom model where we'll get the id and the name okay so at first create a custom model for this one the source so for this i'll go back to my android studio here let's close all of this and i'll create here a new package so i'll just create a new package i'll call this models and inside these models i'll create a new class new java class i will call this as source let me zoom in and here for the source classes object we have this id and the name okay so let's do that so both of the items of the source is string object so the id is a string and the name is also a string so for this let's create them let's go back to the android studio and here i'll create a string i'll call this id and then i'll create another string i'll call this name all right and make sure one thing that the object name we are defining here should be same as what it is inside this api okay so this is our uh source object where we have the two items now let's also create the getter and setter method for them so i'll just right click here create on generate and click on this getter and setter let's select both of them click on ok so here we got the getter and setter methods so this is for the source class of our response object now besides of source we have these other objects in our articles class or the articles model so let's create another model for the articles where we'll create a object for the source and the other string objects okay let's go back to the android studio and here let's close this and i'll create a new model inside this model class so i'll create a new java class here i'll name this as let's call this news headlines all right hit enter and let me zoom in here a little bit so for the news headlines we have this uh source object the author title description etc so let's create a source object first so i'll go here and here i'll create a new source object of this uh source class so i'll write source and i'll call this as source because it's named as source inside our api as you can see so let's set this value to null for the first time and then let's add another objects or the other objects so we have the author here let's copy this and i'll write a string author equals empty so similarly i'm going to add all the other objects all right so here i have created all the objects according to the name inside this api response okay so here let's also create the getter and setter for all these items so i'll right click here click on generate click on getter and setter i will select all of them and click on ok so we got the all getter and seller methods of these items so now let's go back to our api again so here in the response we created the source class object and also the uh so also the model for these articles so we have to create another class for the whole response where the where there will be the objects for the status the total results and the articles and the articles will be a array so let's go back to the android studio again let's close this here and i'll create a new model class here so right click here create a new java class i'll call this as let's say news api response let me zoom in here so here at first we'll create object for the status and then for the total results and for the articles which will be an array so let's do that so here in the classes body i'll write a new string i'll call this as status then there will be an integer which will be named as total results so i'll create a new integer i'll call this total results and then there will be a list of the articles so i'll create a new list and the type of the list will be the object news headlines so i'll write news headlines and let's call this articles because it's defined as articles inside our api response all right so now let's also create a getter setter for all of this so i'll click on generate getter and setter i'll select them all and click on ok all right so now we have created all the model classes for our response object so now we can start working in our main activity but before that let us create the custom view holder and adapter for our recycler view where we will show the uh new deadlines so for this i'll create a new java class i'll call this as custom view folder let's zoom in here and here i'll make this class extends recycler view dot view holder okay so it's showing an error if we click on this button it will ask us to create constructor matching super let's click on that and this is our constructor so here at first we have to create objects for our view items that we created for our recycler view items in the head headline underscore list underscore items here so there we had two text views and one image view so i'll create the text view object here i'll call this as text underscore title then the text underscore source all right then i'll create another object for the image view i'll call this img underscore headline headline all right and finally we can create another object for the card view which we named as main container we'll need that to create the on click listener for the recycler view so create a new object card view i'll call this let's say card view and let's initialize them inside this constructor so i'll go under the super item view and here i'll write first let's write the text title equals item view dot find view by id r dot id dot text underscore title okay similarly i let the text underscore source equals item view dot find view by id r dot id dot our text underscore source all right let's also initialize our image view here so image headline equals um item view dot find view by id r dot id dot img underscore headline okay let's also initialize the card view so card will calls item view dot find view by id r dot id dot uh main container it's it was okay so our custom view order is now done now we can close this and create a custom adapter so right click here and create a new java class again i'll call this custom adapter okay let me zoom in here and here i'll make this extends recycler view dot adapter and here in the angle bracket i'll pass the view holder that we created which is the custom view holder okay showing an error we can click on this red bulb and it will ask to implement the methods and also ask to make the constructor so let's click on this implement method here first select all of these three and click on ok so here we got these um methods the get item count the onbindviewholder and the oncreateviewholder okay so here at first in the main class we will create object that will pass for our custom adapter and we'll also create a constructor so at first i'll create an object for the context so i'll write private context and i'll call this context and then we'll also pass a list of news headlines to our recycler view to show them so i'll again create object a private list of let's say news headlines and i'll call this as headlines okay and then we can create the constructor so i'll just right click here click on generate click on constructor and i'll select both of them and click on ok so this is our constructor here okay so now inside this oncreateviewholder instead of returning null we will return a new custom view holder and here i'll call the layout inflator dot from and here i'll pass the context and then i'll write dot inflate and here i'll pass the layout file that we uh created here the headline underscore list underscore items so here i'll write r dot layout sorry r dot layout dot um headline underscore list underscore items and then the second parameter is the parent that we got here so right parent and the third parameter will be false okay so that's it for our oncreateviewholder now on the onbindviewholder we'll add the objects of this news headline so for this we have to go inside this onbindview holder first so here i'll call the textviews and the image view and i'll attach all the data for that particular views here so for these at first i'll write the holder dot text underscore title dot set text and here i'll pass the headlines dot get from position dot get uh title all right and then we'll also add the text source for our source of that new so as you can see inside the api response our source name is inside the source object which is in the articles so for this we we have to write a holder dot text underscore source dot set text and i'll call the headlines dot get from position dot get source because our name is inside the source so get source dot get name all right so now we have to also show the image of that news article inside the image view to show the news image inside the image view we are going to use a new library called picasso so for this let's go to google and search for picasso picasso library let's click on this link i'll give the link on the description so from here we have to copy the dependency uh where is that dependency all right this one we'll just copy that and go back to the android studio and inside the gradle files we'll open the module level gradle file and here inside these dependencies i'll paste it and click on sync now all right so now we can go to the custom adapter here and here at first we'll check if our uh image url is empty or not so if it is empty then we won't show any image here that will by default show the placeholder image that we already pasted here as you can see this image okay so let's quickly do that for this i'll write if headlines dot get position dot get url to image not equals null so if it is not null then that means we have an image url inside the string so in that case we load the url in our image view so in order to load that image inside the image view with picasso i'll write picasso okay let's click on import class here okay so picasso dot um get dot load and here we have to pass the string of the url so for this i'll write headlines dot get from position dot get url to image and then go outside here and i need to write dot into and here i'll pass the image view where we want to show the image so the image view was holder dot img headline all right so that's it for our onbindviewholder now we have to go to the get item count and here instead of returning 0 will return headlines dot size all right so our custom adapter is now ready now we can go to our main activity here and in order to manage our requests we are going to use the retrofit library so let's quickly install the dependencies for our retrofit so i'll go here this link the retrofit github repository i'll give all the links that i'm showing here in the description so from here we have to copy the dependency of the retrofit so the retrofits dependency should be somewhere here okay this one the com square up profit okay so let's copy that and go back to our android studio again i'll go into the module level gradle file and here i'll write implementation and inside the quotation i'll paste the dependency that we just copied all right and then we'll also need the json converter for our retrofit so for this i'll search for json converter dependency so let's go to this link i'll give the link of this json converter also in the description so from here i'll just copy this the dependency and go to the android studio and here i'll paste it here so here as you can see it's showing an error because we have to pass the latest version so i'll just copy the version for the retrofit and paste it here again all right so now let's click on sync now so once it's done we can go to our main activity.java here and we'll start our api calling here let's not make a mess inside our main activity rather we will create a new class where we will manage all the api calls so let's quickly create a new java class here i'll call this as request manager and let me zoom in so here at first let's create a object for the context so i'll write context i'll call this context and then let's create a object for the retrofit and make our api calls here so i'll write retrofit i'll create the object retrofit equals new retrofit.builder and here we need to add some more attributes like the dot base url here and for the base url if we go to the uh api api documentation here so here this part of our api url this is the api base url so i'll just copy this one and i'll go back to the android studio and i'll paste it inside a quotation so this is our base url and then i'll add the converter factory so i'll write dot um add converter factory and i'll write the json converter factory dot create and then finally i'll write dot build and then here i'll create a constructor for our request manager class so i'll just right click here and click on generate on constructor and from here i'll only select the context here and click on ok all right so this is our constructor let's minimize this and here we'll manage our api calls okay so in order to manage the api call i'll go down here and here i'll create a new interface so i'll call this as public interface i'll call this call news api so here i'll make a call for the news api response so i'll write news api response and i'll call this as uh call headlines okay and inside the methods uh parameter we have to pass the okay let's make this as call headlines with capital h okay so inside the methods parameter we have to pass some queries that we want to make so as you can see inside the documentation we had these queries we can pass the api key the country the category sources queries i'll just use the country the category and the query search here all right so let's go back here and here i'll create a new query with the annotation of at the rate query and for the query we have to pass the exact value that are written here like for the country we have to pass this country so i'll just copy this value from here go back to android studio and here inside the quotation i'll paste it so for the country we'll pass a string for the country string country and then we can pass another query so i'll write at the red query and here inside the quotation we can pass let's pause the category now so i'll copy the category from here and i'll paste it here and for this string i'll pass a string category and then we can pass another query where we'll search for specific news so that query was named as q so we can go back to android studio and write here q and here for this string will pass let's say query and finally we have to pass the api key as you can see here the api key is required here so the name of the parameter is api key so i'll just copy this and i'll pass another query and this time in the quotation oops insert the quotation i'll paste it the api key and then for the string let's create the object as api underscore key all right let's add a semicolon here to close so as you can see inside our api documentation our api calling will be inside this top headlines endpoint so we have to just copy this top headlines from here go back to the android studio and here before this call i'll add the get annotation because our call is a get method as you can see in the documentation here so here for the parameter i'll pass the end point the top headlines all right so our call api interface is now done let's minimize it and go up here and here we'll create a new method where we will manage our api calling so at first let's create a listener class so that we can handle the responses from our main activity so for this i'll just go here and create a new java class i'll call this as on fetch data listener and that will be an interface let's hit enter okay let me zoom in here so inside this public interface on face data listener i'll create two methods here so the first method will be the void on fetch data on page data let's write the f with capital one okay the on fetch data so if we uh get the data so we'll get this as a list of the news headlines so i'll write [Applause] list of news headlines i'll call this as list and we'll also get a message of string message all right and similarly i'll create another method to handle the error so i'll write on error and here we'll only pass the message so i'll write the string message all right so that's it our on face data listener now we can go back to the request manager class here and here we'll start a new method where we'll manage our api call so i'll write the method public void gate news headlines so here for the methods parameter at first we'll pass the listener so i'll write on fetch data listener i'll call this as listener and then we can pass the category so i'll write string category and then we can pass the query that we want so i'll write a string query all right let's go to the method body here so insert the method body we will start our api calling so for this i'll write call news api that we created here so call news api i'll create a object for this call news api equals retrofit which we created here retrofit dot create and here i'll again call the call news api call news api dot class all right and then i'll create a call object so i'll write call news api response and i'll call this call because i'll call the call news api here so call news api and from this class i'll call this call headlines method so i'll write dot call headlines and here we need to pass the parameters that we defined here so at first let's pass the country name so by default i am passing the name as us you can pass i n if you want to see news for india you can pass uk for united kingdom i am passing us and you can see the country codes here okay you can pass any of the country codes that are mentioned here okay let's go back to the android studio so country name is i'm sending us and then we have the category so for the category i'll pass the string category that we got from the parameter and then for the query i'll pass the string query that we passed for the parameter and finally for the api key this one the api key will pass the api key that we have stored in our string file at the start of the video here as you can see so i'll go to the request manager here and here to get the api key from the string file i'll write get string okay we have to pass the context first so context dot get string r dot string dot api underscore key all right so now here i'll create a try block and inside the try block we'll just call our api so i'll write call dot nq and here i'll create a new callback so i'll write new callback news api response so here we got the methods the on response and the on failure here okay and here it's showing an error because we need to add the exception also for the try block so i'll write cat i'll call this as a exception e and inside the body i'll write e dot print stack trace okay so now let's work on this on response and the on failure so for the on response i'll check if the response is not successful so i'll write a response dot is successful i'll add a note here so the api response is not successful then we'll show a toast message tools dot make text and here at first i'll pass the context and for the text i'll pass let's say error all right so now let's go outside of this if statement and here let's call the listener that we got from the parameter here so i'll call the listener here listener dot on fetch data as we are getting the response here so on fetch data and for the parameter of the on fetch data we have to pass the list of the news headlines and the message so for the parameter here at first i'll pass the response dot body dot get articles so that will get the news articles and we'll pass this through our listener so that will get the news articles from the api response and pass it to our listener and then for the second parameter we have to pass the message so i'll write the response dot message here all right so that's it for our own response now let's go to the on failure so in case of the on failure we have to pass only the message so here i'll pass the message listener dot uh on error and here we'll pass a message so for the message i'm passing request failed all right so that's it for our api handling now we have to call this get news headlines method from the main activity to get the api response all right so now let's quickly go to the main activity here and here i'll go into the oncreate method here and here i'll create the request manager class object so i'll call the request manager i'll call this as manager equals new request manager and here we need to pass the context so i'll write this and then i'll call the manager object dot get news headlines and here we need to pass the parameters and for the parameter at first we have to pass the on face data listener so actually let's create the listener first so i'll go outside of the oncreate method so here i'll create a private final on fetch data listener of news api response and i'll call this as listener equals new on fetch data listener so as you can see it's showing an error here for the news api response argument here that is because on the listener we forgot to add the news api response here so here i'll write news api response okay now let's go to the main activity and the error is now gone here here again to pass the news api response all right so now for the on fetch data we will show the news articles inside the recycler view and from the on error we'll just show a error message so now let's go back to the manager.gate news headlines and here for the parameter at first i'll pass the listener that we just created here and then we'll pass the uh query or the category that we want to search first so by default we'll show the category of general general and while passing this make sure the text is same as what defined here so here the general is this one we'll just copy this and paste it here okay and then third parameter was the query so at first when we'll run the app for the query we'll pass null okay so now that we have got the api response on the listener we can show the news articles uh in a recycler view so for this at first let's create object for the recyclerview but before that it's showing some error here what's the error okay there is the error we'll just need to add a semicolon here okay so now let's create an object for our recyclerview so i'll just go here create object for recyclerview i'll call this as view i'll also create a object for the custom adapter so i'll call this custom adapter i'll call this adapter okay all right so now let's go into the on face data here and here i'll call a method show news and here for the parameter i'll pass this list so i'll pass this list here all right so now we have to create this method so i'll click on here create method on the main activity so here we got this method private void show news and the parameter is the list of news headlines so inside this methods body will initialize our recycler view silent recycler view equals find view by id r dot id dot recycler main and then i'll write receptor view dot set has fixed size to true and then i'll set the layout manager for our recycler view so recycler view dot set layout manager new grid layout manager and here i'll first pass the context this and then for the span count i'll pass one all right and then i'll initialize the custom adapter so i'll call this adapter that we created up here so adapter equals new custom adapter and here i'll pass the context which is this and then for the list of the news headlines i'll pass the list that we got from the parameter so i'll pass list here all right and then we'll attach this adapter to our recycler view so i'll write recyclerview.com adapter and i'll pass this adapter here all right so now before testing the app we have to add the internet permission insider manifest file so i'll open the manifest file and here under this manifest i'll add uses permission tag and i'll write android.permission.internet let's close this now let's run our application to see what are we getting in our app all right so as you can see we are getting all the news articles inside our app and this is the news uh headline this is the news headline this is the new source and this is the news image that we got all right so now if you want to add a progress dialogue while loading the news articles so for this we have to go into the main activity.java here and here let's define a global object for the progress dialog first so i'll write progress dialog sorry progress dialog i'll call this as dialog and i'll initialize it here so i'll write dialog equals new progress dialog and i'll pass the context here this add a semicolon and then i'll start our progress dialog so for this at first i'll write the dialogue dot uh set title and for the title i'll pass fetching news articles all right and then we can show the dialogue so i'll write dialog dot show okay so now it will show the dialog whenever we'll open the app and after we get the news from this uh response so while uh after adding the news in the recycler view we'll just dismiss our dialogue so i'll write dialog dot dismiss okay so now let's try to run our application again to see the changes it's showing fetching news articles dialogue and after getting the news articles it dismisses the dialogue all right so now let's try to create a on click listener for this recyclerview items to show them inside a new activity so let's quickly do that for this at first i'll go here and create a new listener class i'll call this as select listener and that will be an interface so inside this interface i'll create a new method called void on news clicked all right and for the on news clicks parameter i'll pass the news headline object so i'll call the news headlines i'll call this as headlines okay so now to implement this at first we have to go to our custom adapter here and here i'll create a object for our listener that we just created so private select listener i'll call this as listener semicolon and i'll add this to our constructor also so for this i'll go here in the parameter of the constructor i'll call select listener the object listener and then inside the constructor's body i'll write this dot listener equals listener okay so after that i'll go inside the on bind view holder and here i'll create the on click listener for the card view which is the main container of our items of the recycler view so i'll write holder dot card view dot set on click listener new view dot on click listener and here on the on click method i'll call the listener dot on news clicked and here for the parameter we have to pass the news headlines object so we can get that by simply writing headlines dot get from position okay so now let's go to our main activity and here it's already showing an error inside this custom adapters constructor because we have just updated the constructor so at first i'll go up here and i'll write this as implements select listener so it's showing an error if we click on this red bulb it will ask us to implement the methods so let's click on this i will select this one and click on ok so here we have got this on newsclicked method all right so now here for the custom adapters constructor i'll pass the listener so for the listener i'll pass this okay so error is now gone so now if the user clicks on the single item of the recycler view we we have to create a new activity where we'll show the news details of that particular news so for this at first here we have to create a new activity so let's create a activity by clicking on here i'll right click here create a new go to this activity and i'll select this uh empty activity and i'll name it as details activity right and click on finish so these are details activated.java and the activitydetails.xml so at first let's uh let's actually finish this from here so here inside this on newsclick method i'll start a new activity by calling this start activity start activity and here i'll create a new intent so i'll write new intent and this will be from main activity dot this to our details activity dot class all right and also with this intent we have to pass the data that we got from here in the parameter so i'll just go here after this class and i'll create a new line here and i'll write dot put extra so here for the name of the data i'll pass data and for the data that we are passing here we are passing the headlines so i'll just pass the headlines here okay so it's showing an error because our data is not parcelable for this we have to go inside the model classes at first let's go into this news api response so here i'll make this implements serializable okay let's go to the news headlines again and this time i'll also make this implements serializable for the source i'll also pass implements serializable all right now let's go to the main activity and here as you can see our error is now gone okay so we are passing our headlines object to our new activity with this name data so now let's go to the details activity so i'll just close the others and i'll only open the activity details xml file let's go to split mode and here at first let's design the ui of our details activity so here at first i'll change this root layout to a linear layout and i'll set the orientation of this layout to vertical and then inside this linear layout i'll add a scroll view [Applause] and the size of the scroll view will be match parent and match parent and inside the scroll view i'll create a new linear layout and for the linear layers width and height i'll pass match parent for the width and for the height i'll pass wrap content okay and then i'll set the orientation of our this linear layout to be vertical and then inside this linear layout i'll create a new card view and for the card views width i'll pass match parent and for the height of the card view i'll pass wrap content here let's close this tag and for the card views card elevation i'll pass 8 dp here and let's also give this a margin around of 80p okay so now inside this card view will again add a new linear layout and this time for the width of this layout i'll pass match parent for the height i'll pass wrap content let's close this and then inside this linear layout for the orientation i'll pass vertical let's also give this a margin of 6 dp and then inside the body or inside this linear layout i'll create uh a text view first so i'll create a text view where i'll show the news title so here for the width of this textview i'll pass match parent for the height i'll pass wrap content here let's close this and then let's give this an id i'll call this text underscore detail underscore title all right i'll change the text color of this to color black i'll set the text style to be bold here and the text size to be 26 sp here and then under this text view i'll create a new image view where i'll show the image of that news so for the width of that image view i'll pass match parent and for the height let's pass 250 dp here let's close this tag and also give this imageview an id i'll call this img underscore detail underscore news [Applause] all right and then let's set the scale type of that news article to center crop and then let's also set a placeholder image so for this i write src drawable slash not available that we already used in our recyclerview items actually not pass center crop here that don't look much better hence we will pass fit x y okay so that will get the full height and width of that image view all right so now let's do another thing uh we'll set a margin to the top of our image view of let's say hdp and then let's go under this image view again and here i'll add a new text view where i'll show the author of that news so for the width of this text view i'll pass match parent for the height i'll pass wrap content here for the id of this text view i'll pass text underscore detail underscore author okay let's also give this a margin to the top of 60p i'll set the text color of this to color purple that you already used in the recycler view items and i'll set the text size of this to let's say 16 sp all right so now similarly i'll just copy this textview again under this and this time i'll set the id of this to text underscore details underscore time okay and here i'll show the publishing time of that text or that news okay let's change the color of this to color black again okay so now let's go under this card view and here i'll show the detail and the content of that news so at first i'll create a new text view here and and i'll set the width as match parent for the high telepath content here let's give this id as text underscore detail underscore detail okay and i'll set the text size to let's say 22 sp i'll also set the text color to color black and i'll also set this a margin to the top of 80p all right so now we have to create another textview to show the content of that news so i'll write text for the id i'll pass text underscore detail underscore content and here i'll just change the text size to 20 sp the color will be black and the rest will be same okay so our ui for the activity details is now done now we can go to the uh details activity.java file so here at first we have to capture the data from the intent that we passed from the main activity so before that i'll create a new object for the news headlines i'll call this as headlines and then we'll try to get the data so for this i'll go into this oncreate method and here i'll call the headlines object that we just created equals i'll call the get intent dot get serializable extra and here i'll pass the name as data as in the main activity uh we passed the name of our data as data so i'm writing here the same data okay let's add a semicolon here and it's showing an error because because we need to cast these two new zead lines okay let's click on that okay so now our error is gone so we got the news headline from the intent right here inside this object so now we have to show the data from this object to our view elements so at first let's initialize our view elements first so i'll create object for the text view first so the first one was txt underscore title sorry title then txt underscore author then txt underscore time then txt underscore detail and then txt underscore content all right and then i'll create object for the image view so image if you will call this as img news okay so now let's initialize them inside here so i'll go up here first and here i'll write txt title equals find view by id r.id dot uh txt text underscore detail underscore title all right so similarly i'll initialize all the other view elements [Applause] all right so here i have defined or initialized all the view items here so now it's time to set the data to this view so for this i will go after this after getting the values from the headlines because if you define or set values before that you may get the null pointer exception error okay so i'll go here and at first i'll write txt title dot set text and here i'll pass our headline object dot get title okay and then i'll call the txt author dot set text and i'll pass the headlines dot get author okay and then for the time txt time dot set text and i'll call the headlines dot now get get published okay [Applause] and then for the txt detail dot set text i'll pass headlines dot get detail so get description okay and then for the txt underscore content dot uh set text i'll pass headlines dot get content all right and finally we can set the image to our img news so for this we will again use picasso so i'll write here picasso dot get dot load and here i'll pass the headlines dot get url to image and i'll go outside here and i'll write dot into and here i'll pass the img news okay so that's it for the details activity so now let's try to run our application again and see what are the changes fetching news and here we got all the news articles so let's select any one of them let's select this one so here as you can see we got the we got into the detail activity and there is the news headline the image the author of that news article and then there is the time of publishing the news and then i got the details of that news all right let's select another one let's select this one okay it doesn't have any data maybe okay let's select this one okay all right so as you can see our app is working fine so now let's try to add the categories up here and also try to implement the search view to search for specific news articles okay so let's quickly do that so let's work on the categories first so i'll just close all of them here and now i'll go into the main activity and i'll go to the layout file of the main activity here so here above this recycler view i'll try to add the categories in a horizontal uh stroll view okay you you can also add a horizontal list view but in my case as there is only seven items i'm going to add a horizontal scroll view where i'll add the seven buttons so let me zoom in first here so here above this um recycler view we have to add a horizontal scroll view but before that make sure your orientation of this parent linear layout is vertical so now here i'll add a horizontal scroll view so i'll write horizontal scroll view and here for the width of that i'll pass match parent and for the height i'll pass wrap content here let's give this a margin of 6 db all right and now inside this horizontal scroll view we have to create a new linear layout and for the linear layouts width i'll pass match parent and for the height of this i'll pass wrap content here okay so now inside this linear layout we are going to add seven buttons for the seven categories so let's create a button first so for the width of this button i'll pass wrap content and for the height of this button i'll also pass wrap content okay let's give this button an id here i'll pass a id of btn slash or underscore let's say one and then for the text of this button we have to pass the name of the category so let's go to the documentation of our api and here as you can see for the category we have these seven types of categories so i'll just copy this business from here i'll copy this go back to android studio and i'll paste it here okay let's change the text size of this button to um let's set to lsp okay that's nice let's give this a padding of 6 db also and let's also give this a margin around of 6 db okay so now let's try to copy this button 6 more times because we have 7 categories here so i'll just copy this one two three four five six okay one two three four five six seven okay we have seven buttons here so now we have to just change the id and the text of them so the first one was the button one and the text of this button was business so let's copy the entertainment now and here i'll paste it i'll change the id to btn underscore two then again i'll copy this general from here and here for the next button i'll pass or paste the general here and change the id to btn underscore three and here i'll copy this health copy that and here i'll pass this one i'll just name the id as ptn underscore 4 so let's do the same for the rest of the [Applause] three so here we got all the seven buttons for our categories so now let's run our application one time to see how our buttons look okay so these are the news articles and here we have the buttons above okay it looks good so now let's try to create on click listener for all of the buttons to fetch news articles for these specific categories okay so here at first we need to initialize all the buttons so i'll go into the main activity here and i'll go up here and create objects for our buttons so right button i'll make the objects as b1 comma b2 b4 b5 b6 b7 okay and now i'll initialize this buttons inside the oncreate method so i'll just go here and then i'll just initialize them by writing p1 equals find v by id r.id.btn1 okay so let me quickly initialize them [Applause] all all right so our buttons are now initialized now we have to implement on click listener for the button so what i am going to do here is as for the text of this buttons i have already passed the category name as it is so i'll create a common on click listener and when the user will click on the button it will get the text from this button and will call the api with that particular text as the category okay so for this i'll go up here and after this implement select listener i'll add a comma and i'll write view dot on click listener okay so it's showing an error because we have to implement the method for this so i'll click on here click on implement methods click on ok so here we got this uh on click method so here i'll uh convert the view that we got here from view to button because all the items we are going to use here is a button so let button button equals button and i'll pass the view here okay and then we'll get the category from the buttons text so i'll create a string here called category equals button dot get text dot tostring okay and then we'll call our api with this category so for this let's go up here on the where is the listener okay so i'll just copy this and go down here and here i'll paste it here so before calling this request manager i'll just create the progress dialog again so i'll write dialog dot set title and this time i'll pass fetching news articles off and here i'll add the category okay and then we have the request manager and this time for the manager.gate news headlines instead of passing the category general we'll pass the category that we got from here category okay so that will do the job now let's run our application again and see the changes fetching news so here is the news of the general category now let's try to click on this sports it's not working that's because we forgot to add the on click listener to our buttons okay so write b1 dot uh set on click listener and i'll pass this so similarly for all of the buttons we have to do the same so let's quickly do that on this one this is all right so now we have added the on click listener for all of the buttons so i guess now our app should work let's run this okay installing fetching news articles and here we got the news articles of the general category now let's click on this sports so it fetched the news articles of the sports category but our progress dialog is not working so for that maybe we forgot to show the progress dialogue yes i forgot so for this i'll write dialog dot show and then let's run our application again okay let's click on technology now fetching news articles of technology and here we got the tech news okay let's click on entertainment and here we got the entertainment news okay so our app is working fine so now it's time to implement the search view to search for specific news articles or make a query to our api so let's quickly do that for this we have to go to the activity main.xml file first so here i'll minimize this um horizontal scroll view also this recycler view and i'll add the search view in between those so let's make this ui prettier we will add a card view first so i'll add a card view and for the width of this card view i'll pass match panned and for the height of this card view i'll pass wrap content okay and then let's set the margin of our card view to let's say 14 dp all right and then i'll set the card elevation of our card view to 80p here so now we'll go inside this card view and here i'll add a search view sorry search view and we're going to use the android x search view here and for the width of the search view i'll pass match parent and for the height i'll pass attr attribute slash action bar size so that will get the height of the default action bar let's close that let's give the search view an id here i'll call this search underscore view let's also set the default query hint here so i'll write default query hint and i'll write uh search news okay and here i'll add another attribute which is iconified by default to false that is because uh if we don't add that then while searching we have to at first click on this search icon here that will expand the search view and then we have to write the text but i don't want that i want the search view expanded by default so for this i'll add iconified by default to false okay so here as you can see our search view is now expanded okay so now we can go to our maintenance.java here and here i'll create the object for our search view so search view and from here we have to select the android x dot search view not this android dot widget one because we use the android x search view in our xml file so i'll call this as search view and then i'll initialize it inside this oncreate method so let's search view equals find v by id r dot id dot search underscore view and then i'll create a onquery text listener for our search view so i'll write search view here dot set on query text listener i'll create a new search view dot on query text listener so here we got the methods the on query text change and on query text submit so we won't change anything on the on query text change because we will only face the news articles while the user submits the text okay so here i'll return true but before returning true we'll make the query so for this again i'll just copy this um two lines here and i'll go up here paste it here and here the context is showing error so i'll write main activity.this here maybe mainactivity dot this okay so now for the gate news headlines parameter i'll pass the category as general but for the query instead of null we'll pass the text that the user typed inside this um query so i'll just pass this query here [Applause] all right so let's also add the progress dialog here so i let progress okay we already had object dialog dot set title and here i'll write fetching news articles of and i'll add the query here and i'll start our dialog so dialog dot show okay so that's it for our search view now let's do one thing inside this on error if the api returns an error in that case we'll just show a toast message so here i'll write toast and here for the text i'll pass n error [Applause] occurred okay so now uh let's do another thing if the user searches for an item in the search view and submits that but the api doesn't return us any result for that particular query so in that case we'll show the user a message okay so for this instead of showing the list at first we'll check if the list that we are getting here dot is empty in that case uh we will show a toast message which will say no data found okay and we'll add this show news in the else block okay cut this and paste it here in the else block okay so our news app is now fully ready so now let's try to run our app for the final time fetching news articles so here is all the news articles that we got from the api we can click on them to expand them and then we can also select categories of news so let's select technology it will face the news articles of technology for science it will show us the news articles of science now let's try to search an item so let's search for olympic search no data found okay so let's search for another thing so let's see what already exists saturn okay so let's search for saturn search okay so here is the news article about saturn okay so that's so we can simply make a news application using rest api i hope you guys enjoyed the video if you enjoyed please like this video and subscribe to my channel because i'll be making more awesome videos like this and thank you so much for watching

Channel: Coding With Evan

Views: 86,228

Keywords: How to Make a News App in Android Studio? | GeeksforGeeks, Make an Android News App in Just 30 Minutes - एंड्रॉइड न्यूज़ एप्प बनाना सीखे, How to make a news app, android project for beginners, android project with api, api based android project, easy android project, android intermediate project, android project for resume, best android project tutorial, android app full tutorial, news app for android, how to use api in android app, api integration in android studio

Id: Csx7ve8DF_U

Length: 86min 5sec (5165 seconds)

Published: Sun Aug 01 2021