Week 4: Lab Overview
TABLE OF CONTENTS
Lab 4: Menu System and Images (50 points)
Lab Overview
Scenario/Summary
In this lab, you will be working with different layouts and widgets to create a survey for a user. The survey will have spinners and will allow you to use Android data adapters to populate them. We will also explore some of the different layouts in Android. When you are finished creating your application, submit all of your open-source files.
Your project will include the following.
• Open-source .java files
• Zipped project file
Deliverables
• Completion of Steps 1–4
Grading Rubric Points
Completion of Steps 1–4 50 points
TOTAL 50 points
Required Software
This lab will use the following Lab Resources.
• Android Studio
Use a personal copy of the software or to access the Lab Resources, go to the Lab Resources section of the Course Resources page.
Lab Steps
Step 1: Menu System
To introduce our topics this week, please watch these two videos.
Android apps often contain menus that allow users to perform certain actions or customize settings. A menu is hidden until a user activates it, and the menu can have one or more items with additional functionality. We will be creating an options menu. Most navigation within a mobile app should actually be controlled by widgets that appear in the user interface rather than a menu bar. So we will create a main menu and an options menu.
In the three previous labs we used relative layout (you may have used constraint layout). We will discuss three more layouts available in Android. Linear layout is useful for creating a user interface that displays widgets in a vertical or horizontal line. A frame layout is a simple layout useful as a placeholder. A table layout is useful for displaying controls in a grid.
Open the IntroAndroidApp from last week. You can do this by opening Android Studio and Clicking File-> Open. You should see the AndroidStudioProjects folder. Your project should be in there. We will be adding a menu system to our app now.
The first step is to rename your MainActivity.java to WeatherActivity. Right-click on the MainActivity and choose Refactor -> Rename. Rename the java file to WeatherActivity.java. When you rename it, Android Studio automatically changes the name of the Java file and the name of the class.
Next, change the name (Refactor->Rename) for activity_main.xml and content_main.xml to activity_weather.xml and content_weather.xml.
Next, we are going to create our main menu screen. Right-click on the app module and choose New-> Activity->Basic Activity. Name it MainMenuActivity.
Add the following code to strings.xml. Note: Change Your Name in the first string to your name. If you add an apostrophe, you must escape it. For example:
Edit the content_main_menu.xml. The main menu will contain a welcome message and then buttons for the user to access different pages. The buttons will be in a grid layout; previously we have used relative layout. You want three columns and two rows of buttons. The opening and closing of the grid layout is shown along with the first three buttons (the top row). Write the code in the text view to create the rest of the buttons. Note that the first row, first column is 0,0:.
//code for button named btnSong here
//code for button named btnTakePic here
//code for button named btnDraw here
Your screen should look like the following.
In order to set the starting activity of your android app to the main menu, go to the AndroidMainifest.xml and change the starting activity to the MainMenuActivity by moving the intent filter to the MainMenuActivity and not the WeatherActivity (code in bold).
Android has a menu for overflow actions that are used less often. Even so, most navigation should be performed with widgets available in the user interface. There are two ways to add menu entries to the action bar menu: in XML or in the java code. Below we will add items in xml, we will add options so the user can exit the program or go back to the main menu using these overflow actions.
Edit res/menu/menu_main.xml and add the following items. Note: You can type Exit and Main Menu as the title or add it to strings.xml.
Edit the WeatherActivity.java. We will add code to the onOptionsItemSelected method so that if the user clicks the main menu button, then they will be directed back to the main menu. Note: This code must be added to every activity in order for these overflow menu items to work.
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
switch(item.getItemId()) {
case R.id.mnuMain:
startActivity(new Intent(getApplicationContext(), MainMenuActivity.class));
return true;
case R.id.mnuExit:
finish();
default:
return super.onOptionsItemSelected(item);
}
}
}
Step 2: Using Intents to Launch Activities
In Android apps, the activity has a user interface and each activity has a layout file detailing what the user sees and a Java file that affects how the program reacts to user interaction. To pass control between activities we will use Intent objects.
Edit MainMenuActivity.java. We will add a private helper method that uses an explicit intent to pass control to an activity. Note: Remember to press Alt+Enter to import the Intent code. This code will go after the onCreate method:
private void goWeather() {
Intent intent = new Intent(MainMenuActivity.this, WeatherActivity.class);
this.startActivity(intent);
}
Next, add a listener to the onCreate method for the button to call this function.
//Add a listener to the button to take you to the temp converter
Button btnWeather=(Button) findViewById(R.id.btnWeather);
btnWeather.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
goWeather();
}
}
);
Step 3: Adding MyDrawing Code
Add a new basic activity named MyDrawing.
In our drawing we will add a picture and a shape. This is a basic introduction to adding an image and a shape; however, feel free to modify your drawing to make it more fun and interesting. The ImageView widget allows you to display images with the src attribute pointing to the image in one of the drawable directories of the project. An image is known as a drawable resource and is stored in the res/drawable directory. There are different directories corresponding with the density of the screen. Extra high-density screens would use images stored in res/drawable-xhdpi. You will be adding one of your own images to the project. Choose a png, jpg, or gif image.
Open File Explorer and locate your image file. Remember your image file, and choose an image file with no spaces in the name and NO capital letters. Right-click on the image file and choose copy. Click on the drawable folder in your project and choose paste. If you see a pop-up up box asking which folder to store it, choose the default.
You should see your image in the drawable folder. We are also going to add an xml file to create a rectangle. Right-click on the drawable folder and choose New->Drawable Resource File.
Enter the following xml code to create a rectangle. (This rectangle is green. Feel free to choose your own color based on the hex color codes.
Name this file shape_rectangle.xml.
Edit the content_my_drawing.xml and add an image view and a text view. Note: You will need to modify the ImageView src so the name of the picture matches your resource name (I named my picture woodpecker). Feel free to add more shapes and pictures to your page.
Finally, add the code to your MainMenuActivity so that when the My Drawing button is pressed, your picture shows up. This code is similar to the code above for the btnWeather.
Step 4: Submission
Save and zip your entire Project workspace directory files (which must include all of your open-source files and your .apk file) with the name “LastName_FirstName_iLab4” and submit them.
Don’t forget to submit your lab.
* You can also use 2CO option if you want to purchase through Credit Cards/Paypal but make sure you put the correct billing information otherwise you wont be able to receive any download link.
* Your paypal has to be pre-loaded in order to complete the purchase or otherwise please discuss it with us at support@iqrajavaid.com.
* As soon as the payment is received, download link of the solution will automatically be sent to the address used in selected payment method.
* Please check your junk mails as the download link email might go there and please be patient for the download link email. Sometimes, due to server congestion, you may receive download link with a delay.
* All the contents are compressed in one zip folder.
* In case if you get stuck at any point during the payment process, please immediately contact us at support@iqrajavaid.com and we will fix it with you.
* We try our best to reach back to you on immediate basis. However, please wait for atleast 8 hours for a response from our side. Afterall, we are humans.
* Comments/Feedbacks are truely welcomed and there might be some incentives for you for the next lab/quiz/assignment.
* In case of any query, please donot hesitate to contact us at support@iqrajavaid.com.
* MOST IMPORTANT Please use the tutorials as a guide and they need NOT to be used for any submission. Just take help from the material.
******************************************** Good Luck ***************************************************
Any personal information received will only be used to fill your order. We will not sell or redistribute your information to anyone.
We will try our best to resolve the issue and if still persists we can discuss for a refund in case its required.