Leveraging Gemini AI in Android Studio

Estimated time: 30 minutes

Welcome to the lab on leveraging Gemini AI in Android Studio. In this lab, you will create a simple app with a linear layout and basic widgets, guided by Gemini AI. The app will take user input and output the number of words in that input. The goal is for you not to write any code, but ask Gemini to generate the logic for you. The final result would look something like this.

Objectives

After completing this lab, you will be able to:

Running the lab

This is an instructional lab that does not require a Skills Network lab environment. You will follow this lab on your local machine using Android Studio.

Key terms

Instructions

Step 1: Create a new project

  1. Open Android Studio and start a new project.
  2. Select "Phone and Tablet" and "Empty Views Activity" as the project type.
  3. Name your project Gemini and choose Java as the language.
  4. Confirm the package name is com.example.gemini. This is important later on in the project.
  5. Select "Finish" to create the project.

Step 2: Add LinearLayout

  1. Open the activity_main.xml file in the res/layout directory. This is the main view of the project that opens when the app is launched. Switch to the "Design" view by clicking on "Design" on top of the window.

  2. Select and delete the existing text box that says "hello world" in the middle of the screen.

  3. Convert the main constraint layout to a linear layout.

  4. Android Studio might complain about missing orientation. Use the quick fix to set the orientation to vertical.

Step 3: Add TextView

  1. Drag a TextView from the Palette into the LinearLayout.
  2. In the Attributes panel, set the id to app_title.
  3. Set the text to "Gemini AI Word Counter."
  4. Set the textSize to 32sp.
  5. Set the gravity to center.
  6. Set margin to 24dp.
  7. Set the layout_gravity to center_horizontal.

Step 4: Add input for user to enter text

  1. Drag an EditText from the Palette into the LinearLayout.
  2. In the Attributes panel, set the id to user_input.Delete the text and set the hint to "Enter some text."
  3. Confirm that the inputType is text.
  4. Set layout_margin to 44dp.
  5. Set padding to 16dp.
  6. Set textSize to 30sp.
  7. Set minHeight to 60dp.

Step 5: Add button widget

  1. Add a Button below the EditText:
  2. Drag a Button from the Palette into the LinearLayout.
  3. In the Attributes panel, set the id to action_button.
  4. Set the text to "Submit."
  5. Set layout_margin to 24dp.
  6. Set padding to 16dp.
  7. Set textSize to 40sp.
  8. Set minHeight to 60dp.

Step 6: Add output widget

  1. Drag a TextView from the Palette into the LinearLayout.
  2. In the Attributes panel, set the id to result_text.
  3. Set the text to "Results will be displayed here".
  4. Set textSize to 30sp.
  5. Set layout_margin to 24dp.
  6. Set padding to 16dp.

The design should look like the following at this time.

Step 7: Install and enable Gemini AI

  1. In Android Studio, navigate to File > Settings > Plugins and search for "Gemini AI."

  2. Accept the license and Install the Gemini AI plugin. This might restart Android Studio.

  3. Access the Gemini AI by clicking on the star-like button on the right-hand panel in Android Studio.

  4. You will notice a dialog to authorize Gemini.

    At the end of the process, you will see a successful message. Go ahead and follow the wizard to sign into your Google account and authorize Gemini AI.

    You can close this and go back to Android Studio. You will see a screen informing you that Gemini was authorized.

  5. You should now see the AI panel populated with a dialog box with a question prompt.

Step 8: Use Gemini AI to hook up the button click

  1. Great! We are now ready to ask Gemini for help. The goal is to add code that will take the user input and display the count of words in the output view when the action button is clicked. Let's ask Gemini how to do this by asking I want to count the number of words in the user input (user_input) when the action_button is clicked. The results should be displayed in "result_text" widget. Use Java to write this code for me and tell me where to add it in the package com.example.gemini in this project. Thank you!. You can rephrase it as you like. Notice that some key pieces of information were provided, such as using Java and the package com.example.gemini. Make sure the package name matches the package your MainActivity.java file is in. Remember AI response is not deterministic and you might see a different answer with a different prompt.

  2. Gemini should produce code for the MainActivity.java file! How cool is this!

    Not only that, it also explains the code below and gives you references to read more.

  3. You can now copy and paste this code into MainActivity.java file.

  4. That's it! We can run the application in the emulator now.

Step 9: AI is not always right!

When first generating this code, an issue cropped up where Gemini produced what was obviously an incorrect java code. The onclick listener on the button was generated as publicvoid onClick instead of public void onClick. This resulted in an error in the java file.

After letting Gemini know that it had made a mistake, it quickly apologized and corrected the function!

Note: You may encounter different error messages in your code based on the AI's response. Please adjust your code accordingly.

Step 10: Run the application

  1. Ensure your AVD is set up.

  2. Select the "Run" button in Android Studio.

  3. Select your AVD and wait for the application to launch.

  4. Verify that the app appears as designed, the button click updates the result TextView with the word count of the entered text.

You have now successfully created an app with a linear layout, basic widgets, and hooked up the button click, leveraging Gemini AI to generate the application code. This foundational skill will be crucial as you continue to develop more complex AI-powered apps in Android Studio.

Author

UL