Lecture 2 & HW 2: ViewGroups, Input, and Documentation

Textbook: 2. Layouts and More Views

Lecture Demo:

Discussion Demo:

Announcements:

Congratulations on making it to week 2!

Let's remind ourselves of what we've learned so far with a recap:

  • So far, we've begun familiarizing ourselves with Android Studio and the file system

  • Set up our development environment

  • Began learning about the different types of views we can use in layouts

  • Saw how to make a new project

  • Started learning some of the common practices of Android Developers (like using strings.xml)

If any of these topics are confusing or something you would like more practice with, please come to any of the course staff's office hours! We are here to help you succeed!

Homework Instructions:

This week, we'll be creating a color selector app! In this app, the user can use the sliders to select any color values they want. Apps like this are super useful for UI/UX designers and what we implement today is a feature in many popular design apps like Adobe XD and Figma!

This week will be the first time you will create an Android Studio project from scratch, meaning there is no source code! If any part of making your own project is confusing see the Lecture 1 Demo to refresh your memory or come to office hours! We will help you get it sorted out! 😁

FYI: For this project and future projects (unless stated otherwise), you should be using an Empty Activity to create your projects.

Since we are going to focus more on views within ViewGroups and app layout we want you to create a specific user interface...

The app should look like this:

Requirements:

1. Use a ConstraintLayout for this layout.

2. There must be a color square that is horizontally centered and three SeekBars, each corresponding to red, green, or blue.

3. The thumb and progress bar of each SeekBar must correspond to its name (ie. the red SeekBar is colored red).

4. There must be a TextView to the left of the SeekBar with the color and its current value. The TextViews must be vertically centered relative to the Seekbar:

5. Moving the thumb on the Seekbar should change the text label and the color square accordingly.

6. Create a new layout for landscape mode and build the UI to look like this. Make sure that the layout contains the hex color that corresponds to the color square. The hex color label should also be horizontally centered relative to the color square.

Notice how the labels for the Seekbars have also changed to reflect only the color names.

The main difference is that instead of the dynamic color labels next to each SeekBar, the text underneath the color square will be changing. The SeekBars are also vertically centered in the landscape mode. It's okay if the SeekBars reset as you change the app's orientation (since we haven't learned how to persist data yet).

Tips and Tricks

How can we tailor the UI to be based on the orientation of the Android phone?

We can check the orientation of the phone directly as so!

        when (resources.configuration.orientation) {
            Configuration.ORIENTATION_LANDSCAPE -> {
                // Do something based on landscape
            }
            Configuration.ORIENTATION_PORTRAIT -> {
                // Do something based on portrait
            }
        }

How do colors translate to hex values?

Colors are represented as 6 length hex string (e.g. #XXXXXX), each color (Red, Green, Blue) can be represented with two hexadecimal numbers and are grouped in the string from left to right respectively.

Example:

Color.rgb(50, 168, 82)

50 has a hex value of 32.

168 has a hex value of A8.

82 has a hex value of 52.

Altogether, we have #32A852!

Take a look at the Integer documentation here for an easy way to convert integers to hex string values!

Challenge Problems

These are optional challenge problems for people who want the challenge. Completing each successfully will earn you 1 extra point per problem. If you do attempt a challenge problem, make sure to include a readme.txt that states which problem(s) you've attempted!

Switcharoo

  • Build the landscape XML file in a different ViewGroup than ConstraintLayout.

IT@Cornell

  • In addition to RGB, you have a toggle switch at the bottom that swaps the color palette to CMYK (Cyan, Magenta, Yellow, Black).

  • Switching to CMYK adds an additional slider. Make sure to change the text labels accordingly so that it's clear the color is CMYK.

If Stuck, Lost, Or Need Help:

Try these tips:

  1. Try looking over the lecture again and see if there is a section that explains it.

  2. Google it! Learning to read the Android Documentation is one of the best skills we can have as Android Devs! Stack Overflow is also allowed (use responsibly, no copy-pasting blocks of code)

  3. Come to office hours! We are here for you!

  4. Try posting a question on Ed Discussion!

  5. Set up a 1 on 1 time with Justin, Corwin, or any course staff! We are here for you.

Submission

After completing the assignment, you will need to export your project as a zip file and upload it to CMS which you can see in the tutorial on this page: Importing, Exporting, & Submitting Your Project

If you have any trouble at all, do not hesitate to reach out to the course staff, we are all happy to help or just talk! Best of luck!

Last updated