Color-My-View-App - Layouts - ColorMyViews app

Overview

Layouts - ColorMyViews app

This is the second toy app for lesson 2 of the Android App Development in Kotlin course on Udacity.

ColorMyViews

The ColorMyViews app is a demo game app that lets users click to color boxes and the background.

This app demonstrates the following views and techniques:

  • Using the Layout Editor to create layout
  • In the Layout Editor: Creating chains, aligning objects, using baseline alignment for labels

Screenshots

Screenshot1

How to use this repo while taking the course

Each code repository in this class has a chain of commits that looks like this:

listofcommits

These commits show every step you'll take to create the app. Each commit contains instructions for completing the that step.

Each commit also has a branch associated with it of the same name as the commit message, seen below:

branches Access all branches from this tab

listofbranches

branchesdropdown

The branches are also accessible from the drop-down in the "Code" tab

Working with the Course Code

Here are the basic steps for working with and completing exercises in the repo.

The basic steps are:

  1. Clone the repo
  2. Checkout the branch corresponding to the step you want to attempt
  3. Find and complete the TODOs
  4. Optionally commit your code changes
  5. Compare your code with the solution
  6. Repeat steps 2-5 until you've gone trough all the steps to complete the toy app

Step 1: Clone the repo

As you go through the course, you'll be instructed to clone the different exercise repositories, so you don't need to set these up now. You can clone a repository from github in a folder of your choice with the command:

git clone https://github.com/udacity/REPOSITORY_NAME.git

Step 2: Checkout the step branch

As you go through different steps in the code, you'll be told which step you're on, as well as a link to the corresponding branch.

You'll want to check out the branch associated with that step. The command to check out a branch would be:

git checkout BRANCH_NAME

Step 3: Find and complete the TODOs

Once you've checked out the branch, you'll have the code in the exact state you need. You'll even have TODOs, which are special comments that tell you all the steps you need to complete the exercise. You can easily navigate to all the TODOs using Android Studio's TODO tool. To open the TODO tool, click the button at the bottom of the screen that says TODO. This will display a list of all comments with TODO in the project.

We've numbered the TODO steps so you can do them in order: todos

Step 4: Commit your code changes

After You've completed the TODOs, you can optionally commit your changes. This will allow you to see the code you wrote whenever you return to the branch. The following git code will add and save all your changes.

git add .
git commit -m "Your commit message"

Step 5: Compare with the solution

Most exercises will have a list of steps for you to check off in the classroom. Once you've checked these off, you'll see a pop up window with a link to the solution code. Note the Diff link:

solutionwindow

The Diff link will take you to a Github diff as seen below: diff

All of the code that was added in the solution is in green, and the removed code (which will usually be the TODO comments) is in red.

You can also compare your code locally with the branch of the following step.

Report Issues

Notice any issues with a repository? Please file a github issue in the repository.

You might also like...
Gallery: an Android app developed for displaying images from unsplash website

Gallery App Gallery is an Android app developed for displaying images from unspl

An android app that can calculate the minutes from the date the user entered, till today.
An android app that can calculate the minutes from the date the user entered, till today.

AgeInMinutesApp An android app that can calculate the minutes from the date the user entered, till today. If user tap Select Date button, Calender dia

A layout engine for Android that decouples layouts from the View containers that manage scrolling and view recycling. FreeFlow makes it really easy to create custom layouts and beautiful transition animations as data and layouts change 🎨 A color picker for Android. Pick a color using color wheel and slider (HSV & alpha).
🎨 A color picker for Android. Pick a color using color wheel and slider (HSV & alpha).

