Android Development Full Tutorial 2023 | Kotlin | Complete Course with Roadmap & Projects | @SCALER

hello everyone welcome to scalar's YouTube channel today we're going to look into the complete course of Android app development and before we move on and understand what are the topics that are going to be covered today please make sure to subscribe to scala's YouTube channel so that you don't miss our upcoming videos and also if you want to learn Technologies and Frameworks from industry reading experts we conduct free master classes the link is in the description go check it out now let's look at the topics that are covered in this particular session to start off with we'll be looking into the complete roadmap for an Android application developer and how you can become an Android application developer what are the things you'll have to learn and everything related to it after that we'll look into the tutorial the first tutorial will cover the basics of Android and also show you how to create a portfolio application and in the next part of the tutorial we'll be looking into again more Android Concepts and also how to create a calculator but it's not just one simple calculator will be looking into two different user interfaces what is the next logical step once you've created an Android application you want to publish it to the Google Play Store now we have a complete video on that on how to publish your Android application to the Google Play Store and finally we have a complete tutorial on how to create an Instagram clone right so these are the topics that are going to be covered in this particular session there are various different demos so you guys also can practice along with us now let's get started hi this is Arnav and in this video we're going to be discussing what would be the ideal roadmap and what are the things that you need to learn to become a professional Android developer um quickly a little bit about myself so uh previously I was heading the mobile engineering team at zomato and I took care of the revamp of the zomato app that happened in 2019 uh and twenty and then I've been working as the lead engineer of the Android team uh in Target India uh in my you know Journey as a professional Android developer I have had the opportunity to interview uh almost close to 150 candidates for different uh kind of roles whether an entry level sd2 uh you know lead engineer kind of roles I have been uh had the opportunity to interview all of them and uh this video is going to be taking from all of those learnings to you know give an idea about uh what are the expectations that an Android developer uh you know you know in a professional setup at different levels whether somebody is an you know associate or a junior under developer fresh out of college and they have joined one of the things that we expect out of them uh what are the things that we expect at later stages so uh you could be uh just getting started with uh development of programming at the basics level you could have worked on a little bit of UI development maybe made websites or something which can be a great Advantage if uh you are working on another platform which is also UI based and you could also be somebody who has tinkered with Android Studio downloaded it and tried their first app maybe but they are trying to understand one of the things that are required what are the prerequisites for you know Landing an Android development job now I'll just give you a quick overview of what are the kind of different levels that people are looking for when they're hiring Android developers so at a you know a basic Android engineer level uh we are looking for somebody who can join an existing Android team there are other developers there and you can give them features to work on you can give them very specific uh you know specifications that the screen should look like this clicking on that the data should go there and they're able to build that um as you become a more senior Android engineer especially somebody who has two years or more under their belt uh that kind of person would be somebody in a very big complex app they could be given an entire vertical inside that app so for example inside zomato's app somebody could be responsible for the restaurant page uh the entire restaurant listing uh place or somebody could be responsible for the entire order and check out experience and the men somebody could be responsible for you know uh your profile page wallets cards that are getting added the entire payment experience uh they might be working with team of three four more other Engineers but they are completely responsible for the portion that they're working on and uh for smaller apps they could be responsible for the development of the entire app and finally uh like the Android team leads or The Architects or principal engineer kind of roles that we have in that case we are expecting somebody who can you know talk to uh product and business teams and understand what the requirement is and they can kind of visualize what has to be built inside the app they can think of the larger architecture that needs to be done inside that app and you know they can allocate that work to the team uh you know they are the ones who are taking their decisions on whether you're taking building an app in mbvm or MVP whether something supposed to be reactive or you know where the data needs to be cached locally or something like that those kind of decisions are getting taken by those people so let's take a look at uh what are the requirements that you need to get to one of those places but before that I'd love to clear a few very frequently asked questions that I face when I Mentor people in Android development uh so the first question is I do not know programming at all should I start a learning Android development uh the short answer to that for me is no I would say that you must understand basic programming to a level where you can deal with some data structures and algorithms uh you know uh and you know you're Hands-On with coding so that when you start working on Android uh right by that time syntax of the code is not something you're already fighting with okay uh next I think a lot of people ask is whether they need to know Java before they start Android uh I would say that if you know Java already it's gonna be a very very beneficial thing when I personally started learning Android I did not actually know Java and I knew C plus plus uh and obviously I had to little bit understand the syntax while I went with it by the way currently people who are working on Android development new Android developers everybody is working on kotlin this these days but it uh you know runs on the Java virtual machine itself so an understanding of java definitely goes a long way towards helping uh you know you get started with Android um another question that people ask a lot is how much data structures in algorithms should I know before I begin and to answer that question I would say that if you are very clear with the basic set of data structures like you know linguists hash Maps Stacks cues uh you know these kind of things and you know how the operations work and you know which data structure is suitable in which kind of a use case that should be placing you up at a good point to you know start getting into Android development uh some of the very uh complex data structures like traversing graphs and trees and creating red black trees bsts those kind of things might not be needed when you get started with Android development on a day-to-day basis those are things we don't need while we're building apps okay uh what are the minimum specifications of my laptop or PC uh and do I need to have an Android phone uh for this uh I would say like you do need a little bit of powerful computer because the running the Android Studio of course takes a bit of resources so something equivalent of you know at least eight gen nine Zen Core i5 kind of machine at least I would say at least 8 GB of RAM 16 is kind of preferable if you have well the compilation process it really helps if you have that uh do you need an Android phone you definitely I would say yes uh you can run things on an emulator on your laptop but that both slows down your laptop and uh more than that uh it's much easier to test if you actually have a device to test on so I generally suggest going for that um final question is making Android games and Android apps similar this is something uh some people ask they ask that whether when I start Android development will that enable me to make games I just want to clarify that what we are talking about today is about making Android apps like some of the popular apps like Google's app Facebook app Twitter you know these WhatsApp these kind of apps they are not similar at all to how games are made games are made in a very different way and actually the way games are made for Android or iOS or even for desktop that's all very similar so that gets into you know learning Unreal Engine or unity and making games using that this is not related to that actually okay so big question partly not Java when you get started with I uh would strongly suggest that if you're getting started today uh you should get started with kotlin because the world in the Android development side everybody is moving towards uh kotlin in a big big way and even uh apps which are eight years ten years old which was primarily written in Java the entire app uh most of such apps uh I know a lot of my friends in the industry the code bases have become almost 50 percent in kotlin and it's continuously increasing so maybe in a couple of years you would probably very rarely find big Android apps that are written uh majorly in Java anymore so if you're starting today definitely kotlin is the way to go okay so uh things that are needed uh to you know get started off before you start even you know opening Android I would say is that uh objective Concepts and Java and kotlin semantics these are some things that I would place them firmly in the prerequisite bucket so understanding things like especially if you're coming from a different language then uh how interface is abstract class is the basic object oriented nature of how Java works then is the you know dealing with the basic data structures that exist inside Java from before so arraylists uh you know hash map how the iterator works so it's called the Java collection framework uh in a group so understanding that is also something very important when you start off with Android development I would say a very good understanding of different kinds of visibility so what is a package what is package visibility what is public what is private how inheritance works you should be very uh clear and thorough with all of these things and finally I think uh an understanding of how the exception management works so when something goes wrong exception is thrown what is the stack Trace how do you try catch they are kind of the basic stuff that I would say are prerequisites before we get started with Android development next uh I would be you know uh starting off with the basic skills that you need uh to learn in Android before you can start applying to you know an over entry-level Android engineer position so the steps to do it is first obviously you know go to developer.android.com set up your Android studio uh open it make your first project using the wizard and even before you know editing any lines of code or anything just build that app and see it runs on your device that itself is quite a journey because you will face issues in setting up maybe the Java SDK maybe in setting up the Android Studio understanding the project structure that's the first you know step of the journey to do uh after that as you start learning things within Android the first few things to learn is understanding what activities are so and then how layouts work so activities are basically windows so every time an app is open on your screen that's an activity right layouts are how the UI is created on your Android uh phones so how do you place a button at some place how do you Center things you know how to make a scroll level list those kind of things are you know in the layouts so when you're working with layouts it's kind of important to understand a couple of Concepts like what's the frame layout what's a linear layout what's a constraint layout understanding which kind of layout you should use in what kind of a use case because for example something like constrained layout gives you unlimited freedom of designing your screen but then obviously it's more complex to actually render compared to something like frame layout which allows you much more limited options on placing things on the screen but it's much simpler for Android UI to actually render it as well okay then the different kind of widgets that exist on Android which is basically your you know uh where you can put a text where you can put a editable text where people can type where you can put a button where you can put an image how those things you know come together that's uh kind of the things that you should just get started off uh you know then uh you know uh again we will come back to a little bit of theoretical and conceptual things that you need to understand at this level so uh we need to understand that you know uh what is the concept of event driven uh programs versus prostituted programs so a lot of people who start off with Android development they are coming from uh uh probably history of making command line apps where the command and program says enter the next number when you enter it okay then it says enter the second number and you enter it so basically the program is dictating what the user is supposed to do right in uh UI driven and you know real world application it's more event driven so even if you have a calculator uh any of your calculator's logic does not run till the user places the equal to button okay so before that they will press some numbers and something on the screen so your logic uh depends on a listener kind of logic so it is going to be listening for people clicking a button and whenever it listens that okay button has been clicked you have to run certain parts of your logic okay so uh the logic would not run in a linear fashion the logic would be written in terms of functions and kept in the code and then there would be different listeners like listen for the app to be open listen for the button to be clicked and when such something is listened for then a certain function is going to be running this is very different from a very linear flowchart kind of driven pattern that you start off when you're working with basic programming now when you're doing real world UI apps you have to understand how this event driven model of uh you know UI event driven model of programming works okay so um uh then uh as you Explore More in the Android world what are the kind of very important uh Concepts that uh is expected out of anybody who is an Android engineer is um the very first thing is the Android activity lifecycle so when your app opens on the screen closes down once another app is opened on top of your app what is the lifecycle that happens because this is a very crucial interview question that everybody asks in Android interview question uh Android interviews okay uh then uh different kinds of components that exist inside an Android app activities which are basically you know screens that are rendered on the phone services which are background tasks that can run then there are receivers and providers which you know uh you you learn uh later on is like whenever you know some events are happening on your phone like a charger has been connected network has been disconnected Network reconnected phone has rebooted so those are events and you can create a receiver to listen to such events okay and provide us a way for your app to provide data to another app uh you know or fetch data from things inside the phone like you know fetch contact details uh fetch you know storage data those kind of things okay then next thing to understand is uh very uh important concept uh specific to Android is the concept of intents so intents are uh you know this little piece of information which tells what is the next step that you want to do especially when you're going from one app to another app Okay so there can be a share intent which is like when you open your gallery you have a photo and you click on the share button you get a lot of options you can share it to Whatsapp you can share it to Facebook you can you know share it to Twitter those kind of things happen but that's an intent that's an intent to share similarly when maybe you're in an email app and you're trying to attach a file when you click on attach then it shows like okay there's the file manager there's the gallery where do you want to attach from so that's a you know maybe file open intent okay so uh these are different intents how do we work with intents how do we go from one activity to another activity how do we go from one app to another app it all depends on intense so understanding intents is code to the understanding of how Android works okay uh then on the layout side uh we need to spend some time understanding uh how layouts written in XML interact with Java uh how the IDS work in layout so when we design our UI it's a little bit like HTML so we write it in XML we design a layout but then that layout has to interact with your Java or your kotlin code right so that's where the IDS are very important different IDs the kotlin code will actually call that button using that ID right then setting up something like on click listener uh which is basically the event driven model of working which I was just speaking before so you should understand how to set up such listeners that's the next thing to understand and then uh you know as you start making actual apps uh you know then we need to understand how to show Dynamic data and a list of data so if you see some of the most common apps that exist in the world like say Twitter or Facebook or any social media they are basically glorified lists you open the app and it's a field it's a list it's a list of posts and every post looks very similar to each other they have an user after a title the content of the post in the body of the post and all that stuff right so the data is dynamic it's coming from the API you know it's not hard coded inside the app it's coming we're making an API call downloading the data and showing it on the screen so how do you show a list of dynamic data that's very cool to understanding how Android apps is supposed to work and these are things which are kind of like very prerequisite level of Android development needed by everybody to learn and at this point you can make a few projects that you can make a calculator app or you can make a tic-tac-toe game these kind of things I would suggest as projects that you can build at this stage which gives you the level of confidence uh you know to that that you are able to actually make Android apps okay uh then uh comes uh another conceptual stuff so these white slides basically are where I'm talking about Concepts the blue ones are where I'm talking about Android specific stuff so when we are starting to build some projects then the next part which comes that we need to learn is uh you know how do we architect our app where does the data go where does the logic go uh how does the screen behave to user import and you know how does the screen show output to the user so there is generally a model view uh pattern where model is the data view is what the user is seeing and then along with model and view there are different Frameworks and different architectures we use is MVC which transfer model view controller model view presenter module view view model so these are all generally called the MV Star Family of patterns where we discussed that you know this is the data this is the screen and here's the piece of the logic that will actually take user input modify the data see changes in data and update it on the screen what is that frame of logic that will handle that that's the start there and there could be different things in Star and these days what's very common in the Android world is using the mvbm architecture uh but when you're going for interviews it will be expected that you know uh what is also MVC and MVP and you can differentiate between them you can tell the pros and cons of each of those okay uh separating your concerns like you know UI stuff should not uh you know changes in the UI should not need changes in the data layer data layer changes should not need changes in the logic layer so how to build an app keeping these things separate that's uh kind of very important okay uh so covering these things are you know very important when you want to start making more complex apps Beyond something like a calculator or a tic-tac-toe game right um then I think uh closing up the set of requirements that are needed for every Android developer even at an entry level uh comes the Android architecture components which is a set of you know libraries and Frameworks created by Google which helps in most of the common things that are needed by Android development it's also known by the name of Jetpack so uh what are fragments so fragments are pieces of uh you know your fragments of your app basically which is like a UI plus a little bit of UI related logic inside so you can encapsulate slices of views in terms of fragments and you can reuse the same fragment in different different screens of your app and different different activities of your app so understanding how the fragments work drive cycle of the fragment then uh in terms of MV VM which is like a very common pattern these days using Android development so understanding how the view model Works how does live data work which is like a reactive way of saving data changes automatically shown on the screen the repository pattern like fetching data from the you know internet or from a database how that works okay and a little bit of understanding of local database management using sqlites on Android local data is generally Source stored in sqlite databases so how do you save that and using orms to do that at this point you can make like maybe a task uh list manager or you know people can add tasks and within every task they can add notes uh these kind of apps you can make at this stage okay and you should at this stage you should make Android projects uh using all these architecture components that you have learned okay um and finally uh there are a bunch of third-party libraries common Android libraries which are used in making almost all Android apps having a little bit of hands-on experience with them is something people would be expecting because if you have made any real world app even as a side project they would be using some of these libraries so for example for most Network related stuff we use okay HTTP and retrofit which a library is created by uh Square open source uh right uh retrofit is for making rest API calls okay https for making any network calls Glide is an image rendering Library which is used to render images from a URL to your phone screen uh then serialization so when you're making API calls data is usually coming in form of Json or XML so we use something like Jackson G7 or Moshi to do the sterilization work like turning a Json object into a Java object okay and back as well so when you're sending data then a job object has to be turned back into Json okay and uh understanding of at this stage you should also be a kind of adapted understanding the you know multi-sided nature so Android obviously is a multi-thread operating system and you should not be doing some very heavy duty work on the main thread of your Android app because if you do that then your UI starts becoming very janky and then if you do something that holds the UI for more than four five seconds then Android gives a pop-up that application is not responding as well so any uh you know big pieces of logic data data manipulation those kind of things should happen in background threads while the UI remains free to operate for the user it does not get stuck okay uh after you have learned these things you can probably at a place where you can build something like you know there is github's API using which you can make like an app which tracks the trending uh trending repositories on GitHub today something like that or you can use Imgur which is a photo sharing website use the API FM go and create a clone of Instagram using that data so these kind of apps you can start making and these apps now start looking like projects which you can actually put up on the Play Store for fun you know these are fun apps you know like uh some people might even download it and use it it might not be kind of apps for which you can get funded and startup it's not such a big an idea but these are actually finished apps that you can put up on the Play store and then people might download and use it side project kind of things can happen out of this so congratulations at this point you are an entry level Android engineer uh most companies which in general are looking for SD one level Android Engineers they're hiring this is the level of skill set that they're looking so everything that we're discussed till now you have to learn all of these things uh to be able to get into an Android engineer role okay okay so now that you are you know uh qualified as an Android engineer how do you scale up from here what are the things that you need to learn to become like a senior Android engineer and what are the kind of requirements that a professional place would have from Android team leads okay so let's talk about those things um so again uh some conceptual things that you need to learn at this stage is uh we have to go deep into multi-threading once you start working on any you know uh desktop apps that you're making or you know uh where the backend apps you're making or mobile apps you're making everywhere uh like like one of the one of the very important components that make a bridge between like entry level Junior Engineers to a senior engineer is uh the concept of multi-threading concurrency parallelism because uh as the tasks start getting more complex you obviously have to you know parallelize uh your things and in terms of Android it's it's obviously like a little bit more complicated by the fact that there is one thread which is responsible for drawing the UI of the screen and you can't do a lot of things there okay uh there is also restrictions on what are the things that you can do on the main thread you can't do Network actions on the main thread the app will crash if you do that Android is not allowed doing that okay uh understanding that what kind of tasks do take more time like Reading Writing data from the disk uh you know Reading Writing data from the network uh these kind of things can take more time how do we put them into you know a background thread uh also it's important to understand is that uh the user needs responsiveness they they don't want to feel like the app has paused or stopped or something like that so keeping all of these things mind uh you have to understand how to do multi-threading how to create a pool of threads in which some of your computation heavy tasks can be run and once those tasks are done how do you show the result back into your UI okay so these are kind of Concepts that are very important uh to learn and then uh you have to go a little deeper into the language specific stuff like for Java kotlin specific things like understand why we need synchronized methods so synchronized methods are methods whose body can be executed at a time only by a thread okay understanding what volatile variables are volatile variables you know are variables whose data Could Have Been Changed by a different thread uh so again I'm not getting very deep into these Concepts right now in this video but but these are things that you need to understand how race conditions happen you know uh how synchronized volatile why they are used where they are used okay uh then you need to understand a little bit about uh you know object oriented design patterns which you need as your app starts getting more complex if you if you're looking at an app which consists of 15 20 Java files you don't really start seeing the need for design patterns but when you have 100 Java files inside your project you start seeing the need for design patterns like where would you need a builder pattern where would you need a factory pattern you know something that you want to use only a single copy across the entire app you can create a Singleton for that so understanding those are definitely very important okay then there are the higher level patterns so the oop patterns are how you write code but then there are higher level patterns what is a clean architecture so uh doing domain driven development where you keep your business logic in the domain the domain does not depend on anything and then you have data sources which handle the persistence layer then you have uh you know got the the basically the repository layer the UI layer the presentation layer how do you separate all these layers and make them work together okay and uh then the as your project starts becoming complex as you divide it into different modules uh another uh you know very crucial toolkit in in your bag is going to be dependency injection so I would suggest you start off with simple dependence injection libraries like coin uh which gives you a little bit of idea about why dependence injection is needed because when you start using coin you will see that oh okay I was creating this object everywhere now you can create a simple coin DSL and I can just pick that object up from there my code reduces you'll see we visualize why dependence injection is kind of useful later on you should uh you know obviously get well watched with uh the most common dependence injection framework that is used across the Java world and of course across the Android world as well which is dagger okay and along with dagger today there is another Library called Hilt which used along with dagger makes dependency injection very easy to do on Android and most big companies with big projects they are going to be using dagger so knowing dagger is going to be kind of imperative for senior Android engineering roles in those kind of places okay and finally reactive programming is also something you should take a look at so a lot of times what happens is that uh how the data is updated and what to be done when the data is updated these two pieces of the logic are sometimes written in very different places and you don't want to kind of couple them together so you write the code which updates the data at someplace else and you write the code of what is to be done when the code is updated the data is updated at some place else and then you connect them to with uh either a stream a reactive stream or an event list or something like that so there are Frameworks around how to do these kind of things which is the RX framework which is the reactive programming framework so uh for Android specific there is rx Java and RX Android by the way when you're even when you're doing kotlin development you use RX Java the name of the library is rxtab only right so RX is a way to do reactive programming in Android there are patterns in kotlin also specifically that are coming out in like these days we will discuss about this but having knowledge of RX is definitely very important for you know senior Android roles Android specific Concepts that you also need to add to your Arsenal uh to to kind of get to a place where you can say that okay I know enough about Android I have done my things so that you know I can be given the responsibility for a small app for the features of a big app right so uh runtime permission management uh you know these days you can ask for permission for location you can ask it only when the app is open or when the app is not open at that time as well uh you know a lot of times when you there could be different features in your app and those features might need permissions that are asked at the runtime to the user while that feature is supposed to be used rather than taking all the permission in the beginning how that works okay how background tasks work so your apps like say Gmail app is synchronizing your email and downloading your email and there's attachments uh in the background at different times of the day so using work manager and alarm manager to schedule tasks in your app to happen at different different periods and execute them in the background even when that app is not open what even when the phone screen is off and it's just lying on somebody's desk how to do those kind of things so knowing those things are important dealing with the operating system level providers of Android like how to fetch users contact details read SMS storage access these kind of things so these are all OS level providers how to use them that's also something that you need to know uh if you deal with you know multimedia apps then uh getting well versed with EXO player which is uh which is a third party Library created by Google themselves but it's not part of Android score operate system code which helps you like you know manually fine-tune how videos and audio were buffering them coding decoding them setting the you know stream speeds setting the codecs uh you know play streaming live streaming video from a certain rtmp URL on the net these kind of things so that's in the multimedia domain of stuff okay uh then another uh vertical that if you work with Hyper local apps like delivery apps Etc so you get an idea of working is like the GPS framework collecting location data of the device and the Google locations and Google Maps uh you know sdks so that you can embed Maps show the user's current location in the map how to do these kind of things again that's very important um then another vertical which is if your app works with you know maybe gestures or movement or it's a game kind of an app those kind of apps need understanding of the Android sensor framework so there is like the light sensor the accelerometer the gravitometer step sensor for how many steps the person has taken if you're making a healthcare kind of related app and just a detection framework like swipe just uh you know double tap and you know shake uh put it to these kind of gestures how to detect those kind of gestures working on those kind of things is also a very nice thing to have in your toolkit okay and finally uh connecting with some of these services that Google has made like Firebase for or analytics for crash reporting for push notifications uh right for doing simple machine learning stuff like you know detecting objects and all there is ml kit by Firebase so understanding all of these things are like at a senior Android level we'll be expecting that you would be knowing these kind of things as well okay um so once you've done this once you've come to this point uh so congratulations you are capable enough to be sitting for interviews for our senior Android engineer role uh the fundamentals that we discussed for basic Android engineer those are obviously going to be asked but some of these things like your experience with working on these Android component that we just discussed those are also starting to be important when you're looking at a single Android engineering role okay uh now that we have understood till here what is it that you need to push you to that final level where you could be like a Android architect or Android team lead okay let's talk about those things Okay so Here Comes obviously uh where at A Team level you are not just writing code but you're setting up culture for the team you're setting up the way the team Works you're setting up the workflow for the entire team as well and for that obviously you are the one who's be you know responsible for uh designing and developing uh testing architecture how tests are written for your project uh how would you automate those tests so everybody every time somebody makes a pull request to the GitHub repository the tests are automatically going to be running which tests should run on which kind of pull request designing those things automating the release uh workflow as well so that you know making an Android app really should not be a very manual task as your teams start growing like like the kind of teams which need Android architectural lead kind of position to handle the Android team they would also be needing like Automation and how the app is released they would need weekly release Cadence so that you know every week releases happen so you should have uh you know a setup in place so that that you can record UI tests work with the QA team record UI tests so that they can be automated use Frameworks like mojito or mocha which can mock out certain parts of the app which uh while testing are needed so for example you want to mock some fake data coming from the API while the tests are running because real data you can't run tests on real data because the real data keeps changing so you can't you know so for example take an example of Twitter app right so if you test with the real data every time you open the app a different tweet is there at the top because somebody else has tweeted Something New by that time but when you're testing you would probably want a consistent response so you can test that you know every time I open with this set of response this is the tweet at the top and I can see it okay so mocking things out in that sense is uh essential uh so so all of these you know CI CD testing mocking and QA automation that's a whole bucket of things that are very important and for most senior Android engineering uh and Beyond kind of roles like where where you're getting on board to be a lead on architect there's going to be a lot of interview questions around this like what are your opinions on this in a previous place your work what kind of automation systems that you had set up what are your opinions and what will you set up here if you join us those questions will be coming right uh then managing large Android projects become uh very uh defining feature for somebody who wants to be uh like you know grow more further in in the Android vertical and then become an Android architect is that you know uh bigger projects uh also have bigger teams so when you have bigger teams you want to divide the code base in such a way that people's work don't conflict with each other and to do that you would be creating separate separate gradual modules uh at zomato we had I think 60 plus granted models at Target we have uh 300 uh plus uh gradual modules uh right uh I think so how do you know work with code business which have so many greater models how do they you know come together and build Uber as the famous example of having I think more than 1500 modules uh in their project right then uh when your build system becomes so complex so uh writing custom Gradle scripts so that you know uh during the app getting built there could be some other operations that are happening there could be analytics of the build itself so if somebody's build fails the it triggers an alert automatically around that okay uh pulling in different different maybe security Keys which are needed to build those kind of things you have to write down in a build script so understanding you know uh how Gradle works and understanding how alternate is like Buck which is made by Facebook and bazel which is made by Google has separate as alternative to Gradle which are getting used by some apps these days because uh Gradle builds in very big projects can take up to 20-25 minutes time uh fresh clean build right uh build systems like buck and bazel have been designed to reduce that build time make the developer experience better so a little bit of exploring in those domains would be helpful if you're aspiring to get to that point right uh creating custom uh views so as you know your app grows and your design team grows they will be coming up with very bespoke looking UI components which are very different from what you can achieve with the material design toolkit or what is default available on Android so how do you make custom uh say for example at uh zomato we had a loader which looked like a slice of pizza at Target the target's logo is circular so we use that as a loader how to design custom loaders like that you know both like in terms of implementing the uh somebody has designed it in After Effects how do you write that down in kotlin code uh you know drawing things on the screen pixel by pixel to make those kind of loaders how do you make custom View kind of components how do you make a circular view or a star-shaped view these kind of things uh you know start getting important to know these things okay uh then uh with big apps what happens is you have to develop some base set of rules that run in every activity in every recycler view so that your team does not have to do more and more boilerplate work right so every time a new fragment is open maybe some analytics data is supposed to be sent to your analytic server so you would create a base fragment in which you would keep the analytics code and everybody who is creating a fragment would be extending from the base fragment okay uh developing such common patterns inside your apps code base is again something which is going to be expected from you at this point uh you know so writing custom base activities base recycler views base fragment that the rest of your team would be using it starts becoming a little platform level work it's called platform work because you are developing components that are going to be used by other developers to build features okay right and mostly in big teams your Android leads and Architects they are generally the ones who are leading the platform team they don't directly work on features they work on the components that are needed by the rest of the team to make their life easier right performance optimization uh using Android profile or detecting memory leaks using leak can read you should be a guy who should be always looking for ways to make your app smaller faster leaner meaner all of that stuff you should be at the Forefront of doing those things uh as a senior Android engineer if you develop the attitude as well as the skills to be able to uh you know make your app free of memory leaks crashes you know tune it for faster performance uh you know the there are other things like this async layout inflator so inflating a layout can become a time taking process if the layout is complex so there's an asynchronous layout inflator as well uh which you could be using these kind of things uh start becoming you know more and more uh important okay so uh and then finally uh you know you should also be somebody who has a hand a finger on the pulse of the Android ecosystem uh stay in touch with all the latest and greatest stuff that is happening uh right uh you know watch Google I O see the direction in which the uh the makers of the Android SDK and the Android OS team what new things that they are thinking for the next version of Android right stay in touch with those things new libraries that are coming in an alpha level beta level trying those out and seeing if they can be useful for your team to use eventually uh those things start becoming very important so today speaking it's in 2021 I think some of the latest and greatest today is a lot of people are starting to build UI using jetpack compose instead of using XML so take a look at that how that is working right and and uh evaluate the pros and cons whether in your team using jetpack compose would be a good idea or not uh these days in kotlin there are a lot of new experimental features like flows streams and Co routines which together can give you an alternative to RX Java and a lot of apps are starting to move towards that because the syntax is much more easier to see so how can you develop an alternative to RX Java using core routines and flows something like that maybe you can read about uh that uh Dynamic delivery so you can you know deliver smaller features of your app later on after the app has been downloaded so the app size becomes small and people download the app they can use the basic features if they try to use a certain other feature then the separate component of the app will get downloaded so this is something I uh was doing at zomato before I left and I could not actually complete was zomato's chat module uh is actually written in react native so that kind of is uh it makes the app size of the app four or five MB more uh we could reduce the size of the app by four five MB if we remove that and not everybody is chatting like when they downloaded zomato app the first thing that they want to do is order like if their order does not go through they might want to chat at that point we can download the chat component into the app and do it so we can use use something like Dynamic delivery and feature modules to achieve that and understanding how these things work again uh would be something that would be your responsibility if you are the Android leader they are connected right uh like we discuss custom views similarly custom animations as well using motion layout again latest and greatest stuff uh you know you should you should cover things like that once you've done all of that uh so congratulations you are at the point where you should be looking at within your own team become somebody who leads initiatives uh right or you know when you're looking at openings and there is an Android architect or you know lead Android engineer or a principal Android engineer kind of openings and you are at this point you have garnered all the experience that I've talked about till now you can start applying to those kind of positions at this point okay so I hope this was uh helpful both the first part and the second part of this videos and uh I really hope that people who are starting off with the journey as Android developers these videos give them an idea of what are the things that they need to know for various levels of Android Engineers that the industry is looking for uh by the way uh to become like a senior uh or you know a lead Android engineer there's a lot of system design uh and you know low level design Builder patterns and you know design patterns object oriented these kind of things you need to cover and what better place to cover these things than attend a scalar masterclass so visit uh scalar.com uh you know just scroll to the bottom there is uh you know you will find a link to the master classes and we have master classes every uh week every few weeks and most of these master classes deal with you know system design design patterns uh the exact set of things that you need as an engineer whether it's mobile developer or whether whether you know as a general engineer you need to understand these kind of things as you want to grow so go ahead to scalar.com register for the next master class that is coming up and brush up your Concepts on system design uh along with that uh definitely you know uh like share and subscribe this video if this was helpful uh we would be coming up with you know more such road maps in uh the next few days hi folks uh so we'll talk about any and every question that any one of you has about Androids well the first piece is that a lot of people uh asked me about was a lot of people ask about Android development these days is whether we should go with a native Android development uh we should do kotlin or whether we should uh you know go with uh one of these uh you know hybrid Frameworks like flutter or react native so I think maybe that's one of the questions that we can pick up first and in fact that's the first few questions that have come that's deep and Akash have already said the same thing so we can definitely uh pick up probably arcade's questions first of all uh job market speaking I think that's that's what a lot of people ask about so job market wise uh the maximum number of jobs that are there I think 90 of the jobs out there in the market uh are in Native Android development which means that it's going to be in Java and code okay now uh that's the market situation as of today uh flutter uh is definitely growing uh by the way react native is also there okay so it's don't forget that reactant is also there react native uh the kind of apps that react native was used on uh largely uh today a lot of this Market is getting captured uh by flutter now uh there are uh particularly new startups where having separate Android iOS teams is difficult very early stage startup that's one of the places where flutter is getting used two uh I would say is agencies so uh you know design agencies marketing agencies who also make apps for some of their clients or uh small app Studios who make projects for small companies right that's another space where uh flutter is uh you know has become uh sort of common today uh so coming to your answer I would say which one to pick and um a couple of things now if you are proficient already in Java by the way okay and you want to build up a very serious career in Mobile development you know you want to earn a good bit of money and you want to make a serious you know four or five year long career in Android development today the answer to that is uh still going with Java and kotlin right uh Javan kotlin by the way uh you know uh kotlin is the the new wave in which apps are made but today if you go for interviews for Android development you would need to know both Java and caution it's very important that you understand this that both Java and kotlin knowing them is is uh important okay now about uh flutter I would say if you're a web developer uh just for example you're not so well versed in Java you're making websites and uh sometimes sometimes you make a project and you feel like okay can I also would have made an Android app for it or IOS app for it and uh just the mobile website would not be sufficient you might need that app to be on the mobile offline for support or something like that you can probably pick up flutter in that case that would be a language kind of easier more familiar well by the way Dart is familiar whether you're coming from Java or kotlin or coming from JavaScript all of them are very similar language would be a bit familiar uh word flutter does not solve very well is uh you know the fact that there are lot of external libraries for image manipulation for video processing for payment ecosystems so these kind of things there are a lot of third party libraries they exist only in Java and in kotlin they don't exist in flutter so even if you make flutter apps and you want to uh connect deep system level uh things into it like video encoding encryption these kind of things you have to integrate then you will have to write some parts of your code in Swift for iOS and for kotlin uh in Android anyway right but if you're fetching information from an API and just simply showing it on the screen right A lot of it is just API based current uh information happening so if you make a front end for say even if we talk about Twitter so from this Twitter client you are showing tweets on the screen something like that flutter is a good framework to come up and build for that but if you're trying to build something like say tick tock uh right then uh handling that video your processing that Network pipeline those things again not saying it's not possible but it's sort of uh harder even with apps like Instagram which is actually made in react native the image processing parts are written completely native in iOS and in Android okay so so I think that answers the flutter versus Portland question at large and then unless there are anything more specific in this I would not be picking up this particular question uh going on to uh the next question is raghav Agarwal has said how to make sure that a layout looks same throughout all devices supported by the app and are there any tips for that now uh there is to be an old school uh thinking which is you create uh a portrait layout and Landscape layout then in portrait you create a certain grid certain height these kind of layouts but the modern understanding of this is uh that you do have web developers do how bootstrap uh thinks about responsive layouts right so uh you might have two layouts for horizontal and vertical uh landscape and portrait but within portrait for different screen sizes uh you know use proportionality based things like you want first half of your screen to show something second half of your screen to show something so you use constraint layout and within constraint layout there's something called guidelines so you can create a 0.50 guideline which is at the middle of your screen half of it and then you can put items above it and items below it and then so on and so forth so I think uh today the conversation moreover is about uh the proportion of the screen to be used do you want like three cards to be shown in the screen or two cards to be shown in the screen and then then you just uh sort of implement that uh don't try to achieve screen specific layouts try to create a proportional layout and then it will work for all screens that's the modern way of doing uh apps uh also uh one more thing that has happened a lot and people have understood is that people don't rotate their phones a lot unless they are watching media so if only when people play games and when people watch media they use landscape otherwise they're always using portrait mode so a lot of very popular apps my Google Facebook Twitter LinkedIn many of these apps they lock the orientation of the activity to portrait mode which is perfectly fine for you to do that you won't want to bother about landscaper but for tablets obviously you will have to bother because for tablets both the orientations happen but for mobile locking to portrait mode is something that's a valid thing that a lot of apps does these days okay whether data structures algorithms are necessary for Android development and how to use um very important question um so when you talk about data algorithm it's a broad topic right what is needed and what is not needed so some of the very Advanced data structures like uh you know trees tries uh you know red black trees binary sorted trees mean Heap Max Heap uh you know say that directed graphs now these data structures are used to solve very specific set of problems now understanding how these data structures are created having the ability to manually write these data structures on your own like you do in competitive programming that's not needed uh for Android development not for any basic level development job actually for backend and front-end Android any of them the the ability to implement this unit of structures or by your hand manually that's not needed okay a conceptually if you know them that's good but your [Music] these are definitely needed because on a daily day-to-day life when you implement to creating apps uh these data structures are getting used a lot okay uh and uh arrays and strings now very important is that you understand how Aries instances are manipulated how they can be manipulated using iterative recursive ways a good understanding of where something like a tree can be used something like a hash map can be used something like a stack can be used which problem uh can be best solved by which data structure that understanding if it's there being able to create the data structure on your own without looking up the internet those kind of things people really need for programming interviews those are not new to development but knowing which data structure is supposed to be used well that knowledge is definitely going to be very useful so uh RAM Krishna has a question which is uh you want to move uh to uh dream companies like Google England phone pay uh that's fantastic for interviews how should you prepare uh should you learn newer Concepts uh or or multi-platform okay no no interesting uh so newer Concepts like jetpack compose or kotlin multi-platform these are definitely not needed to crack interviews that's for sure okay so uh any uh piece of technology any new library or new way of development that has not existed for more than two years okay that is not gonna be a deal breaker in interviews it's as simple as that big companies don't use new libraries and new Frameworks unless they are at least stable version for at least one year old like that nobody is using Alpha Beta level stuff right so kotlin multi-platform today some companies are experimenting a little bit jetpack compose some companies are early adopters of it nobody is gonna not take you because you don't know these things so from a job change perspective covering these things are not essential okay very very important now what type of company it is on basis on that it depends whether you should do foreign I would say doing site projects is better for a company like uber doing lead code is better because companies like uber and a lot of companies like that which have big workforces they do not hire for Android developers they hire for generic sd2sd3 these kind of roles for that uh and after you join by chance you know Android well they will put you on Android project but if you know you don't know Android well they don't care they will put you into a whatever project needs Uh current you know immediately hands are needed so companies which hire for generic SD roles their lead code stuff you know that's more important than developing your skills uh but but a little smaller mid-sized company like say zomato we used to hire for Android developers particularly even at Target we are hiring for Android developers particularly we are not generic hiring for any developer so their uh data algorithms questions are lesser and platforms specific topic specific questions is about whether people hire specifically Android only for SD and I think I just answered that question is that some companies do hire for SDS generic roles and some companies do have for Android specific roles and if you go and search for uh you know job offers you will find that there are a lot of engineer software engineer engineer level one level two this kind of job offers and they're also Android engineer kind of job offers on the market right so uh generally the larger the company is the more generic the role is Right a smaller the company the more specific the role is if the company has you know five thousand ten thousand employees engineering employees then uh it's most likely more generic uh your topical skills are not so much needed at the interview stage okay okay coding Cosmos uh very interesting question and I feel like a lot of people come up with questions like this that you are in the fourth sem and uh we've been doing Androids in firsthand uh and and you're worrying about Sushi hours and it will replace Android uh so this is exactly the effect of height marketing that it has on young minds of the industry today okay when I was in my fourth Sim I think maybe at least seven cents that's when I first heard rumors about food service okay uh that's when I heard rumors and today it has been four more years since then and for sure apart from a demo on Google home device has not you know uh come out now kotlin uh people say that kotlin with a new way of development and Java would be Obsolete and they started saying this in 2016. uh Cortland Google said officially that they will uh you know make kotlin uh an official language in 2017. in 18 Google said that they will make kotlin as the primary language for which internal libraries and everything is developed 2019 many companies started saying that they are have started to use causal internally big companies started saying and I think systems from 2016 and 17 time to five years later 2021 is when uh Cortland has actually become mainstream and in most companies more than 50 code is written in Courtney in Android today right this starting from five years back when kotlin first started getting used in production based app and it was completely interoperable which are okay so for sure replacing Android is uh I mean this video is gonna be there on YouTube for a long long time and you know I'm gonna be putting my neck out and and I wouldn't want to come back and see this video and see me myself being proved wrong but within the next five years I don't see fuchsia becoming more popular than Android replacing Android is is not even getting there but fusha being like a serious Contender and replacement for Android uh is not gonna happen within the next five years uh if I take a break okay don't uh get into those hives and don't try to prepare for a future that's fine easily okay uh because you don't know what's five years ago prepare for the industry today and as the industry will change you will adapt to it that's what everybody does okay people who are hardcore angular developers they adapted to react they have adapted to view Js those same people who are Hardware angular developers might have been some time back backbone JS or Knockout JS developers people adapt it's not like angular people have become obsolete they have just adapted to where the industry has gone okay uh and uh by the way one more thing and uh this might not sound very sweet and nice coming from me but uh from first 10 to 4th Cent uh you know your Android development skills definitely might have improved but production level Android apps I'm sure you're not have started making those production Android apps means having unit test integration test cicd pipeline working and uh you know uh using dependency injection dagger using RX Java or maybe these days for routines uh in place and uh you know you know all of these things should be happening then only should say that we are making production level apps so I believe that you know just two years of effort uh you still have a lot of gaps to fill uh in that space okay so uh Siddharth has asked questions are there opportunities for freshers to get a job as an Android developer obviously why not lots of people get uh you know uh uh I think Android development jobs as freshers a lot of companies hire okay uh by the way even very big companies like Google kind of companies are there also people are hired for a generic SD role once hired many of them right from day one they are made to work on uh Android or iOS or web or anything like you know there's no guarantee what kind of project you would be given but at a startup line company especially I definitely hired like like uh zomato we used to regularly higher freshers uh in our Android team uh and similarly a lot of companies where my friends were you know swiggy is their card is there uh Urban company is their ghana.com is there you know all of these companies they hired freshers for Android development jobs like like the weight of Android apps or my weight should I should I should I introduce weight or have you there are you seeing me after a long time on YouTube when you're seeing I have reduced to it if that's yes I'm flattered but okay coming on to the next question so himanshu has asked is Factor going to be used by Tech Giants or startups in the future by the way shutter is used by Google to create their own AdSense app uh flutter is used by zerotha which is a big company uh to make their Titan coin apps and flutter is used by Alibaba to create their dashboard app has started to be used by some of the uh bigger companies uh none of the very big companies have used flutter yet for their main app uh primary app nobody has used uh startups many of them have started using flutter yes like I said if you are mainly doing a API based and UI based project and device Hardware level stuff you're not getting into too much then flutter is a good choice to go with and then you can make an abuse okay the Pancho has a question which is uh which has more career opportunities web development or Android development in terms of quantity web development just has like way more number of opportunities than Android it's a bigger domain it's a bigger field also web is a wide word like I mean you might mean front end you might mean back-end it might mean full stack combining all of those things together web is a huge domain right today in India like including service sector product sector big company small company everything included if we have 1.5 1.6 lakh fresh jobs every year uh in the development space I think 80 to 90 000 of those would be in the web development space uh right uh so and mobile development space jobs would be twenty thousand twenty five thousand of them in that space I think the rest of them might be in specific like desktop app security and uh you know uh system administration these kind of things uh so way more number of jobs that is more uh but if you look at like uh weigh the number of jobs with the median salary uh so you know say jobs at paid 10 lakh per annum the competition for a 10 lakh per annum job in Android or mobile development is gonna be less than the competition for a 10 lakh per annum job in web development uh that's there and as you go a little higher in the salary bracket like a 15 lakh per annum jobs I don't think there are more 15 lakh perennial web jobs than there are Android jobs I think there the numbers start getting a little closer uh to each other all right uh so that's about a quantity quality assessment on web development versus Android development uh do you think ionic framework stands when compared to flutter and react native so by the way ionic uh you know ionic is a little too specific but Cordova which is basically running web apps inside Android or iOS app containers Cordova itself is the framework which is a platform on which the ionic framework is also made and there are other ways to do it as well now codeiva is actually very big and in fact in both Android and iOS app stores uh the maximum number of apps are the native apps like the ones made in objective CN Swift for iOS are the ones main content this is the native apps are maximum the second highest number of apps uh you know in both the platforms now the reason for that is that there are hundreds and thousands of apps which basically are the website of that product wrapped into a app kind of container so that locally things can be stored ionic actually also is a subset of that problem um I think uh compared to Native Android development and then react native and flutter I think ionic particularly Spectrum specific is going to be a little less uh quite less but it's not like it does not exist there is sufficient amount of opportunities in that as well uh could you provide a real-time tutorial for learning Android app G2 uh you know you should see the last video that you published we just published like go a channel like go back a little you would find I did a five hour video it was five hour of me continuously coding and Instagram clone uh we will do more videos like that as well uh so definitely check that video out you would love that video has asked uh not worked in Java so if you have not worked in Java uh can you start learning Android development from react native I would say yes uh you can uh though I would want to warn you that if you're making bigger projects uh then having knowledge of how the Android SDK and Java works is gonna sooner or later uh come uh and then become useful okay So eventually you will have to learn either Java or Swift or both a little bit to debug some of your uh issues right um where to start I think there's a free code Camp series on react native maybe you can just at least start from there it's a free tutorial and then see where it goes I think for most people for most things that's what I suggest you know go to free code cam try out the technology see if you're able to get started make your initial project and then you can see a lot of you know if there are paid courses if there are books and all of that okay so the free artificial thing I would suggest it's the first place is that's the interesting question how to implement the driver routing features in zomato app so that's a NP hard problem traveling salesman problem right so it's it's not a very Android specific question and I would be honest I wasn't involved in a team that worked on the system but that's kind of like how the tablet and salesman problem is called it's a subset of that traveling system problem so I think if you take a look at the traveling salesman problem and that's something at scalar Academy in our courses we actually do cover so you'd probably get a taste of how uh these kind of algorithms has a question I have many other projects but no work experience how to get uh internships at good startups and what should I do you should apply to a lot of places uh at for early stage startup internships a good place to discover uh some of them would be uh Angel dot Co Angel list and you can search for some of them there uh right uh that's one place another thing I would suggest is you know get together with some friends of yours uh and participate in some of the online hackathons where you have to build apps and websites and all that's also a great place where you learn to translate an idea into a project which is kind of very useful and very helpful right what these interviews uh try to figure out as well when they ask you the questions okay as happens because of something called proguard and minification when you make a release mode of your APK in your early days you can set proguard to false or Minify enabled to false but that's not a good strategy long term to make you know production uh ready projects because obfuscation is important so follow the uh proguard rules and make sure that all the proverb rules are added in your project uh that's uh one thing connect your app to Firebase crash like this so that all the crashes that happen on release you get a stack trace of them so you can start uh deploying a fix for that Manish has a question how can someone start out in Android development as a fresher in in covert times and how many large specifications so I think right um so uh the covert time uh part is probably relevant uh right uh because the answer is sort of going to be the same whether it's it's because of pandemic or without the pandemic and all that I mean go to developer.net.com learn the basics and you know start building some apps and then start uh thinking of some projects like a to-do list manager scientific calculator you know note taking app these kind of projects and uh you know start building something like that that would obviously be a good way to you know learn certain skills in Android development that are needed to be able to build such projects okay how many large part I think you should have two three smaller projects that you have built over uh you know week or less kind of time and you should have maybe three four uh you know probably contributions to some projects uh you know which which are little larger uh in terms or you can probably set up a group of your friends like-minded friends and you can set up an open source project of your own as well and and that is something that you can do basically where to install your uh you know normal web application add a shortcut to that in your home screen and do a little bit of local cache and push notifications but lastly uh they are sort of powerless uh you know uh cross platform versus native I think I just discussed already a little bit the trade-offs come between cost which is uh like about having two teams for different different uh Native uh products or do you have one team which develops the app for both the products those kind of cost calculations come into the picture uh right uh so so based on that we basically decide whether to go with the cost platform or a native implementation my first time I saw a big open source project which gave me a very good idea about good architecture was firefox's Android app right nowadays Firefox has two three apps there is the original Firefox Android apps and this is a Firefox focus app uh those uh I mean you might love to see that and see that project structure but for little younger people it might be a little overwhelming uh so so somewhat on the smaller side Foss Asia has got some good Android projects I think you can go to G-Shock and see last year's Android projects and see their GitHub Repose which is a good place to find out open source projects where the architecture is also good but not so complex that as a beginner you won't be able to understand it uh Shopify approaches a Shopify approach kmm for business and reactivity for UI so both are a couple of different things kmm for business is something that a lot of companies are thinking of doing we had started thinking of writing our menu logic in kmm when I was in zomato because that was a very complex piece of logic and we had to replicate it twice but we did not need depend on a lot of Android or iOS specific stuff to do it so we thought that we should definitely be able to I don't know sort of use it as a and and you know uh we can use it like that now uh the UI with react native part is something that some people uh decide whether you want to have a common UI effort or not and uh I think uh it depends on the kind of team and all your setup and whether you want to create a common design language and uh or you do have very strong uh UI teams on Android as well as iOS already available in your team now if you have that then you don't need to create a common effort for UI now uh react plus kmm uh is good uh though that means that you would need like for a lot of uh you know for Shopify uh this uh I think uh for Shopify they would need somebody with react understanding they would need somebody with kmm understanding and they would need people with Native Android kotlin and Native Swift understanding as well to fix certain uh features so that every different technology stack that you keep adding you need expertise in all of them and as your apps are bigger and more complex and they are running on lots of different different devices uh then uh Native level knowledge becomes unavoidable and it is needed because there would be certain crashes which happen in the natively so you'll need somebody with uh Native Android development experience and Native ions development experience to be able to fix those parts for bigger companies I think uh it does make sense where common uh uh you know Common implementations which can be changed quickly by changing one implementation you are able to change the UI on both days those kind of things can happen uh now many uh businesses uh use kmm to make the logic layer common while the uis are separate so that's a different part of the problem we solved and a lot of people are already doing that then a lot of people are also doing this thing is that they are writing the UI in a common framework like clutter or react native and then some uh platform specific stuff like image processing pipelines video pressing pipelines they are writing down in uh Native as well uh right uh and uh you know that's uh kind of the state right now Shopify is one of the rare examples who is doing both of those things they are trying to make things common at the UI layer as well and then at the bottom of the business layer as well they're trying to make things [Music] I haven't seen that actually it will affect a lot to be very honest uh gives a little bit of foot through the door like if somebody has that Associated developer certification then uh resume uh shortlisting layer it might help a little bit uh especially like if you are if your prior work experience is not in an Android development role or you are not from a very good college in those cases if that certification is there that helps a little bit if you have already made Android projects if you are from a tier one or two College uh or if you already in turn Android development role or no work Nano development role already then you don't need to go for that certification it is not add anything more to Value to your profile good companies to aim for summer internship Android I think that I wouldn't have uh uh right now any idea of uh mostly you should uh you know uh let's check out obviously some of your favorite apps that you use on cobbler apps and then try out there try to reach out to the recruiters via LinkedIn and see if their internship opportunity is open many companies do not have international opportunities explicitly mentioned on the internet but if you ask their recruiters and you say that you are good on Android development you have made some projects uh do you uh maybe somebody might say yes okay what do you see in an intern for second year pass out uh second year pass out what do you mean by second year password if you're in second year then you're not pass out right but but okay fine I'll just say that you know if you are in your third year and you want to in turn I don't know I mean I don't see I don't want to see a lot of skills apart from uh the uh the the urge to learn new things and if it's in a startup you should atmosphere then being a self-starter that for every two things every third thing every fourth thing you want come to your whoever is your internship Mentor or your engineer whom you're assigned to you don't just come and bother them you you take a piece of problem given to you and you figure things out on your own as much as possible so that attitude you have that's probably more important that I try to see because I'll try to prepare for freelancing and Android development uh portfolio building is important so go to GitHub make projects projects which are finished okay end to end finished put up on the Play Store uh get your friends and family to use it try to get 500 000 downloads even that's fine but put it on GitHub GitHub should have a readme of that project it should tell what the project was about like you know packaging is very important uh which helps you build a sort of freelance side career for future perspective with Android is it better to learn iOS of backend if you're not spent at least four or five years in Android then just continue to spend time in Android itself there's a lot of depth to it okay otherwise decide if you really really love mobile development right making mobile apps is something that you're really passionately fall in love with then maybe learning iOS or flutter or reactive another framework is uh sort of uh helpful but if you learn back-end then you become versatile you can work on projects where both backend and front end are needed and you can work on both things yourself simultaneously together uh I think an Android developer who moves into backend probably adds two very large skill sets which can give like you know career growth wise salary wise better uh opportunities uh there's a small question about Target uh offering summer Android interventions or not so just to uh answer that question no I think uh there isn't uh right so this is just full time people are getting hired right now so so just answering that question uh Santosh has asked web development or Android development for students in 6m uh you know if you're a student I will give you only one advice that is people excel in things that they like uh there's this whole concept Japanese concept of finding or ikigai which is uh things that you are good at things that you like and things that you can use to make money or make a career out okay the intersection of these three things is what you should be doing right that's your key guy um so uh you are generally good at uh certain things if trying to solve problems in that domain keep you up at night sleepless nights and you're very passionate about it so try out web development Android development both for one one week each see which one excited you see which one is stopping you from going to sleep uh right uh so that is is probably very important to discover what you really like once you figure out what do you like put all your energy into it you might figure out Android is what you like you might figure out where is what you like you might figure out you don't like either of them and you like something else like data science so machine learning well whatever but if you spend some time figuring out what you like that is the best investment of your time and energy uh right and based on that take a pic don't try to pick web versus Android based on which senior sale this is supposed to be taken because it has more score or whether you look at job offers today and you pick that if you are among the top people doing anything you can be very successful and earn a lot of money and you know and all of that stuff so uh don't try to optimize for okay this domain has more jobs or this field pays more and all of that stuff uh pick up which one whichever one you know makes you feel better whichever one you really feel like you like and then you will automatically be very passionate about it automatically learn a lot of things inside and that's gonna be important was easier to make uh Eugene as asked wallpaper app Android Studio or flutter what is easier to make uh I think wallpapers uh can be probably easy to make if you just use a pattern page wallpaper or something like that right so I think all the last questions I would pick up how to develop skills for prod level development before getting a job uh do something broad level I think uh make an app of your own try to put up on the Play store and then open source its code and then then maybe ask your friends to come and contribute that's one of the best ways to uh uh you know you know do this setting up CI CD Etc using GitHub actions on your side projects and and doing automatic code reviews and all these kind of things you can set up right has asked whether she should switch to flutter or not and I think that if you already are a good Android developer you've made some apps then you can learn flutter additionally it's not called switching it's just adding broadening your horizons I have learned flutter uh two years back although I was very successful Android developer at that time that's just you know increasing your your social presence and you know making sure you know you stay in touch with latest trends so for that you can do that okay should I know testing a CI CD for putting my app on Google Play Store uh uh yeah so yes and no I mean you don't need testing and cicd knowledge to just put the map of Play Store but if you have gotten an app to a place where you can put it on Play Store that level of confidence you've gotten out of building apps then I think uh yes this answers uh you know uh that that if you put if you set up testing if you set up CI CD it will make your life a whole lot easier and it will prepare you for production level stuff that you need to do at jobs but it would be great if you have uh you know these skills uh and then they help you publish that app much more easily as well your your code base is always tested you know and and you know your your you know automatically you can deploy your app to Play Store and as well those kind of things you can and you can do Abhishek Sharma has asked that a new Independence injection so should I start with the dagger or Hilt Hilt is a rapper over dagger a hilt is not separate from dagger so you need to know dagger to use Hilt Hilt is just uh it it reduces the amount of code that you need to write with dagger but here it is built on top of dagger if you don't know dagger then you don't know how to use Health okay um bye everybody whenever you are going to develop an application first of all we need to understand what are the prerequisite what are the softwares that you will need so let's discuss that the very first thing the very first tool that you will need is an Android Studio you can install it from the internet open up your favorite web browser and just type download Android Studio it's as simple as that I can show you on Chrome just you have to go and type download Android Studio that's the only thing you have to do and here is the first link that you will get this is the official link from developer.endroid.com you just have to click on that and based on the operating system you are using like mac Windows anything you just have to install the Android Studio it's as simple as it sounds moving ahead once you are done installing Android Studio the very next thing the very next step that you have to do because we know that we are going to develop an application right so we will need either an Android phone or maybe an emulator so what is an emulator it's very much like your mobile phone only it resembles your mobile phone it's just that whenever you will develop any application in the Android Studio you will run that in the emulator in your laptop in your desktop itself you will be able to see how your app looks like right and the benefit of using emulator is that you can I mean test your application on a variety of mobile phones like there are different mobile phones Android phones which is you know having different API levels so you can test on variety of softwares variety of apps let's move ahead and discuss if you want to use your Android phone as the testing point so you have to enable the developer option to become a developer you have to click on about phone in the settings you will get the about phone option and after that you have to click on build number seven times it will show you a toast uh option toast you know pop-up that you are now a developer that's all you need to do apart from that you have to enable USB debugging as well in your phone so here is the developer option that you will get and you just have to enable the USB debugging so that whenever you test your app whatever you have developed you can easily do that in your mobile phone now Another Thing Once you are done installing these softwares these are the prerequisites number one is Android Studio it's very simple to download as you download any other application like Zoom or something in your laptop Android Studio is very much similar you will get all the next step like how to directly install you know they will show you what are the next steps so it's very simple and you will hardly take like three to four minutes to install that after that you just have to follow these steps if you are going to use your mobile phone for testing the apps otherwise if you are going to use emulator I'm here to help you I will tell you how to set up emulator in your Android Studio okay now this is very important thing when you are going to develop Android applications very very commonly asked question should I develop applications in Java language or kotlin so let me tell you I started my journey with Java itself because in engineering you know we do DSA data structural algorithm and all those stuff so I started with Java and gradually shifted to kotlin so uh nowadays Scotland is very much in Trend both the languages are good native Java is there kotlin has some extra features and there are some you know Advanced feature advancements which are there in kotlin which Java somewhere lags so if you are starting in 2020 to 23 learning to develop application I would say you can go ahead with kotlin if you don't know kotlin trust me it's very easy if you have learned any programming language like C plus plus Java learning kotlin will be very very simple and easy for you okay if you want uh let us know in the comment section we can bring like one out to us tutorial on uh you know how to learn quarterly in the syntax and all the basic stuff so yes that's about the language don't get confused uh follow this tutorial first of all develop your first application and things will be easy for you I mean you will be at a better position to decide which language you want to use to develop your application both are pretty much good kotlin is something which is better because it has more features enhancements okay now talking about the application that we will develop today it's a portfolio application let's discuss what the app will look like it will be a very simple app your first kind of application in any programming language whenever we are going to you know learn to code we write that hello world kind of program right so this is kind of Hello World app for you a portfolio application where you can showcase your achievements skills everything so this is how your app looks like right so here we'll put one kind of image of yours and after that here will be your name and designation after that what we will do one of the most important concept when it's about developing application it's intent uh don't get scared of the war it's easy whenever we open any you know page from any button or something intents are used in the background so what we will do to help you understand the significant concept I will use some kind of button concept here we will write skills and experience let's say and then education details will be here and the last button we can write work experience or something right I'm writing short form here you have to write in detail and talking about the design of applications you can do many stuff there I mean it is a very very basic thing we are just starting with this uh normal concept like this is will this will be image View and then we will have text views over here and these will be some buttons on clicking these buttons new activities will open up let's say you are clicking on work experience right or your like achievement or something any button so a new page a new activity will open up in websites whenever we click any button and open a page that's a new web page but in applications that is called as a new activity okay sorted so whenever any button will click like work experience achievements anything so we will open a new activity and that will have another set of like views these are called as views if you have this image this is image view then text View and this is button so let's move ahead this is how your app will look like now that the UI ux part of the app is clear we know where to place which view we will jump into the coding part we will first create the UI with the XML code and then we will write some kotlin code to make our application so I hope you are excited and ready to make your portfolio application let's get into Android studio and do the code yeah awesome so when we come in Android Studio the very first thing that you have to do when you are going to develop an application is click on the new project button so here you can see multiple options are here basic activity empty compose activity and you know a lot many options are here let me tell you in the beginning you just have to use an empty activity in the basic activity here this floating button is there right and similarly if you scroll down if you are going to develop an application where let's say your main focus is on developing Maps or integrating Maps maybe you can start with Google Maps activity right or maybe navigation drawer in many of the applications like you know those side options are there and nowadays bottom navigation is very much famous as compared to navigation drawer activity this is called navigation drawer option whenever you use any app some of them still have this option otherwise is the other one is this bottom navigation activity in applications like Instagram Amazon they all have multiple options in the bottom myntra Etc right so we will today choose empty activity that is just a normal Activity Click on the next button after that you have to write the name of your application so today we are going to develop portfolio right so let's write portfolio application or maybe you can write like your first app Hello World app something like that this is the name of the package and the location where you will save your project you can change it from here this is the browse button and language we are today using kotlin our Javas will choose kotlin this is the minimum SDK it tells you on what percentage of devices your application will run then you have to click on finish it will take some time to do the Gradle build as you can see here and the at the bottom it's doing some of the Gradle Bill if your laptop is having low Ram like 2GB or something then you will face a lot of difficulty to be honest in developing application because Android Studio is a very heavy software so make sure it's one of the you know requirements that your ram laptop Ram should be at least 8 GB it will give you a smoother experience of developing applications Android Studio will run very smoothly if the storage of RAM is good enough sorted so our application is almost there we'll just simply like you know this is hello world thingy we haven't developed anything this is normal thing to run your application what you have to do you just have to click on this run button I will help you understand all these stuff all the all what all these options are like manifest file Java source code resource everything let's first check how the apps look like I already have emulator installed here but I am assuming you you have downloaded Android Studio fresh so you will not be having emulated and all those settings for that what you have to do you have to go in device manager here you will see one option create device you just have to click on that and then you can see multiple phone options are here pixel Nexus and different orientations are here right click on any of your favorite devices let's say pixel XL or pixel 6 Pro you have to click on next moving ahead this is the like release name these are some of the system images you have to click on install I already have these installed so I will not do that this will take like 10 to 15 minutes based on your internet speed okay you just have to download either of these and then click on next that's it your emulator will be ready and to develop like not develop exactly to run your application you just have to click on this run button here and you will be able to okay wait let me select on emulator from here it's it's getting like ready uh this like when you run any application the emulator might take three to five minutes if your laptop is slow but here you can see the build is done and this is the hello world application very simple very easy so now you have like kind of created and developed your hello world application right let me help you understand more stuff here what all these options are because Android Studio is such a software which is having multiple options and it might be very confusing for a beginner so let's uh get into the uh Feature Part like what are options here in the Android Studio I'll help you understand all the options like what is Manifest what is Java folder resource folder everything cool so the hyper is connected and this is how uh Android Studio looks like we just saw these things like it started and we started a new project and these were the options we already failed the name of the project package name and language all these things are very simple we choose basic activity and there are empty activity and there are more options as well like basic activity navigation or activity Etc this is how uh typical Android Studio looks like when you are in your main activity dot Java or mainactivity.kt file right these are some of the options here manifest folder is there java folder is their resource folder is there let's talk about the very first option that is Manifest folder inside manifest you will get one file Android manifest.xml it's a very important file it contains all the important information like what will be the icon of your application what's your app name like when we use zomato swiggy something we see that icon and the name of the app right so all those important information will be there let me show you here the Manifest file is right here you can see manifest folder is here and inside this we have this Android manifest.xml file so here uh you can see the activities that you will create right now we just have one activity that is mainactivity.kt we can create skills activity experience activity because we will be adding those options in our application right to showcase the portfolio so these are some of the activities which will be here in your Android manifest XML file you can add user permissions here let's say you are developing any application where camera or location permission is needed so you will need to write all those things permission and the name of the permission like whatever the permission is so all those important significant things will come here in the Android manifest file only okay after that uh now you know what the Manifest file is and Android manifest dot XML file is very significant it contain all the important information Right Moving ahead we have the Java folder where we write all the code part so this is the Java folder here we have main activity dot KT which is the most significant file I mean this is the main activity as the name is self-explanatory right we will write our source code here let's say in your application you are having some buttons you are having some images on clicking a button what action should be performed let's say you are clicking on pay button so what next action will be there all the code all the source code in kotlin or Java will come here in the main activity okay similarly you can have multiple activities like this is main activity you can have your skills activity experience Etc linked to every source code there is UI part there is design part as well so uh this is kind of a source code part the Java folder inside app we covered the Manifest folder like Android manifest file we already know inside Java all the source code will come if you write in kotlin or Java everything will go there in the Java folder moving ahead whenever we develop application so what's very significant thing for the user the UI part right how the app looks like so all the UI stuff the images the layouts the design everything will come here in the res folder that is your resource folder this is drawable here we keep all the you know images designs those stuff and then layout is a very very significant this is activity main dot XML whenever we run any application so whatever UI we draw here in the XML part in the layout directory that will be shown I mean this is kind of a very significant thing core of Android app Android applications the XML part will come here in the layout folder XML is used for Designing the application for the uh you can say front-end part for the UI stuff okay and then source code is there in the Java folder map is here values directory here you we can have our style our own style of the application we can change the theme colors strings we can Define if you are using many strings in your application you can pre-define all of them in these strings.xml okay and theme is also here you can change the theme and everything this is kind of uh all the important stuff on the right hand side of your Android Studio not exactly right hand side it's right hand for me for you it will be on the left side right so these are all the important stuff on the Android Studio the options that you have to understand the Java source code part the UI part drawable is there may most important is your dot KT that is dot kotlin file or dot Java and Dot XML okay and this is kind of Gradle script you won't need this much in the beginning this is kind of very beginner tutorial right but let me help you understand few of these stuff so if you are using any third party dependency or something you will add all those stuff here in the dependencies but let's say you have to enhance the UI part you have to make your application look very beautiful you are using some third party Library so you'll add all those stuff here and that will make things like simpler for you and after that you have to just click on sync button here at the top you will get the sync button once as you add an independency sorted and this is all the plugins and all if you have to add any extra plugin you can add in the build.gradle project part and this is the build.gradle module stuff don't worry much if this is a bit tricky for you the most important thing that you have to keep in your mind is the dot KT the source code part and the layout part that we will write with the help of XML code so let's move ahead and understand uh some more things let me connect my iPad with the Mac perfect so now we will understand a bit of the XML part what all options are here so you can see here at the top on the right part the code option is here split and design these are three options if you just want the XML code part you have to click on code this is a split you will see both of the things the design as well as XML code and one more thing is if you want like if you have just installed Android Studio might be that you are seeing something like this the blueprint as well as design for that you can just like click on this blue button and choose the design thing if you want just the design stuff on your XML XML option okay moving ahead this is just the design part talking about making designs for your application there are mainly two things that we can do one is you can just write the XML code here right these are the layout options there are multiple layouts when it's about designing your application the other thing is you can use the drag and drop feature as well if let's say you want a button somewhere in your application you can just drag and drop it okay that's another way it's easy but when you will run your application when you will start developing applications you'll understand like it's a bit it's so easy but not a very much efficient way of designing your apps UI so what we will do now these are some of the options some of the view options these are very common views that we use like text view to show some text in your application buttons are your image views here recycler view whenever you scroll something let's say in your WhatsApp you have the chart options right so when you scroll that's because of recycle view that's a recycler view of all the names whatever names you have in your contact right we will be developing all the advanced applications as well this one is to help you understand all the basic stuff on of Android studio and how to develop the application exactly okay these are some text option multiple button stuff like radio button checkbox floating or Floating Action button Floating Action is usually here at the bottom like just notice the cursor of my mouse that will help you understand and some layout options most commonly used ones are these ones like linear layout constraint layout frame layout table layout Etc what we will do for developing our portfolio application you can go through all these options once you have downloaded Android Studio first of all take your time and understand some of these options explore the application as much as you can whenever we buy any new phone we explore all the features right so whenever you install any new application this is a very big software in our studio so go ahead and explore all the options what all features are here I have already explained the important ones okay and another important one is this lock cat which you will see at the bottom this will help you in debugging your application let's say you are using the app you are running the app and it's crashing so you can get the crash report the lock errors in the lock card perfect so now we will Design our application in activity main.xml I'll click on split so that I get the code part as well as the design part all on the same screen so what I'll do this is right now constraint layout I will choose a linear layout that's way better and easy that keep things keep all the views in a very proper position constraint Cloud let's say you are missing some of the past let's say you forget to give constraint to any view like button or something it will get misplaced I mean in your laptop you might place a button here but when you will run it you will find it somewhere there on top or something okay so constraint layout start using that once you have a bit of experience with app development in this starting for smooth experience we will use a linear layout okay that will keep things in our control the very next thing that I will do is set orientation for our view so let's write the orientation there are two options whenever we use linear layout vertical or horizontal I'll choose vertical here because I want all the views one after the another we have seen the UI right we want image then name of the uh use name of let's say your developing portfolio for yourself so your name designation so everything will be vertical not horizontal right this is vertical sequence so I have given the vertical orientation after that the very next thing that I want you can do some of this step with drag and drop let me show you how it works so I'm deleting the hello world for now and I'll go ahead in the comment section and drag and drop the image so we want the image somewhere here right what I have to do I have to choose one image for now I'll choose this normal Avatar you can put your own image I'll try to find my image from the laptop from the PC and will put it here okay after that the very next thing is I want to text view for my name here and we will set the design part don't worry padding margin everything and another text View for the designation like whatever your designation is software engineer artist you can write anything in your portfolio Okay let's now jump to the split part and write some code in XML okay so we have kept our image view here what you can do is because it's a very much touching the top of the app right we don't want that so you can add some padding or margin options I'll give padding of 10 DP and similarly some margin here for the image view so imagine around like 20 DP we can give and that will bring the image somewhat like away from the top of the screen perfect and if you have to give the image or something you can put that in the drawable section in the drawable folder as I showed it earlier okay and then let's move ahead and try to do some of the design part for the text view this is our text view let me tell you these IDs are very very important like you are called by your name if your name is samya Ankit anything so people call you by that particular name in the same way for all these views there is a particular name and that is this unique ID for each view if we will have another image let's say or we have two text views so the idea of first one is just text View and the other is text view two when we will write code in the main activity.kt file so we will call all these views by their IDs by their names let's say you have to click on this text View so we will write like text view whatever the ID is dot set on click listener while clicking on that view what action should be performed that code will go there okay so this ID is very very important and let's let's write here name ah for our convenience I mean we will set up all the stuff like uh one way is you can hard code many of the stuff and design which I don't recommend much because when you are developing bigger software there is not a good idea to hard code the stuff right so may try to make sure that everything is dynamic in your source code itself in your kotlin or Java code so another important point is a write meaningful names for your ID this can be image view profile this is your profile picture right and text view we can write TV in short TV and name because this is for your name and then TV designation or yeah you can write designation here perfect and this is camel case which I am following whenever you declare any variable this is a good habit to follow camel case that is Cap make the capital use capital letter when a new thing is there like TV and N is capital here that is making it more readable okay and after that we will give gravity to our text view layout gravity Center and also I want the gravity here to be Center so that the name comes in center you can give more designing more style stuff like you can make the text style as bold or something if you want the name to be in bold you can use your favorite font style you can download that as well or simply like if you want to use Font of Android Studio so from font family we want take font for our text right not for Android so text font and this is font weight you can give that as well for now we just want some font style okay let me choose from here okay let's not showing that option right now if you if you let's say want to give some color for your text or something so text color text size text align all these options are here and font will also come somewhere here only in the text option okay so let's let's uh right now I'm keeping it simple but obviously when you are developing your application you can add multiple design here like color font text size anything and text size right now it's too small maybe we can give 25 DP to make it little bigger because that's the name of the user right and after that some more stuff can be uh text color is right now black if you want to use any other color or something you can change with the help of this option and you can see I mean based on your need you can choose options from here this will show you all the significant stuff all the significant option perfect this thing is sorted after writing the name we can move ahead and do some stuff for designation in the same way the very next thing is we will do the same styling stuff for our designation text view so let's just copy the gravity and all the things that we did for name part and paste it here okay awesome so that's uh that's we are done with the texture styling if you want some font so you can just add some font options font family and here are some popular ones like Sans serif mono space uh like those stuff are here right so I'm just choosing right now Sans serif or some so the very next thing after name and designation is we want some buttons so that on clicking the buttons like a skills button will go on a new page new activity okay so uh let me change the size of designation 22 DB it should be a bit less than that of name and uh apart from that it looks good to me we can give some padding also so that there is some spacing and all so let's give padding of 10 DP on neem as well as designation and margin of 10 DB as well I'll just put the same stuff here in the designation part cool and the very next thing after this is having some buttons like it should be horizontally placed so what I'll do is I will create create another linear layout and the orientation this time will be horizontal okay I'll tell you how and why there are two options match parent and wrap content whenever we create height or width of any view let me quickly explain what these options are first of all for this linear layout I want width to be match parent and height should be wrapped content alongside that I want orientation to be there so what I will do is I'll write orientation and this should be horizontal perfect so let me tell you what wrap contain and match parent means let's say you are having this name option right if I make its let's say width as a wrap contain it will use only that much space which which is needed for it like name uh or it will only use this space that it need to fulfill the name of the user right if I do match parent it will occupy all the space that's present uh like let me show right now it's using only that much of space if I do match parent it's occupying all the space that's available in the app okay that's the difference between match parent and wrap content wrap content will only occupy that much space which uh which it needs match parent will use all the space available perfect in the name I'm going to hard code my name right now okay I prefer making a dynamic stuff in the application everything should be done in Dynamic Way in real time not hard coding hard coding only for fewer stuff it's like for which we can't do the dynamic things I will quickly change the design as well to software engineer here and after that okay let me do it software engineer you can write I mean obviously your designation everything in your portfolio and preferably not hard coding okay and to cater awesome after that we'll put some buttons for that we want this linear layout and before that let me quickly tell you if you want to put your image here a hard-coded one so in the resource directory I've already explained what resource directory is to you okay in the dry bill you can put your image what I'll do is I will quickly find one image and put there so downloads and this is one image here I'll just copy it and put in the drawable folder this is dry bill I'll just paste the image here so that I can use it in my code awesome okay so what I will do I will change here the source source SRC is the option that you have to use and after that the image that you want so right now as you can see it has occupied all the space right so what I will do is I will give some uh specific instruction to the view that this is the space that you can use wrap content is using the whole Space because uh you know this picture is large that's why it's occupying all these space even if you'll do match parent then also it will occupy all these space right now I will hard code it to somewhere let's try 100 DB and it's a bit small so we'll make it 200 DP awesome these parts are done you have to use the source option if you want to put insert an image in the image view moving ahead this is our linear layout inside linear layout what I want is I want two buttons we can do that with the help of drag and drop feature as well so I'll put two buttons here quickly in the linear layout are some these two are here and after that I want similar thing uh like we want kind of four buttons in the UI we have seen right so let's first finish off with these two uh this is kind of taking um it's quite quite congested right for that we can use margin and padding so let's quickly add some margin and padding this is 20 DP and similarly here as well 20 DP margin perfect and after that we will write here skills on clicking the skills button we have to open up a new activity a new page and similarly here we will write education details okay education details right now you can see uh the width is different for both of these why is it so because we are using uh with a wrap content so it will uh according to the need it will expand so let's do one thing for the width part we can like make it uh like a fixed number we can give 150 or 2 DP something so that it looks uh like uniform uh in the application when we'll run it we will see how it is exactly and this is 150 DP so let's add just allocation here so that the UI is a bit better awesome and we need similar stuff for two more features so we'll just cop paste it and you can see we can't have non-unique IDs that's why it's showing error so we'll name it button three and this will be your pattern four and quickly change let's change the options here this is a scale so we want let's say work experience so we'll just try to work here and another thing that you can Showcase in your portfolio is your achievements okay awesome now we are almost done with the UI part it's a very simple UI to make it more beautiful you can use some third party libraries as well you can add that in the Gradle scripts here in the build Gradle and you can add your own styling your color theme a different theme for your application and if you want to use let's say uh dark mode or something you can use all those options in the add all those options in the theme.xml OR style.xml perfect so what we will do is let's give a meaningful name to this skills button we will write ptn skills much better and now we will directly jump to the code part here I hope this is a bit clear to you how XML exactly works these are some of the options like code split design and you can use drag and drop or simply use the XML code it's very simple and kind of the words are also self-explanatory if you want a button you have to use the button uh view these are all our views okay button text view image view Etc now we will go here in our main activity.kt this is class main activity if you have done a bit of programming if you know any language Java C plus plus you would already be knowing what a class is this class is extending app compact activity because we want many of its functions whenever an application is built there are some activity life cycles involved that's very important if you are going in any software engineering interview and the team you are interviewing for is Android related team you will be certainly asked this question what is Android app life cycle whenever an app is opened up which is the first method which is called that is on create method this is the first app method which is called whenever you open any app WhatsApp Instagram anything after that on start on resume lot many stuff are there let me quickly explain you uh the activity life cycle um I'll try to cover it up in detail in the like Advanced tutorial and further tutorials but let me give you an overview of how exactly the app activity life cycle looks like so that things are a bit clear in your mind this is exactly how your app activity life cycle looks like oncreate is the first method and then onstart on resume when I when I'll give you an example like how exactly this is done it will make things clear but for now this is the diagram that you have to kind of keep in mind an app activity life cycle is really a very very important topic when you are going to Deep dive into the app development domain perfect moving ahead what we will do is we will jump back into our coding part and we will quickly add the features like on clicking the skills button what should be done okay for now if you quickly run your application it will show you all this stuff that you have developed the image view will be there you can see all right this images there your image your name designation all those stuff will be there if you want to reduce the Gap and all you can use margin or padding features okay right now these buttons are not cable at all because I haven't written any code for these buttons so what we have to do next is we have to write some code here I have already explained the activity stuff what is like why we are extending this app compact activity in this oncreate method You observe here this is saved instance State parameter which is of type bundle now why are we passing this parameter listen to me very carefully it's important so let's say you are using an application you are listening to some video you are watching some video on YouTube app and you got a ping you got a message on WhatsApp so what we simply do we just switch to Whatsapp the video the YouTube video will be there we simply go on WhatsApp and try to give an apply and all then come back on YouTube so what we are doing here is as a user for us things are normal but in the background on create method this method that you see here it's getting a recall so we want to give the information to this method that this was the video that the user was watching this was all the information like the video was washed till 10 minutes or something whatever page you were at you want you expect the same page right when you go back on the on that application that's why this is important saved instant instance state it is to save the information of your state of the user's State whatever you were doing we want to store that information so that if you quickly jump between apps so that uh so that when you quickly jump between applications we can pass on this information awesome and after that the set content view is also very important what this will do we this is just the source code right to which layout this source code is connected to so here we are connected with activity main that is this file whatever the UI thing here is in the XML part activity main.xml we want the same information here that's why we are writing set the content view the apps content view we are setting that here and in this one for the mean activity.kt it is activity main so this is a simple syntax that we use to set the UI of the application perfect now what we will quickly do is we will write some code so let me tell you if you don't know kotlin so well and where are two keywords which we use for declaring variables okay if let's say you have to declare something which is having constant value very much like final keyword in Java then we will use well otherwise we use where so right now what I will do I will create one button for my skills button for this one okay I'll create a variable for this button so we'll call it button skills okay and quickly I have to get I have to fetch this view for that we have a feature we have a method find view by ID here the type is button so I'll write the button type of the view and after that you have to give the ID so whatever is the ID of your button it is BTN skills right so I'll write that perfect you don't need a semicolon in kotlin it's simple and then we want to write some code on clicking button skills what should happen we want a new page to open up this is a very important concept now it is called as intent whenever we have to open up something new whenever we click any button or something we use intents and background there are two types of intent button skills dot set on click listener that is on clicking the button whatever action we want to perform we will write everything here inside set on click listener awesome so what we will do now we uh this much part is I hope clear if not tell us in the comments whatever issues you are facing in developing the application I hope you are following this tutorial as well let me quickly explain what intents are so that the code that I will write now onwards that will be easy for you to understand I'll quickly connect my iPad to show that whenever we go from one page to another this is Activity one this is activity two we are using the concept of intense here okay this is really very important concept when you are getting into this domain intense these are of two types mainly uh one is let me write here so very first is your implicit intent and the second one is explicit intent so let's understand what these two intents are implicit and explicit whenever you click on any button and you have to go to a new page new activity which is in the same application for an example let's say you are using Whatsapp you clicked on any chat and the detail chat will open up right the page will change so that is something you are doing transition within your application within WhatsApp only that is an example of explicit intent whenever you transition between activities within the same app like right now we are doing the portfolio app when you will click on skills activity we want to open up a new page when you click on skills button or any any button we want a new page in the same application so that is a good example of explicit intent okay and in case you are using any application and you have to make a call or maybe switch to another application let's say you purchase something from Amazon and for making payment you have to go to another application pay ATM or something that is example of implicit intent sometimes in our phones as well let's say you have to open up a music video or something you see option like this you have to complete action using play music or Ghana app so that is because you are going to another application completely okay and that is where implicit intents comes into picture what we will do in this application that we are developing we are going to use explicit intent so for that what you have to do I will write here intent is equal to I just have to use the intent method here which is uh kind of inbuilt in the studio okay and you have to pass some important parameters here this is your method okay the second one and this and here you have to give two parameters they are showing you the option as well the very first is package context for that we will pass this that will give the package context after giving the first parameter we have to pass the name of the class so we haven't yet created the skills activity so let's quickly do that just observe the cursor here what actions I'm doing so we will click here right click here and new and then activity last time we created empty activity we have to do the same stuff for a skills activity let's change the name from Main Activity 2 to skills activity quickly okay skills activity this is the second activity that we want when we'll click on skills button this should open up okay we want a layout file as well for this and click on finish perfect now I'll go back here and whenever I click on button skills I want that class to open up so I'll give the name of the class here that is skills activity and simply class dot Java awesome now here what I will do this design is clean right now the this is the layout for activity skills I will quickly just write a text here and that is let's change the layout to linear and just add a simple text view here maybe we can quickly drag and drop a text view from the design part here is your text View and we will just write this is a skills activity for now I'm not designing this skills activity you can design it in the way you want you have got a basic overview of how to put views in the design part how to write the XML code right so you just have to create this skills activity for that you can add colors you can add your you know you can put as much creativity as you want I will put this in the center somewhere awesome and let's quickly run the application to check if our code is working fine on clicking the button skills we want a new page to open up right awesome and this is the old one I guess let it finish the belt and okay if you notice here we have to write one more piece of code we created the intent but we haven't started the activity it's very very important whenever you create an intent you have to write start activity and pass the intent as well otherwise if you click the button a new page will not open up awesome and we'll just click on run dominate and now when you click on skills and this page is opening up which is this is skills activity so our code this piece of code is working fine this is exactly how you do a stuff uh in your complex complex applications as well okay if you have to click some button you will just simply write button skills any button ID right that can be any button set on click listen up and then this part will come the intent part right now we used explicit we will understand in future tutorials what is implicit intent how we can use that as well so let me quickly tell you that there are some extra features as well which you can use so I explained you the basic stuff how you have to install the Android Studio what all are the options the XML part the kotlin part now what we you have to do I hope you have developed the portfolio application till this point it's not yet complete there are much more features that we can add right so as an assignment after following this tutorial what you have to do like we created our application we added the image view here we added the name designation and there were four buttons right we implemented this one and you have to complete the UI of skills and in the same way you have to complete the four other options as well the work experience achievement all those things and after completing the project after completing the tutorial what you have to do you have to share your project on the internet do it on LinkedIn on Twitter push the project on GitHub it will really help you in excelling your Tech Career when people will see your project such exciting projects that will help you improve your profile as well as hiring managers recruiters they might notice your work and you might get an opportunity to give some interviews Etc as well and make sure whenever you share your projects if you have follow the tutorial till now when you have completed all those features tag scaler tag me somewhere one thing on Twitter LinkedIn and tell us how you created that project we will be very happy to see your project your progress and if there is any doubt let me know in the comment I will be helping you in resolving your doubts can you do this calculation for me 5237 times 1998. one sec I can't really live without this calculator can you we all use calculator application or mobile phones to do quick calculation in this tutorial I will help you understand I'll teach you how to code and develop a calculator application these are the two app uis that we will be building today this is UI one and this is ui2 if you have followed the first tutorial of mine where I have taught how to build a portfolio application in the first UI things will be pretty much similar this is uh take edit text like in the last one we use some of the views like patterns text views this will be also very much simple this is a bit tricky and I'll help you understand how to design the second one so let's jump into Android studio and try to make the first UI and the logic of that one so for that we know what to do the very first step is we have to click on new project and empty activity as always you also know what other activities are and in what cases we can use them for now we have to keep it simple so we will start with the empty activity let's name the project this is our calculator application so let's write calculator app and package name as it is this is the location of the project and we will write code in kotlin so this is the language kotlin and minimum SDK is API 21 let's click on finish and then some griddle bills will happen depending upon what your like laptop RAM storage and all is it will take one to two minute for me it's quick right now so this is mainactivity.kt it's loaded if you want to understand what all these features are the Manifest file app file Java folder everything we have covered everything in detail in the first tutorial the portfolio one so you can check out that one we will put the link in the description so let's move ahead and we now know what the UI is so we will go into the split section we have to make a simple calculator application the very first thing that we want is we will use linear layout if you have again follow the first one you already know what layout options are so here we will use the linear layout and orientation let's keep it vertical only because I want all the views to be one after another first of all we will have two edit text to get the input from the user then a result text view will be there where I will show the result if you are doing additional subtraction anything we have to show the result they are in the text View and apart from that we will have some buttons to do the operation like plus minus divide everything okay next we have to bring some text input layout so let's quickly drag and drop this text input layout here on the screen this is first one and this is second one because in our calculator we'll expect two inputs from the user for let's say you want to do addition multiplication anything so we'll need two inputs and after that we also need a text view to show the result this is our text view in which we will show the result right now the layout is obviously distorted so let's get into the code path in the XML code and fix the design of this one so we have used linear layout here to keep stuff simple we will remove this hello world text from here and this is vertical orientation because we want everything in vertical orientation okay this is the first text input layout inside which we have this text input edit text to get the input from the user the very first thing that we will do is we'll give it one name that is the ID every view should have a unique ID we know that this should be called we can keep it short like edit text input 1 or something to make it simple because in our cotton or Java code we will be directly referencing these IDs right so this is our first text input edit text and here you can see like it's occupying too much space we know match parent and wrap content as well from the last tutorial so what we'll do this one is match parent that is we have given it the instruction to occupy all the space available right and height is wrap content let's quickly give some padding and margin to this to this View and margin as well okay we should better give all these margin and padding to the text input layout so because uh this input edit text is inside the input layout only right so let's quickly put it here in the input layout awesome and in the same way we will do for this one so that there is enough weight there's enough gap between them like see uh in this one in the first one this text input layout the width is match parent and the height is also match parent but we don't want the height to be exactly match parent otherwise it will occupy all these space right so we'll make it a wrap content perfect and inside this first text input layout this is our text input edit text and if you notice here so the other text input layout and the edit text it is somehow coming inside the first text input layout because we use the drag and drop feature and that's why it's not really recommended to use that because sometimes it really messes things up so what we'll do we will keep it outside and let me fix the UI first this is our text input layout first one and inside this we don't want this text view we want the result to be out of the edit text right so this is sorted the first text input layout and after that we have this text input layout for the second input and we'll give the padding margin everything here so that these both look very much you know similar this is padding and quickly we will give the margin as well let's keep it 10 DP same as the first input better and we want the height to be wrap content perfect these two inputs are sorted now after this what we will do we will create a text view to store the result we see that the height is wrap content here and it's occupying all these space right and width should be match parent and let's give it a height fix height of 100 DP okay and at the same time we will write here a result text View awesome and right now you can see like height is getting uh it is covering all the space in the layout right so quickly we will fix that before that the gravity should be centered and the layout gravity as well as the normal gravity both should be Center we will quickly change the hint text here and write enter input 1 so that our uh you know user understand that here they have to enter the number one enter input one and in the same way whereas the user to enter the second input here awesome and moving ahead we have to remove the weight here so that it's uh you know height is adjusted perfect and we will quickly make the text size better because we want the result to be better right it should be bigger let's make it 25 DP awesome and this is a typo here input one if you want you can reduce the padding in margin so that these both input texts are a bit closer let's move ahead and try to put some buttons quickly here so that the user can perform some operation for that uh what do you think I mean which layout should we use you already have developed one application the portfolio one so tell me tell us in the comment which linear layout or constraint layout which layout you would like to use here I'm going to use linear layout here in that I'll put like two buttons horizontally and uh you can you can use the like drag and drop feature as well if you are more comfortable there and do the fixing stuff they are in the code part you already know how to do this in the layout section you can see all the layouts are here a layout horizontal is something which we want here right so I'll quickly put a linear layout horizontal so as you can see right now none of the views are visible we will quickly copy this and bring this at the bottom so that the buttons are placed at the bottom okay awesome now we will give some buttons here we will add some buttons in this layout you can do this either via code or maybe from here so here goes the button one and the button two where we will add some options like plus minus something like that don't worry about the contrasted space we'll fix all those stuff quickly and uh let's write here plus and this will be your minus operation and similarly uh more basic operations like Division and all okay cool the very important thing we will use these buttons in our code on clicking this what action should be performed so we have to give it a meaningful name and ID okay BTN plus that is button plus it is the ID and this one is ptn minus awesome and moving ahead let's let's quickly fix the spacing and everything if I will give weight 2 so it will occupy more space we don't want that so we'll just keep the weight one it was just to tell you the significance of the weight parameter layout weight so we'll quickly give some margin here so that it looks uh better uh 20 DP and same goes to the minus button margin of 10 DB this margin padding these are some of the quick features you know to fix the view where it should be especially when you are using linear layout in constraint you mostly will be using the drag and drop feature from the design section here if you see here it's a bit uh like they are not in the same position let's quickly see what's wrong in our layout in our design so this is linear layout we have used horizontal width as match parent we want it to be wrap content and not match parent so that only this much space is used and okay margin we are giving 20 here and 10 here that's why a bit of uh you know change in the height was there no it's perfect we will quickly copy this for the remaining operations and paste it just below this one and we want to change the ID the names of the view let's make it divide and this should be multiplication okay awesome we are almost done with the UI part let's change it to divide and this should be again multiplication now we have to quickly write the code the logic part for this this one uh you can see here if this spelling and all is going a bit uh you know more so it's it's getting stretched so what you can do here is because we are using wrap content and I have already told you the significance of wrap content is it will occupy uh space as per need and match parent occupies all the space available so I will hard code the width so that all the buttons are kind of in the same they look similar right so let's let's try 200 DP it's a bit more so we'll keep 150 DP constant for all of these views uh okay 150 DPS also I guess a bit not suitable for this one um um it's it's better I'm in multiplication should be adjusted in this one so we will give it a width of 150 DP and here is fill 150 DB way better uh it's look like all these are looking a bit similar right and quickly because there should be some gap between result text View and all these buttons so we will add margin here margin of let's say 10 DP only better and same with this layout awesome so UI part is done let's quickly jump and write the code part let me tell you in the code part in kotlin although kotlin itself is very simple and sweet language but what we will do is in our Gradle scripts in our build Gradle we will add one plugin the plugin will help us use these IDs directly like the name of this plus button is BTN plus so I can simply say BTN plus dot set on clicklist now in the last project what we did we use the find view by ID that feature that method we used right so here we don't need to do that what I'll do is I'll put a plugin apply plugin and okay the name of the plugin is Android kotlin extension something like that if you exactly don't recall the name you can just Google it out Android kotlin extensions I hope the name is correct and there is no spelling mistake so we just have to click on the sync Now button Android cotton extensions okay the name is incorrect uh let's let's quickly check the name of the extension Android kotlin extension Android cotton extension plug-in and uh it is kotlin Android extensions perfect so swapping off some of the words kotlin Android and extension let's click on try again it should build fine now build successful awesome so uh we'll quickly go in the main activity and you already now know what all these uh classes are why we use oncreate method I've explained it thoroughly in the last tutorial we will quickly jump into the code part now I already have told you well and where are the keywords used for creating variables in kotlin so we will create our first variable that is input one and uh we'll like initialize it here only now let me tell you uh our next step is we want the input from the user whatever we have to fetch that input whatever the user will write here we have to get that right and before that let's say when the user clicks on plus button or something let me do this here first of all let's let's write it uh multiply and let's say the user clicks on plus button so we have to fetch the input input 1 and input 2 and we have to show that in the result text view that's our goal so you already know uh like we have to uh now we can get the IDS directly because we have used this plugin kotlin Android extensions right so BTN plus dot set on click listener when this button will be clicked then we have to do some operation that operation is we want to fetch the input and at the same time we have to do the operation in the background and show the output and the result text View for fetching the input from the user what we have to do now you have to listen to me carefully we have created these input layouts right this is the text input layout the outer area and inside this we have one text input edit text what we will do we will get give it a name it already has a name we have given it ET input one so I will do ET input 1 and get text we will get the text from the uh like whatever is written there we will get that to get text or set text we have this you can see text uh option is here this is from the method get text only uh input 1 dot get text Dot we have to convert this into a string first and after that because we have to perform operation we can't do multiplication subtraction all those on on you know a string so we have to convert it into integer so to end perfect and in the same way we have to uh fetch the input from the second input text that is this one the name of this one is not yet defined so let's quickly give it a Name ID and in the same way as we gave name to this one ET input 1 so we will name it ET input 2. perfect so here we will say input 2 input 2 is equal to ET input 2 from the activity main.xml dot get text and again we have to convert it first into a string and then in integer because we have to do some operations so we have fetched the input whatever user has entered now our next step is we want to do something in the result text view we have to quickly show the result in this text view so it is having text view as the ID as its name we will rename it to TV text view result this is our result text view okay it is to make things clear when you write code when you will develop bigger applications then this these namings will be very much helpful because in your code you will always be calling these views right so now we will say TV result dot set text we will we will set the text now what do we want to display here the user is clicking on plus button we have fetched the input from the user input one we have input two you have it can be 20 input 1 and input 2 can be 50. so we have to print 70 right so what I will do now I will perform the addition operation on input 1 and input 2. after doing this you can see it showing some error so why it is showing error you have to read the error messages and all this way when you keep the cursor on the error line it will tell you there is a type mismatch it is expecting CAD sequence but we are giving integer input 1 and input to both these variables are of int type right but this is expecting a string it is expecting car sequence for that you simply have to use inbuilt method that is you have to convert this integer result into a string and for that this is a simple method so anytime you get error you just have to keep your cursor on that error line and you will get the hint I mean what the error is and you can quickly fix that right so we have done the code part for the plus button whenever the user will click on the plus button we simply will fetch the input 1 input 2 and we will set the result next we'll do this operation input 1 plus input 2 and will quickly print it let's run the app and see if our code is working fine or not click on the Run button it will take some time to do the build and uh till then these are the dependencies section we haven't added any third party dependencies it should be quick to pill so this is the app that we built let's let's try writing some input 80 and 20. if I click on plus button the output should show up here at hundreds and it's showing up right so that means our code is working completely fine this is the basic logic for this simple calculator application now uh in the uh starting of the video I told you that we will be building one simple UI as well as a complex one let me get back to the iPad and give you some assignment for this one because the app is not yet complete we wrote the logic for the plus button right we we have to complete the other operations as well now that we have built a logic for one of the operation for you the assignment is we like we had this calculated application we took input from the user and we showed the result here in the result text View and then we have some of the operation buttons like plus minus and multiplication division we wrote the logic for the first one in this one we didn't use implicit explicit intent or any such concept it's just simple maths and you have to implement the Logic for the remaining ones you have to write the logic for the other operations once you are done with the tutorial with your application this simple one after this we will be doing the a little bit complex UI I will just explain quickly the UI part to you all so that you can understand in XML if you have to do some a bit complex UI then how you will do that once you are done completing the uh logic part of this application make sure you show it on the internet tag scaler tag me put it on LinkedIn Tech Twitter and like people will see it right it will help you build your own portfolio if you are pushing it on GitHub there is a complete tutorial let me tell you I have explained on this channel itself on a scalar's YouTube channel we will put all the details in the description there I have also explained like if you have to do open source contribution if you have to make pull request or do some contribution any other project you can learn that as well from there and maintaining a good developer profile is really helpful in excelling your Tech Career so now you have to complete this assignment this simple application and let's get back in the Android studio and try developing the other UI that is this this UI in which you have to make some more buttons it's a bit like you know a standard UI of calculator the orange theme and everything will quickly develop this one for that let's create a new project right you already know the steps to create a project now we'll click on new new project we will choose one empty activity from here let's quickly do that click on next and this is calculator 2 or you can write anything whatever you want the project name to be then package name we will keep the language kotlin only and this is the minimum SDK let's click on finish and we will quickly see how to make UI of such a bit like complex application the main purpose I'm picking this UI because I have to explain the style.xml theme dot XML those parts in this logic I'll ask you to write on your own if you can't I can make a like a separate detail tutorial on completing the logic of this one it will be a bit similar to the first one but not exactly so let us know in the comment if you want us to make a detailed logic video for this one but first of all let's understand the style.xml the theme not XML all such a stuff because whenever you are going to do some real world app development these things are very important when you are doing UI where you have to do you know same stuff every time so it's a good thing to keep all these stuff at one place and that's how style.xml all those stuff come into picture first of all what I will do is you are already now familiar with this Android Studio all the features here I will go in resource folder uh resource folder is the folder in which we keep all the important design stuff UI ux stuff okay so this is our resource folder the dry bill is here we will directly jump into the values directory just to remove the night uh night theme because we don't want that to keep it simple okay in colors.xml I don't want these many color themes to be here first of all we will go here and remove all these extra options I just want black and white maybe we can keep if you look here the theme here is kind of orangish right so we will use that only orange and almost black color white and red right let's quickly do that let's remove all these extra color options and we will declare our own color based on what theme and everything we want first of all orange obviously as a developer no one expects you to remember the hexa code for all the colors for orange it's I guess somewhat like ff8c00 but yeah it's almost orangish uh then after that we have this black color white color and we also want somewhat black which is uh kind of light black color right I'm telling you so that you get to use the values directory as well whenever you are doing the uh design part okay almost black and for that we will use the uh code like Triple Two is the uh like light blackish code so let's use that one you can see here uh this is one of the finest feature I mean they gave the live preview of the colors as well whatever code you are writing awesome so will get into the theme section uh here you can see there are so many errors we don't want all these secondary brand colors we'll just remove it uh we want the primary color uh to be we want this orangesh to be our like primary color right and we will do the theme to be app compact so let's fix the theme as well theme dot app compact okay it's not showing the option right now so what I'll do is I'll quickly uh refresh it we will change our theme here to app compats and remove the dark action part perfect and we will change the color here the primary color to Orange and this one we want like light Blackish awesome after this we'll quickly jump to the layout section that is activity main dot XML this is the split part now what we will do here now the very first thing we will use a linear layout and um obviously we want everything to be in vertical orientation right so let's give it orientation vertical and we don't need this text view hello world uh we can like maybe reuse this for the working text view so so for now I am writing here some like numbers user we want the users to write some numbers here whatever uh operation they want us to do okay and after that we will give it some ID that you can do on your own like uh when you write the logic and quickly we will make it look better we don't want this constraint options because in linear layout you don't need this right and this is your text view let's make it size better 25 DP and it should be match parent the width so that it covers the entire area we will quickly change the gravity as well to Center layout gravity as well as the normal gravity to Center perfect and simply we also want the user to uh after they'll done writing the expression part we want to show the result for that as well we'll need one text view this is result text view let me explain that to you why we did that with the help of the iPad so let's quickly connect it awesome so if you um if you see the first the second UI first one we already have done so in the second one what we want is here in this area let me write with the pin in this area what the user will do they will write some stuff like let's say uh they will press on two plus five or multiply or something like that okay so this is first text view in which we want the user to uh to write something I mean whatever key they will press we are not using edit input text here there is a reason for that I'll tell you this is the second text view in which we want to show the result to the user okay here because obviously it's not visible when the user will write something so like the text will show here this is how exactly most of the calculators work right so this is first text View and the second one is to show the result so get back into our Android studio uh we don't want to exactly show these uh options here the text view like we can remove the numbers part and the result text view to make the UI a bit better after that the main stuff comes uh you have to create your own Styles dot XML this is the main part that I wanted to tell you uh when it comes to UI ux part and mobile application after this we want to create a kind of button area here let's do one thing for that we will create a linear layout and in every Row for example there like each of these each of these are rows right for every row we want a specific design rule so we will create our own Styles dot XML here new and to create a new file like new XML you just have to click on file and and the values uh values directory let's create our own styles.xml so that we can reuse the same style for all the button rows okay so I'll go in values folder right click new and we have to create a value resource file right so let's quickly do that or you can click by you can do by clicking on the file Button as well you can create a file and give the extension name dot XML we here now want value resource file let's quickly create that this will be our Styles uh the file name and press on okay perfect here we want to create some Styles but not a style sheet so okay inside resource we have to create the tag Style so here we will create our own style in the name of this one can be because we want to define a style for each row like this is Row one this is row two right so we will give it a name button row make sense right and inside this we will create some items we will give it some name like we want here the width to be match parent if you have been following the last tutorial then you already would be knowing uh why we give Mage parent or wrap content right so quickly we will give the width here width and draw it layout width as match parent and in the same way we will create another item quickly that is height Android layout height and we want the height to be a wrap container you can keep it like 0 DB it will occupy the needed space only perfect and also we will give it a weight weight should be 1 DP perfect okay it's it's asking some other input here so uh wait if you uh like have been you know following the tutorials we know that weight is to help the view understand how much you know how much weight how much area it should take up in the entire space so for each of the rows we we have given Mage parent as they width we have the height as wrap content and for the uh weight we can just Define one perfect and similarly let's quickly do one thing let's just split the screen so that we can see what's going in the style section and the design part let's stretch it a bit and now we will jump on and create the linear layout again so in this linear layout what I want is I'll do nothing I will just tell this I will give it the instruction that use the same style what I created here in Styles dot XML so style button row this is exactly what I want to do this is the beauty of creating your own style I mean you can just reuse this style whenever you want however you want I will be creating similar button rows multiple times like we have to use this there are kind of five rows right so we'll use this style five times uh it would be like uh if let's say I would have not created this style then I would have to write this code multiple times five times so let's be wise and try to create some common Styles in this Styles dot XML okay so once you are done uh creating the linear layout the very next thing that you have to do is right now it's not much clear I understand but it will be once we have done all stuff for buttons as well now you can see we want similar buttons multiple times so again what I will do is I will go here in the styles.xml for the buttons as well I will create a style let's name it button button number this will be the style for all the buttons which are having some numbers okay the words are pretty much self-explanatory we will create uh the options here like width and everything in this case we will keep the wet as 0 DP and height as match parent item name and here goes the height as match parent in just a second height and this is your Android layout height which is which is match parent awesome and we will also give it the same weight these are done after this uh for our text we want some uh you know some styling or such a stuff so you can do this from here you can see multiple options yeah like text size if you want to give let's say 20 DP or something you can do that we will see how much is needed what is needed and we want the color uh to be to be text color to be white right so let's use the white color from the colors.xml now let's come back to the XML part let's close this split section and this is our XML part right so we will just reduces its space and here we will instruct it to use the style same style as we declared that is button number the second one awesome after we have created the first stalia it's occupying a lot of space right now but what we will do is we have to create kind of five similar buttons and once we like do this for all of these then it will it will look better so if you look here we'll need four such buttons and we have created four so quickly let's do this we want similar five rows okay so just some sort of repetition that we have to do and it's kind of helping us save time otherwise you have written the same thing multiple times really so that's it after that what we will do is we will go here and we want all these areas to be kind of we don't want the buttons to start from like that much top right so let's quickly give some margin here margin of maybe 20 DP and here is well margin of 20 DP one by one we will fix the UI stuff and this is a button number design right let's quickly go in the style section and uh we don't want the text size to be this much big it should be around 10 DB and back to the activity Main let's go to the project section let me open it up drag and drop it and here is our version in the layout section activity main dot XML okay you can see I mean we have created the designs but somewhere it's like based on the layout we will change our common style dot XML here let's let's try making the numbers here so the very first thing is in this button we want to show text it should start from like like clear button right so we'll quickly summarize it you just have to fill in the numbers here in the boxes and to uh make the layout a bit you know up to keep a gap between the result text View and the buttons you can add a linear layout here as simple as I have been doing in all other tutorials I quickly do this linear layout thingy here and we will close it here after the two after the two uh you know text boxes text views uh perfect way better and you just have to follow the UI from here like we'll make it a red and orange is all those stuff we'll create new styles for them uh let's let's quickly write the numbers or like seven eight nine okay um here we go this is the button and this is the text view I was just going to write the numbers in the text itself like in the design part we can't do that right we have to write the XML code uh so here we will write line or is it seven so it starts from seven and then eight and nine let's quickly do this part and then similarly we will fill the numbers in all the remaining buttons now we have to increase the weight of this equal button so that it occupies this kind of a space for that you have to use the layout weight and give it value to we don't want this extra button so let's quickly remove it now if You observe here uh for some of the buttons for some of the operation buttons there is a different design so what you can do is in this one let's quickly fill in the background as Orange right and apart from that we can create a style we will quickly go to styles.xml and create a new style for the button operations okay Let's uh paste this uh wait let's copy this and we will quickly paste this here change the style to button operations button operations and what we have to do is we have to change the text color here to Orange because we want the operation to be visible orange color kind of right so text color um here is the option text style text background for the operation button let's quickly change the text color to Orange and when we'll come back to our main activity so we just have to change the style here to button operation instead of button number and it will do the work for you right so for all the operation ones we'll do the same thing so almost we are done developing the UI of this one let's quickly run and see how this looks like on the uh emulator if you are using your Android phone for the testing purpose you can do that as well so it's it's almost like uh cool it looks like a real world calculator app the orangish and light blackish theme so the main purpose of explaining the UI of this one is you can use the themes.xml to create your own themes you can use styles.xml if there is a design which is repetitive like we had to make these rows multiple times right so instead of writing code multiple time we can put everything here in the Styles dot XML so the UI part I hope of this one is a bit clear you already know how to use linear layout how to use these views and now styles.xml themes dot XML all those parts are also clear so what you have to do apart from completing the logic of the first one uh where it's very simple you have to do this project as well and put it on the internet once again complete both these assignments and let me quickly tell you few of the extra things that you can do in your mobile application project so we can cover this maybe in the coming tutorials and all if you are developing any application so you can use these onboarding examples as well let's say you are developing chart application or uh Spotify any application so there are some third-party libraries it's very very easy to uh you know integrate these features in your application main part is the logic and using all those Concepts like intents and all those things which are very core concept of application development for stuff like onboarding example you can just use a third party Library where we use that plugin no apply plug-in cotton Android extension at the same place you just have to put a dependency they will provide you with your docs you just have to read that and integrate those features okay so don't worry about these extra of these extra UI thingy these are very simple all you have to understand is the logic part how to create the application if the flow is clear the life cycle thing all those stuff are clear then it will be very easy for you to develop awesome applications an assignment you already know what you have to do you have to complete the projects and push it on GitHub show it on the internet do a recording of your project and tell the uh world like you have developed this application foreign everything about how to make your Android application Live on Google Play store mobile app development it's such a domain for which the demand is never gonna stop it's an evergreen and booming sector in the IT industry also this skill has a huge earning potential as well if you have any awesome idea or maybe a mobile application already developed in your local machine this is the time to show your knowledge to the world yes in this video I will be explaining everything to you how you can make your Android application Live on Google Play Store so the very first thing is you should have a Google developer account created on Google Play console this is the very first thing that you will need and we will be understanding how to create one in the demo now so this is how the page will look like when you have to create the developer account it's in very easy step to follow I mean there are two options one is either you can create the developer account for yourself or if you are let's say working in an organization and you have to publish the app on play store then you can follow the Second Step as well which is the an organization or business both are very easy so I'm assuming that you have to publish your own application on Google Play Store so we will be following in this video the first step that is yourself so let's get started and also make sure that before creating your developer account you have two-step verification enabled on that particular account that's very important so let's first thing is we have to write the developer name so let's write that I will write my name over here and in contact name you can like give the basically let me tell you here your exact name will come and if you want the developer name to be something different you would have seen on Google Play Store sometimes like in the developer name there let's say if a group of people are working on an application so they might give some fancy name like any team name kind of coders or any such exciting name which you want to show on Google Play store inside that section the developer name section that name will pop up so either you can give your own name or maybe if there is any particular keyword which you want to use you can do that as well and then you have to give your email address then select the country it's it's very easy I'm in creating the developer account as you create your account on any platform similarly you have to create the developer account you have to give your address details and everything and then the contact phone number if you have a website of yours maybe your own portfolio or any social media profile may be LinkedIn or Tech Twitter something which you want to paste here in the website section you can do that the reviewers they will find it easy to understand like uh what kind of developer you are I mean they will check all the details that you will paste here right your account detail they will check the Google Play team will check so if you don't have a website know any like social media account or something then it's fine otherwise I highly advise to like paste some link of your maybe portfolio or any social media account over here after that you just have to accept these terms in condition you can read these I mean these are some simple terms and condition which Google Play Follow so before creating your account the developer account make sure you have these things stick and yes after that you just have to click on the create account and pay option uh let me tell you I mean this is a one-time payment which you will be making for creating the developer account 25 is the cost and uh yeah after that you can publish as many apps as you want on Google Play console on Google Play Store basically so this is a very simple step once you have created your developer account everything is very easy to follow I will be explaining you all the things the dashboard the details so now I assume that okay your developer account has been created so let me take you on that page basically after creating the account the play console something looks in this way the UI ux is very very simple and easy to understand these are the navigation menu these are the options that you see here on the left side in the inbox section you will be getting all the updates about your application for you I think if you have not published any application so you won't be seeing any apps here like in my account you can see four apps are listed here right so if you haven't published any so you won't see any application and these are some other options I mean the Account Details developer page you can just go through them to have a basic to have a basic overview of what all is here on Google Play console right so now we have to like we have already created an application on Android studio right what we have to do is we have to publish that on Google Play store so you see here the create app button right this is the first step you have to click on create app whenever you have to publish any application on Google Play Store this is Step number one click on the create app button so here you have to give all the details of your application let's fill in the app name first so for now for this demo I will be using demo keyword everywhere most of the places and because I don't have to actually publish right so this is for your understanding when you will be making the application when you have to publish make sure you fill in all the details very properly very precisely because this will be reviewed by the Google Play Store team and if there will be like if they'll find if something is like not proper or any detail is uh kind of not sufficient so they might cancel publishing your application right so make sure you are providing all the details properly so either right here maybe demo app you have to choose the default language of your application I suppose most of the times we develop app in English language so I've chosen that you can choose any other based on what is the language that you have used in your application and you have to choose whether it's app or game so I will choose app and uh yes this label basically free or paid this can be like later on as well it can be edited I mean you can edit this later on like on the paid app page which we'll see later in a few minutes so I'll for now choosing free right and these are some declaration some policies which you have to accept then you will click on create a button and a new application will be created in your dashboard so this is how the dashboard looks like in the beginning it might be a bit confusing but I will explain everything in detail okay these this is like they have explained a basic uh kind of overview getting started with setting up your application we will be following a set of instruction a set of a step to set up our application here on the console right we will be uploading the uh bundle the APK everything the signed bundle so this is Step number one like when you have to like once you have created the application on the play console all the steps are like quite easy you just have to fill in the details and we will understanding I mean what are the details that we have to fill in and there are some pointers which you should certainly keep in mind so that your application is not revoked by the Google Play Store team they follow certain set of rules and regulations right so this is a STAR testing now step I mean this is something which can be escaped I mean if you want that your app should be tested with some internal tester I mean if you have developed your application and you want some people to use it and give early feedback to you so that you can improve your application then you can like view the task under this section and you can start this process right so this is something very significant set up your app this cannot be avoided you have to provide all the information about your application in this section okay you you will be then doing the setup store listing process and everything we will be basically understanding this process in detail since it's very important and cannot be skipped this one start testing now it can be skipped and then this is the release your app section so here if you see again the test your app section is there if you want your application to be maybe checked by to be tested by a larger group of people then you can like use this task is will this subtask under release your app task and this is not again mandatory but if you want you can do that and uh to to you know tell your followers to tell people that okay this is the application and to ask for feedback you can use this section as well you can ask people anyone to sign up on your test application on Google Play and provide some feedback so the developer team so that you can improve upon right and uh yes these are some step which are not really mandatory this is something which we will be doing publish your app on Google Play It's very very significant so in this video we will be doing the setup your app thing which very important a significant task and another one is publish your app on Google Play the other sections are easy to understand I already explained a bit of uh you know a bit of thing about all the sections like what what's the main thing that you have to do in all of them they're not mandatory so we'll not cover that in this video but certainly you can do the other like testing and all those tasks as well um one more thing I mean whatever you are seeing here on the main dashboard you will find the same steps here on the uh like left side as well let's say you have to do main store listing you can do that from this section as well and similarly you can check the performance and everything from here testing you can start from here as well so basically everything what's here is on this side as well now let's get started with the first step that is set up your application so what we did till now we have our Google developer account created Google developer account ready after that we will click on create a button on Google Play console that's the next step and once that's done we will be following a set of instruction we have to fill in some basic detail about our application on the play console make sure you keep starting things in mind which I will be talking while doing the demo okay so let's do this first step that is set up your app so first thing is we have to give the link for the privacy policy of the application now if you're a beginner you would be confused like what this privacy policy is about it's very significant when you have to kind of submit your application on the play console for review uh so this is one website it's very handy flycricket.com you can create your privacy policy from this portal itself you just have to like click on get started and you will see a bunch of options there they have a lot many like significant actually features if you have to publish your application on on Google Play Store they have a plenty of exciting stuff I mean they can make things easy for you right so let's uh create an account here already I have I'm having an account so I'll just log in so here you can see these are some of the features some of the options that they provide App Store screenshot Creator there are some specific things that the table like the Play Store team want you to follow certain you know uh like the size of the pictures that you upload should be in a specific range there are some rules in regulation so you can create your app store screenshot pictures from here from this website and then the landing page can be created using this website like cricket.com and privacy policy as well so uh you have to create the privacy policy right so you can click on add your first app so I will write demo app okay we will click on ADD application and after that we will be creating some of the basic stuff that we need on this portal okay privacy policy is something which is first which is supposed to be created first right we have to fill in this detail they are on the portal so we will click on ADD policy and here you can write everything about your application so let me tell you what exactly you have to write in privacy policy once you'll do that you just have to click on publish document I'm already having this privacy policy PDF so I'll use the same only this is of that scan scanner app which I created and uh let's for now I'm just paste this is a format basically I'm using the same link for now I will provide the link in the description below you can check that out this is the basic format actually which you have to follow you can change the name of the app and the email ID developer account and everything so let's let's try to copy and paste this over here and uh yes after that you can just change basic stuff like the name of the app and details I mean whatever you feel is you need to you and then once you will click on publish document button then the privacy policy will be created for you okay so it's very simple creating the privacy policy I hope it's clear to you it's important actually it's a significant it's a significant very important actually a step to paste the link of the privacy policy it's written here that you must add a privacy policy only if the target audience include children under 13 but I advise you to add you the privacy policy anyhow okay so we'll click on the save button and when we go here on the dashboard so you will see that okay this task is done so you will see a check bar and you know that that check sign the check symbol over that particular task then app access is another task so this in this one like uh all functionality is available without a special access I'll click on this one basically either like you will in your application if you are having some premium features or something then you can click on this one that all or some function ID is restricted otherwise we are good to go with the first option you just have to I mean you would be knowing better that okay what are the details of your application right you just have to fill in all those things here let's go and add section does your app contain ad so for now nope if you're having some ads or something if you like want to on buy ads so you can click on yes over here and also make sure that if your app deals with payment if that deals with money and everything so you have to create your payment profile as well alongside the developer account okay I'll tell you in a short while like how you can do that you will see that option there in the main you know navigation bar only on the Google Play console let's now look at this section content rating here you will be again giving the email address of the developer let me fill in the detail and once that's done you have to tell like in which category your application will follow is it like social or communication app or maybe game related application you just have to fill in that detail I am choosing social or communication for now and for all other application type you will be selecting the third option and let's uh now move to the questionnaire part here are some question which you have to read and answer very carefully so which of the following would best describe the application if your app is like communication related so like if it's used to communicate with people already known to the user like what kind of application is that you have to explain I mean is it related to Skype SMS or something so or maybe if that's all in the second category I'm in Social so just read the basic details the basic definition that they have given and based on what your app is actually having just select that option Okay so then does the app share the user's current physically location with other users so my app presents I'll select no and most of these actually is preferable I mean if they are if you have if you have the any application in which you are using location and everything of user just be sure that I'm in uh you share all the details very carefully otherwise there will be high chances that the application will be revoked by the Google Play Store team okay so these details are very significant which you have to fill in so does the app allow users to purchase digital Goods or not so in my case no and then we will be moving on to the next step okay made we'll save these new details and then we'll move to the next step so this is the summary basically uh the category of our application we selected social communication then these are some other inputs that they asked for right so they have shared like what rating your application will get in different uh countries because every country has different set of rules and regulations some people like have banned some application and some people allow only such application which are of certain category So based on that like these ratings are which like visible to you okay so for Brazil like your application will be available to people of all ages there is no restriction similarly like based on Country they have given all the detail for South Korea it's for like 12 plus years of people only they can use the application and then we'll click on submit so quantity rating is basically done you will see a tick on the dashboard on that section as well now let's uh tell Google Play console that what is target audience of your application so I'm choosing 18 and over okay and uh yes these are the options that you have to I mean fill in the details I will click on no I'll store presence let's let's save this much detail and then this is the summary once the target audience section will be done let's move on to news apps actually basically they will ask you this basic question like if your application is a news app or not so obviously like mine is not so I'll click on no and uh we are almost done with this uh like fill in the app content details uh section you can see I'm in six uh of the task out of 10 are completed the next section is copy 19 contract tracing honesty this apps let's fill in all the details over here basically they will ask details of like uh if your app is having like covid-19 contact tracing or some you know status is related to that or not this is a new section I mean it wasn't earlier so basically if your app is publicly available for covid-19 contact tracing kind of uh you just have to provide the detail of your app right you would be knowing if it's related to it or not so for my case like I my app is not like publicly available for covid-19 contact tracing or kind of status app something so I will just click on this one and save the detail so let's move on to the dashboard once again and for now seven of the tasks out of 10 are completed let's now go to the next section that is data safety once you click on that you can see here five sections you can read all these paragraph all these details written in detail let's move on to the next section so is your app like collecting data or sharing any of the required user data type in most of these like obviously um I do I'm collecting data but not sharing data moves in most of the cases this will be the case right so just based on what your app is about and uh what kind is it sharing the data of users to everyone or not just you have to fill in the details right so has your app successfully completed an independent Security review so according to the mobile application security assessment framework this is important you can read up details about this framework this particular framework on the internet it will be easily available right so only I'll say yes if the review is good standing so let's move on to the next step and this is the like preview all the details that you provided they're showing you the same thing and click on submit so yes this step is also completed now we will move to the to the next step that is manage how your app is organized and presented that's a very significant mistake like on Google Play Store how your apple look like what will be the basic category subcategory everything it's it's significant step so uh this is app we already have like given the information initially as well for the category um like let me choose education and you can give tags but significant let's say if people are searching for any application around that particular tag the more relevant tags you will use the better will be the search results right so for now I'm randomly choosing because this is kind of demo only right but choose all the tags wisely I mean don't put anything extra and don't put less as well because if you put relevant tasks it will really help your app come in the top uh section when anyone will search for it right so again you have to provide your details like email address and everything so use same uh like email and everything contact details which you provided at other places I'm just filling that in and you have to give your phone number and everything that's not mandatory you can see this asterisk is there are email addresses are mandatory and for external marketing I mean if you don't want your app to be advertised outside of Google Play then I mean you can untick that otherwise I would advise to just allow external marketing and uh moving ahead we are just saving these changes and we'll go back to our dashboard so now nice tips are done this is the last one that has set up your store listing it's also a significant step and the final step actually for the content app section and app name you have to give the name of the app which will be visible on Google Play Store short description about your application and now I will just write demo in all the sections right but do provide a detailed kind of info for each of this I will it's very significant for users to understand like what your app is about full description in full description you will be writing all the features and everything that's there and let's upload the app I can make sure you have all these kind of rules and regulations just follow these while developing the app icon feature graphic I have these already in my system so I'll just use that and uh yes you can use the website which I showed you earlier that will help you create good like I can sell everything feature graphic for your application so this is the feature graphic effective and the here we have app screenshots I will upload these so these are for now like I'm randomly uploading these you have to be very specific about like what your app is about and make relevant uh screenshots and everything for creating a screenshot again you can use the um this website fly Cricket which help you engine reading screenshot and everything for your application and that's all our changes I received we'll move to dashboard now and uh the final step is we'll go on the release section now so now that the first section is done we have added all the details of our app it's very easy you just have to read carefully what details they are asking for and you just have to provide the right information into that those like questions into those uh whatever they're asking if they're tick mark or whatever now moving ahead we will be doing the publish your app and Google play this is tip it's very significant in this we have easy steps I mean you just have to select the country's regions and after that you have to upload the signed uh bundle there on the portal so let's do that I will click on like for now there are no releases I'll click on create new release and after that will provide basic details first thing is we have to upload the app bundle now this is very important let me show you this let's say it's like this is Android studio and uh we usually what used to do uh we used to like click on build and then we used to just create the APK or bundle this time because you have to upload this on Google Play Store so basically what you have to do you have to create the sign bundle so let's understand how to do that you have to click on generate sign bundle or APK Let It Be Android app bundle next this is very important key store path make sure whatever key store you are creating a store that are at a safe place whenever you have to update your application you will need this Keystone so just make sure you store that you store it at a safe place and remember the password as well which you use here so I'll click on create new and for the path I choose let's say desktop itself My Demo key I will write okay and click okay then password I'm just writing one two three four five six because it's just demo right and then analysis will I'll use the same password and after that this is the validity here basically how long your app will be on the Play Store you can like by default it's 25 you can increase it as much as you want so of that it's important to give the first and last name as well so I'll just enter that and just click on OK so now this thing is done the Keystone path thing is done you just have to click on remember password and next so now you have to click on release this will release a signed APK bundle for you just click on finish it will take some time The Griddle builds everything that will uh happen and the bundle will be created for you okay so uh for now uh like as soon as that will be created you will see a pop-up over here that okay it has been created it takes like one minute if your system is like internet system everything is fast otherwise like three to five minutes as well so once that's done you just have to click on upload over here let's say this was my previous uh like uh you can I will try to kind of upload any previous uh you know that release thing scientific thing so you just have you have got the basic overview I mean how to generate that okay it's very simple you just have to go on this build option and click on generate and everything once that's done you will click on upload over here right right the release name and whenever you do any update or something in your application you just have to change the number in the Gradle script so version name is one so you will do like 1.1 and version code to two Okay so that's very important when you do updates and all you can give your release notes over here like what changes are there what updates are there in that particular release note okay once that's done just review the release almost these were the two main sections actually you have to fill in the app DTS what what's like everything they are in the application once that's done you just have to make that application Live on Play Store once this uh bundle will be created uh over here you just uh will upload it okay so I hope the entire workflow is clear to you when you publish your application on Google Play Store make sure that in the code like in all the files you are using your own code just don't click copy paste the code from GitHub or somewhere otherwise there might be chances that your application will get revoked or may be suspended so that's one significant pointer that you should keep in mind apart from that I hope the process the entire process is clear to you you will be now able to easily upload publish your application on Google Play Store okay so to get started quickly walk you through uh what are the apis that we're going to be using and exactly what kind of app we're going to be building okay so uh first of all uh you should go to apidocs.imgoo.com and that's where you can get documentation about the API uh to start off with uh we have to go and register our app uh and once we register our app we basically um get an API key uh the client ID so this the client ID is going to be pretty important for us to make all the API calls I'll just make a client ID very soon uh but but let me give the overview first and then we have got uh this Gallery endpoint so we've got this uh api.mgood.com uh Slash three slash three because it's the V3 of the API uh Gallery uh Slash section so section we can set uh hot top or user we can use hot and top hot is the most popular stuff top being the top staff then there's a sorting we can sort by viral and top time and Rising um and then there is something called window window is basically like whether you want the top images of today this week this month or year and so on and so forth and uh you know there are a couple of other parameters like whether you want to show mature content you want to show a viral content and all that or not okay so we would be using this uh to create our feed and we're just going to see where the period is going to go the other thing is we can also see tags so if you go to Google I'll read tags uh then you see that you know we can go api.amgut.com three slash tags and which uh gives you a bunch of tags here and each tag contains uh a tag ID uh name of the tag and you know how many followers total items that are there inside the tag and you know so on right we can again I think uh sort and filter our tags using some some basic things I believe so we'll give you a list of uh tags that that Imgur has okay um great now what you're going to be doing is we're going to be creating this app which you know uh is going to be Instagram like app of course and here at the top of the app you will have these you know the story stuff uh so we're gonna be you know using uh foreign so this is where our stories are going to be there okay uh and then there's gonna be the feed here so the feed is going to be like this uh where you know uh there'd be like uh the image and below the image there will be like you know the the title of whatever it is and all that stuff just like Instagram is designed right and we would have uh like obviously more of these uh right and uh in fact I just uh you know uh let's just say that you know we have got uh like like it'll be more of them we'll scroll through that and then we would have like at the bottom of the app we will have two tabs okay uh and these two tabs would be uh two kinds of feeds we can show actually so maybe one of the feeds we show uh you know the you know hot stuff and you know one of them we can show the you know top stuff uh so we can show some icons here instead maybe also uh maybe instead of the hot stuff we can actually go and write you know create like a flame like icon foreign like like that something like this okay so this could be like our hot stuff and the top stuff we can show something like you know uh like sorting uh icon or something like that uh you know or maybe like you know uh you have this sorting icon usually and uh it says that you know I've sorted top to bottom or something like that so you can use some icons also as well so we'll see okay so uh when somebody basically clicks on you know uh top or they click on you know uh hot or something like that uh in that case you know we we will basically refresh the feed we will show the stuff that's coming on the feed from uh you know this place from the uh there's the images tag I think uh where do we go sorry um Yeah so basically I'll reinformation we'll get and we will show it at the top of the heart based on that and uh when when we click on any of these uh you know uh any one of these circles here which is each of the tags so what we'll do here when we click on the tags is that we will go to a new screen uh in our app and in that screen it is going to be much like how Instagram stories work so in this screen the image will actually like you know kind of come up here right and it's gonna be probably filled up with the right and uh at the top of the screen we will show those bars that that are usually there on Instagram right uh and uh they will be filled up and you know like they'll they'll keep getting filled at the top uh as we skip for 10 seconds from one uh image to the next image and then so on okay uh so that's how basically we want to go about doing this uh on a good right so let's get started I think we have the API and uh we can get started I think we can create our application Name by the way first of all here you have to log into in good to do that you can give it an application name uh you can give it like you know uh sorry foreign I think we don't need a callback URL for this uh because they're not going to be doing a sign up or something like that where the website is also actually optional I will give you an email ID here so I'll give my uh you know email ID channel gmail.com style and uh description whatever right you know uh Instagram clone uh for scalar you do right right uh submit that and I can client ID and a client secret as soon as I submit that okay the client secret is not so useful for me right now because I'm not going to be doing actually all the authorizations here uh the important thing is the client ID for me right uh by the way if you're gonna be making it uh then do not share the client ID of the client secret with somebody else uh I'm sharing it right now in the video here I will actually disable this app once this video is published uh because nobody apart from you should know the client secret because then they can authorize other users via your application then do something malicious like post some bad photos or something like that um anyway so it is the client ID that we need and uh you know just uh let's probably save that somewhere you know I'm just writing it down here and we'll you will use that later on in our next app so just keep it saved somewhere with you but I think you can come back to all of your apps or something like that later on as well and I think you can find it out as well probably I don't know is there a way to come back to after something anyway uh saving the client ID is kind of important there I don't know if there's a so show all apps kind of page where you can find all of your clients or not uh let's get started with the Android app now okay okay uh circus started uh with exploring the API a little bit so that we know what kind of data that we can fetch right um if you go to the you know API docs dot input.com website and at the top right corner there is a running Postman button so if you click on that button uh you can click on Postman for Mac I mean before that you should download the app of course Postman so I think uh uh postman.com you just go and uh download the app for Windows Mac Linux whatever you're using um once you've done that and you click on that you click on Postman for Mac what will happen is I have already done that once uh so this collection for a good API gets added and it has got all the use cases that are defined in the docs here they are all uh added to your screen here okay um the bit where I copied the API key right if you remember so here once you have uh gone to so if you go to API dot uh.mgood.com by the way once uh that's the place and in your name you can find out settings uh sorry mistake so you go to settings so there's a list of apps that uh you know I have made so this imguram is the app that I just made we're going to click on edit uh sorry uh this is the client ID out there so I copied that if you remember now the copy that client ID uh what will happen is that if you go to gallery and you go to Gallery tags and here you will see that there's this client ID uh variable out there is there okay so by default this variable would not have a value when you add this uh you know uh collection inside Postman so what you need to do is inside Imgur API uh go to edit that collection uh okay and when you when you edit that collection there is a variables type so inside variables add client ID as variable and paste this value okay once you have done that then you can come back to the gallery tags value and you can actually make this API call and when you make that API call it you will see that you get these you know information back so yeah but you do is you can actually copy this information and use uh Json viewers there's a bunch of Json viewing uh websites out there where you can paste that and then if you go to the viewer to see that you know there's this data where uh there are uh you know there are three Galleries and tags have come so there are 194 tags have come uh so for galleries have also come which is uh most viral uh User submitted random and stuff picks most viral one they have got one top post each in each of them and then each of these uh tags they have gotten uh you know how many followers is this stack have total items inside that whether the current user is following so these kind of information that's available uh right uh what else so within a particular tag if I want the images uh so that's uh you know so we can add a tag name a sort and window and all of these things so uh we can go ahead and actually write something in the tag name uh sort the window and the page and all these things in fact I can just go in in place of tag name can probably uh write I don't know we have got trivia's attack name you've got all so or probably gets us cute pictures by the way as per the documentation here uh if I look at Gallery tag um not uh all of them are you know compulsory pieces of information in fact uh so just a second API endpoints if I go go for gallery uh by the way there's some information given here which funds are uh optional which ones are not optional so when you're looking for a gallery tag uh so sort is optional uh you don't need to send the sort by default it sorts to top and uh page the paging number again that's optional and the window is also optional so I can actually sort window and page I can just remove by the way and just send this request the header should have the client ID okay and I just send that and I get the information of uh you know this so if I just go to uh you know uh the Json viewer I paste this data and I try to view that data here now so it contains the data of items these items contain about 59 images uh each of them uh contain uh like link to the actual image there uh you know the tags and all that stuff so um most of these like you know you get the link here and and in this link if you just copy the you know value inside the link uh by the way just a second here yeah so uh I'll just copy it from here right so every image gets uh link you can just copy that link and if you paste that that's actually the image inside that link okay uh so every one of those links uh they have like a URL inside them uh some of those links would have uh you know instead of a JPG they might not end as jpg because the image actually might not be a JPG image it could be a video in those cases the you know ending uh it does not have an extension in that case Okay uh so that's how the data is uh right um and uh that that's the data inside every tag now how about uh the other API which we found out was all the stuff in the gallery uh so the top or the viral and all that stuff so how can we check that out we can also check that out get Gallery here uh again here so section is uh supposed to be by the way I'll just not save the changes don't save them uh so a remote show viral mature and album previews I'll just I'll keep the album previews to uh true for now okay uh section sort window and Page are again I think uh optional just remove the sort window and Page part of it uh the section I think we can pass hot here and just send that so here at all the hot images that we have got in here and again I'll just uh copy this and go to the Json viewer once and paste it and see so we get data our data contains uh again like around 60 items uh we can see each item here it's a tag there's a type is also available whether it's a you know uh I think image or whether it's a gallery or like that so there is like a array of images like that's available okay um so that's kind of the way the data is coming in uh in in in some cases you will find that they contain an array of images within that uh okay so every item contains some metadata some information and there is images array inside that which contains all the images so it could be one image it could be an area of images and so on we are getting okay so uh let's get started with this information let's start building the API Gathering part and then going forward from here there are two ways to build this app we can either build it uh bottom up way where we can build the layer which fetches the data from the API first or we can do it is you can build a top-down way where we can build a UI first and then we can connect it to the API later okay mock out the API and make it later uh in our case I think the API is very well defined right and the UI is just some excally draw you know this is very wireframe-ish I don't have a final UI in mind I haven't engaged with a UI designer who can give me a finished UI so I can polish up the UI at the end we can do it in a bottom-up way where the API is well defined so I'll create the API module first to get the data from there write some tests for the API and then we will create the UI using that APN okay so let's get started okay so how do we go about doing this we'll start off with a new project uh the entire process I'm going to be doing live on this video itself so right from creating the project every piece of coding itself uh so we'll pick a phone and tablet project and we will go with a you know just uh empty activity is fine uh right I mean we'll mostly change that stuff bottom navigation activity we can go with that as well but I think for now we can just go with an empty activity I'll add a bottom navigation tab if needed it's up to you you can pick either a choice that you want okay so if you go with modern navigation activity or whatever uh go next uh first we will work on the API side though so it does not really matter what you pick there you can change those things uh package name so let's just do it I don't know com.scaler dot so name of the application is uh get a folder where you're saving that right using kotlin uh uh this uhm SDK version is 23 is generally the suggested one today to use which makes sure that around 85 of people today using Android phones would be able to use your phone you can use 21 as well which makes that 95 but I think 23 is fine to go with uh and then let's just click finish it will set up my project download some libraries if you're doing your first Android app this takes a lot of time uh me it might not take so much time given that I irregularly develop Android app so the libraries would already be available right so foreign we will create a separate uh module here uh so as you can see that you know uh in my project uh by default uh you know uh an app module is created where the source code is there uh but in addition to that I will do is I would have to create another package here so this is an Android module for apis what we'll do is we'll create a Java only module Java only means you can write code in kotlin as well being that it's not a Android app but it's a you know a Java specific module which which helps in the ways that uh so uh if you go and you know click on file uh new and you select uh you know new module so you can create a an Android library or you can also create a kotlin library I think with the Android library was a cotton library is the Java and cotton Library they are easier to test they are faster to test and you can actually use this Library uh for other purposes as well uh it's like if you wanted to use in a Java desktop app or in a Java server you can use that in those cases as well it can create a DOT jar file it's not Android specific code nature the downside is that in those libraries you can't use any Android specific com.android apis you can't use any of them now in bigger projects at bigger companies we generally prefer using a Java library because they're easier to test so when you have a CI CD integration when automated testing and building is happening they're faster to build and faster to test okay so I'll call it lib Imgur uh it's the Imgur API Library okay living good I just call it last name structure all of that stuff up okay and just finish that so new library gets created uh what we need to do is uh we need to make sure the app uses the library by the way if you look at settings.gradle uh there is include app included to uh in uh you know libraries have been added in my apps Gradle uh file I will add the fact that it includes that Library so I can add implementation okay so right in this line uh means that my app module is gonna be using the libim good model by the way you can add this thing using a graphical way as well you can go to Project structure and inside project structure you can go to modules you can select app and uh dependencies you can select app and you can add a new dependency as you know like that uh but you can if you write it manually like that then it gets added like this as well so you can click uh you know module dependency uh select which module you want right it's already added here in that sense okay if I just remove that by the way uh so that uh line gets deleted okay as you can see that has deleted just click add module dependency Living Word and okay so apply has been added okay so where's the library getting added okay uh these are your test implementations uh uh unit testing and these are for integration testing uh these are the libraries that we're using in our project okay uh some of these libraries are actually older as well the default project that got created they're suggesting that I can use a newer one you can you know move to a newer one that's fine as well okay uh sync that stuff um and go to the Android view in which case you only see the files that are needed to be seen so in the input API if I just I don't know add anything okay uh in day oh sorry okay just add that uh if I go to my app uh and uh you know main activity here uh inside oncreate it's where I uh you know uh well in good API equal to English construct that and if I just log a line uh okay uh this will if I just run this app by the way and I can run it on my emulator right now so I'm just gonna run it maybe it will start up I'm just going to showing you that you know you can call a class which is there in a different Library uh here how you can do that you can do that by creating a separate module that is a Java module by the way and you can import uh that class like this here and then you can run it the Gradle file of a Java module looks a bit different as you can see here and this is the apps one so the app one has the uh kotlin Android and uh Android application plugin added here it has this Android body where it has information about how to build it in Android and all that stuff uh the Gradle file for a Java module looks pretty different it has sorry not this one I'm sorry the yeah here's the one so this just contains the source compatibility for Java like which language is going to be compiled to plugins Java library and kotlin none other things Okay so if you want to add other things like if you want to add dependencies you have to add them manually uh like this then you can start adding dependencies so for example I want to add retrofit as a dependency uh to this I will just come to that I will add that okay by the way you should keep your Java version compatibility same between the app and that so I think uh using 8 here would be better right so we are compiling it to Java version 8. by the way today if you're making apps you can also use Java version 11. so you can do 11 here as well I think the the jdk version 11 you can use here and same here you can use version 11 and you can compile this project as well using jdk version 11. so you can go to Project structure uh SDK location you can select an Android SDK so jdk you can pick a jdk that you want to use your computer could have multiple jdks installed today you can use jdk 11 or above as well uh if you're targeting Android SDK 23 and above okay compiling it with 1.8 is not a necessary by the way so my current Java version I believe would be so I think I have got 11 available to me um so current points to 12 which is fine okay so if you are compiling with a Android version below 28 and if you're targeting minimum SDK version below 23 you should stick to Java version 1.8 but if you are targeting with 29 or 30 level SDK and your you are targeted minus dks 23 or above then you can use the Java version 11. staying with a more latest Java version allows you a few more features you know uh like when you're building with cotton it does not really matter though right but you can stay with the latest Java version that sense uh okay that's it uh my app is run here when my app is run if I go to my lock cat um I would see that my IMM good I think uh file has gone printed or not I'll just uh run it again okay it will build and run again and it should print uh that uh you know value which I had written here in my main activity it should say m good a equal to 10 if it is able to properly build it and run all right foreign okay so uh that's working uh code from my library is getting executed inside my app now uh what I will do is I will initially not write any code inside the application side I'm just gonna first of all make the library and I will make sure the API can be used and then we will write code for the uh app and the UI and all of that after that okay okay so start off with we need retrofit here to be added in the API Library uh we can do is go to again like that project structure and go for the dependencies for lithium Gore and add Library dependency and we can search for retrofit and Studio should search retrofit for us and find that out this is I personally feel a little slow process uh I I mostly just prefer going to uh red profit file there and there should be a to Gradle finds a very variable I don't know this is the retrofit repository go to download and there should be the line for how to install that profit here uh in the latest version we can find out from GitHub uh where the latest version is sorry it should be retrofit 2 uh 2.9.0 is the latest version okay so you'll look at tags and we'll find uh the latest version so here it's there 2.9 point zero is the latest version available um or you can click on releases and they are generally available there as well so 2.9.2 is the latest version so we'll use that uh by the way this search did not really turn out something if you want this to turn out something and probably use a more specific search query like this and search for that yeah so we got square up retrofit 2.9. uh zero is the one foreign along with that we would need a adjacent serialization Library as well and we'll be using Moshi for that actually so so we'll just add uh same stuff here uh so adapter there's a converter Moshi uh so we would use a converter more sheet for this that would install Moshi for us as well okay good um we need support for core routines and we need support uh for so by the way motion separately we don't need to add if you add converter Moshi then automatically Moshi gets added okay custom converters is a list of them right uh so that gets added if a particular version of Moshi you want to set up so Moshi uh how to add Moshi via Gradle you can just uh check that up so yeah this is how you add Moshi we would also add Moshi code gen so Moshi code gen is basically uh a way to make Moshi work faster at runtime by generating the civilization classes at compile time so to use Moshi uh code gen you generally have to use uh I believe uh go kapt so I don't see that happening it should be Moshi compiler or something I'll just check that out I'll just add another dependency like this here search and okay just adding this Mushi kotlin code gen is that the one oh this is the one one point one two that's the one that I want this should be added as not as implementation but as kapt so okay uh that's something that we need to add to do that we have to add another thing we have to add uh the kotlin kapd uh plugin here okay so the kpt plugin uh make sure that we can add code gems okay once that's done and now if I try to add a file project structure uh living good dependencies in fact just have to do that once again a little bit more so uh retrofit 2.9.0 to be added uh converter Moshi to be added same version um then we need to add the Moshi stuff okay so we add Moshi 1.12 implementation and we have to add the code gen stuff so Moshi kotlin coaching company kotlin code gen I think that's the one and we add I think now we would have the kapt stuff available probably we just start annotation processor click OK apply you have to change your notation processor to kfd Android version is for Java annotation places and kapts for kotlin annotation processes I think this should work okay uh then what we need to do is uh uh here we'll add a couple of uh packages so we'll add a package called entities or you can call them as models and we'll add foreign Services you can call them services or you can call them endpoints uh you know apis like that you can add okay uh so here we create uh first of all you know just go to Galaxy tags look at that response okay so we have this response uh we send that uh okay uh so inside uh models we have this so this is the response that has come what I will do is I will generate a model I will create a new uh so kotlin data class from Json so this is a plugin by the way you can install this plugin in Android Studio which generates model classes from Json automatically you can go to Android studio and so you go to plugins and inside plugins if you search for Marketplace um just write kotlin Json you should find this called Json to kotlin cast it's a very popular plugin to convert Json data to kotlin uh data process there's a robo generator as well and there is generate problem so these three all are pretty common I personally prefer this one so I can go write quarter data classes this is probably Gallery slash tag so I'll just write it as uh sorry paste this data here class name Gallery tags response okay so some advanced stuff like you know uh annotations for Moshi with code gen I want to generate properties would be Val by default or to determine them on the level or not from the Json value uh right uh and other stuff like do you want to enable order by alphabetical enable inner class model all of that stuff uh okay uh and uh you know indentation how much you want to do and all that stuff um so okay we go and we generate this so it creates like a bunch of them so it creates like you know Gallery tags response is one that we get but then inside that there is data so it has created a separate class for the data model a description annotations and stuff like that so many of them you might not need uh for now so there is tag X and there is tag you know so tag and tag X are probably very similar to each other uh you know so what you can do is uh you can play around with that a little bit uh you can do this or you can use an inner class model format where what you can do is if you're creating this paste that stuff now go to Advanced and you can select uh the uh enable inner class model OKAY generate in that case only one gets generated and everything is generated as inner classes for you okay so there's data data contains a gallery and tag the gallery data contains top post and image intact the attack contains description annotations again probably these are not useful to you you can just remove that stuff it will do a little bit of cleanup we don't need all of that stuff uh but that's the calorie tax response this is the uh you know Gallery response I would say let's just copy this as well and if you find common stuff we will do that so we'll do new uh that's Gallery response data name and all that stuff is there okay uh we don't need anything else for now I think we'll just start with these uh information and then we will uh generate more of them so let me clean up the API a little bit okay so this data stuff uh so what I can do probably is take this data stuff uh new uh and then I can do uh probably according class of file uh gallery response data paste that stuff here uh call it Gallery response data map that class here as Gallery response data like this same for the reality tags response I think for this uh stuff what I can do is for this data class that we have here is it very similar to each or not so it's not actually so this data class contains add config image processing tag it's a very different thing this contains uh featured Gallery Stacks very different things out there okay so in fact let me just go back actually not do this okay and keep the data file here that's fine if the data file is here this is inclusive to this thing so what are the classes that we have gotten generated here right so there is a ad config there is a image so is this image very similar to the image inside Gallery tags response so there's a tag there's an image so let's let's do some of these ones so let's take the tag class the description annotation is seemingly there is nothing inside that description annotation so I can just find there's no such thing as description annotations it seems foreign it is apparently an empty object here as well so we can clean up some of these classes that get generated which we probably don't need uh right uh to remove this class in that sense okay uh this is the tag class so what we can do is take the stack class uh create a new cotton class called tag pastel here okay uh tag works here do we have a class called tag we can remove this from here as well it'll still be fine it will resolve the tag properly then we have got the processing status so do we have the processing status here so you have this processing stuff again seems common it just has status image so in fact it's inside image so what let's do is let's take the image class and let's externalize that okay so new uh button file for okay so we put image out image seems to be mapped fine uh Gallery response has a very similar image class right similar information inside the image class by the way so so we can do is remove that image class here okay the tag class from here also I can remove by the way they're going to be very similar to each other so this is the tag class this is the tag class accent background hash background designer display name same stuff so let's just remove this from here right uh okay what else so add config seems uh do we have anything similar there is no add config uh what else processing seems like we have already used that can be used from outside so this processing we can probably use image dot processing from there it seems like um so that's data it does not contain any further so this add config is only in a class here we have got data uh then inside data we've got Gallery object itself Gallery contains description ID name and top post inside that we have got top poster top post contains account ID account URL so is this similar to image so it's pretty similar as you can see account ID account URL add type add URL all the stuff is album is that all of that stuff is okay not exactly the same so we cannot use them to to replace with each other uh okay uh there aren't any inner classes so I think we can let it be the the name top post here is fine so we have gotten our responses kind of sorted now next we will create the apis so in fact we'll move so create a new uh interface uh API V3 or Imgur V3 API up to you you can name it either way I think I will input uh API V3 I'm just gonna be name it this is an interface that I'm going to be creating and I'm going to be following the retrofit documentation on how to uh kind of you know create these things how to create a service so the retrofit documentation you you build it like this interface GitHub service okay uh and then you write get and then you write a call and like that you you go ahead doing this okay so get so here you you write only the additional part the base URL is going to be same so for all of these the base URL till 3 is same so we write the rest of it okay so we write the rest of it here so for the gallery response we got Gallery slash hot album previews equal to true so this is one let's write it here we will change these things very soon okay uh the hot will not hard code it to hot we will change it to something else uh I'll just write that use path params I'll get back to that this is just so that we can start testing that stuff uh there's this function which is get galleries or get Gallery I think get gallery and it returns a call inside which there is uh foreign okay and there is a the other one which is the tag one this is just slash tags and I can just do tags and fun get get tags I can do right get tags and then this is a call we should probably rename the tags response to just right oh that's a guy you just found that it's a tag response okay so we'll get a tag response uh when we call this okay uh now I to test out this API we should write some tests so how do we write test you can just open uh it it written terminal so we'll find that you know uh there is SRC Main and inside main there is Java and all so create a folder called test here just inside SRC okay and inside test create a new folder okay so this test has been created okay uh inside that you'd have to create that same package com scalar libim good so you can create a new uh package com dot scaler Dot it's living good okay so these are gonna get marked as test sources by the way for your living good in the dependencies you should add the junit also as a dependency so we can run some tests here okay um why we are writing tests right now so that we can actually test out the API layer before writing the UI of our app okay um so I'll go and just copy that stuff junit test for the unit test library and eat this this here so you have to be a little patient in this space where nothing of uh you know nothing visual is yet happening uh till now it's boring stuff is happening till we get to some results happening okay foreign stuff once that's done leave him good and here a new I think uh package for the apis I can do and inside that I can create a Java class uh kotlin class uh M good API V3 tests okay I can start writing kind of tests like this test and get tags slash does not work so get tags working that's the name of my test I can name my test like a sentence if I want to and you can use this back tick so that in Cotton you can name variables with spaces like that okay that's a strange thing that kotlin allows it's nice that allows that ad so here what we'll do is we'll need a retrofit object and I'm not writing the test in the proper Production Way yet we'll get to that so uh well uh retrofit equal to retrofit dot Builder dot bit so I just build the retrofit Builder and then I do uh well API equal to retrofit dot create and I pass my IMM good API V3 okay and then my API would have this get tags response okay dot I can do is execute it get the response Okay so I can get asset not null uh import asset not null from the junit asset Library a set not null that response dot body is not null okay so we just run this uh you know it should make an API call and test that the body is not null if it fails here then probably my API setup is somewhere wrong okay I should not be creating uh the retrofit class like this every time I will get to that okay so I got a failure here base URL is required so I'll have to pass a base URL in fact what I can do is I can make these part of the class here like this okay you can make these uh private okay uh base URL would be essentially this part okay and Dot bid okay so let's run again let's see if the bot is available something else is a problem now unable to create converter so converter is not created because I have not added a ad converter Factory so you have to add all of those things one by one uh dot add converter Factor converter Factory dot create here okay let's see now okay seems to have failed uh somewhere internally it seems to have failed assertion error uh we can see the further logs to find out why it has failed uh maybe we can print the response and see what's happens in that case and see why it's not getting printed correctly or something like that okay foreign response here so that's the reason I printed it and I'm doing it like this for you guys like facing every error that people face so that you know you know what are the errors people face here so the the problem is that uh you know this uh four zero one that's happening that's because we have not passed the required header uh the header that we require is for the API uh uh the client ID right so we need to pass that header here authorization client ID so what I will do here is I will add a uh uh dot add so I'll also do is okay HTTP I will uh fetch so so I will add an Interceptor so inside the Interceptor what I will do is uh should we pass an Interceptor and the Interceptor should you know basically uh return uh uh response here okay uh so uh sorry I think I have to create a surpass interceptors body supposed to be a chain a chain is supposed to have a proceed call a proceed call is supposed to I think written response um I believe I call Dot proceed should work on this um just brush it up quickly how to add an Interceptor uh so intercepted through the chain dot request and uh how do I create a response so change okay I get a chain in the intercept it dot proceed so I have to it dot proceed uh where request equal to this and then I pass it dot to see it request ah so that's all I have to do uh except inside the add header I have to uh add the header I have to pass this the name of the header is authorization and the value of it is going to be a client ID I will have to pass the actual value here yeah okay not this stuff instead of that I will actually hard code the value here for the test right now uh so the test right now I will hard code the value to uh just go here edit find the value of this variable and just pass it there okay now we will not hard coded obviously in our final app and everything but I'm just gonna write it here so that I can start testing so let's run it again and let's see what I get foreign I should essentially add two tests one where I should check it's working with a header and the other where I check it's working without the header by the way sorry I had forward adding the client uh client is gonna be that client there I created uh dot proceed our Interceptor uh dot bit okay there we go I think now it should work sorry every request it's inside the Interceptor it's adding this client ID uh it's still failing let's check why uh so required value GIF V is missing at galleries top post dot image so apparently uh Jiffy is a required value but it's missing which means that if I go and search for my gallery tags response so Jeffrey is stated as a non nullable string I should make it by the way a nullable string Gallery response it's inside the data which if we okay image and this is the data itself okay cool just run that again if more of these are happening what you can possibly do is actually make all the values in a label by default which is also something that you can do uh let's see what happens now I've made jfp as an element I might find more such errors actually and I will actually getting hls is also uh nullable something like that so uh when again do the same thing uh hls we can try to find out and set hls to string and then you'll probably do that a couple of times and find out all the nullables uh generally it should have gotten defined uh like if you search there are a lot of types where it has been set as nullable foreign with a lot of them I can do is uh right so everywhere there is a question mark uh and without a question mark before it so you know uh hint I just turn it into this if there are string comma like this I will make all of them a level as well and uh anything else is there not available hopefully everything is now sort of uh knowledgeable supported now um right let's just uh try it out one more time then generating a data class from you know you're generating this stuff uh you can actually set it inside Advanced you can set uh everything is in a label or something like that okay uh that's probably a better idea I would say uh everything is available by default so processing can also be okay this can also be in a level apparently uh so cool let's do that as well when you're watching the video you can skip through this part uh because same kind of error happening over and over again right more of them so int but was long so bandwidth uh so bandwidth could be long apparently so bandwidth is uh in here so we can set it to Long here you can give it a question mark here okay so by the way there are very similar things happening in these two cases let me actually make it the same by the way so inside uh Gallery response there is uh this data and inside tags response there is this image class so the image class is used I think here yeah gallery yeah list of images such as image class and the gallery data here so account ID account URL add config count idiot at count URL add config so this add config is a special thing that's there here which is not there in in the image class the ad config contains data like high risk flag say flag show ads I think we don't need the ad config for now but even if it did what we can do is they can push the add config data from here to just make it a separate class uh Okay add config is separate uh Gallery response contains add config type which I can add to image type right at type and addual and all of that stuff is already there so this is uh like 99 line breaks and this is 75 Lineback so there's more information in the gallery response here so I'll do is just copy this and paste that there instead okay uh and remove this data type from here and make it image okay so this has now all the types that are needed I believe um yeah so what happened about the test let's just run that again let's see if you're facing any more errors foreign let's keep fixing them add config missing data okay adconfig is missing uh because my ad config have not made it nullable just go one more shot at it okay images is missing top post dot images okay but it is another way of also approaching this is you can actually start with only those keys that you need in that case you can just manually start creating the data class and just have those keys that you need by the way it just worked okay so finally it worked I am gonna remove my log line here I don't need that I can put a breakpoint here and I can run it in debug mode uh right and here is where we'll find the good stuff that is when the breakpoint hits and here's the response the response contains body body contains data the data contains four calories all of them fully fleshed out data as you can see uh you know you can just open and you can kind of evaluate the expression right here right you can turn it into two string and you can you know view that all of that data that's coming out here uh there is the tags 195 of them have come here as well status 200 so great right so the data is coming uh my test sort of works right uh how we're creating this client and how we're creating this retrofit and how we're creating this API and all that stuff we can probably commonly find all that stuff as well okay so let's get tags working let's do the other one which is uh test find get galleries working okay uh response here would be API dot getgallery dot execute and I'll just assert not null that response dot body I'm getting okay I'll make more detailed tests soon but for now I'm just gonna check that I'm just getting a response here again probably something might break uh again maybe some nullable stuff so you can check so required value width is missing in data so with the Apparently um okay probably one or two uh start to be checked here and uh yeah so that's working so my basic API stuff is working although that's not the correct way but data is supposed to be structured I will just get to that but now I can see that okay I'm able to fetch the data I'll have to make sense that I can do this client ID and all of these changes uh properly from the app okay and I need to use core routines so that this stuff this I can only do it in the main thread like this but from the app I can do it like that so I'll make those changes first and then I will proceed okay okay so since the API is sort of working I mean there's a lot of work to be done there we have to create a you know some dependency injection kind of stuff maybe a single term for the client and pass the API key properly we're going to get to that but let's take a look back at our you know UI a little bit again okay so we just open this app right now you'll see that you know there's this home dashboard notifications these settings are done for us if we look at the code inside UI this dashboard home notifications each of them have a fragment each dashboard fragment and uh perform fragment notifications fragment all that stuff okay so uh we don't need it really like that what we need is we need a single uh fragment called feed fragment and we would use two versions of the feed fragment one with top one with viral enrollment stuff right so and we need some icons and all also for that so let's uh go to do that uh let's let's get some icons that we need so this is for example the the the dashboard icon this is the uh home icon and all that stuff so what if I need like a you know top or a viral uh for that I'll need a popular or something like that so for the zycons I can go to you know there is this uh website called Flat icon I like that website so flight icon.com and uh let's say if I pick up the fire icon which I can use with the viral so if I open the fire icon here I can get the SVG for that so if I just do the SVG for this by the way we should say thanks to Flat icon.com somewhere in our app if we use the free icon from here now if you open the uh you know the SPG file with say something like um foreign okay interesting why am I saying because if you open it with a text editor uh then uh we just need to do is uh use the you know path here and that's all that we will need uh so let's make a copy of this IC home black and I'll just call it IC fire okay just put the path data from here and paste it in the path data field here and we should have a okay do not have this one I don't know uh do you have it uh seems like no so height is 134 and width is 134 uh have we said it uh so by 134 foreign there are a couple of ways we can go about doing it one is we can actually obviously save this uh SPG file let's just say we save it uh to fire.svg and download has been saved so I can import a driver uh so new and I can sort of do email Vector asset and I can import a SPG file from uh downloads folder here I just downloaded this fire file sapphire.svg open right uh let's say the size is supposed to be 24 cross 24 DP and opacity is 100 it's fine next directory main release finish so I got IC fire I'll just call it IC uh nav file because it will go into my navigation bottom navigation thing right so that's the fire one uh let's say I want to use uh something else so let's see uh top is there like a icon for top uh sort via sorting icon we can use prop posts uh maybe I can use this one uh is that icon for popular that's available so trending the popular something like that graph top something I think these can be used as like the popular icon I think so probably good one so SPG so do a free download for this again as well uh save file to download this fine uh okay let's let's import another one from here so new and Vector asset so this time we're gonna be the line chart and this one okay so do again the similar 24 T because 24 DB size and make it uh I see nav line chart okay so I got both of these uh generated uh the fire one right um sounds okay we need to create a fragment called feed fragment so I'll create a new uh fragment I'll create a blank fragment with view model it generates one for that so I'll call it uh feed fragment feed view model kotlin uh so just finish that uh should create a layout file and a view model and a fragment all three for me I'll just create a package called feed here move this stuff into feed okay great dashboard home and notifications we don't need we just need to open the feed fragment twice the viewmodel is kind of empty here so the other view models they have probably some just example mutable live data and normal live data kind of a thing right so I'll do the similar thing here as well we'll get to that uh we don't need these uh you know notification home and dashboard so just remove these okay feed fragment is okay for us for now we'll go to the uh this icons as well this this and this we don't need them okay uh I'll go to the the navigation uh bar here obviously the fragment name and all is gonna get to change I will need two fragments I don't need three Okay so feed fragment for both the cases it will be feed fragment okay label would be so just remove these title these three things I'll create a new string uh nav title um and another one popular let's just say okay um could or uh we can call it hot itself so hot and I just say hot and top okay that's kind of the apis that have they are on them good so I can you can go for hot I think uh most viral or you can go for I don't know User submitted and go for I don't know is there something like that most viral desktop this is this top and there is I think part right that's hot let's stop okay so top and hot that's that's fine uh we can go with hot and dark right uh these are my two uh feed fragment so here B uh nav title hot and uh title top by the way right the layout would be again uh we don't need these layouts or the other ones were created so um fragment dashboard fragment home fragment notifications these are I'll just delete these uh free track model just rename it to fragment underscore field this naming convention I prefer more so that it's easier to sort the files all the fragments are shown in the same place so I'll call it fragment feed in both the cases okay same fragments opening everywhere uh cool uh ID I'll just have to change to navigation uh hot and this would become navigation top okay my main activity code has to change a little bit so navigation hot top and there's not going to be any navigation notifications anymore right so that's what it's going to be like that's my app bar configuration and nav view is there um I don't think anything else is needed I need to actually write the text and all inside that as well I'll get to that so so if I just run my app again let's see if it crashes or not if I've missed changing any one of those things right nothing will show up in the layout by the way that's the part that we need to change kind of all right so the bottom nav menu this thing needs to change so again I need two items inside it uh the first one with the IC fire this with IC chart and I'll call this navigation hot navigation top title uh again this will be hot and title top so this actually creates the UI of the navigation bar and that just handles the navigation the navigation XML file handles the navigation okay so this should work uh and there we go so we've got hot and we've got top nothing changes it just says hello here and I need to work on that so what I will do is uh in my feed fragment I have to pass a bundle and I have to handle that so uh what do we do in my mobile navigation thing uh here we add a argument okay so argument uh argument type I will set to string first of all okay and argument name I will set to uh feed and default value I will set to hot okay I'll pass a similar argument here where I will send the value of top okay so how do I get this bundle uh so for the fragment so passing data inside fragment so there's actually a page in Android I think let me just uh stuff uh yeah so uh Android navigation pass data if you just search pass data between destinations okay sorry to pass data between destinations you create this argument which I've already created by the way right now and how do I get this argument inside the fragment so I will get it as um in the receiving resignations code you can use get arguments so I will just do that I will do get arguments inside my feed fragment on create view if I do get arguments dot uh so there is a get string for the value feed equal to this so foreign Okay so if feed has been there I've gotten a feed in that case I'll do root view Dot and I will actually add a text view here which has an ID text view feed type okay make this Center Center so make it the layout gravity at centers at the center of the screen okay and then uh I will write here in my feed fragment code that root view dot find view by ID r dot ID dot TV if we type right um set the type to text View dot set text or I can just dot text equal to it okay so if feed exists then I will set the value of that into that feed type text view inside that I will just run that again and you will see what the difference is that based on the feed type that I'm getting here I can set up there we go so hot and top and hot and top so okay it's coming out there uh except I think the fragment we have set to Center uh the frame layout this I have set to should be at the center of the screen I believe uh but it's not coming out of the center of the screen somehow why not oh I'll just lay out a bit then I'll just wrap it and wrap it so that it's at the center of the screen just to restart the activity and see the changes happen here okay yeah so that's the heart on the top so the argument is getting passed correctly this is the hot fragment and this is the top fragment okay um Let's uh get down to actually connecting this with the database and actually showing some real data here so user model view uh we model method of doing stuff so you know it's a view model that's where we'll get the data from the field we'll probably need a repository kind of a pattern here as well so we will discuss about all of those things so right before that we need to clean up our API a little bit when we use that I'll just commit the code till here and then we'll proceed further okay uh before we proceed more with the UI side of things let's clean up the API a little bit because right now it's kind of a bit of a mess so first of all this class just use that for testing so I'll just delete this one um okay and we'll go ahead and create so by the way when I deleted that make sure that inside activity probably there's a Code you'll have to uh that code has got removed so I have to remove that stuff as well so that it does not have any problem in building and all right uh anyway uh so we'll create something called an invert client and I'm going to create a kotlin object now uh when we proceed uh further like an actual production level apps we use something like dependency injection and their libraries like Hilt and uh dagger and you know Hilton is basically a wrapper over dagger or there is coin or codeine those Cloud dependent section libraries are there but here we'll just create an object uh which would essentially act like a Singleton for our current use case now at this scope it is fine to use that uh and then call it Imgur client let's just say okay and as you have seen in the case of this test we had to build this uh client at retrofit and all that stuff so let me just quickly you know put all of this stuff out from here put it inside in good client uh these can be private that's fine so I'll call this as my HTTP uh client uh this uh would go there and this would be my retrofit object and this would be my API object uh fine uh this uh not making it uh private I'm making this one as uh public okay a couple of things uh we will also turn this into lazy so I will make this as a okay HTTP client by lazy and I will put the code here okay what does lazy do essentially is that it creates a new instance uh only when it is first time required so when you get it for the first time then only it is created for you so when the app starts by default these codes will not get executed only when the first time you try to actually access HTTP client it will get executed so the further this object also will just make it lazy uh so okay and this again also will make it lazy okay okay the benefit of doing this is that whenever the first time somebody actually access API it will try to create retrofit and then only it will try to create HTTP client once it is created then for the next time it will use the already created one uh pretty similar to the Singleton pattern that exists in uh Java and it is thread safe by default uh you know it is synchronized and thread saved by default so you don't have to worry about that part this uh client ID we can just extract it and make a separate API key like this here uh so uh okay uh so also I'm just writing a to-do line here that uh the library should only deal with logic and your API key should ideally be inside the code of the app and not should be in the code of the you know uh library because uh once this project is actually uh you know made what we can do is we can distribute our libim Google library actually even to other developers who might want to use the Google library in their projects okay so for them the API key they might be using a different API key so the library is not a good place for your API key to be there uh your app is ideally a better place so I'll just write it in a to-do here and we will deal with that uh sometime later on writing to-do's like that is also a great practice that you should follow now here this API what I can do is uh well API equal to Imgur API plan dot API like that okay so now you can do API dot get tags and all of that stuff okay just quickly just run it and see that where this stuff is coming or not since I did not run let's quickly check that all of this stuff is running uh not running uh taking a bit of time to build the project probably uh I mean let it build not an issue um furthermore one of the things that I want to do is uh so if I go to apis and if you look at this one here uh this hot I can actually turn it into a parameter now this uh album preview is being true so what I can do is actually give a query parameter query parameter uh called album reviews so make it true by default so if somebody does not pass this query parameter then album previews would be true the path parameter uh so this is supposed to be actually coming from you know in the name good API as you can see it is actually called the section whether hot or top so we can call it like a section okay and query parameters will automatically come from here so I can add a path parameter here but section I have started string like this okay now wherever this code is actually called inside the test I will have to pass either hot or top so I can pass hot here and I can actually make a copy of this test so get galleries uh hot working get galleries uh top working this should return me the top Galleries and they should return me the podcast okay so let's just see how well that works um foreign stage if I just run the tests here uh you know let's see what happens so when I run the tests uh so there's some error in the test don't actually run okay uh oh sorry uh there's some extra stuff that I was just trying uh sorry so let me just uh quickly in this test again great so what happens with the test is that they're working correctly okay cool um one one more thing extra to be taken note of here is that we can actually make this API a little more safe we are using strings hot and top here but somebody could send XXX and in that case uh the you know test could actually fail because uh you can only search for hot and top you can't search for XX uh XXX as a tag for galleries now since you can't do that uh why not prevent users from doing something uh other than hot and top so what we can do here is generally what I prefer we can create an enum right you can create a new uh enum class called say section and have two values in it called hot and uh top and then we can say that you know in our API let's say the section is basically that section object okay so then we can only pass uh section dot hot or section.top okay now if I try to run it run the test the problem is it will still actually fail and then I'll tell you why it fails it fails because Moshi and the retrofit do not know how to convert an enum into a string okay that's the reason it fails okay so uh there's a way to deal with that uh so basically give it a you know Json class and generated after okay this is similar to how our model classes are written right so we have got Json class in reactor equal to True uh right and uh then we can actually add Json and name equal to hot for this and Json name equal to top for this let's see with this much change does it work or not okay we need to so apparently it says that you know code gen for enums is not supported or necessary so if you just check why does it say so code gen foreign so there's another way of doing this as well what we can do is we can create our own converter Factory for enums now by the way we have our one converter Factory which we have added here which is the Moshi converter Factory we can add our own converter for uh you know say enum converter uh okay so enum converter will extend from uh converter dot Factory okay here we will override one method which is string converter so string converter takes a type of uh some type and turns it into string so for this case what we are going to be doing is we are going to be uh converting from uh type basically uh enum to enum of any type to string right so here what we'll do is we will uh in fact I can just write equal to converter of this type okay uh converter which takes enum turns it into string as a kind of converter I'm gonna return from here okay so what we're gonna do is that so if uh type is of uh some class if it is the data type that's coming is at least a class and uh it is also an enum in which case we can do something about it else we can return null from here okay uh foreign and what do we return here is that we try to return a enum dot name Dot Java class dot get annotation dot name um else you know if there is some error then we return null from here okay so that's how it looks so if the type is of class and it is of enum type then we try to find out The annotation of Json and the name inside it if you don't find it with a null or if type is not of class or even then also be return null and we create a enum converter Factory like this uh what we can do is in our client we can add a new converter Factory here we can add a converter Factory enum converter Factory let's check if that works or not let's go for our tests and see where we go with this right uh okay got oh sorry we don't need this anymore then um we don't need uh the generate adapter thing here you can just go and run the test directly right so these are still not working uh there's a bit of an issue here uh we can do is uh let's just go to the converter Factory and check what happens when the converter factor is hit right let's just debug these tests and let's put some breakpoints there what happens when this converter Factory is uh kind of invoked right so here's the first one let me just pass that then we get there so is type class and type enum that has been true we have gone here uh inside that we reach uh you know the next level here so we get enum dot name is actually top uh so if you try to find out that enum dot name Java class dot get annotation it's coming out to be null uh if I just do the enum.java cross dot data annotation I think that's also coming out to be null uh interesting uh let's find out uh let's let's just uh run it again also I think uh my mistake I did a little bit of problem in the enum processing here it's not something I do daily so I uh so what we have to do is actually in in this uh Place uh we have to go for enum dot get field uh so enum.java class dot get field if I do for enum dot name I think I will get this which is the the Top Value right here if I do dot get annotation uh Json class dot Java uh further Java class if I do and here if I do a DOT get anode so this is gonna be a set of annotations here okay this is the first annotation here so I'll do like you know uh dot get annotation for Json class.java I'm getting a blank here as well uh let's just write it out uh so this is uh gonna be a second let me stop this stuff yeah so enum.java class dot getfield enum.name this would give me the data type of hot okay uh here if I do dot get sorry get annotation of you know jsonclass.java and then dot name I believe this should uh be available just try the tests once again so this gives me the data type and then it gives me the you know the annotation and then the fields here that works so I'll just uh recap that a little bit might be a little bit confusing for people who don't work with annotations a lot so this is a converter that gets used to convert enums to Strings so whenever uh Moshi faces an enum in the request so it sees there is a enum in this request here right so it tries to convert it into string so for that it will use this converter Factory and it will use a string converter we'll hit this string converter we find the type the type here is basically this data type section okay so it checks whether the data type is class or not it is because it's an enumclass right and it checks whether it's enum or not uh matches that as well because the enem class uh then it creates this converter fact converter this insides converter so enum.java class this is the class for section inside which I try to get the field for hot or top whatever the name was so try to get this particular class or this particular class the data type okay so I get that and I get its annotation so try to get The annotation for it which is the Json annotation for it and within that annotation I try to find out the dot name parameter so it's a bit roundabout process but I'm able to find out what is the Json name hot or what is the Json name top for this uh kind of a thing here okay semi-converter Factory works okay so now uh creating enums is kind of easier as a result of this uh you know uh I can basically create enums of this format uh right um where I can write Json name which is what I want actually in the API call then give it a you know caps name because it's a constant and wherever I want to write the test I can write section.hot section.top now technically I cannot call Api dot uh get Gallery with any XXX anymore it's not possible I have to add a section dot top or section.heart one of those things so I made my API a bit type safe out here which is uh kind of useful right so my API kind of looks okay at this stage I would say if you close everything so my client has a HTTP client it has uh you know net profit uh if I want to add cache or something then I should add a cache kind of things here so you can add a cache you can use a uh you know so you can use a disk lru cache or stuff like that which saves data inside uh the disk so we will see how you can add caching and stuff we have our own retrofit which has its own converters um right it has an Interceptor to add the header out there and I'm getting the API object so wherever I need the API I can simply do you know uh in the tests as you can see I can simply do is uh API and then I can do API dot get tags api.get tags like that stuff okay so that gives a structure to my API but it's still not gonna handle background thread and all that operation correctly for that we need to add uh support for cotton and core routines and uh we will just get to that very soon how to add support for kotlin core routines here um right but my API is kind of in a better shape right now uh you know I am using proper enums so that I don't make a mistake in stock here okay okay now let's get back to the UI and let's start adding a feed which we need so that we can you know show the data inside that feed so we'll uh get to that now so the feed fragment is we're using this layout uh called feed fragment here and we'll need to add some libraries here as well so the feedback would obviously be it's a frame layout that's fine we will add a recycler view here okay so so we'll have to add the recycler view widget um I would give it a match parent or a match parent that uses the entire space okay uh give it an ID uh recycler view uh Gallery feed okay so so there are a bunch of ways you can name them I prefer using a Hungarian notation where I write the recycler view image view of that kind of thing notation at the beginning so our week I'll repeat like that I prefer writing that uh some people use something like you know uh feed recycler view like that as well so kind of up to you how you want to do that okay um so by the way uh to to use things here we have used like a TV feed type like this uh there's another way that we can do is using uh view binding so we'll actually use uh Android view binding here okay so let's uh search Android view binding so how do we use view bindings okay so to use view bindings you have to write build features view binding equal to true and that I will add in my Gradle file uh so in my apps Gradle file uh build feature so V1 is actually set to true uh right uh so how do we use uh view binding basically so you know we do it somewhat like this uh while binding equal to and uh you can write uh this is uh fragment feed binding so just import that when you are constructing that you can actually pass this thing dot inflate and you can pass a layout and create it inside that dot input and you can pass the layout inflator here you can pass the container parameter and you know false those parameters out there like this right and we can return here uh binding dot root like this okay so and just write normal binding as well so generally we use underscore for private values that's a rotation that's used okay um so we've done that uh then we can do here is that feed is available uh instead of doing this stuff we we have a reset our view now to populate so our recycler view would be uh kind of available by the way if you just want that text view also to be there so I can add that text view that was there so text view wrap content and uh wrap content and give it an ID type text view or we can write TV feed type okay so stick to one type of convention you can either use Hungarian where you write the type first in the variable name or you can use the normal Java code in our convention where you do uh field type text View and you can do feed recycler view okay um so we can do here uh binding dot feed type textview dot text equal to field then give it a layout gravity of Center so it will come up with the center like that okay um exactly what we need uh so sorry this is not what I want to learn I want to run the app let's just run that again so what viewbinding gives us is that that find view by ID you don't need to do when you get type save values for your ID so you can do binding dot the ID that you have placed here and Dot text like that okay so it automatically connects the XML to the Java in in the kotlin to a very nice way okay uh we don't need to show this text there in fact what we need to show instead is something else we need to show uh yeah so hot is coming top is coming both things are happening okay so you don't need that in fact what we need rather than that is that uh no we need the recyclerview to be populated and we need a repository from where we will fetch that data so let's do that thing let's uh create uh you know our directory called Data and let's do an IMO repository here so kotlin classified so class uh info repository you can create a normal class we can create an object type as well if they are going to be mostly static functions so it's kind of up to you uh right um so just let's say create an input repository like this here it will create some functions here which is uh um fine uh get hot feed would be one one get top feed would be another so in each of these things we basically would want to make a call uh to to the corresponding uh repository so we can get like you know hot feed what we'll do is uh well API equal to in good client dot API then we do API Dot you know um get a Galaxy Note that stuff so you can do uh get gallery and we can pass here section dot top right and uh this we can execute or and you will actually not use executor and give we will use suspend functions with that we will make it using core routines we'll get to that once so we'll do like execute this and then from that you know we can take the body data and that response and all that stuff we can do here okay so so let's get there uh we'll do that so for that we'll need to add the you know core routine stuff inside our project so I'm going to add kotlin just open the GitHub repository for that where you can find out how to add cotton X core routines into your project so to add core routines into your project this cotton Linux core routine score which we need to add into our project right so uh what we can do go to file uh project structure and dependencies for lipum goods go and add Library dependency kotlin next door routines and see what comes up no it does not come up should be you know uh org.jetbrains.com Linux I think yeah so we will find the cotton X core routines here um got it so Cutlass score routine score uh this is the one that we are supposed to add I think the version is 1.4.3 uh with the latest one that's available it's native empty it's probably not the correct version we can just add just one point per point three as well I believe uh or dot jetbrains.com Linux core routine score think there should be a 1.4.3 itself available let's check so it should have been added into my dependencies like this bottleness Co routine score and I 1.4.3 I should add the same version into my Android project as well because I would be using core routines in my Android project in as well so I'll just add coordinates protein score here as well I will arrange these libraries a little bit better in our Gradle file I will come to that part okay there's nothing specifically for Android by the way here uh the core already contains dispatches for Android Etc so I know there is no uh for for there's a continent score routines UI Library which is uh useful for Android so we can use cotton score routines Android as a library if you want to okay where the library has been added correctly or not you can check also using this thing go to Project View and then you will see external libraries and there you can see uh foreign core has been added Android has been added all that stuff is there okay so uh that shows that the libraries have been added that we needed okay once that kotlin X core routines has been added what we can do is uh we can actually take a look at our API code and you can change little bit of the code here instead of the responding uh call we can respond with a response and make it a suspended one okay how does that help us is that if you go to now the test file for this oh sorry not this one uh the good test so now we cannot call directly execute instead what you do is you do a run blocking and inside run blocking you just assert these things there and like this okay in fact you can put that in this entire thing that run blocking uh in this format itself okay uh same with this so run blocking means it will actually force it to run on the main thread and block the main thread while this operation happens for testing that's fine for actual Android operations we want the core routines to happen on a background thread here because we are testing it we want it to happen like execute happens execute happens on the main thread uh so this way it will happen on the current uh so run blocking as a definition says that you know runs a new core routine and blocks the current thread till it's completion okay so the actual task does not run on the exact same thread it runs on a defined dispatcher itself uh right a dispatcher is uh kind of like what threadpool executors are in Java there is a pool of threads and tasks are executed on any one of those threads only thing is the method of doing this is a little different there is a state management State machine available which enables you to load a lot of tasks into a very small pool of dispatcher with a very low overhead okay so core routines kind of appear to be like lightweight threads so you have one extra layer of virtualization so generally I've got Hardware thread so your CPU has got four or eight core course which means you know you have that many Hardware threads you cannot actually parallely process more than eight instructions at the same time partly on the CPU that's the hard method now your operating system is sending uh probably software threads probably a thousand of them to your CPU the CPU is basically around Robin and that they are executing one third at one time another thread another time so there's a one level of virtualization in scheduling there between your OS and your CPU so CPU has got eight fixed threads the OS is creating probably eight thousand threads there now there's another level of virtualization that core routines build up is that per software thread now you have got n number of core routines so you can have like a pool of four software threads and on top of it you might be having 50 core routines running on that so uh another level of virtualization makes uh background task management a little easier uh for our understanding here run blocking means is that it's gonna make this current thread stop while the task is ended so that you know our test run properly uh so for test it's better to use run blocking always right uh but but in our app we will not use ad blocking we will do something else we will see what we will do but let's just see foreign let me get our repository layer again and talk about what we're doing so inside this repository um we can't call suspend functions without our external function being suspended by the way so our repository can have suspend functions inside them okay if it is a suspend function it means that function can run on a background side it can be paused in between uh somewhere above in the upper layers you'll have to Define on which thread it will run how the dispatcher will get handled all the stuff for now we're just making a suspend function for this uh and uh you know uh sorry so just go for the tests again just make sure the tests are running and here in the feeds what we really want in the fields is that you just check Val uh response equal to this and then so if a response has a body right um we would uh you know uh so we can do like response dot body uh okay for now I'm just adding null here uh and the data type that I'm going to be so the tests have run properly there okay so what I'm going to be returning here is I will return it dot the gallery response uh it is supposed to contain this list of uh you know data images right so it dot data is something that I will return so I can read here is that uh list of images something that I'm going to be getting okay so this makes it kind of fine uh you know I can remove this actually so just to return data.body like that if it's not available right um similar return type we have here okay now how do I use this repository uh inside my view model so it's in my feed fragment inside my feed fragment there is a view model so instead of feed view model what I'm going to do here is that I will contain the feed Okay so while feed equal to is the mutable uh live data of type list image which I had there okay um okay then I do well field so this is the private one which I will not expose the actual mutable data I will expose a non-mutable one so while field of type non-mutable life data well feed equal to I will just do feed and I will do it of type uh list of image okay a thing here is that you know I'm just doing equal to feed so basically this object and this object are going to be the same but I've changed the data type to live data here so anybody who is accessing The View model from outside the view model they can't change that data like compile time they can't actually make those changes nobody would be allowed to so here in the stuff if I just do that you know view model dot feed and if I have to set data or something here I can't do that because the data type of feed is live data not mutable live data right uh so I have essentially done right protection via simply assigning it a you know basically smaller type right which is not mutable one uh I don't need to copy it I don't need to create a copy or something like that I just I'm giving the same reference but at compile demo code will not allow me to compile any mutation related stuff now if I actually manually do stuff like this which is uh you know as mutable live data right if I if I kind of converted it and then did set data so set value it would have actually worked because uh sorry it would actually work because the actual object is still mutable uh only thing is I should not do obviously such a casting here in the first place and I have protected it simply by making it visible as a normal live data not as a mutable Library anyway uh we'll get to all of that stuff uh slowly and surely so here we will do is uh you know what we'll do is that you know uh with greater function update field okay and uh we can do a feed type and we can pass speed type as string here okay so if we type is string and what we'll do here is that if so by the way when we create the view model let's also put the repository here so private well repo equal to uh repository sorry okay that's done so when I update the field so uh when I do field type is hot then I do repo so I'll do like this um I will do uh view model scope dot I will launch a function and I will launch it on dispatchers.io so this is an input output operation so when uh field type uh is hot in that case I will do uh feed dot post value and I will post the value of repo dot get hot feed okay and if it is stop feed Dot post value repo dot get top feed okay if it is neither of that else I will add a log line here log dot e H feed and I will just add a feed has to be either top or hot okay if somebody sends a different data here I should check for that although in my app I will not write anything other than hot or top but in this code I should make sure that I handle the case and I write a log line correspondingly okay this is the update feed uh function okay so what we do in our feed fragment uh here is that there is an oncreate function so in my oncreate I will initialize the view model so view model equal to view model provider Dot uh setting view model uh I think I can construct the viewmodel directory uh it's probably deprecated right so we model provider uh password view model store or I think I can do view models store dot uh just check this step of just a second is there like a view models thing um view models uh I think we can get a view model for uh feed view model hey just look at the top that's faster I know but uh uh uh okay I'll just look at the dogs once it has changed a little bit of the how to do the view model stuff here um so quickly let's see okay how to databe model uh never shy away from looking at the docs by the way and that's the reason I it kind of changes how these things happen so interactivity you can do buy view models okay buy view models we can do this by view models can I do that like that uh view model probably not gonna work like this seems like it does uh can we just inside a fragment so let's just see how to do it inside a fragment since that fragment by activity view models is something uh that they have said to do um by activity view models so let's do by activity view models okay that should work so I don't need to do anything else I don't create uh in fact I should do something inside on create instead on create what I will do is well feed equal to arguments.getstring this this stuff I will do inside on Create and then I will do viewmodel dot uh update feed and I will pass the feed argument there okay it's supposed to be a string uh so I can do is like this feed if it's available it's not available obviously I can't update the feed okay and I don't need to do this thing then I don't need to set the text right uh let's just see if the viewmodel gets actually updated and I can see that by checking out uh putting a breakpoint here in my app and actually running it on debug mode okay not the test sorry sorry sorry so I have to run the app with the debug mode here and let's see that when my view fragment opens up so actually the on activity created this code was there I don't need that code actually anymore I can remove this stuff here sorry so I can just do it by activity view models that's fine enough the old code was there which actually does on activity created it creates the viewmodel provider.get which I don't need to do anymore foreign set my fragment opens up it should ideally make that you know call I have by the way missed one thing I should go ahead and do that I don't have added the I have not had the internet uh permission by the way which I should add uh so use this permission uh internet permission should be there in my app for this to work let's get built by then so so now what happens is uh you know fragment gets created um this new instance method by the way right now is not used because I'm handling it by the navigation XML file so it automatically gets created via that um when uh it is created I am uh you know updating uh the the feed on The View model okay uh I need to make sure that uh so this might or might not be the correct place by the way we will get back to that important question there there is a difference between oncreate and on activity created and that's actually defined if you look at the definition of view model here so there would be a life cycle of the view model which is defined that is on create OnStar downloading all that we model scope is there so fragments there is a on uh activity created so it's not there in this current docs but we will cover that uh for now inside just oncreate I have uh fixed the feed object and I have tried to you know make the update feed call here um compile is taking a bit of time I can do is okay so it did work a couple of things uh did not work so uh retrofit dot response and all these kind of uh things are not available in my class path the reason that's happening is because uh you know retrofit is not actually exposed in in the upper layers so there are two ways to solve it either I don't expose retrofit to the upper layer uh or I can create custom wrapper classes so I'll just go with the easier fix for now I will make this the retrofit implementation as an API right now here okay and then make that build so that bit just run so remember is running a bit slow I just pause the recording a while while the build runs I just gave a little bit of pause for my uh you know settle down a little bit um so let's just see that how what's happening so if I go to my repository put a breakpoint on you know get uh I didn't just update feed if I put a breakpoint there like I have done let's just debug this app and see whether the update feed is happening or not right foreign so yeah we just need uh those breakpoints uh yeah so we've already scope.launch this stuff is happening so when this stuff happens obviously you know uh one of these things would happen uh right so just run and uh it will find out a result report.get hot feed would come and it will put that value into V Dot post value obviously right uh swap is running uh nothing much has happened at this stage yet uh what I intend to do is now see how much results have been actually fresh from the data and all that stuff so let's do is uh go to our uh field fragment and inside the feed fragment on when view has been created uh let's do this thing is uh um view model dot feed dot let's put an observer on it this okay so observe and we put life cycle here I think right so uh we do free dot observe and here when we get the uh field just do a limp simply a toast uh toast dot make text pass the context require context uh downloaded uh it dot size images right and Dot post dot short and sure so another data has been downloaded it will show how many images it has downloaded uh I'll just run this app one more time okay we can also see what's the actual Network call that's happening by using a profiler if you want to but right now if I just run this app should show a post 60 images has been downloaded if I go to top shows against HD images have been downloaded right uh hot again show 60 images have been downloaded uh if I just want to show the list of images right now uh like you know what we can do here is that let's take this three second View okay so binding Dot you know feed recycler View and we can set our adapter and all of that stuff to it so we'll have to create those things here so we'll have to create a feed recycler view adapter and we have to create holder for that where it will contain the data and we'll show it on that screen uh right or we can also do is we can just paste all the data that has uh come here we can just do is you know oh just put a breakpoint here okay what's the data that has come here you just want to see it right so stop that app just run it again and you can see the images have actually been downloaded or not we can see that so it's loaded fragment comes in place uh I I don't need these breakpoints anymore it's working till here we have seen um would wait for the data to be loaded and here we go so it is an array of 60 images you can see each of those images have an account URL an account ID and they have this cover photo along with that and an ID and all of that stuff so if you take that cover photo I think you know uh so if I just take the copy value of that cover photo if I do uh just i.mgo.com and I just put that cover photo value here I believe I get the image that I need there right so that should generally work for uh you know most of the images that are getting downloaded here right uh so next step that we need to do here is basically set up a recycler view adapter and put all these images on the screen make them as cards and put some nice uh stuff around that okay but my feed is essentially working at this point uh I need to do a lot of polishing work there uh just a quick recap that what are the stuff that we have done to get this working we have got the the repository which does the get hot video top feed stuff in our view model we have added the repository we have a feed of images and you know we when we call update feed then we take the value of port or top and based on that we call get hot feed or get top feed and whatever value we get we update the feed accordingly in our fragment whenever the feed is updated we put that data show that data in in our screen okay so that's kind of why the mbvm model works you can actually test the view model without uh touching the activity The View model is easier to test and whenever the view model is updated we are showing it on the screen right now like this so we need to have a reset review adapter that's one of the things that we need to do apart from this so we're just gonna get to that part next okay foreign next let's start working on creating the recycler and showing the data there so what we will do is we will create a you know a new here an adapter and I will call it uh feed uh recycler adapter okay and this can basically extend from list adapter so uh list adapter is basically a recycler view adapter widget so you can use it recircular video adapter also you can extend I'm going to use the list adapter which is uh has some additional features also along with that it contains two things that you need to add here A T and A VH the t is supposed to be the object type and the VH is supposed to be the view holder type so I'll clear class inside here called uh you know uh um so this is the feed recycle so feed uh view holder I just call it which extends from recyclerview.viewholder okay uh this should construct uh basically you know use that Constructor and then here we will use for t for the first item so in the view model as you can see our field is basically a list of images so I can do a you know image from in good and view holder I will use these uh feed view holder from here okay uh so once we have done that we need to implement these two members and we need to change to Constructor invocation like this this should uh sorry uh this is supposed to have another Constructor which is a diffutil dot item callback kind of a thing uh right uh this is a diff callback so we can do is uh here we can just pass a class feed uh callback which extends from diffutil dot item callback of Type image and then we can just construct one of those here make it private so it cannot be constructed in other places by the way because we don't need this diff callback to be implemented in any other place this implement the members make it a Constructor invocation here so our items the same can be found out using uh old item triple equal to new item and are contents the same sorry uh old item uh uh dot tostring dot equals new item dot two string okay so that's kind of how uh we do this okay so uh there should be generally an equals notation also within data classes which checks for all the contents so you can also do is like just do a double equal to here and do a you know old item triple equal to uh new item so I'll tell you what this does uh so items the same means they are actually referenced to the same item contains the same means that the data inside them are the same so the data inside them are same is checked using the equals annotation so the equals annotation generally for a data class whenever you create and equals uh item is created for you or you can just do is you know a DOT tostring is equal to new item.2 string that's another way of you know doing it so you can check whether the string notation the Java JavaScript the Json string of old item and the Json string of new item are equal to each other or not which is to check it this way are items the same they're checking whether reference are same or not you need a diff callback so that it knows when to recycle the items in a recycler view it's a better way of creating a recycled viewer on this so you have a list adapter uh for this uh we have got a feed view holder you have to create one so here I can do is uh uh on create view holder uh we will do is well inflator equal to parent dot uh layout inflator so I will uh context Dot get uh system service uh foreign then what we'll do is we will create a view inside which we will hold each item of the field so we're going to be creating that uh so we'll go to rest and inside layout we can create one uh new the Audi source file and uh list item uh gallery image okay make it a start with a linear layout let's just say okay uh create that so it's a vertical linear layout I'm going to make it look like uh probably have a image view so the width is match parent height can be wrap content it would have a image View okay where the width would be match parent the height would be can go with you know a wrap content here by the way and then uh give it an ID so the kind of IDs we have been using with the other layout again just using The annotation this type annotation at the end uh so you can do the same thing here so uh just call it the image view only and below that we can add our text uh so just use uh with test match pair and height wrap content again uh use an ID text view just like that okay um okay cool for preview purposes what we can do is we can add the tools NS here [Music] we can add the tools namespace and then we can add here that for tools purposes tools uh background is say color gray and let's give it a height tools layout height 400 DP okay um that's what it's going to look like um good and uh for the text view below that we can do is uh again give it a so the tools uh namespaces are only used for displaying inside the studio for previewing purposes they are not affecting the actual app in production they don't even make it into the APK right they are good for preview purposes right here so I'll give some tools uh text here uh image description here like that you can just probably Zoom it a little bit more uh and see how is that looking uh right let's give it some adding of uh 10 DPF viewer uh 20ps too much 4dp let's go with 4 DP all right um let's give it a text appearance caption the caption is a good text appearance to give maybe and we give 4dp uh here that's where the caption comes up I'm just going going with that okay so let's call this caption text view by the way and that's how it's gonna look like okay so the feedback adapter what we will do is just run rebuild project once this would create the view binding for this XML file otherwise the view binding does not exist by default and in our adapter we will do that stuff there's some red underline for something uh okay on create viewport we need to return uh Field view folder like this I'll get to that uh yeah let's just rebuild the project we will find that there would be a list item gallery image uh dot by dot binding this I can then import uh dot inflate inside this inflator in this parent attach false I can do like that return feed view holder and I can pass basically um okay this uh binding itself so what I can do is uh this dot inflate creates me a list item gallery image binding right uh so what I can do here uh essentially is uh get this here uh instead of item view in the recycler view I can pass binding dot root here all right uh pass this item while binding equal to this and pass the binding here okay now we have passed the binding there inside my feed view folder we can essentially create a few uh items like you know caption text view equal to binding dot caption text View the image view uh binding dot image view like that these kind of things we can keep there right or or we can do is uh just keep the binding here uh not deal with these things we can use them later on anywhere where we want to right so that's my view holder just like this I have passed the binding uh right um in my on bind view folder what I need to do here is that uh I will get the the item using well image equal to get item for this position okay and then I need to set the data so I will do uh folder dot binding dot caption textview.txt equal to image dot what's there inside the text there is some kind of text available um so let's just go over that uh you know make a call to the gallery tag API right Gallery uh tag API the hot one so just make a call to sorry Gallery uh section album previews I'm going with true and uh this I'm going with the hot so if I send it what information do I receive so there's a title that I received so let's let's use the title that's the text that's easy to use so I can use the title here and just going with that okay so hold dot binding dot cache index be equal to title and we need to obviously set the image itself so for setting the image what we will use is we will use Glide so how to use Glide let's check so this is uh image loading Library called Glide okay um so to use Glide essentially you need to add this two lines okay 4.1 2.0 is the latest so I'm gonna add it into my apps implementation here foreign loading has been added let's just sync the library once how to uh set things there we just need to do glide dot width and pass a context and then load a certain URL into the image view okay so we'll just write it kind of like that let's just go with that let's Let It build and all that stuff but there are a couple of other Android image view libraries for Android image libraries if you search for there is Fresco there is a Glide there's a bunch of them and if I look for 2021 there's some latest libraries that are available um so this coil has come which is I think these days pretty popular and it is has 6000 views as well um and apparently less than Glide so so that's what coil uh says so to use coil you can do image view dot load and just this uh there's a load extension function so we can use coil in fact instead of Glide by the way uh so let's go with the coil coil seems to be a better implementation uh it's a smaller and faster implementation and it's more modern so you want to use coil just add implementation uh io.coil like this uh you need the brackets here so we'll go with coil uh right uh coils latest release 1.2.0 uh to do imageview dot load and you just pass the the URL kind of pretty easy right uh it is extension function in kotlin so it's more modern kind of Library quarterly independent so here we go we will do folder dot binding dot imageview dot this load function uh so load is apparently or disposable by the way uh it's a disposable so you know probably can be used with core routines and all as well but for now I'll just add the load and we'll put the URL there so how what kind of URL will be put there so if I look at the cover it seems so if I use the cover image.cover like I have just shown if I just put the image dot cover in a JPG like this it gets me what I need so I'll do that I'll take this text Dot load I will pass this and instead of this I will pass image dot cover okay uh on binary folder we're not it's a band okay this is the recyclerview getting created good now uh you need to use this recycler view so to use this recycler we obviously I will go to my feed fragment uh when the view has been created I'm gonna do binding dot feed recyclerview dot layout manager equal to I'll put the linear layout manager okay then I will do binding dot feedrecyclerview dot adapter equal to and I will create an adapter so I will create a private Val adapter feed adapter equal to free recycled after I'll just construct one of those three adapter great whenever the view is loaded I'm gonna do is uh feed adapter dot um submit list and I will submit this list of images into it which is going to be it okay that's it essentially this should work uh it it I have got a list adapter inside which I control list of images I've created the adapter where I show the image in a description of that stuff there and I I might need to tweak the UI a little bit for for making it look better I'm getting to that part uh very soon right uh what else I don't think we need anything else as soon as the data is available to us we are just setting it off here Let's uh go and take a look at if it works or not okay we we need to add progress bars and everything so we'll work on that stuff pretty soon uh a couple more to Do's maybe that we can add here is that this argument also we can turn it into a you know possibly a up turn it into an enum here so I'm marking it as to do we can do that later on very soon here we go so images are coming in and uh for the description is there except it needs a placeholder image as well so uh otherwise it kind of looks like these images loading little later and all that stuff uh there's a bunch of things we can do here uh right so with these images uh you want to push them into square or something we can do that and other things that we can do here so if you look at the image view here we can do scale type and and we can do uh fit at the center fit Center kind of scale type by the way or you can do a center crop as well which crops the center of the image bunch of things we can do in setting up the images there some images are kind of big and some images are small and all of that stuff is there so I'm doing the fit Center one which uh kind of puts it like this uh we can do a uh you know we can do a Center crop which generally would kind of crop on the center of the image which is needed inside that image like that like this so this way only the center of the image uh shows up here stuff like that we can we can do a lot of these Transformations accordingly and you know see what uh suits as well and when we click on that image we can make a bigger place where we can slide through the images and all of that stuff we can do right um up to you uh kind of things right uh so yep I think uh you can go ahead with most of the things here um so images are getting shown the description is getting shown as well if we need a you know kind of placeholder image or something like that uh we can deal with that stuff as well so we can do uh when we're doing it that load Dot so you can add actually a placeholder uh and we can add a drawable there inside that placeholder um so you can go to placeholder image PNG you can just search for one that is like a bunch of them we can use any one of them let's say we want to use this one right so it's a good placeholder image uh it seems like uh for our use case uh or there is this one which is a small square-ish one looks pretty stupid all right we're gonna go with this one so I'll just uh open this image somewhere placeholder PNG so let's save this image so let's say this image somewhere in our code so development wherever we're doing this uh so app uh I'll go to SRC main address and inside drawable I will put this placeholder uh image.png so I can do is placeholder r dot drawable Dot import the R class or placeholder image I can put it as a placeholder there okay this is uh what my placeholder looks like drawable placeholder image it's it's pretty big actually uh 1200 cross 1800 you can make it smaller if you need to uh that's also fine so we put the placeholder image there uh there's other things that you can put here you know uh bitmap config and add header and Crossfade and all that stuff uh okay whether to use a cache or whether to you know use a life cycle of your app so you can add a life cycle by the way here uh in the adapter you won't find it so you have to get it from the parent uh those things we can do uh anyway let's just run this again and see what happens in this case when we have that placeholder in place okay we need to restart our app or something because the placehold remain needs to be loaded so it's taking the whole space like this Center crop uh we can do is fit Center is also fine in this case the entire image would actually show up so till the image comes up it will actually be these uh things that come up in place of that okay there's a lot of improvements we can do there we can put a loader there or stuff like that and we will get to that uh eventually okay we can set a maximum height in a minimum height of that image as well around these things okay a bunch of stuff that we can do or we can make it you know we can give it a layout width of uh you know match parent and a layout height of around like you know uh 400 DP uh 400b is pretty big I think we can give it uh 350 DB okay this uh we don't need this then anymore this is a 300 DB like that fit Center uh you can do it uh in that place right just load it again so it will be fixed size everywhere in this case some images might not load and those cases then you might need to handle them separately as well so if the images uh probably do not load you can create a image error placeholder as well so placeholder error image so something like you know broken image kind of a thing uh stuff like that you can also add probably image currently unavailable or you can design your own stuff as well around that you can do something like that so for now just you know you can do is in case of error by the way in your adapter so for error also you can pass the same drawable just saying okay and if image is not able to be loaded it would show that placeholder right somewhere any in chance image does not loaded keep showing that placeholder and all that stuff so we got this feed kind of stuff done here we got both the feed so we got the top feed and we got the hot feed okay so this little layout shifting thing that's happening that's because I'm sharing the uh view model you can do is uh in my view model thing in my fragment instead of using activity view models I can use just to view models I believe um so if I use just few models in that case I believe a separate view model for each instance of the fragment could be created let me just quickly check that in that case that you know layout shift problem would not happen yeah so I'm not sharing the viewmodel across these two so that problem is not happening okay uh this image the you know the placeholder image we can actually make it a little smaller as well by the way so just uh kind of open with the overhead terminal and I'll just change the size of it so more if I placeholder image as the drawable View resize it to something like 500 cross 500 or smaller than that size I'll just do it so now it's should have I don't know uh does not seem to have run uh is 500 33 now which is fine I can set my type to Center crop again there yeah good so here we got our sort of feed we can improve these uh you know items and all a little bit more as we go ahead but we've got a basic feed working but we don't have that uh top uh stuff yet which is uh where we have our stories right so next up we will do that um right before we do that let's do is remove that nav bar from the top so that can change the theme so if you go to themes um right uh there is themes and themes night so no action bar let me just do okay so don't use an action bar then my app goes up to the top right uh something do not work setup action bar with nav controller I don't need this actually uh since we are not using an action bar now so the padding and all we need to deal with uh something else in that place if we do that so our main activity uh layout it has this margin at the top which we can probably deal with uh padding top we can just remove this yeah so you don't need an action bar at the top uh you can just have the images right at the top like this okay seems good um I'll just mark it here that we are not using a foreign this part out so I'll just write action bar code here I'll just comment this part out of the action barcode which we don't need for now okay great science server activity we would need at the top of the screen uh we would need actually it's a constraint layout which we don't need a constraint layout by the way so that's fine let's just see this fragment is there it's constrained to the top and the bottom and all that stuff is there it's um we'll put a recycler view here at the top the width would be match parent height would be wrap content okay I'll put a tools height parameter here so of 50 DB so you see like what kind of height it's not a 50 DB probably 100 DB so that's where my stories will go at the top okay this recycler will give it an Android ID uh stories recycler view okay I'll give it some constraints and all since it's a constraint layout right uh we could do like a bunch of things uh here I mean we could uh use a linear layout and all of those things this fragment has a bottom to top of nav view we have done that's great foreign content so we'll do a constant layout top to bottom of uh top sorry so first of all this recycler view uh here I will do uh left to left off parent um right to write of a parent top to top of the element okay these are all uh the height is wrapped content right uh just say we get it maybe even 64 DP Maybe okay that's kind of height or 75 DP we'll just see what what is the probability best height and this fragment we will just constrain uh top to bottom off uh the storage recycler view okay uh that's how I look okay uh just exactly who does not have anything right now but let me just uh quickly run this so that's the recyclable inside which will put those circles okay so now uh if I actually give it a instead of tools if I give it an Android layout height right and then I run it sorry sorry uh my bad here itself it will go 75 DB just run it once so up it's not happening uh somehow let's see why not happening fragment constraint bottom to top of nav View and laptop the bottom of stories recycler view it should have happened uh but but let's see uh as because in the width and the height is match parent which we can deal with probably let's see this exactly who does not have any data inside it as of now if I just give it a background of color black Maybe we'll just see if it is working correctly or not working correctly or is it coming over top of it it's coming on top of it which is uh not the best thing to happen right now here so try to figure this out why that is happening or like I believe the better way is not to use a constraint layout in a case like this and use a uh use a frame layout okay great the recycler view check all these constraints um layout head is 75 DB right bottom navigation view again height instead of wrap content let's give it a height of 75 DP let's just say okay uh check all these uh constraints again layout width is going to be match parent okay height is 75 DB margin start and end can go away gravity will give bottom so we'll go to the bottom of the screen automatically uh we can give it 64 DP I think here good enough uh right this fragment here we give it match parent match parent like that remove all the constraints uh margin top can be 75 DB margin bottom can be 64 DB sort it right it's much better way to handle this stuff so there's space for the recyclerview at the top uh bottom does not uh collide with things as well so things are kind of better handled this way okay um cool right now this recycler view needs to have those photos inside that now those photos uh there are a couple of options that we have we can either go with circular image view the SM Library Android Circle image View okay or we can try with a card view as well so I think we could Android card view image corner Circle I think we can cut out things with a circle view as well with the card view as well this is now shown here that you can actually create using the Android X Card view you can give it some Corner radius and layout margin and so and so and you can actually get a circular stuff created out of that so let's do the card view stuff let's use card view which would not go into using third party like this this library is pretty famous Library by the way uh to be very honest it has 30 000 Stars pretty pretty famous Library uh but it's a bit old uh it probably does not have any latest code added since 2020 December already been four five months we can use the card View Library so I will do is uh add the card View Library do we have the card view already here because we have the Android X Card review stuff here so what I will do is I will create a card view for that uh image thing or the top there and create recyclable for the same in fact we can use a card View for the the items here as well so second so this feed item stuff that we have [Music] list item Gallery here also we can do is uh actually create a card View right make it a card View card views are frame layouts by default so if you look at card view they extend from frame layout so here what we're going to do is we give this image view 350 DP uh like this uh then we give it a or we can just add a linear layout inside that of width match parent and height wrap content and orientation vertical and then put these two things inside that sorry got that stuff there so give this card view a margin of 10 DB so we've got a margin around that um and we need to add the app NS okay we need to add a few things like card Corner radius 4 DB so makes the card having some radius maybe you can add more as well and card elevation less elevation let's say Just 2 DP of elevation uh there is supposed to be a stroke color as well or outline so you're going to add outline and all that stuff as well but we'll get to that let's just run this see what happens so every post becomes sort of a card in this case like this then there's a little bit of uh padding between the cards which looks a little odd right we can deal with that we can deal with that so let's make it 6 DB sorry 6 DP okay yeah food if this distance on the left and right looks a little uh more than less than the one on top and bottom we can handle that as well we can do margin horizontal and give a margin horizontal of 8 DB and give a margin vertical of 4 DB so that you know the the gaps look exactly the same because 4 plus 4 8 would be done oh they look probably better the distance probably looks exactly same I believe now right yeah yep and here we go uh maybe elevation 4 DP is also fine you see how that looks like cool so I've got all the cards here uh in our page looking nice how about list items for the top view right so we'll have to build those as well so let's go and build the one for the stories okay okay let's uh proceed with the stories part here okay so I'll just create a package for stories here inside UI and inside main activity like I have said we have got this uh you know layout for activity main we've created this recycler view thing here okay uh we'll create a stories I'm going to create new um what's in charge of file stories view model okay uh which extends from view model um right it'll write all the stuff there slowly one by one uh it'll be kind of like the feed view model right we need the repository to go here okay and or we can call it the tags view model maybe because in our case it's the tags or whatever so so with the tags we can do is um where do we get the list of tags from so the tags are actually available uh here in the API so we get these uh tags response inside the tags response we have got uh the data which contains a list of galleries so or let's just take our tax equal to uh mutable live data of type list gallery by the way it's inside tags inside data inside Gallery like that it's there a couple of things we can actually clean up here as well so if you look at the top post and if you look at the image model here so the top post and the image model are kind of very similar account account URL add type and command count cover cover height uh command cover cover height cover weight edited so so seems like pretty similar the images count is ADD album views port all the stuff is there actually uh in fact this is uh probably a superset because this contains 99 lines this contains uh probably less than that 69 lines so less parameters here but what we can do is actually remove that stuff top post can be of type image itself okay this Gallery data we can actually probably put it outside the gallery object okay uh so there are couple of ways to do it uh one is you can just use uh sorry you can do right click refactor and you can move it uh move this to metric refactor and more move to upper level class name refactor so gallery has been kind of uh extracted out here do is uh put it here new content okay so that's where we'll use country from better um makes the files a little uh cleaner in that sense so our stories view model we can actually use a list of gallery this okay um and we can do well tags equal to uh well tax of type live data list gallery okay fetch tags maybe you can add a method called Fetch tax fun fetch tags what we'll do here is we will make this uh we model scope dot launch on dispatches dot IO again very similar to how we have been doing in this other view model okay uh so what we'll do here uh we'll do repo dot uh get I think we have not written that stuff so suspend fund get tags is going to be a list of uh Gallery we are going to be getting well response equal to API Dot gettax and return response Dot body is available then inside that would be data and inside that there would be galleries okay could be null so we return that way so in my stories we model we do fetch tags in the repo dot get tags sort of like this okay so we do that and we put it inside tax dot post value uh that's that's the stories view model is gonna work okay now inside my activity main activity I can do is uh private well uh stories view model by view models okay okay so you got the storage view model in place when the stories view model is in place in oncreate what I can do is uh stories viewmodel dot uh fetch tags I can start that happening and so on resume we can do certain stuff so its activity is resumed they can do it instead on resume we can do it inside on create itself as well but let's just say we can do it in on resume what we do is uh stories viewmodel dot uh tags dot observe uh then we can pass observe This and like this also it's possible to do in fact in the fragment one a little update here I can do the same thing I believe using the same way yeah if you like that okay cool uh so this and uh when it is getting observed and you do a bunch of things here so the bunch of things that I need to do here is uh binding dot it has a storage recycler View so get up The Binding set content view has happened this is the navigation stuff so I'll just write here you know uh even in fact actually put them into functions which is kind of a better thing to do so you can take all of this stuff out and create a function private fun setup okay so do the setup nav here so I call uh setup nav okay uh stories view model I do this thing here um set of binding I'm done uh I will do this thing bindings dot source recyclerview thought layout manager equal to linear layout manager I have to pass a couple of things here try to pass context then I would pass orientation would be linear layout dot horizontal or should I pass recyclerview DOT recycler horizontal I believe is just linear layout dot horizontal itself right here so does not really matter anyway so uh yeah okay so I've created a linear layout manager which is horizontal in time uh reverse layout is basically tells you whether drive to left or left to right layout happens so that should by default be false but I have to pass this third argument because there is either one Constructor which takes one argument or another which takes all three arguments there is no argument which no Constructor which takes this two arguments the third one as a result of that if I was only passing context then none of these two were required okay um okay let's go to the setup nav and all that stuff adapter so we need a raptor stories adapter right so it's a new uh pretty similar to how we did free recycled adapters we do a you know stories recycler adapter which extends from listed after game okay T will be of gallery type here and view would be off I'll create a class stories view folder which extends from recyclerview.view folder okay um we'll get to there so we'll do this View kind of stuff there in this case it would be uh stories view holder like this here so in the recycler view is wrapper correct now uh change into Constructor invocation for uh difficult callback uh put the methods here okay we will go and create that stuff here so we'll create a class stories the diff callback which extends from diffutil dot item callback of type gallery have to do a bunch of things constructive invocation implement the members this is uh gonna be old item equal to new item and this is gonna be old item new item you have to add a suppress for this don't need this I believe anymore now uh and we can write here stories uh diff callback like this you can make this foreign okay cool so okay create view holder what we need bin view holder what we need so we'll get to those things so we'll need a layout of course for the items that will go here so list item story so new layout so it's file for that list item story uh make it a linear layout is fine to me okay so to be a linear layout vertical type split I'll just go ahead and see so how do you go about doing this the the height and weight I'm just gonna see so so we have made a couple of things we have made this layout activity main I have given space of only 75 DP at the top so I'll make it accordingly I will make it height I'll make uh 70 DB width I will make it uh 64 DP so look a bit like this it will contain an uh card view by the way first of all with uh width and height of uh 64 DP and 64 DP or I'll just go with 60 DP and 60 DP just bear with me okay I will give it a card Corner radius and all that stuff uh I will give it off 30 DB start looking a bit like a circle I know if the shape is starting to look up here or not yet so look like a circle I will give it a margin of file DP I think I can't afford a 45d margin I can afford only a 2 DP margin because the outer view is like that Let's do let's give it 75 DB total height uh let's give this uh layout width of 65 DB 64 DB which is fine um 56 DB let's just say we give a 3 DP of margin to this we'll get around to it we'll see uh okay um so card Corner radius is 30 DB which is fine there is something called a shape I think I believe either Android shape or app shape uh so just start Corner radius itself is needed we'll just get to that okay inside this card view I will put an image View with width match parent and height match parent right uh I'll give the tools and S here so that I can write here that tools so background color black okay so that's how it's going to look like um okay cool that's how my image view is going to look like that's a tools background so this is just for previewing it will not actually reflect got it that's my image view here uh good then what we do here is that we take uh below the card view after the card view I take a text view here width match parent height wrap content and I'll give it some text here so I have to change the size a little bit I believe uh text size maybe uh 10 SP smaller uh probably the entire thing not looking exactly very very great uh zero DP margin and uh by adding also zero DP I guess line height can I reduce what can line had to be uh I don't know uh edit SP okay very visible probably uh that's how it looks like uh avoid using size smaller than 11 SP that's what it says uh anyway I'll give it a gravity of Center yeah uh text appearance for text appearances do we have a small can you have a small text appearance captions subheadings small medium let's see let me just go with small we will figure those things out slowly slowly The Styling and all of that stuff uh that's how it looks like uh give this whole linear layout a horizontal margin margin horizontal of 5 DB okay so this is what my list item story head looks like I will give this image View story head image View and I'll give this uh story head text it's just something something like that uh give it a rebuild uh so that I can create list item story head view binding here on create view holder I will have to do is uh well inflator equal to parent dot context dot get system service layout inflator right and then binding equal to uh list items story head binding dot inflate pass the inflator same here pass parent and false to attach to root let this take a binding here and let this be binding dot root okay so we'll pass the binding stories uh returns story view holder with the binding here well Gallery equal to get item of this position correct and then we do this stuff we will do folder dot binding call it here holder Dot binding Dot story head uh text view dot text equal to and I will do Gallery dot title is there all right Gallery Dot name is there which is fine and then holder dot binding dot story head image view dot I will load I will load what will I load let's see so whenever we fetch for all the gallery uh by by tags right so if we send we get like this list of tags so this trees is something and all of that stuff so we get a background hash by the way this is background hash is probably is useful you can use this background hash and and uh and you can use this here which gives me an image sort of like this okay so if I use this background hash here uh again the same way take this format put Gallery dot background hash the Red Dot oh why I don't get redox um interesting get tags what did I get out of get tags tax response I'm getting data starter success am I not getting data status success there's something different here where am I making this request so slash tags if I make a request to slash tags create something very different here data contains tags oh it contains galleries I did not need the galleries did I I have got most viral User submitted random no I need the tags actually so the tax response contain data and it contains Gallery so it contains tags so let me just change that stuff up a little bit uh so got a few things bad here let me go to my view model stories view model tags is going to be list of type tag okay uh list of type tag get tags list of tag not the galleries dot tag is what I want so cool I get the tags once you've got in the tags uh adapter code I need to change a little bit now here so where tag equal to get item position tag dot let's go to the attack dot name do we get a tag name tag has names awesome tag as a display name as well so is the display name different from a name usually I don't know but display name sounds a better name to be used oh there's a space here so I will use the display name interesting fire change tag to here as well change this tag everywhere I think we're good now has a display name perfect uh okay so here it would be tag Dot background hash okay on binary holder we do type dot background hash like this great let's run my app and see if this kind of works or not I have set up the view model to fetch the tags on the tags available I have done is oh sorry um private file stories adapter equal to story recycler adapter okay uh adapter equal to this storage adapter great so now I will do is binding.this dot adapter Dot storage adapter dot submit list uh it right so I've created a storage adapter attached it to the adapter of the recycler view create a layout manager which is horizontal in nature and then the activity starts I set up to fetch the tags when the tags are fetched set the data here adapter handles the rest of the stuff let's just run it once see how do we get it interesting only thing is that the scale type here is a little bit of problem which we can fix how can we fix that scale I think we can use scale Dot fill we're going to scale dot fill type should do a center crop kind of a thing in that case thank you fill the image so that both dimensions of the image will be equal to a larger than it does not happen that way the way I wanted it uh we can check that and set the scale type here if I want to in my item image View scale type Center crop okay so tree is the OC contest funny movies to watch and all that stuff is happening which is uh sort of great not all are loading at the same time but but we can again deal with those things slowly slowly we can deal with those things one by one a couple of things we need to make this a little bigger which is what I understand so I'll go to activity uh so let's take a look at the layouts again so here's the activity layout this needs to be 85 DB I believe this does not need a tools layout anymore in that case which means here my height can be 85 DB a lot of space this text could be 12 SP in that case 11 SB in that case let's just run that and see where do we get there with that interesting liver padding is also required so I'll make this 85 DP I'll make this you know 90 DB and I will give it a margin bottom here of 5 degrees uh sorry so we need to make a different changes so let's make this 100 DP let's give it a top of 100 DP as well uh or I think 90 DB is fine and 90 TPS cool here we have 85 DB and 5 DP now let's let's go cool what happened um margin top 90 DB uh did that not work okay that worked good great uh top stuff is there and what stuff is also there interesting and all of the stories are there okay so fantastic you want to pre-load them before they come to the screen uh there is stuff we can do about that as well by the way uh so we can check coil KT preload is there like a preloading stuff uh to be done so here's how to do pre-loading to pre-load an image into memory and Q or execute an image request without a Target so how do we do image request dot Builder data is this uh size is going to be a view size resolver uh so we can do something like that we can pre-load all the other requests as well via the view model actually okay let's see uh how we can do that so that you know when we scroll they are not coming out blank like this um right so we can do some preloading on that stuff so but this is like the tags now if you click on that we should show images of the tags which is another thing that we need to do so let's start working on that as well by the way okay um let's finish this okay uh so now if we get a tag as a story how do I find out the photos inside the story like Instagram does straight uh so so to do that um you'll go for gallery tag like this okay the next one so in place of tag name if I pass uh trees like one of them was given uh sort window page again not mentioning them uh and send them so get this data which is uh consisting of uh the gallery object and further there are some items inside that now these items here are some title inside it uh some ID inside it uh there is a link uh it contains tags of that image and it contains images within it okay um the ID that's there can we actually use that ID for something uh ornament uh uh I don't know uh Maybe I dot go.com like this if I pass the ID here uh do not show something like that it will show the images within it uh so so basically the first image within it would be uh the URL which we can uh sorry get that pass there Okay so there could be more than one images actually within that stuff within that particular tab it could be an album right uh in fact his album seems to be like true for most cases there is very rarely is album false uh in case of his album false there is data directly available here uh you know image so that's kind of the setup there so tag response if I just do tag response the data consists of I just let me just copy this entire data for a second and let me create a tag response here models like data new uh here Advanced it should have a lot of determined let's keep everything nullable annotation for code gen and extensions seems okay so this is called tag response rather than tags response it's for a particular tag now actually inside this the data that comes uh an attacks response so this contains this data as well which contains featured galleries tags like that this data here contains accent background hash background is animated which is basically looking a lot like the gallery object is it uh oh so it's looking a lot like the tag object right accent background hash all that stuff so we can turn this data into a not really because this also contains images within it uh description annotations I think we don't need this stuff we will remove that from there contains item so items each item is basically so an item is of Type image which further can contain images interesting uh okay so you can make it a little recursive we can go to our image object and does this contain a list of images so actually image contains a list of images by the way uh it's it's recursive in that sense there is images which is a list of images so this item stuff can be actually image which makes this redundant you don't need that and yep so I can go ahead and close this stuff out right then what is data so this data is quite a lot like the tag object so we'll call the tag object it contains does it contain items it does not contain items here but it contains accent background hash description all that stuff uh thumbnail is animated all that stuff is there so this is uh 29 lines it's not a good way of doing it you should actually go and check all the fields I'm really doing it at a hurry 31 lines this has more stuff so maybe just put this here into tag right it adds the items actually that's total items as an INT which is seems to be part of it great so we don't need data here which can actually be tag sounds great Gallery response actually has data like that type response templates data data It's featured Gallery so yeah looks cool uh to me tags response so this is a tag is on for any one particular tag and we can add a test for this uh so let's make a get request to uh where Gallery T trees like this so Gallery slash T slash tag and suspend fun get tag gallery uh uh we can pass path tag it's going to be a string basically right and it will give response of type tag response right good so let's add that to our tests as well so here's what tests are very useful you don't have to actually go and change the code inside your app you can make changes in the text and quickly check out your things that at the logically are working correctly or not uh get tag tree working so tree stuff boy right right or I can check for the or Target yeah I'll treat that okay uh get tag gallery trees I think what tags did I get right so all was one I think we can go with R1 to get together and the small body is not null let's just check that we get this response or not uh debug let's hit it okay so do we get a list of images out of this or not so response um body data contains contains what does it contain where are the items oh there's the items it's uh 60 items out here each one of them is an image has an account URL um should have further images within that right so either it has a gif so GIF vs are basically copy the value here if we extension it's I think a extension it's a video file so it's a extension created by Imgur themselves interesting can I just get the GIF out of it apparently can I can get the only pure zip out of it I can get the MP4 out of it fantastic I get the MP4 out of it as well so I can make it a video player for this if I want to right can I get a JPG out of this just still wow Android jpg or this as well how can I get moving jpg is this a gif oh it's a gif so I look jpg then get Negative GIF at the end of it but not a problem um so we either are gonna get uh is album in this case no I think yeah so either like his album is supposed to be false but if his volume is true for any item if his volume is true then there will be images right and if there's going to be images then uh I can get that image out of there okay so great seems pretty good uh is there a way in the input API forget only jpgs or not let's Chuck that we can do that filtering on our own on our end okay uh never mind but but uh we're getting the data here okay so once we get this data with that data what can we do so with this data what we can do is we can create new activity where we show that uh story layout that Instagram has where there is a bar at the top which uh sort of Scrolls through stuff okay uh let's let's do that right let's do that um so we will need to rearrange the stuff here a little bit let me call this as home package stories view model I think we can call this as a home view model I put the main activity into this gets refactored there let's create a new package called story let's create a new activity here and I will go with an empty activity so I'll go with the you know an empty activity of name story activity story activity uh generate a layout file activities underscore story sounds good so you need to add the story activity and the main activity and all that stuff so you need this cancel um just load the file system changes and uh so I think I got a little bit of problems here import VR file here I think in main activity also I might need to import the r file it's already been done uh manifest in the story activity and the main activity cool so I'll send an intent to the other activity from there right so we'll send a intent to the story activity does the Android navigation graph work with activities let's just quickly check so if you use navigation component you are generally using um between fragments so you can add activity destinations as well apparently uh from A to B so you can do a start activity intent or you can add an activity also into your navigation graph apparently that's great I can just start with the new activity intent directly like that but yeah uh we will see activity destinations later on for now I will use a simple activity stuff so if you look at the navigation it has like a design view where you can see what all navigations are happening navigation navigation top and all of that stuff we can create another active navigation grapher stories but we don't need one we can just simply send a new intent to that okay so what happens is when I click on any of those stories uh which is inside that adapter so I'll go to the recital adapter and uh if I click on holder Dot binding dot root dot set on click listener right so I will uh start activity so to do context first so sorry you can just do folder.apply set on click listener uh context dot start activity create a new activity with intent to uh foreign story activity story activity class sure right so we'll open the new activity in this case uh if I click on any of those things just quickly check that out okay so if I click on any of those it opens the story activity come back from here it just opens that okay uh what do we need in a story activity and all that we're going to be working on that okay so we'll pass on the tag name I guess I'll pass the tag name into an argument into that the story activity needs to have a you know story pager view model or something like that okay uh we'll call this as the home view model by the way uh foreign model uh we can call Main activity as home activity by the way uh cool and here create a view page here so a view pager is basically how you page through different different images in your screen right so so you can use a view page here right and inside a view pager we can page through uh different different items right and we can create a pager adapter uh for that so we don't need a pager fragment page adaptive we can just use a normal pager adapter uh pager adapter should work for us there's a view pager 2 as well I believe and this is the newer view page apparently um okay View page.2 and it obviously has got a view pager adapter also as well I believe viewpager 2 dot adapter so I can create a new pager adapter here I think a normal pager adapter should be okay for me so let's go ahead and build that stuff so I will add in my activity story make it a frame layout God I hate the fact that they always make default constraint layout everywhere because most of the views don't require a constraint layout it's too complex for that frame layouts are kind of pretty cool enough for more stuff so what's the difference between view pager and view pager two what's the difference uh if anything new available from viewpager 2. that offers enhanced functionality address common difficulties if you wrap or okay if you want to use V Pages nor slide between fragments and create swipe okay slide between fragments I don't need slide between fragments I believe uh I just need photos just need simple views right um web page supports vertical paging uh view page okay vertical paging so maybe we can use Instagram reels kind of stuff maybe I know you know right to left support modifiable fragment collection uh we widget was built on recycler View interesting let's open view pager 2. uh how can I use a pager adapter update the XML file to view page.2 update your adapter classes when we oh we just use a recycler view dot adapter with you pager 2. is interesting we can use uh recyclerview adapter itself because it's based on view pages so let's create a view page of 2 here match parent match parent let's give everything to this view picture okay uh let's call it the story view pager uh that's my frame layout um then then then uh my activity we need to access this pager what do we do so new kotlin class story pager adapter extends from recycled view dot adapter I think I can extend from listed after itself right because I mean List adapter extends from recycler view dot adapter actually right so have to do all that adapt stuff again which is kind of boring you have seen all of that happen once again you have to create a band view holder create view holder you have to create a stories so you have to create a class story page view folder extends from recyclerview.viewholder uh make it Constructor whatever whatever it will contain a story page view holder and first argument here would be of which type of image type okay uh get all that stuff ready we need to implement these two things then we need to implement callback we'll create Plus story diff callback it stands from diff muted or Titan callback or type image right make it Constructor invocation Implement members uh pretty similar again this is kind of boilerplate looking bad bigger apps like kind of places I've worked at we generally create a base recycler adapter which does this boilerplate in one place you have to write the same baller played over and over again right um but for now we're just doing that and uh Universal recycler View kind of things that we make in other places so we had that similar stuff in in zomato we have some stuff in Target so a little bit does that with big apps you see there's a lot of common stuff we're writing inside every adapter anyway uh besides the point uh this is the view holder we will get to that we hold a staff soon uh okay what do we need um we need a pager items we need a page item story uh make it a frame layout foreign that's it match parent match parent that's it uh just give uh story image okay that's it page item story just uh rebuild the project so page item story binding I will get there on create viewfolder I'll do while inflator equal to parent dot context dot get system service layout there right um page item story binding dot inflate with the simulator inside this bit attached to root false where binding let's make the Constructor here use binding binding dot root there right okay the return story view holder with binding here sorted on bind view folder what we want to do is uh well image equal to get item image get item composition okay so if image dot is album ah I think I've got a wrong image here uh not this image it is supposed to be the Imgur image all sorted if image dot is album so if it is album then what we do is uh thank you image Dot images and image dot is album Dot images count not zero okay so in that case I will do image dot images 0 dot uh link I think right yep thank you foreign okay so you get the image URL okay um then image URL is if it is available then we do folder Dot uh binding how to create value binding here folder dot binding dot story imageview dot load URL okay so load that image there okay if it is available to us cool uh this is a story will get loaded or something like that well make sense that's my story page adapter I can page through that and then we'll see how this works out you go to that activity okay uh so we create a story view model now so the story activity now we create a new uh view model story view model which extends from view model um give it a Constructor uh just like any other view model you need the repo so just copy this and I will change the stuff so instead of tags we need images which is going to be of Type image it's gonna be in good image okay great uh fetch tag Gallery I will just do and I'll pass uh tag name of type string then we'll do uh images.post value repo dot get uh I have not added that stuff here so suspend fund get a gallery tag name of type string returns list of images how do we do that well response equal to API dot get tag Gallery with that tag name and return response dot body dot data Dot items right so let's forget it okay image itself could be null apparently in this case so in the repository we can do like dot filter not null get cool so get the non-nulled ones at least because in the in the code it says it could be null apparently we can fix that part by the way like it should probably not say null there uh here if you look at uh the report the Repository get a gallery uh tag response contains it a tag images probably should not be null here should be list of non-allible images yeah uh the list is null yeah I think that's a better way to sort it so we don't need the question question mark here and we basically don't need to put the filter not null here because it would be non-related okay so fetch Target is done here in my store review model okay uh story review model I will created my story activity um so I'll do is private files to review model by view models tutorial model okay I don't need this cool so I'll get my story view model by the way everywhere else my movie model should also be private I believe it's yeah it's private so this is my storyviewmodel I've gotten it store reactivity inside on create I'll do story viewmodel dot first Gallery tag and what tag name will I pass here so for that I will do uh added tag name equal to um intent dot arguments get string get string extra and pass that okay so tag name dot let I do that so if tag name is available then fetch that data and then I do inside on resume storyviewmodel dot uh images dot observe on this images are available then what all do I need to do is that by the way you can use bindings here as well so just set content view like this we can do well private late I Network binding is going to be of type uh activity story binding okay um we can do binding equal to activity storybinding dot inflate on layout inflator set content view binding dot root like this okay great uh what else we need to do is we need to set up a adapter and all that stuff for this here so binding Dot storyview pager dot adapter equal to and here I can set the adapter to a private well a tab story pager adapter equal to story pager adapter like this story picture set that story pager adapter dot submit List It okay believe I don't need to set anything else um let me just quickly check how to use viewpager 2. this is article we can check that out as well it's what is the code where's the code so bogus ahead of you pager here uh and and then what we need to do view pager we just need to add the page adapter we don't need to do anything else it seems like okay so could let's just run our code and see if that works oh by the way it will not work directly like this will not be able to get this tag name so I will pass this tag name how do I pass this tag name uh um foreign pager adapter oh sorry I need to remove this stuff and I have to make this there the other thing is that start activity stuff that I had inside my adapter here I have to pass this foot extra tag and inside tag I will pass tag dot name okay so I pass the tag name inside the intent here I receive that in my story activity here when I received that I start fetching a particular diagonally accordingly I believe this should start working click on any new activity opens hmm not bad right the images are not pre-loaded which is a bit of a bummer okay uh so if you just log all the image URLs so if it does not end with JPG we can not show it or stuff like that as well uh so I just do image URL stuff here so in my story pager adapter in my binding let's just say I add another text to view here at wrap content wrap content give a gravity of a center bottom image URL text view let's just call it that and here I will just do uh folder dot banding dot image URL text to view dot text equal to image URL I'll get to know which ones are not loaded and why it's not loaded actually so auto scroll as well we'll get to that as well soon foreign [Music] sorry coil KT gifs can it load gif so I have to add the quiet GIF uh stuff unlike lights are not supported by default has a coil as an extension library to support them so let's Implement that for sure right we need the gifs so let's go to app let's add coil diff right then we need to add something like this here which says that to add the to your component registry when constructing your image loader uh when you're creating an image loader do I need an image loader I have not created an image loader as of now right uh so I believe how does this work dot load is taking up on text Dot image loader it's a coil dot image loader can it take a image loader can we create our own image loader this does not use the gif image loader so we'll have to add the gif image loader everywhere I believe um context dot image loader foreign extension for this so you can pass image URL and we can pass the image loader which we can do so that's kind of where stuff like dependence injection is sort of useful right but we can deal with that problem a little bit uh using some some context and all stuff so load image load is context dot image loader call Dot image loader this it always creates an image loader like that so okay uh let's create some utils let's create an image loader I'll create an object here okay so interesting so I'll do is uh private VAR image loader of coil type foreign okay underscore like this right then uh file image loader it's gonna be a image loader coil type will get a get function like this okay uh let's just call it coil image load by the way okay private War uh call it image loader I just want to kind of image loader type uh fun get uh pass a context sorry okay so if image loader equal to null then we do is we do image loader equal to uh coil dot image loader thank you or we can use a set image loader apparently exists so we can remove this stuff from here so let's do is uh imguram app extend this android.application cool in manifest application give a name gurram app okay so in good on a map I will do is on create coil dot set image loader and I will pass an image loader Factory image loader Factory which needs New Image loader something like that so we can do foreign dot component registry and you can just write this stuff here if SDK ain't greater than uh 28 is what these please 28 I believe yep is greater than p uh add image somehow it's not working out decoder decoder uh where is that coming from okay where do I get gift code and all that stuff from image decoder decoder why am I not cutting this do I not have a Target SDK of 28 rubber I do have okay image decoder decoder import and GIF decoder import cool so if greater than 28 then image decoder decoder and else G4 decoder this is only available in 28 so cool uh that's my image loader Builder and image.builder.build I have done so I've set the image loader when the activity is created so it should be able to decode gifs automatically then I believe because like this uh for this function says is that set the image loader Factory that will be used to create a Singleton image loader the factory is going to be called the most once node Factor will take precedence over an application that implements uh factored next question so one application that implements image loading Factory um okay set image to do that okay uh got got makes sense and let's start so apparently we can add application can image loader Factory we can Implement there as well it seems like if it does so so we can put all that stuff here uh and then in oncreate we can do coil dot set image loader this is interesting okay this should allow us to decode GIF images that coil is allowing via this method let's see if that works video frames it can okay something crashed okay something crashed let's see action bar dot subtitle uh okay some some something wrong Happening Here instead of action bar with nav controller or no maybe I just need to uninstall this okay let's run it again why is such a stupid thing happening okay again it's happening okay here it's happening context is not yet available uh when you need it hmm foreign work now not exactly still working should have added the GIF decoder here remove this probably and not implement this and put all of that stuff here let's try one more time there's a lot of MP4s which obviously are not working foreign okay let's try something else then let's try one more uh thing instead of doing this image loader dot Builder if I just use this for a second set image loader uh uh in my story pager adapter foreign let's try this one out if this decoder Works apparently does not uh so I'll have to search coil KT GIF URL hmm one of the problems that you face if you use like a more newer library because Clyde does work with gifs kind of properly uh here it's saying it is giving a bit of a trouble you can say the type here or something uh this obviously did not work so check that image loader uh Builder is there URI is there uh interesting so record Kitty not loading GIF from URLs see we have cool if I just use uh maybe zip decoder everywhere okay so for all apis if I use GIF decoder maybe then let's give it a shot still not working here's a gif again still not working oh that's working okay so some gifs are actually working some gifs apparently do not work you should probably set a loading or something here uh apparently there's some uh stuff Happening Here I actually set it to 28 does that other gestate work so you have to understand a lot of these problems that happen in production level codes certain JFL certain format which does not work so we'll have to deal with those things as well okay so chips are actually working perfect right uh make let's mix a few more changes in my page item story let's give this frame layout a background black food So Stories are kind of there we need to auto scroll the stories we will just develop that by the way this background black here instead of here you can also give it the story uh story XML itself so the activity story itself we can give it here as well that should also work okay uh we need to create that bar for sliding out of that stuff so so let's do that next after this so now we have basically a idea of the stories working feed working quite a lot of the stuff working right we need to create proper error handling maybe add some dependency injection our code to make it look more professional uh but for now basic stuff is all working for what we set out to build okay a few more things that we can do is we can actually Cachet the data so that you know when we are you know loading stuff so there's no that loading is little smoother I know when you go here then these are less of them are empty and all of that stuff um so let's uh do that so first of all let's go with the layout and then the story had uh this stuff let's actually give it a background by the way uh right so Circle shapes are correct correctly can be seen when we start loading them okay so they have this gray kind of thing beforehand you can use a different color as well or you can Circle through the colors as well and not those things uh next how to uh kind of pre-load stuff so if you look at coil preloading so I think uh so you get uh is there like coil uh FAQ or something like that so this is coil FAQ yeah so there's this preloading information available so how do I pre-load an image so apparently you create a request and you enqueue that request like that uh to preload a network image only into disc cache disable the memory cache for that request so stuff like that um what we can do here for those cases is let's let's go to story activity before we submit that list here so it dot for each we can do uh is that while URL equal to and inside the story page adapters we are using we're using image URL not the story pager adapter sorry story activity story so not here not here my bad not here uh in the home activity right and in the feed activity feed fragment so in one of these things so home activity the storage recycled adapter we are using this correct so into the home activity let's do uh it dot for each URL equal to this right uh for each tag basically right then let's copy this stuff from here so I'll request equal to image request dot Builder context we can pass this uh new data we can pass the here uh in fact we can just pass this SF directly pass this you know the URL size okay so size we have to pass some size here they have to build and then we have to do uh coil dot image loader for this context dot enqueue this okay now size what is the size that we should pass here so the size here is supposed to be each story size so the story heads let's give them a size 60 DP 60 DB so let's go to the demands right uh let's go to values and dimensions and let's add a dimension story head uh image size okay and give it 60 DB here cool nice little size let's add that here story head image size story head image size in both cases so that's the size so here you have to pass that size value here so what size value can I pass resources dot get Dimension pixel size r dot demand dot same thing okay the requested width or height as per that size okay so we can do that perfect more preloading with the feed fragment as well so in the free fragment Also let's do feed fragment here um so it dot for each here then in the field reset adapter we're using this thing right so with the image you're doing this so just paste the request stuff here image request dot Builder the data we will actually pass this here into the data size for this case has to be a little different I'll just get to that because require context and coil dot image loader required context okay so what should be the size here in this case so in this case the size we can do is the width of the recycler view so with the bit of the recycler view could be binding dot feed recycling View dot width okay so we can use that width as a size parameter or yeah so let's go ahead with that and see what caching gives us so does caching give us something better call the images seem to be previously loaded uh the hot and top seems to take a little time to load to me images are taking a little bit more time we can disable the disk cache by the way as it is said so this cache policy I think what they have said is do uh memory cache policy cache policy disabled so if you just want to download to the disk uh or if you don't know download the disk and all so we can set up let's do this so I disable it in the disk but only keep it in the memory is that faster doesn't seem to be any faster anyway probably nothing better uh so so one more thing we can do here is uh actually do that a little while later so submit the list a little while later uh while the cache is getting built that's also something we can do by the way right uh so we can do for each indexed And Delay the loading and all that stuff we can do a little bit for now we need one thing else when we load the app for the first time we can show a little loader till the stuff is loaded in our page and all so if I just remove the app from home screen and then if I just started fresh takes a bit of time to load right so we can add a loader and all that stuff in our screen that could be a useful thing to add by the way and we can add that swipe to refresh thing so if you pull down here it will just refresh itself and all that stuff so that is something we can add swipe to refresh um cool but but I think for now it looks great we need to add that animation that when you click on that it should go to you know the next image while it goes to the next image by the way these images are also not cached so if you want to Cache uh these images probably you might want to do something about that as well so to cachet these images just to cachet probably the next image only what we can do with this adapter story pager adapter here is that this is the image of first position if I want to just cache for the next image private fun cache next and pass the position okay so we can call cache next and pass position here like this so while image would be get item of the next position uh we should try catch it so we should do try and so we should probably get a you know index out of bound uh array index outer bound exception if the arraylist is not that big so we can just catch for an exception and return null here right so if image is available and inside that in the same thing so while image sort of like this right so the image URL is available then in that case I'll just do is cache the next item using the similar stuff that we used here what other stuff do we have to do that so we need a context so we'll pass the context so how do we pass a context you can pass folder dot sorry image view you can pass that as a context okay um you get the context from there cool the data to pass this URL that we just had IMG URL like this size so the size would be so let's pause the image view actually sorry let's pass the image View The Next Step which would be of the same width actually so so I will do image view dot context here and I will do sorry image view dot width here and here I will also do image view.context okay so I'll cache in the next image every time I fetch an image let's see hopefully that works stop it run it again okay so open any story you should really definitely add the loader here but before that we open a story okay we got an error here so what's the error let's see foreign height must be greater than zero it's what it says uh okay let's not pass the size then let's pass the whole thing apparently image size coming out to be 0 in this case this is the next image get cached or not let me check so we open funny as a mean cache if I see oh yeah they are getting so it's there yeah so sometimes it's getting cached sometimes it's um sort of not depending on whether it's able to load the image or not but if it is able to load the image then at least the next image uh kind of gets cached okay uh that's cool I think the next image gets cached here definitely so in a swiping through images the next three major at least is sort of loaded cool that's it not bad right uh stuff here is also sort of cached top cool so step looks cool you can run the profiler also by the way on on your app when it is running and uh might take some time for the profiler to load I have so many things load on my laptop but you can check like the memory usage and what network calls are happening from your device uh when when this stuff is happening okay so right now it's taking made a bit of time to load the profiler but it should uh work otherwise uh so cool I think we got that working the next part is would be to animating that header at the top of the view which we would love to do so here I'll talk with you uh we can go for the fragment uh not the fragment the page item story it's a frame layout we can add a you know view here uh layout width match parent layout height say 2 DP so let's just put a tools background here thank you yeah so about this view uh margin uh top I think can be 4dp from the top maybe even more 8 DB from the top yeah uh height can actually be 4 DB itself uh background uh is white so you have that thing um we're gonna add another color so why transparent 50 where RGB a so I think you can just pick that stuff and make it you know half transparent Okay so eight eight FFF like that so y transparent 50. and let's put another view exactly at the same point right make it white uh width I would say here uh so scale X I will do uh 50. sorry 0.5 uh should be 0.5 okay and uh layout gravity left why is layout gravity thing not working uh should happen uh um I don't know so do the translation and scale and stuff like that around here we will check that um so yep so let's just give this uh an ID um progress View kind of thing just call that okay so the progress view I I would want to move the do a transition for five seconds or something like that and then make it grow so let's let's try and Achieve that thing by the way so the story pager adapter here we would have folder dot binding dot progress View so how to set a transition so let's see Android set transition foreign start animation or something like that dot animate scale X scale y something like that so I do animate Dot scale X zero point five dot duration I think three thousand milliseconds dot start so I think let's let's start it from uh let's scale it to 1 f and let's start it from a scale with zero okay how would that look like let's just check that great right so every image you come to transitions like this you can do from left to right as well but I think this is also a good way to transition uh set duration when there is a interpolator an alpha and a lot of those things uh and you can do a with end action with end action you can run something we can basically go to the next page or something like that right uh so you can check those kind of things uh if you want to uh or we can do something uh we can do something is actually keep this stuff uh um just keep that stuff here instead of there there's given activity story and uh let's just keep it here right same place it goes um instead of doing that stuff here we can do it in my story activity banding dot progress we don't animate like this and you can do it for every page change like that we can do okay so here will happen only once and not happen for every change but to do it with every change we have to work on a few things this will happen once it's not happen after that so we open a new activity then it happens there's a bit of a stutter here which seems bad should not happen okay cool so maybe we're gonna give it a five second DNA and a bunch of things we can do here okay so first of all if you want a page transition to change to every uh new page on the page getting changed stuff like that so we can create a handler do a post delayed and every five seconds we can go to the next page uh so stuff like that we can add here okay so first of all uh we should add story viewpager dot uh so animate gives me I think A View Property animator thank you register I want paid changed callback and we can add a on-page change callback we can add here add uh is that an abstract class person abstract class so you can't do it like this we can't actually inherit two classes so that's fine uh we can do object that inherits from this foreign [Music] context position short and then show that let's see if we can see every page change is happening or not we'll have to make a hook to the page changes as well obviously let's open this page 0 page one page two page three that happens so congratulations that happens uh what I will do is I will create a class here uh foreign and uh or I can even in fact do an object here so okay um so use the page change callback object here great so on page change we can actually do is take this stuff on every page change clear animation and I think on every page change we can at least make it happen every time again to start with so wait a second where are you this can we reset an animation or we'll just check how how we can make it work that did not work can't resell the animation like this okay so let's just create a View Property animate rather than that so private Latin Network View Property animator [Music] okay then I will do is View Property animator equal to View Property animator and put a binding dot uh progress view inside that I can't do is uh seems to be does it not have a public Constructor apparently you can do that so uh you can do is uh binding dot progress view Dot anyway okay so View Property animator uh probably you can do something about this progress animator dot uh foreign and then progress animator Dot KLX to 0f dot duration zero set duration 0 Dot start and then scale X to 1 F set duration for 5 seconds and start set start delay after 20 seconds step start delay dot start okay uh let's just see if that works or not foreign probably put the scalex uh binding dot progress view dot scalex equal to zero if I reset it again and then so let me check this stuff okay okay let's see that works but that works perfectly so every time you change the page it starts from 0 like this which is fantastic obviously plus every time I change the page let's also do one more thing uh Handler Dot so let's create a new Handler here for us uh so create a new Handler uh it says it's deprecated uh so what I should do uh okay we can pass the get main Looper cool so you got the Handler let's create or enable uh so to go to the next page what I need to do is I just have to call binding dot story viewpager dot current item plus plus okay so where's the next page variable okay what we do is that Handler Dot remove callbacks for next page runnable and Handler dot post delete next page renable after 5 Seconds okay let's go and see how that works so this animation thing took quite a bit of time actually uh because a bit of a trial energy around this um and I don't do that kind of stuff on a daily basis so it's a bit of a calendar for me as well if you click on that it's open said after five seconds you should go to the next page ah perfect five seconds goes to the next page not all pages actually have data sadly so it's up to you you can choose to kind of go back uh if you go ahead and all that stuff and uh there we go you can use different kinds of animations at the top of the Instagram has three four bars for number of photos and all that stuff so you can do all of those things uh you have gotten an idea how to do these things now okay so we have got quite a bit of an Instagram clone working we got stories we got the feed we got hot feed top feed all that stuff using the good API I think uh that's a great app that we have learned uh building uh we can uh possibly continue doing other things we can clean up the code a little bit use dependency injection here uh use something like you know tag or coin something like that wrap up the errors in a better format right now so it does not have good error handling right now in this case we have exposed retrofit from my libim Guru which I I really did not want to do you should have it implementation here and expose only the created objects so that what network library are you using is encapsulated onto the lib level there's a bunch of things which can which we can do for making it a little better but I think at this stage it's pretty workable app and a lot of people in their initial days they do deploy apps of this quality to the Play Store and be keep improving things as we go by hope this has been a good learning experience uh if anybody has been seeing this video so long for five hours I mean heads up to your patients um if you like that please subscribe to the channel we will probably have more such Marathon sessions building stuff uh and and really like if you have watched all of these five six hours of content please do mention in the comments that you have okay I'll have to talk to you uh great so we have got an app which is a clone of Instagram using the good apis there we go foreign

Channel: SCALER

Views: 49,395

Keywords: android development, android studio tutorial, app development, android studio, android, android development full course, android complete course, how to create android apps, saumya singh, scaler, android developer, mobile app development, mobile app, android projects, mobile app development tutorial, scaler academy, Instagram Clone on Android, Kotlin Tutorial, Android project for Beginners, instagram clone on android, project, app development for beginners, create android apps

Id: 9-pFPGAOSZQ

Length: 548min 22sec (32902 seconds)

Published: Fri Apr 28 2023