CST2335 Lab 2

This assignment relates to the following Course Learning Requirements:

· CLR 1: Write a graphical user interface-based program, given design documents. Techniques used will be object-oriented programming, structured programming, top-down coding, and event-driven coding. CLR-2

· CLR 4: Debug program problems using manual and programmatic methods.

· CLR 7: Create GUI programs that support internationalization as well as sustainability.

Objective of this Assignment:

The following is an exercise to help you implement what you have learned in this module. It will allow you to familiarize yourself with the module content as well as practice the skills required to develop software in the Android Studio. The goal of this lab is become familiar with how XML and Java are combined for creating user interfaces. The layouts and widgets are created in XML, and Java then gets references to the objects created in XML to control the behavior of the application.

Pre-Assignment Instructions:

1. Review the Module 2 content in Brightspace.

Assignment Tasks:

1. Create a new branch in Git. Start by selecting the “Git” menu in Android Studio and select “Branches”. In the resulting dialog click “New branch” and call it “lab_2”. Using a new branch means all your commits will only change this branch and not the original branch. This means you can go back to the “main” branch at any time.

2. Go to https://flaglane.com/ and look for an image of an American flag. You should download the small PNG file, 200 pixels wide. Once downloaded, rename the file flag.png. Copy the file into the drawable folder in AndroidStudio. Next right-click on the “res” folder and select “New” -> “Android Resource Directory”. Set the resource type to be drawable and set the directory name to be “drawable-fr”. Next, download a French flag from httsp://flaglane.com/, a PNG file 200 pixels wide. Rename that file flag.png and copy it into the new drawable-fr folder you created. You will use these flags for the ImageButton later.

Note that if you are in Android view, you will not be able to see the empty “drawables-fr” folder in Android Studio. If you click “Android” you can switch into project view which will let you see empty folders.

3. For the rest of this lab, you will recreate the following image using different layouts.

a. One should only use LinearLayouts. Call it “activity_main_linear.xml”.

b. One should only use a GridLayout. Call it “activity_main_grid.xml”.

c. One should only use a ConstraintLayout. Call it “activity_main_contraint.xml”.

Row 1: The top item is a that has the string “I love Android”. Use the parameter ‘android:textSize=”30dp”’ to make the text bigger than normal. To the right is an using the flags downloaded in step 2.
Row 2: A object with the text “Switch on/off” beside the flag.
Row 3: A that says “Press Me”, and a that says “Check this out!”
Row 4: An with the hint “I love Android”. This should take up the entire row.

4. Add an ‘onClickListener’ to the “Press Me” button so that when it is pressed, it will put the current text of the EditText into the TextView.
It should also create a Toast when clicked to tell the user that the “Label has been updated.” The toast message should be translated into other languages so you should use getResources.getString(R.string.toast_message) to get the from the values-fr language folder.

5. Add a check changed listener to the Checkbox to show a Snackbar which says, “The checkbox is now”, followed by “off” if the Boolean parameter is false, or “on” if the Boolean is true. Add an “Undo” action button to the Snackbar which sets the checkbox back to its original state. You should be able to do this using the two parameters of
onCheckChanged(CompoundButton cb, boolean b){ …

//In the Snackbar’s setAction( ):

Snackbar.setAction( “Undo”, click -> cb.setChecked(!b);

}

6. Ensure that all strings (including those in the Toast and Snackbar) are translated into French. You can use Google Translate since you will not be marked on correctness of your translations.

Hints:

· You will have to use multiple LinearLayouts nested within each other. You can control the orientation with the “android:orientation” tag.

· In a GridLayout, set layout_weight=”1” and gravity=”fill” to make the objects use the entire grid box. Also, use layout_rowSpan=”2” to make an object use 2 grid boxes.

Rubric