Building an Android App with Gemini API : A Step-by-Step Guide

hello and welcome back in this video I will show you how to get started with the Gemini API in Android apps we are going to build this simple application that allows you to write a prompt in the text input edit text for example I can say what is open source I can take this prompt send it to the model just by clicking on the send query button and then after a while we will get the result so as you can see we got the result now you saw that let me try to give the model something that will let it generate a lot of text so that we can wait for example I can say give me a Java program that fetches dates the data from an API you can see that while waiting a progress bar will appear to indicate to the user us that everything is working and he just needs to wait okay so this is what we are going to be building in this video to follow this tutorial you will need the following prerequisites first the API key which you can create from the Google AI Studio website this is how it looks like you just cck click on this button and then you are going to see the list of API Keys you click on it you copy it and then I will show you where to use it second the latest preview version of Android Studio iguana so you need to come to this website and then install the Iguana version because in order to be able to use Gemini you need to use the beta version all the mentioned sites are available in the description as well as the source code of this project now open Android Studio in the new project window select the empty views activity here hit next give the project a name I will call it first Gemini tutorial make sure to CH to choose Java and the minimum SDK should be 21 or higher press finish now we are ready to start designing the app the design is super simple we will start by adding a scroll view because sometimes the model response is big and can't fit in the available space inside the linear layout we will insert a text view a text input layout a button a progress bar and finally another text view let me zoom in a bit the first text view will show to the user this message so let's click on text chat with gini now let's change other parameters let's search for text size let's make it 34 SP search for text alignment make it Center if you have a specific font family can do so I'll just keep the default and finally we will add a margin top of 32 DP okay good we are done with the text view let's move on to the text input layout let's start by adding a 64 DP margin to the top to separate the text input layout from the text view currently the text input layout is touching the sides of the screen to solve this problem we will add 16 DP as padding to the start and end 16 DP and 16 DP in the end now expand the text input layout click on the text input edit text search for hint and set it to prompt you can see the text now changes finally give the text input edit text and ID so that we can use this view in the code I will use Query edit text next is the button let's change the text of the button to say send query search for text and replace it by send query and let's give the button a withth equal to 150 DP let's change the ID to something more inform formative like send prompt button refactor let's try to Center the button so let's search for Gravity expand layout gravity and click on Center horizontal okay so the button is now centered and let's not forget to add some margin search for margin top and I think the 32 DP looks good to me the next thing in the list is the progress bar initially this view should not be visible so so search for visibility and make it gone so that we cannot see it let's add a 32 DP as margin so search for margin top set it to 32 DP and let's give it a an ID I will set the ID to send query or send prompt progress bar refactor one more time now finally we arrived at the final view in the list this text view will show the model response first I will start by giving it model response text view as an ID one more time refactor then I will add some margins let's search for margin again margin top should be 32 DP let's add margin bottom 16 DP and again to prevent the text from touching the sides of the screen I will add 30 DP padding so search for 30 uh padding and let's make it 30 VP at the start and end of the text view good job if you followed all these steps we have finished working on the design now let's start to have some fun by open the main activity class and starts by Essentia our views when I say views I am referring to the text view the text input edit text the progress bar the button Etc as you can see we have used the IDS that we have defined in the previous section to get the views the next step is to use the Gemini model for that we will create a new class called Gemini Pro here open the Java folder the com. example right click and click on Java class as I said I'll will name it Gemini Pro and a very important note the code that I will write inside this class has been inspired by Google's documentation you can find it in this website please check the description if you want to if you want to visit this website so that you can understand everything in details you can see in this website that they are telling you what to do and because we are going to use the gem model so we need we need to install some dependencies so just copy these three lines of code go back to your project right click on The Bu build. cradle and down below you can see you have all these dependencies just add the three lines of code that you have copied from the website that I have showed you earlier okay if you do this you are going to see this button that tells you to sync now I'll click on it and and after this process finishes we will be able to use or to access the Gemini model as you can see everything now has been installed close this file and now we are ready to move keep working on this jight proc class I will create a function that will give me the model let's call it get model this function returns a generative model Futures as I said the method is called get model inside the function we will start by creating a new variable that will store the API key note it is not a good idea to expose your API key so make sure to put it somewhere for safety reasons in my case I will create a class called build config and here I will create a public static variable called API key and here I will put my API key so I'll not show it in the video but I will paste it here now I can safely create the API key so I will use the build config class and as you can see I can access the API key like this next we will change the safety settings of the modu to do that we are going to use the safety settings class and here you can specify the safety setting safety settings are used to block unsafe content across all dimensions in our case we will block only High ands safe content after that we will change the generation configuration like this here we are setting the temperature to be 0.9 the top K and top and after this you can as you can see you can build the is Generation configuration so that we can use it when when we want to instantiate the model finally we can instantiate the model using this line of code okay so here we are using Gemini Pro because this is the only available model that we can we we have Gemini Pro Vision but here because we are using justex we are going to use the Gemini Pro you can see we are passing the API key as well as the configuration and the safety settings and finally as I said this method returns a generative model Futures so we need to convert the generative model into generative model Futures and that's it now we have finished working on this function so I'll collapse it and inside the same class I will add a new function that will take the query or prompt and return the response I will call this function get response and it will return nothing but wait a minute you said that this function will return the response and you are using void yes yes I know I did this because I will use an interface to return the result just wait for a minute inside the get response method start by instantiating the Gemini model like this let see we are using the get model to give us the then create the content this class represents content sent to and received from the model after that we will create an Executor using the following line of code this line is creating an Executor instance that will be used to run the call back methods when the future completes you have many options for the executor you can use threadpool execut or scheduled thread pool executors you can use the fork joint pool or finally the single thread executor here I am using a very simple one but you can experiment with the others now we are ready to receive the response what I pasted here comes directly from the documentation basically if everything went well you will receive the response inside the answer success method on the other hand if something went wrong the on failure method will be called the problem here is that we cannot return the response from within the on success method let me show you if I try to type in return result text and let me change this to a string uh let me see so it is a generative content response you can see that we have an error here it is telling me that you you cannot return a value from a method with void result type okay so this is the problem here if I try to change this to string I will get another problem because I am overriding this function you can see that is saying is anonymous class derived from blah blah so here you cannot do this this is why I said in the beginning that even though this function needs to return the response we we cannot do that and this is why I used void when declaring the function to return the response I will add an interface called response call back so just delete this line here let's click create the interface as I said I will name it response call back make sure to to choose interface and hit enter here I will create two functions inside this interface the on response and the on error functions now go back to the the Gemini Pro class add the response call back as a parameter or as an argument to the get response method so I'll just name it call back we will use this interface inside the UN success and on failure methods inside the unsuccess method add this line callback do on success or on response and pass the result text S similarly go to the on failure method and use the call back but this time you need to call the on error method we are done with this function and with the class I hope that you are still with me and that you didn't get discouraged by what we have done so far close the Gemini Pro File as well as the interface and go back to the main activity now we will add the on click listener event to our button send query button do set on click listener I will use the Lambda expression inside we will create an instance of the Gemini Pro class I will get the query from the input text and I will show the progress bar then we will reset the content of both the text input edit text and the text View and finally we will call the get response method I will pass the query as well as the response call back okay so this is how it looks like inside the on response I will type in response text view. set text so remember response text view is the text view that we have added here here we will show the model's response after we after after getting the response we need to remove the progress bar on the other hand if we get an error we will show a TOS message also don't forget to remove the progress bar good job we have completed this section of the tutorial believe it or not we are ready to start testing the application and hopefully if we didn't miss anything we will get the same result as I showed you in the beginning of this tutorial so let's make sure that your device is connected and run the application let's start testing the application here I will type something what is the best programming language click on the send query button you can see that the progress bar appear is appearing which is good let's wait for the model to give us the response so as you can see it is saying saying there is no one best programming language Etc so we can see that the scrolling view is working and the model gave the response and everything is good let's try to see um let's give it another what is the tallest building on Earth you can see that the progress bar appears and we get the response it's khif so everything is working this is great we have reached the end of this tutorial I hope that you have been able to replicate what I showed you and you learned something new thanks to this video I have some other tutorials that I will work on so if you are not subscribed to the channel make sure to do so until then see you next time

Channel: 3CodeCamp

Views: 1,176

Keywords: Gemini API, Gemini Android SDK, getting started with gemini in android, Integrate Gemini in Android, How to use Gemini in Android, How to use the Gemini API for Android apps, Gemini and Android apps, Using Gemini in Android, How to use text in Gemini, Prompt Gemini android app, How to build an AI android application, AI android application, AI Gemini android, Android AI app, Android the Gemini API, Androi AI app 2024, Android AI chat app, Andoir chat app Gemini

Id: ovO1NpAMAEk

Length: 18min 54sec (1134 seconds)

Published: Sun Jan 28 2024