Create a Chat App in Android Studio using Firebase Database | 2023

hey everyone welcome back to all coding tutorial today we are diving into the world of chat app development and imagine creating your own chat app from scratch this tutorial is going to walk you through the process step by step by the end of the video you will have a fully functional chat app and it's going to be awesome so keep watching this video till the end first of all if you have not subscribed to this Channel Please Subscribe and press the Bell icon so that you stay updated so launch the Android Studio select the new project and select the empty view activity click next give a name to your project uh let's call it chat activity uh leave other things okay and click finish now once it is loaded you will see main activity. Java so first thing first we have to do is to connect our project with the Firebase so go to tools and in the tools there is a dedicated link to Firebase so click on that and you will see on your right side there is a panel opening uh for the Firebase inside Firebase there's an authentication uh realtime database so click on authentication click authenticate using Google and then click connect Firebase it will open the uh console. Firebase and add a project here you have to give name to your project in the in the Firebase uh keep the analytics on or off it's your choice and then click continue you can configure analytics but leave it like this it's not a problem and then it's project uh you can create get the project and in a while you will get the project ready uh once you continue you can see your fireb and app has been created in Firebase so click connect and also you can see your Android studio app is connected come back to Android Studio you can see in the in the Android studio also it's showing connected now click now click add the Firebase authentication SDK to your app once you click it will ask for adding some dependencies which you can add by clicking accept changes once you add the dependency uh it will ask for syncing with the Cradle uh now what we have to do now our Firebase connection is fully established with the project chat activity in the Firebase console now after the connection first thing we have to do is to uh create the signin activity first so let's open a new activity go to the left and create new activity call it uh sign in Activity Click finish uh once it's created go to activity sign. XML and uh keep in the split mode and change the constraint layout to relative layout inside the relative layout the overall padding I can give Android paring equal to 10 DP below that inside the relative layout you can create a logo image if you want we have to add image a layout width is 200 DP height is 200 DP ID I can assign is id/ image layout Central horizontal equal to true now I have this uh logo file with me in my in my PC copy that and paste inside the drawable folder go on the left side click on the resources click on the drawable and paste in the drawable logo.png press okay and and uh now in the the source of that image view I can add so write SRC dyable / logo you can see logo has come in our uh sign in screen then add an edit text uh box uh width is match parent and height is R content close it here ID I can assign for this C text is id/ email text hint I will assign as email should be below the image so we have to Define id/ image it should be below that then margin for this R text I will give a 5 DP uh input type is text email address padding is uh 15 DP uh copy this enti text and paste it once more for putting the password so ID is password text and hint will be password and input type is text password and these two edit text box we will put some uh buttons so slide text view uh with is match parent hi is rap content close it here ID equal to id/ login it should be placed uh below the text so id/ password text and uh text equal to sign in and text size I will put something slightly bigger because of the button so it's 24 SP uh gravity of this I will assign a center and padding also I will assign some 5dp margin vertical is uh is equal to 10 DP so that's my text View and copy that and paste it once again and I will name the ID as sign up and it should be placed below the ID login uh text will be new user sign up that's the place when user is a new then he can we can send it to another place now let us uh Define some colors for our screen so look at like more like chat app you you might have seen the WhatsApp color find color primary as #28c 7e then primary also Define color primary dark as # 075 e54 and primary accent is # 128 C2 uh 25d 366 so these are some colors which are very similar to Whatsapp chat app color so another color I will Define as primary variant is that will be hash e 5dd that's our primary variant color so that's it now ins the diable go to new create a resource file and uh file name edit style box that will be giving some style to my edit text box it will be type of shape so inside the shape uh right solid and right color f f f FF Corners Android radius 8 DP below that right stroke Android width equal to 1 DP and Android color equal to # CC cccc and close it here we can Define find this we can add this background so Android background equal to drawable edit style box you will see the background is changed same apply to lower edit box for the password also so you can see a beautiful edit text box has been designed uh looks very beautiful now the background for this relative layout also I will change it to primary variant which we defined is mostly like WhatsApp background color create another dyable resource file for the button so I'll write button underscore background it'll be kind of selector click okay inside that we'll write item Android State pressed equal to True below that uh shape Android shape equal to rectangle close the shape here inside the shape write uh Corners Android radius equal to a DP close it here solid Andro color equal to primary dark and that's it and below the item another item I have to create for the shape uh rectangle and Corners Android radius equal to ad DP and solid right color primary color that's another close it here now we have to apply this background to the text view so we'll write the text view inside the Android background drawable button background text color will be white you can see two edit text box and one button has come now we'll work something on for the signin button let's define some text box first so write edit text user email comma user password then let's write text view sign in button comma sign up button import the class text View and uh below that let's write string email comma password inside the on create method Let's uh initialize them let's write user email equal to find view by ID r. id. email text and then user password equal to find view by ID r. id. password text then similarly sign in button equal to find your by ID r. id. login sign up button equal to find your by ID R do ID do sign up and below that we will write sign in button dot set on click listener New View on click listener press okay and then also we'll write sign up button dot set on click listeners so we have created Now set on click listeners for uh both the buttons the First on click listener sign in button we will write email equal to user email. get text. do string. trim. trim and below that password equal to user password. get text. twring do trim so we first store the values in the string then we write if text utils do is mty inser the bracket emails then user email do set error please enter your email and we also add below that user email. request Focus so that the error is focused on that and then return then we copy this if method uh again for checking that the password is not empty so we change the uh email to password and uh we change the we CH the text variable user password and below that we write sign in we can change the message also and then inside the sign up button we write intent intent equal to new intent sign in activity. this comma sign up activity. class and then so sign up activity is red because we don't have any activity by this name so just create go on the left create a new Mt view activity uh name it sign up activity and you can see the signup activity has been created and it's not more that not read anymore and below that we will write start activity intent already there is a user existing we click on this and it will go to a sign up activity page we have to create a onart method so if user is already logged in to the database we can send them directly to the main activity that's our main landing page let's write if Firebase au. get instance. getcurrent user not equal to null we write start activity inside the bracket new intent inside the bracket signin activity. this comma main activity. class below that we write finish now we will create the signin function so create the method choose the second option and you can see private void signin method is created now inside that we will call Firebase o signin method so we will write uh Firebase o. get instance DOT sign in E with sign in with email and password into the bracket we will pass email. trim comma password below that do addon success listener inside the bracket we'll write new and then rest on success listener will be created uh we also write do add on failure listener new failure listener and rest of the things is automatically created put semicolon here inside the failure write if e instance of Firebase Au invalid user exception if there is an error so we declare a toast. make text sign in activity. this uh we will write the messages user does not exist and toast dot length short and we add dot show so that's the to so that's the toast else we write authentication failed so both are failure message but different kinds of failure messages now we go to our console. Firebase our project click on the package name click on build we can click on authentication click on get started now under the authentication you will find different sign-in methods which you can select so we will select email password method we enable this and save it and you can see the email password method is enabled now you click on authentication and then you can see there is no user inside there because there is no user has logged in come back to Android Studio then we go to to the layout and then we work on sign up activity XML we will copy entire code of signin activity XML and open signup activity XML and we will paste the entire code of sign in activity to the signup activity XML change the sign in activity to sign up activity now inser the signup activity we need additional edit text box for the usern name so we will just copy one edit text box and and paste above all the edit text boxes we will change the ID of this Ed text uh to username text and also hint as username input type will be just text now it should be aligned properly so secondary text box we will write layout below the first edit text box that is username text now the text views we have to change the ID as ID signup and also the text sign up and the lower text view is login it should be also below the sign up so we have to change that layout below and also the text for the lower text is uh existing user sign in so now we have exchanged the buttons so that's our signup activity XML that's also ready now let's go to signup activity. Java we will copy the all the variables from sign in activity to and we will paste it here because we need all the same variables here only in the Ed text I will add username and after that all these initializations also we will copy and paste inside the on create method and we will Define username equal to find view by ID so we'll copy and paste and uh the ID is uh username text we will you also copy this sign in button and sign up buttons code and paste it inside the sign up activity just expand the signin button and uh change the name signin button to sign up button because now it is sign up button when we enter the all the text box and the function sign in rename it sign up and the sign up button lower we will change it to signin button and inside that it will take us from instead of sign in activity from sign up activity to sign in activity and uh because now we have three edit text so we will add extra IF function if text is.mt equal to email so instead of email uh we have to write name so we add also a string name comma so now we write in inside the on click method also name equal to user email. G text. to string. trim and we change it to username string name we also we we just paste inside the text util first if method and we we write the set error method is enter your usern name now what we'll do we'll create the sign up method go to create method choose second option you can see the private void sign up is created we'll also uh copy this on start method and uh paste inside the signup activity above the sign up method on start activity will take us from sign up activity to main activity. class so change it like that now inside the signup activity we will write Firebase o. get instance. create user with email and password and pass it all the strings email. trim and password so this line is Firebase o function which creates a new user with a specific email and password uh below that on do addon success listener new on success listener and below that additional do addon failure listener new on failure listener so these are the functions uh defined under the create user with email and password so whenever user is created by this method it is random ID is assigned to that that is displayed in the database but if you want to change the display name uh to a proper your own name then you have to use the user profile update method that allows you to change all the profile of that user WR user profile change request user profile change request equal to new user profile change request do Builder do set display name in the bracket name do build and below that we write Firebase user Firebase user equal to Firebase au. get instance. get current user so Firebase user has now get the current user object now Firebase user. update profile inside the bracket we write user profile change request that we defined earlier semicolon so now instead of random ID it will be name which we defined in the first text box put a semicolon here now to upload the usern names in the database we have to go to console. Firebase click on the realtime database create database setup database uh don't change anything just press next start in test mode enable it and you will see real time database has been created come back to Android studio and create a new Java class uh name it user model now public class user model has been created inside that write string user ID a string usern name semicolon a string user email and string user password so these are the four values which you'll be storing and retrieving now create a Constructor select all press okay now public Constructor is there now create Getters select all and press okay all the Getters are created now now further create Setters select all press okay now once this is done uh we have also to create empty Constructor so create again Constructor select none and you will see an empty Constructor is there it is very important step otherwise the project doesn't now we come back to signup activity. Java we write user model user model equal to new user model inside that we write Firebase au. get instance. get ID comma name comma email comma password then we also Define uh the variable database reference database reference now database reference is red so we have to add dependencies to it so I will just write import then yes now we can import the class now because the GLE has synced now below the user model we will write database reference do child inside the bracket we'll write Firebase O.G instance. do set value user model then we write intent intent equal to new intent sign up activity do this to main activity so once the database is uploaded switch from activity to main activity then also we pass some strings so intent. put extra inside the bracket name comma name and then we write start activity intent so we pass the name as a username finish if there's a failure then we show a toast message so we we create a toast sign up activity. this the text is sign up failed now because we don't want to launch the main activity first we are supposed to change that in the Manifest so let's go to manifest interchange this uh activity name main activity and sign in activity among each other then we go to the signup activity. Java and copy this code for the intent where we are passing the extra string for the username to the main activity we'll copy this uh and paste it inside the signin AC also so that the same string can be passed so now WR a string username equal to Firebase o do get instance dot get current user dot get display name and now this string username we will paste it inside the intent put extra so that our username is passed through this and now let's uh run this program just to see how it is built till now so you can see this uh app is opening and you can see sign in page we can go to sign up page and we just uh create a first user ppp1 and ppp1 gmail.com and then put some password 1 2 3 4 5 6 and you can see the main activity we have landed to the main activity. Java which is a blank also in the in the console. Firebase if we refresh the add user you can see the user is created now with our method so our method is working now let's go to the next part of the uh project which is working on the user list in the main activity that's the landing page now let's first design the main activity. XML first change the layout from constraint layout to linear layout and let's define the orientation Android orientation vertical and the background is I'm going to Define some color so that's the primary variant which we defin we delete this text View and below that we Define a toolbar so right toolbar and automatically it comes uh width is match parent and height is action bar size android attribute action bar size then Android background is equal to color primary dark that's the color of the toolbar then title text color is going to be white so color SL white below the toolbar we are going to Define recycler view so let's uh Define that and width is match parent height is W content close it here ID of the toolbar uh let's define id/ toolbar similarly ID of the recycler view uh also we Define so id/ recycler so that's the two thing we defined and now we come back to main. Java now we Define uh recycler view recycler view also string uh your name and database reference database reference then we initialize our toolbar toolbar toolbar equal to find by ID r. id. toolbar then we write set supports action bar in the bracket toolbar then string username equal to get intent dot get string extra the username which we passed in during in the intent so we receive it here and then get support action bar. set title in the bracket username so the title whatever we log in that title will come in the title of the toolbar now because we have we are defining recycler view so we have to Define adapter Also let's create a class and name it user adapter now this user adapter will extend recycler view so write extends recycler view. adapter user adapter. my view holder then my view holder is red so we have to implement the method so select all and press okay you can see all the methods have come now let's define private context context uh import the class for the context select the first option and also Define private list user model user model list now import the list class also and then we will generate the Constructor select both and press okay then we will Define add user model function so write public void add user model user model now inser the function let's write user modelist dot add user model then below that function we will Define another function clear which is used to clear the user model list we will write public void clear and the clear function will have user modelist do clear once once we clear the list we it is necessary to notify the recycler view adapter that the list has been deleted so we have to write notify data set change now inside the my view holder on create view holder we will write view view equal to import The View class layout inflator do from enter the bracket we write parent. get context do imp plate in the bracket r. layout. user uncore row comma parent comma false and then we return new my view holder view now it's calling for create a class of my view holder so let's create that and that my view holder class will extend recycler view Dot View holder then create the uh Constructor so Constructor is created and then below that we can write private text view name comma email import the class text View and now this user row is a XML file the way in which the item each item will be displayed so we have to create a particular this resource file so create a new resource file user row. XML the root element will be card view so user row. ml is open inside that we can Define padding for the card view so app content padding equal to 10 DP card Corner radius is equal to 8 DP then we Define card elevation equal to 4 DP and then we also Define a margin a layout margin for the card view 10 DP now inside the card view we Define a linear layout width is match parent and height is uh R content and the linear layout orientation will be horizontal and the padding for the linear layout Android padding equal to 10 DP inside the linear layout let's define an image view width is 40 DP and height is 40 DP let's put it in the split mode gravity of the image view let's define Center so it is appearing properly on the split mode we can see now let's uh create a vector resource file and uh the vector asset select the icon uh just select any icon person press okay name the vector set as icon underscore person okay and uh click finish and then we can Define the source for that in the inside the image view uh Android Source equal to drawable SL ion person so you can see the icon has come now our linear layout again we'll Define so width is W content height is wrap content the orientation for this linear layout will be vertical gravity will be center now inside this linear layout we will Define a text view width is W content height is wrap content ID for this text view is ID sluser name close it here another text view we will Define so text view width is uh wrap content and height also is wrap content close it here now I for this uh lower text view we will Define as user email now the upper text let's define a text color color black also for the also the same text color we'll Define for the lower text and the text on this we will just Define username if nothing is there it will show username uh and text for the lower text view we will Define as user email now the size of the the upper text view we will Define 18 SP because that's a username so we just make it slightly bigger it's our choice the style text style of this we will keep it bold and font let's select a font to make it good look good so font family I'm selecting s serif same font family we can paste for the second text view so that's our XML for the user row is uh ready and this layout height actually this has to be changed to wrap content otherwise it will not fit yes so we can change it to rap content that's uh you can see on the right side the design is proper now we come back to our user adaptor now since now we have a placeholder for name and uh email so we will write inside this inside the my Beholder class uh name equal to item view doind view by ID r. id. username below that we will write email equal to item View doind by ID r. user email and also we'll change the get item count return zero to uh user modelist do size now the onbind view holder what we'll do we will write user model user model equal to user modelist dot get position semicolon and holder dotame do set text user model dot get username and we'll copy once more the another holder for email so it will show the email text it will set the text for the email so holder. email and user model. getet user email so that's our uh email and name will be visible uh inside the holder now if we click on that we should go to the new activity that is chat activity so we will write holder. item view do set on click listener and inside the a click listener we'll pass the intent intent intent equal to equal to new intent context context comma chat activity. class below that we will also put some extra string intend output extra and under the codes ID comma user model dot get user ID I will also pass another uh uh string that is intend output extra now instead of ID it will be this time it will be name and we change this get user ID to get username then instead of start activity we have to write context. start activity in the bracket intents now because chat activity we are not created so let's create a new activity empty view activity empty view activity chat activity click finish so our chat activity is there now go back to user Raptor now we will do additionally one thing public we will create public list user model get user model list inside that we will return user model list so that's all our user adapter and uh is complete so now uh incorporate that in main activity. Java so first we will write user model user adapter user adapter and inside we have to initialize them so user adapter equal to new user adapter inside bracket this then recycler view equal to find view by ID R do ID do recycler then recycler view. set adapter user adapter recycler view do set layout manager inside that new linear layout manager in the bracket this now there's some error in the user Raptor Let's uh there is a semic colone missing yeah that's it now below that uh in the main activity. Java database reference equal to Firebase database. get instance. get reference and that is users so now our database reference contains the reference for the our database user now database referencing do add value event listener we have to add so inside the first uh on data change we will write user adapter. clear then we write for data snapshot data snapshot colon snapshot. get children and it's a for Loop for entire data snapshot so let's write string uid equal to data snapshot dot get key then we Define user model user model equal to data snapshot dot get value and we wrting inside user model docl class so all the value of user model is stored in user model and that is stored in the data SN then we write then we write a condition it is good to write some condition to just to check that uh it is not the same user so if user model uh is not null and user model. getet user ID is also not null and and not user model. getet user id. equals Firebase o do get instance do get U ID so if the uid is not matching with that then only we have to update otherwise it is if it is the same user ID which is logged in then we don't show that so then if all these conditions are met we write user adapter. Ed user model now outside the for Loop we write list user model user model list equal to user adapter. get user model list then we write user adapter dot notify data set change because the list has changed so we have to notify the recycler view now inside the user adapter also we have to make some correction user adapter context instead of user model list we will write new array list now come back to main 2. Java and inside that we have to make sure that the string which we are fetching is has the same name so I think we have written user name but uh let's change it to user because it is it was user in the sign in activity so that's it let's create a log out button in the main activity create a menu create a new resource file main menu resource type will be menu and then click okay now this is our menu XML and click uh and go to the code now inside the menu item below the item we write Android ID id/ logout then Android title equal to log out and also we'll write app show as action equal to if room now add a vector as to create a vector set select icon so we have to select an icon for the log out so we don't I don't find anything so let's select this one we can change it later and icon uncore logout just name it like that and then and finish so that's our Vector resource is added now we can add inside the item so Android icon equal to dyable SL ion logout you can see there's a logout button appearing now we have to go to main activity. Java generate some override method so that method is just write on create option menu you can see the uh public bullion on create option menu has been created just copy this and uh cut from and paste at the bottom also generates override method that is on option selected so on create option menu we will write menu inflator inflator equal to get menu inflator then we write inflator inflator do inflate r dot menu Dot main menu comma menu and after the return we will write true now in on option item selected we will say if item. get item id equal to r. id. logout then we have to perform the log out function that is Firebase O.G instance. sign out then we write start activity new intent main activity dot this comma signin activity. class so once we log out we go to signin activity and then we click finish and then we return so we return true and below that we return false we go back to sign in activity and what we do we create a database reference database reference and then we initialize that database reference equal to Firebase database do get instance. get reference inside the under the codes users also the in the signup activity we do the same thing so database reference equal to Firebase database. get instance do get reference under the codes users now we run the project and let us see whether our sign in activity is uh going to the main activity and also showing all the users properly let's so there you go we are now in the landing page because uh we didn't log out so there was no log out function now there is a logout function if you click on the logout function you come to a signin activity and when you go back you can you can see when you when you log in with the proper uh email and uh password first user uh bpp1 uh it goes to the uh main activity and you can see the log out uh icon and there is no user there because uh only one user is right now created so only one so as we add more users the list will update let's do that now because I don't like the log out Vector which is there right now so let's uh uh let's paste from the uh uh image file so I have an logout uh image uh Vector icon uh downloaded so I will just copy it and paste inside the drawable folder I will name it icon logoff and then I I can go to uh main menu XML and in the XML inside the item Android icon we can change this as drawable / ion logoff and you can see the log off uh icon is now appearing in the screen and now we come to our final part that is the chat Activity part so let's open the chat activity. Java now inside that first uh create a database reference database reference variable below that we can write users adapter users adapter then we also Define recycler view recycler [Music] view now go to activity. chat. XML activity chat. XML change change the layout from constraint layout to Rel L out add a add a background color H ECE 5dd that's like WhatsApp background color now just like we created the tool just like we created the toolbar for the main activity here also we'll create the same toolbar so toolbar uh width is match parent and height is attribute / action bar size the background color for the toolbar I can Define as primary dark color so it looks uh more like WhatsApp uh toolbar now below that title text color I can Define white it's up to you the designing is uh all your choice now below the toolbar uh we will create a recycl view width is match parent height is match parent close it here now ID for the recycler view we will Define as id/ chat recycler it should be placed below the toolbar so we'll Define layout below id/ toolbar and we'll also give an ID to the same ID an ID to the toolbar so ID id/ toolbar so now it is properly placed now what we'll do below that recycl view we have to create our edit text box so first we will create a relative layout first so rela your layout width is match parent height is R content close it here ID for the recycler view uh ID for the relative layout we'll Define as id/ send message layout and we will align it align parent bottom equal to true so that the layout is aligned for the at the parent of the at the bottom of the parent now padding for this relator layout I can Define as 15 DP now inside the relator layout first create an edit text box so lay width is match parent and height is R content an ID for edit text box we can Define for so id/ message edit now hint for this message we can say write your message here that's nice and uh we can align parent left equal to true so the message is aligned on the left side padding for this edit text box we can Define as 15 DP it is slightly bigger and background ground now we can Define as our edit style box which we created for our signin activity so that's our nice edit text box you can see has been created now now for the recycler view we can we have to define the recycl view up should be above all the time Above This edit text box so we just say layout above the edit text box ID now on the right side of the retext box we will add an image view so right image view width is 60 DP height is 60 [Music] DP ID for the image view is id/ send message icon now for this uh we have to align it on the on the right side so align parent WR equal to true so that's the place for our image padding for this image is 15 DP now we can go to my uh I can I can copy the send icon and paste inside the drawable folder send icon.png and that is a source for the uh image view now so I can I can Define now in the image view write Source equal to Icon send icon so you can see a nice send icon is appearing on the edit text box on the right side for sending the but sending the message button it acts like a button now close it here and uh we will work in the chat activity I'll just clean this uh variables and we will start uh fresh variables so string first we have to create the string uh receiver ID slash receiver ID comma receiver name semicolon and then string another pair of string sender ID comma sender name then database reference DB reference sender comma DB reference receiver comma user reference now there is a spelling I can correct r capital yeah that's it then below that we will Define the image view send button that's our button the image button which we have created in the XML now below the image view we will Define the edit text message text where we're going to write our messages then we Define lastly recycler view recycler view now just like we created the user class here we are going to create uh just like we created the adap now because we have defined a recycl view we have to create a message adapter so just create a Java class and write name it uh message adapter then we can declare inside the activity inside the activity message adapter message adapter now let's uh work on on this message adapter so just copy the user adapter code because it is mostly being similar we'll just replace uh find replace things we'll just find and replace and just paste it here now rename everything uh wherever there is a message adapter just correct everywhere so everywhere where there is a user adapter we have to correct with the message adapter so correct here also down in the Constructor the user adapter will change to message adapter then also in the oncreate view holder also inside the onbind view holder and then we will create another Java class message model so the message class message model class will have the private string message ID private string sender ID and private string message then the message model class plus we can create uh we have to generate Constructor so select all and uh press okay so the public Constructor is uh created here we also generate a an empty Constructor so select none that's it we have a empty Constructor uh then we generate getter select all three press okay so gets are also generated then we R Setter select all press okay then we have the setter and that's how is our message model class the user model we can connect it to message model wherever there is a uh user model also the user model list we corrected as message model list so here also message model message model then here also in the add message model add message model and after the message model is added uh add after the add function we inside the add function we add notify data set change the clear also in the message adapter now what we can do is we have to write inside the uh on create view holder we have to write layout inflator inflator equal to layout inflator Dot from parent dot get context if view type equal to first we will create constants so we write private static final int for integer name of the constant will be VI under identif that it is a type sent or typed message equal to one and also we will Define another integer private static Final in view type received equal to two now the inflator will inflate according to the view type if view type is sent then a different type of layout will be inflated and if view type is received and a different type of layout is received will be inflated so now copy this view uh layout inflator code inside the view type send and also another right and logic else if if it is not you type send then then copy the inflator code again and uh we now we have to change the layout for sent message and received message now we move this return to each individual if logic we can write else instead of if inside the onbind view holder also we have to write message model message model equal to message model dog position now if message model do get cender ID do equals Firebase au. get instance do get ID then holder. name set text we delete this now to create the holder let's go to my view holder and work on the holders the text view we will change it to text view sent message and text view received message then inside the public my view holder view uh we change this Ed text text view sent message equal to and now we create a resource file so message row sent uh the root element will be linear layout press okay and uh we copy this and uh we also create another XML for message row received these are the two message layouts which we will be inflating whenever it is either it's sent or received now inside message row sent so the layout width will be match match parent and height will be R content gravity will be end so it's uh so either it's on the left side or in the right side so if it is received or it is sent so inside that message do sent we'll create a relat layout width is R content height is R content padding will be 8 DP uh layout margin will be 10 DP inside the relative layout we'll Define our text view layout width equal to rra content and height is rap Content ID for the text view we will Define as text view sent the ID which we're going to use Now text view send message now color for this uh uh text color for this if it is a sent message it is going to be a black and text size will be 16 DP now copy this entire thing and the same thing we can paste it for uh message row received only change will be here the first the ID of the text view will be text view received message now these these IDs we can use inside this our uh view holder so text view sent message find by ID r. id. text view send message and the received message will be r. id. text view received message so now properly all the uh IDs are set now further some places we have left the uh message model list so we have to conncted message model list here in the get ATM count in the list user model also the user model we have not corrected yet so it is it will be Chang as message model and we will write get message model list so that's also done yeah inside that uh string yeah and the holder also like it will be now text view sent message set text message model. getet message so that's going to be our holder is going to show the message else it will be if it is not our message if it is a received message then the holder received message will be set with the message and so is our adapter is almost ready now we it's time to create some override method so just create an override get item view typee int position so inside that if message model list.get position do get Sender ID do equal equals Firebase O.G instance. getet uid then we return view type send so if the message ID it matches with with our own which we are sending as a sender or if it is is by receiver then we change the constant return view type received so the integer value we change it now what we'll do we'll create to go to the dyable and we will create a drawable resource file just to design the message properly so file name rounded Corner received the type will be shape press okay inside the shape we will write solid Android color equal to White and then we'll Define Corners Android radius equal to 8 DP now that particular that background we can add inside the uh M row message row received so background equal to drawable SL rounded Corner received uh let's change the gravity to start because it's a received message which should be aligned to the start also the background is better to Define inside the layout uh background so we will just move it also the text size from dp2 I will change it to 16 SP same is true for the message rent now let's code the chat activity into the activity We'll add first toolbar toolbar toolbar equal to find your by ID or . id. toolbar then we write set support action bar in the bracket toolbar then we get the reference user reference equal to Firebase database. get instance do get reference users then receiver ID equal to get intent plus get string extra ID sender ID equal to get intent actually it will not be sender ID it will be receiver name equal to get intent do get get string extra inside the bracket name then we write get support action bar do set title receiver name so we WR if receiver ID is not null extra string also we have to create like sender room and receiver room so if receiver ID is not equal to null then we write inside the curly bracket Center room equal to Firebase O.G instance. getuid plus receiver ID and reer room equal to receiver ID plus Firebase au. get instance dot get U ID this way we get the two two distinct U ID for the receiver room and the sender room then we write send button equal to find your by ID r. ID do send message icon then we write message adapter equal to new message adapter this then recycler view equal to find view by ID R do ID do chat recycler let me Colum then we write message text equal to find VI by ID r. ID do message edit then recycler view do set adapter and we write message adapter that's our adapter for Recycler view then we write recycl view. set layout manager new linear layout manager this then D reference sender equal to Firebase database dot get instance dot get reference into the bracket we write chats that's our reference for the database chat database. child inside the bracket sender room DB reference receiver equal to same we copy that and we say the child receiver room that's going to be our the two different uh Childs now DB reference center. add value event listener now the code automatically comes the first one on data change the stepshot what we're going to do is we going to write list message model message model list messages equal to new array list import the class for the list now below that for data snapshot data snapshot column snapshot dot get children and for the entire snapshot we perform message model message model equal to data snapshot dot get value message model do class then we do messages dot add message model so the messages in the list is updated for the entire snapshot now the message adapter do clear and we write for message model message model colum messages in that for Loop we write message adapter. add message and outside that for Loop we write message adapter do no ify data set changed now we also create a send we also create an on click listener for send button so send button. on click set on click listener New View on click listener now inside the on click we Define string message equal to message testt message text. cext do2 string now if message do trim. length is more than zero that means if there is a message message then we say send message inside the function we declare message else we show a toast message that message cannot be empty so if the length is not length is zero then we show the message now in the our new created send message we write string message ID equal to uu id. random uuid do2 string it is to create a message ID a random message ID then message model message model equal to new message [Music] model message ID comma Firebase database Firebase au. get instance. get ID do [Music] comma Now we write message adapter. add message model below that we write DB reference sender. child inside the bracket we write message ID do set value message model below that we write addon success listener and also we add extra function addon failure listener new un failure listener if there is a failure then we show the toast in the activity that fail to send the [Music] message outside that we create a database reference receiver. child message ID dot set value message model and we also Define recycl view dot scroll to position message adapter do get item count minus one then we say message text Dot set text blank so as soon as the message is sent we just just make it blank then we add some override method so we write on create option [Music] menu and the return above the return we write uh menu inflator inflator equal to get menu inflator below that inflator do inflate r. menu dot main menu comma menu and then we return true we also create another override method which is uh on item select so we Tye option item selected select that option and then about the return write if item dot get item id equal to r. ID do log out then we call F O.G instance. signout then we start activity new intent chat activity. this comma sign in activity. class finish then we return true now outside this return we return false we forgot to correct the layout inflator layouts uh message received message sent so we should correct that now so first layout is message row sent and second layout is uh message row received and we used our rounded Corner received we have to copy this and paste it and we have to create a rounded Corner scent we we can design it as per our choice and then we can add that background in the uh message row send XML we have to connect here also in the message row received we set the background as rounded Corner received now it's time to run the project and finally our app is successfully launched and you can see sign up is there so we sign in with ppp1 first user write some email and password and you can see if we refresh the database uh it is uh the user authentication bpp1 we can see one user is added but but we cannot see in the user list because it is only one user and then we log out then we sign up as another user ppp2 then we can see two users are there and and we can sign in with another user ppp3 and you can see another user and once we load when we land to the main uh user page you can see there are two user we can see now if we send a message from your user 3 to user two send hi so it is appearing in green on the right side now we log in as another user to see whether we have received the message yes we can see we have received the message which is appearing we can see in the console that chat activity is being uh recorded in the database and you can see each chat activity and all the messages are appearing in the chat database and this way you can make a chat app very nice and beautiful chat app in studio thanks for watching everyone if you found this tutorial help don't forget to give it a thumbs up subscribe for more content and hit that notification Bell to stay updated until next time happy coding happy New Year bye-bye

Channel: CodingTutorials

Views: 1,015

Keywords: Chat App, Build Chat App, WhatsApp Clone, Android App Development, Chat Application, Messaging App, Chat App using Android Studio, Tutorials, Simple Chat App, Chat App from Scratch, Firebase Database, Recycler View Example, create the chat app, Chat App Tutorial, chat app android studio

Id: V9li7YP1NWg

Length: 71min 33sec (4293 seconds)

Published: Sun Dec 31 2023