Week 2: Lab Overview
TABLE OF CONTENTS

Lab 2: Widgets and Layouts (50 points)
Lab Overview
Scenario/Summary
In this lab, you will be focusing on creating an interface that will have three radio buttons. The primary goal of this lab is to create multiple widgets on your main activity that will listen to user commands and trigger an action once a command is called. Just like you did in your last lab, you will need to keep debugging this program until it runs perfectly on your device or emulator. When you are finished creating your application, submit all of your open-source files and your .apk.
Your project will include the following.
• Open-source .java files
• A zipped project file
Deliverables
• Completion of Steps 1 and 2
Grading Rubric Points
Completion of Steps 1 and 2 50
TOTAL 50
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: New Project, Activity, and Layout
.
Please watch the following videos to help with the lab.
We will develop a Temperature Conversion android app that we will later add some exciting features to. To do this we will open a new project. File -> New -> New Project. Choose Basic Activity and Next. IMPORTANT – pick Java as the language and name the project IntroAndroidApp. Then click Finish.

First, we will add some string values. Android development environment encourages separating string resources from the rest of the user interface. This allows for apps to be easily created to work in multiple languages. Open /res/values/strings.xml and add some resources.

Degrees Fahrenheit
Degrees Celcius
Degrees Kelvin

Modify hello world (if it exists) to “Choose your temperature” and name the string resource tempChoose.
Next we will open res/layout/content_main.xml and add a radio group of the choices of these different temperatures. Be sure to choose the Text view of content_main.xml so you can see the xml. Please note, if you are using an older version of Android Studio, you will add this information in activity_main.xml. Newer versions of Android Studio separated content_main.xml (containing the contents such as text views, buttons, etc.) from the overall layout in activity_main.xml.
After the TextView widget in the xml code add the following code to generate a radio group. The wrap_content and match_parent are two predefined values for setting the height and width. The wrap_content wraps the height and width so it is large enough to display the widget whereas match_parent stretches the height or width to match the parent.

Next we will add three radio button elements inside the tempGroup Radio Group.

View the interface in Design view. In this view, you will notice the three radio buttons and your Hello World text still on the screen.
Design View
We can select the widgets in the graphical layout and move them or set properties. In the graphical view, select the first radio button and set the id property (in the Properties Window) to btnDegF, the second radio button should have an id of btnDegC and the third should have an id of btnDegK. To set the text property associated with these radio buttons, click on the Text property then the (…) button and pick the string resource. You will have to scroll down to find it. Repeat this procedure for all three radio buttons to display the text (Fahrenheit, Celsius, then Kelvin).
Select the entire radio group, and drag the group down below the “Hello World” string. You will see a four-pointed star to move the entire group. Change the text of “Hello World” to the string resource tempChoose, which should say “Choose your Temperature.”
Design View
View your XML code by choosing the Text view. You will notice several new properties of the radio buttons were modified, as was the text of Hello World. You can modify your design in both the XML text view and the graphical view. Click on the text Choose Your Temperature and set the text size attribute to 20sp, because sp is a scale-independent pixel. Feel free to modify other text properties to change the look of the title.
Add a TextView widget and a Button. You can choose to add these using the graphical view or the Text view. Add a string resource: “Convert” as the text for the button and leave the TextView blank. The id of the button should be btnConvert and the id of the TextView should be lblOutput. Please note on the screenshot below that the TextView is not showing because there is no text in it. We are adding these now and will use them later.

Please note: When using the ConstraintLayout in Android studio you will need to constrain each of your widgets on the screen (set the x and y positions) or the positioning will change when viewed in an emulator. To ensure that widgets stay in the position you place them when you are creating your app, in the xml file change the second line from this:

to change from ConstraintLayout to RelativeLayout

Save your work. We have built a great user interface! Next we will add some java code to do the conversion. To do this, open up MainActivity.java. We will need to import the classes for the widgets. Fortunately, Android Studio provides an easy way to do this by pressing Alt+Enter as you will see below.
In order to handle events, we must follow this four-step procedure.
1. Import the interface for the listener. We will do this in Step 2.
2. Use the current class as a listener. To do this, modify the class code so that it implements onCheckedChangeListener by adding the code in bold.

public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener {

When you do this, you may get a pop-up box asking if you want to import the class. Say OK. That takes care of Step 1! It is OK if the line above is underlined in red. Step 3 will fix this issue, because you will implement the interface for the listener.
3. Implement the interface for the listener. This should be after the onCreate method. Type in the following code.

@Override
public void onCheckedChanged(RadioGroup group, int checkedId){
TextView lblOutput = (TextView) findViewById(R.id.lblOutput);
switch(checkedId){
case R.id.btnDegF:
lblOutput.setText(“You chose Fahrenheit”);
break;
case R.id.btnDegC:
lblOutput.setText(“You chose Celsius”);
break;
case R.id.btnDegK:
lblOutput.setText(“You chose Kelvin”);
break;
}

}

4. Set the listener by typing in the code in bold in the onCreate method.

protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

//set listner
RadioGroup tempGroup = (RadioGroup) findViewById(R.id.tempGroup);
tempGroup.setOnCheckedChangeListener(this);
. . . . .

This four-step process is one method to handle events. There are multiple ways but this method is one we will use for this lab. In later labs, we will explore some different methods for handling events.
Save your program. Start your emulator and wait for it to load. Once it loads, run your program. Click on each of the radio buttons. You should see a different message for each of them.
Click image to enlarge

Step 2: Submission
Save and zip your entire project workspace and directory files (which must include all of your open-source files) and submit them.
Don’t forget to submit your lab.