WhatsApp Clone using Jetpack Compose (Part 1)

hello everyone welcome to Native mobile bits and wish you all a very happy New Year 2024 and I'm sure that you guys must be enjoying this we are starting this project today as a jetpack compos primer we are going to build WhatsApp UI and we are going to build completely using jetpack compose let's start today's video and in this mostly we are going to do all of the UI development with jetpack compose first of all we are going to start one brand new project for this and we are going to select this jetpack compose empty activity we are going to click on next and let's call it WhatsApp UI okay and this is going to be the package name our channel name and the project name you can change it as you like we can also select the version catalog thing but for now I'm going to stick with f.r. kts and in our next series which is going to start very soon where we are going to develop step by step the complete projects in separate parts there we are going to use version catalog but for this one we are going to use cotland DSL itself and let's click on this finish and it is going to create one brand new project for us okay let's delete all of these berer plate code which Android Studio has created for us and just run this own emulator just to make sure all the dependencies and everything are configured properly so that I don't see the comments like where you people mention that which version of compile SDK or Target SDK you are using because we are facing some error and yeah this is the error which I was talking about so we need to just go to buildo gridle of app module and and that you can also go from here we need to just use compile SDK 34 and sync the project and after that we can just run on our emulator it should run properly this time yeah our build is successful and now we can discuss further that how we are going to approach developing this WhatsApp UI okay so for that let's open WhatsApp screen design and this is the very basic design we have right we have one SP screen we have the home screen and we have multiple tabs in the home screen which we can horizontally scroll it can either be a chat or a status or calls screen right these are the primary screens we have in our WhatsApp application and now we are going to start first with this home screen okay so in jet Peg compos everything is a component or a composable right and we need to make sure that we break down this entire screen into smaller smaller components so that we can design respectively individual jetpack composes so if we take a closer look we have some kind of app bar on the top where we have this WhatsApp title we have this camera icon search icon and this menu icon right this we can design as a Ab bar component okay this is going to be our first component then the second component is going to be this tab bar right so we have multiple tabs here it can be a chat status or calls we also have this group earlier we were having something like camera but primarily we are going to focus on these three tabs chat status and calls then if user is on the chat screen we are going to show the chat screen if user Scrolls to the status screen we are going to show the respective screen for status and if we are on calls we are going to show the call screen so we need to design different different screens for each of these tabs and we are going to implement one view pager kind of thing and in Jetpack compose we have something similar called horizontal pager and within that horizontal pager we are going to put all of these different different screens right and we have one thing common and this is like this Fab button to start a new chat or if we are inside the status we will be having this as a camera button so that we can capture the pictures and all if we are inside the calls we are going to change this to a new call button but that functionality part we are going to do that maybe later but for now we are going to implement this UI with the help of jetp Peg compose so let's start I think we have some idea now that this home screen this is the primary screen and this is going to take some kind of column composable because all of these things we can arrange in vertical orientation and as we want to keep this on top of everything so we can just take one box but don't worry I will show you how we are going to do that I was just you know giving you some heads up that how we are going to imp imped now let's begin the implementation so let's go to Android Studio minimize this and let's close other tabs we are going to make the first change inside our main activity itself so first we need to design few screens we can make one package inside our UI folder and we can just open it inside finder we can create one new package and we can name it as screens okay now our UI has this theme which is already created by Android Studio with some default values we will modify it later but now we also have one package for our screens and we can design our first screen and the first screen we can design using file and we can call it home screen so we can design our home screen using a function we can call it function home screen and we just need to annotate this function with at theate composable so that it becomes a composable screen for our jetpack compose okay now inside this we can design with various approaches but for now let's use one column and inside this we are going to add multiple things but for now first let's add one preview as well for our home screen we can add at the preview with this at theate preview annotation we need to use at theate composable and the best way which we follow in our video is just take the name and append it with preview inside this just use your home screen okay like this now we need to use this screen inside our main activity so we can just access our home screen inside our main Activity Set content method and as we are setting up our main activity we can also set one default preview here and for that we just need to use preview annotation at theate composable and we can call it WhatsApp preview okay and inside this we can just take this much of the content like what is the theme and what is the main screen okay we can open also add some white background if you want to add we just need to pass show background as true now if we rebuild our jetpack compos project it will show us one preview as well inside the code we can see like this is the WhatsApp preview we have but this is empty as of now because we have not implemented anything inside our home screen now let's start the implementation so the first thing we need is this app bar okay we are going to design one separate component for this so we can start either designing that component here or we can create one new package let's call it components and we are keeping it inside UI layer because this is a part of the UI and we are going to call it app bar component we are going to design one composable here with this annotation we are going to call it appar component the same name which we have given to this AB bar component and inside this we need to start with one row composable why we need to use row composable because we need to design this in a horizontal manner right we have one title we have these icons all of these are in horizontal orientation so we can use one row composable this one and inside this we can add one modifier as well first of all we need to take fil Max width because we need this entire width of the phone and we need to add some custom height as well for that we are going to add 60 DP for now we need to import this DP extension and we need to add some kind of background color as well because we have this green color here right so first of all let's go to our color dot KT and we have some color here defined we can delete these colors and we can add some color we have already green color and light green color okay now we can also add few more colors I also have some gray color with me which I'm going to take inside our project now we have green light green white black and gray and light gray one another thing we can do to make it consistent we can just make it in this case the capital letter in the starting itself and now all colors are consistent now we can use these colors inside our themes for now these are our primary colors which we are going to use throughout our application but as we progress we can also add some other different different colors for now we need to modify our theme file with these colors so we have this light color is cream right so we are going to use primary green color as the primary color and light green as the secondary color and for this background we can Define white color okay now this is going to be our primary light color theme for now and we need to modify the dark color theme as well so we are going to use primary as the gray color we have and secondary as light gray and for background we are also going to use light gray color okay so now we have a light color and dark color scheme ready and this is the initial setup which we need at least to support two different themes for dark colors and light colors we will update this as we progress okay let's close this and now we need to design our AB bar component so first thing we need to add one background color here and we can take that from our material theme so from Material theme we can just take this color scheme and we can select background now what does this mean so as we have defined two color schemes we have two background color so let's say we have our phone in light theme mode so it will pick background color as white color okay and if we are in dark mode theme it will pick the background color as light gray all right that's why we define the color schema in themes and we pick using material theme do color scheme and respective colors all right now let's minimize this and let's add one preview so that we are able to see how our ABR component is looking like as we we design it okay let's addit preview and inside this we are just going to use Ab component okay we have our preview available this is our ABR component and as of now it is just having fil Max width okay and height is 60 DP and we have some background color which is white all right now inside our AB bar the first thing we need is this WhatsApp title text so we can design one text here we can can use text composable and we can just take this in the next line for text we can design one Str string resource and let's say we have one Str string with WhatsApp title okay we can just import this resource and we just need to add this is string and we can just pass WhatsApp okay so we have created Ed one WhatsApp title and this is basically one is string and we are using this inside text so let's refresh our preview and let's see if we have some text so yeah we have some text but this is not looking much nicer right so we need to provide some kind of style for our text and we can provide that with the help of text style we need to pass some kind of phone size we could because we have the text in a bigger shape so we can just pass let's say 24 SP we can import this and it is updating yeah let's say we reduce it to 20s so that it's not that much bigger as well we can provide some kind of font weight and we can just say font weight dot bold so that it's little bit Bolder and it is looking like like we have in this design right now the next thing is we can provide some kind of color for this now we have two option either we can just simply use any color directly but if we want to make our app work perfectly fine in two different themes dark and light we should choose from our material theme to support material theme we can also add one check here that if system is in Dark theme okay we can use this method this is defined inside our compos Foundation package itself and this function will let us know that if our mobile device is in Dark theme or it's in normal light theme okay based on that we can also set the colors so we are going to do the same we are just checking that if system is in Dark theme then we need to show the color as Gray else we need to show color do white okay now before we move forward I want to customize our theme file because if you will go to theme. KT right now we can see that we have this Dynamic Color Logic support right so we also have dark theme light theme but we also have support for dynamic colors and I'm sure that this condition will get fulfilled and we'll have some kind of Dynamic Color generated for our application and we don't want that we just want to support normal light theme and dark theme for now okay so let's modify this but before that let's go to our buildout gradel and let's add one beautiful Library we have and it's called Google accompan okay this is basically to control the system UI and we are going to use this inside our project and for version we are going to use Z 0. 28.0 okay this library is basically being used to control the status bar color or some other system UI and we can very easily use this and I will show you how so we can open our theme file and we need to modify this logic here okay so first of all we need to remove this Dynamic Color we are also going to remove this color scheme from here and we are going to Define our own color scheme okay like what colors we want to provide because we have already defined dark color scheme and light color scheme so we are going to basically add one condition that if it's into Dark theme we are going to return our dark color scheme else we are going to return our light color scheme okay these are the colors which we want to use based on this theme dark theme condition all right now the next step is we need to remove this side effect also like we want to provide our own way how we want to control the system UI okay so for that first of all we are going to remove these things we are going to Define one variable system UI controller and we are going to use remember system UI controller this one and now we need to write some logic that what color we want to set inside our status bar for our navigation bar and so on right we can Define one color for our status bar and we can write that based on condition like if it's in Dark theme so we are going to return gray color and if it's in light theme then we are going to return green color because if we see at the design then we can see that if our app is running on a device and device is having the light mode so our status bar color should be green right that's what we are setting here that our status bar color should be green if our system is not in Dark theme if it's in Dark theme we are setting it as gray all right now we need to use this inside side effect so we can just take access via system UI controller dot set status bar color and we can just set this status bar color here okay now the next thing is we need some kind of navigation bar color and we can use the same condition that if system is in Dark theme then we are going to use light gray else we are going to use white color okay now we need to set this navigation bar color also for our system UI controller so we can just set navigation bar color and we can pass our navigation bar color here okay so now we have our theme. KT implemented by us we have designed two schemas and we uh writing this logic let's name is color schema okay and we can just use it here okay so now we have our material theme and it's customized based on our need like we are just providing the color schema then we are setting our own desired color for a status bar and navigation bar now let's close this and let's open abar component so we can see that we have one preview but I think the first thing we need to change here is this background color because if we go to our theme file we can see that if we are on a lighter color theme our primary color should be green right and that's what we want we don't want the white color we want the primary green color so we can just use here primary color and we can just go to our home screen SC for now and inside column let's try to add AB bar component okay and let's run this we can see that our status bar and our app bar both are having green color which we wanted but we need to customize our AB bar because right now it's not looking pretty if we see the design it should be in the center and all so we can just go to AB bar component so first thing we are going to do is add some padding here let's say a 16 DP and we are also going to add some kind of vertical alignment and we can make it Center vertically all right this is our modified row and now it's looking little bit like we have inside our design now we need to add these icons camera search and menu icon so first of all we need these drial files right so we can just come inside our resource driver and we need to select this new and we need to Cho choose VOR asset and we can select here some predefined icons so we are going to select this for camera we can just change the name we are going to say I see camera this one next and finish so we'll have one camera icon okay we can see yeah we have this camera icon let's try to take one another drial for search and this time we can just write search here yeah we can just use this right yes we can use this let's write I see search we have this icon also now let's try to take the last one for menu so we have that with this one and we can just name it to IC menu all right now we have the icons we need to add inside our AB bar so let's minimize this row composable and to add these icons we just need to use this icon composable and we can just pass painter resource R do dyable dot let's say IC camera for now and empty content description we can just take these in next line like this but we can also create one separate composable for these icons let's say let's call it icon component and we can just take this add it here and let's say we are just passing this icon component and we are just passing the ID and let's add this as a parameter let's remove this and this is going to be drawable ID we are going to pass this here and now we have our icon component ready as well so let's say if we want to add another one we can just pass IC menu or IC search and IC menu so let's try to run this and let's see if we are getting these three icons as well so yeah we are getting it but the spacing is not proper because this app bar has a row composable as the parent one and row composable does not have any specific Arrangement which can give us this desired result so we can try to use bait here with spacer so basically after our text we can just add one spacer and we can pass modifier dot weit one okay so it will take the remaining space in between these two like text and this icon component okay now we can add some space here and there in between these icons as well with the spacer so we can just say modifier dot size let's say 20 DP and there will be some space and we can add the same space here as well and we can just try to run our application and now we have some kind of proper spacing we can see yeah I think this WhatsApp text style we can just go ahead with semi bold and that will look better I'm not sure if it's updating every time so that's why I'm running it but yeah now it's looking much better now we need to make sure that these icons colors are matching based on our device theme like if it's light theme it should be white if it's dark theme it should be gray right so basically we can just try to you know customize this we can add this property tint and we can just check if is system in Dark theme then it will be gray color which we have defined else it will be white color which we have defined again okay so basically we are trying to do this at multiple places like title now these eye content so let's try to do one thing let's try to go to our theme and let's try to add so we have this variable let's try to add this and inside Dark theme we are always passing gray color right so we can try to make it gray here and in light theme we can and in light theme we can just pass white color okay so now let's try to use this material theme do color scheme this one and the same color in place of this condition as well and let's try to run this yeah our icons are fine so we are going to use this color basically which we have just added so this we have added based on our condition like in light theme we need icons titles everything is white so we are going to use this color and in Dark theme all of these things are going to be gray so we have defined gray color inside Dark theme right now if we try to just modify it to Dark theme and it's not visible because in Dark theme right now color of ab bar and color of icon for both of these colors we are using gray as the value so we can modify this to White I think now it will look much better because in Dark theme also we can use white as the icon and title color and for background we can use gray color okay let's enable light theme for now yeah now it's better so this is this is the first step which we have completed we have designed this AB bar now we need to design the next part which is going to be this tab bar okay so for this we are going to close everything we are going to come inside our UI components and we are going to design one new quot Lin file and we are going to call it tab bar component we will do this in the next part that's it for today's video If you enjoy this video please like share and subscribe to my channel and stay tuned for the next part which is coming very soon have a good [Music] [Music] day

Channel: Native Mobile Bits

Views: 3,064

Keywords: JetpackComposeTutorial, AndroidAppDevelopment, Whatsapp Clone, UIProgramming, AndroidUIUX, AppDevelopmentTutorial, AndroidDevelopmentTips, AndroidStudio, AndroidJetpack, Jetpack compose tutorials for beginners, how to learn jetpack compose, WhatsApp app clone in android, complete project development in Android, NativeMobileBits, Android tutorials 2024, Complete Android Apps development in 2024, WhatsApp Clone

Id: BfGelvZcR2E

Length: 29min 53sec (1793 seconds)

Published: Sat Jan 20 2024