ColorPicker English | 中文 A ColorPicker for Android. Pick a color using color wheel and slider (HSV & alpha). Gradle dependencies { implementation

For color lovers! A simple but powerful Android color picker
For color lovers! A simple but powerful Android color picker

#DEPRECATED Credits for the logo goes to Hafiz Ahmmed (https://github.com/hafizahmmed) ColorBox library Features Dynamic color preview; Change the col

A color picker and a color preference for use in Android applications.
A color picker and a color preference for use in Android applications.

HSV-Alpha Color Picker for Android This library implements a color picker and a color preference for use in Android applications. Features I couldn't

Color.kt is a modern color science library for Kotlin Multiplatform and Java.

Color.kt is a modern color science library for Kotlin Multiplatform and Java. It includes modern perceptually-uniform color spaces and color appearance models, such as Oklab and ZCAM.

Color.kt is a modern color science library for Kotlin Multiplatform and Java.

Color.kt is a modern color science library for Kotlin Multiplatform and Java. It includes modern perceptually-uniform color spaces and color

This is an android studio plugin that allows you to creates new color in hex format based on a percentage (0-100) and a base color you specify.

alpha-color Description This is an android studio plugin that allows you to creates new color in hex format based on a percentage (0-100) and a base c

Color-Book - A simple color book made with compose
Color-Book - A simple color book made with compose

Color-Book A simple color book made with compose

A library for showing different types of layouts when a list view is empty
A library for showing different types of layouts when a list view is empty

Android Empty Layout Please note that this project is not being maintained now. Hopefully a new version will be available soon. A library for showing

Custom view to expand long text with view more,less action , you can customize min lines , action color
Custom view to expand long text with view more,less action , you can customize min lines , action color

ExpandableTextView Custom expadable text view Examples : mostafa.projects.expandabletextview.ExpandableTextView android:layout_wi

Add curve at bottom of image views and relative layouts.
Add curve at bottom of image views and relative layouts.

Crescento Android library that adds a curve at the below of image views and relative layouts. CrescentoImageView and CrescentoContainer are the image

A Collection on all Jetpack compose UI elements, Layouts, Widgets and Demo screens to see it's potential
A Collection on all Jetpack compose UI elements, Layouts, Widgets and Demo screens to see it's potential

ComposeCookBook Declarative UI A Collection of all Jetpack compose UI elements, Layouts, Widgets and Demo screens to see it's potential. Jetpack Compo

A library that easily allows you to mask layouts/viewgroups
A library that easily allows you to mask layouts/viewgroups

Maskable Layout Overview ======================= The Maskable Layout is a simple framelayout that allows you to easily mask views and viewgroups. You

[] Explorations around Android custom layouts

android-layout-samples Explorations around Android custom layouts, including off main thread View measure/layout passes. Sample code for: Composite Vi

Add curve at bottom of image views and relative layouts.
Add curve at bottom of image views and relative layouts.

Crescento Android library that adds a curve at the below of image views and relative layouts. CrescentoImageView and CrescentoContainer are the image

RecyclerView Adapter Library with different models and different layouts as convenient as possible.
RecyclerView Adapter Library with different models and different layouts as convenient as possible.

RecyclerView Presenter Convenience library to handle different view types with different presenters in a single RecyclerView. How to install repositor

An Easy-to-use Kotlin based Customizable Modules Collection with Material Layouts by BlackBeared.
An Easy-to-use Kotlin based Customizable Modules Collection with Material Layouts by BlackBeared.

Fusion By BlackBeared An Easy-to-use Kotlin based Customizable Library with Material Layouts by @blackbeared. Features Custom Floating Action Buttons

Owner
null
Monet color system with Material You

Monet Google's Monet color system (Android 12 Beta 2) library. Usage Jetpack Compose Generate Monet color palette monetColorsOf(Color, darkTheme) Loca

null 5 Feb 16, 2022
Alwan 🎨 is an Android Jetpack Compose color picker library.

Alwan Alwan is an Android Jetpack Compose color picker library. Preview Recording.mp4 Download Gradle: dependencies { implementation 'com.raedapps:a

Raed Mughaus 6 Sep 16, 2022
Standalone Android widget for picking a single date from a calendar view.

TimesSquare for Android Standalone Android widget for picking a single date from a calendar view. Usage Include CalendarPickerView in your layout XML.

Square 4.4k Dec 20, 2022
An android library which provides a compact calendar view much like the one used in google calenders.

CompactCalendarView CompactCalendarView is a simple calendar view which provides scrolling between months. It's based on Java's Date and Calendar clas

SundeepK 1.5k Dec 9, 2022
Android calendar view (like card)

android-calendar-card (Google Play Demo) Android calendar view (like card) Simple and easy to modify Author: Michał Szwarc #CalendarCardPager License

Michał Szwarc 473 Nov 10, 2022
Android calendar view inspired by Sunrise calendar and iOS7 stock calendar

SilkCal Android calendar view inspired by Sunrise calendar and iOS7 stock calendar. Usage Add compile 'me.nlmartian.silkcal:library:0.1.1' to your dep

JunGuan Zhu 385 Nov 25, 2022
A material-styled android view that provisions picking of a date, time & recurrence option, all from a single user-interface.

SublimePicker A customizable view that provisions picking of a date, time & recurrence option, all from a single user-interface. You can also view 'Su

Vikram 2.3k Jan 4, 2023
A lightweight monthly calendar view for Android, fully written in Kotlin. Designed to meet the minimum demands for typical calendars.

Light Calendar View A lightweight monthly calendar view for Android, fully written in Kotlin. Designed to meet the minimum demands for typical calenda

Recruit Marketing Partners Co.,Ltd 444 Dec 9, 2022
Jetlime - A simple library for TimeLine view in Android

JetLime ⏱️ A simple yet highly customizable library for showing a TimeLine view

Pushpal Roy 107 Dec 6, 2022
Android interval timer app using compose + compose navigation, dagger hilt, room, kotlin coroutines + flow and mvvm design pattern.

What's InTime? ⏳ InTime is an interval timer application using android jetpack components and a long running service. The purpose of this project is t

P. 46 Oct 10, 2022