Christmas Tree - Android

 Just a few more days are left in this year and Christmas Trees are all around. That is why we decided to make an app that will bring some of that joy to the Android. With this app we will showcase random numbers, how you can search for views by type on activity (or view) and how to change colors using tint. To make it even more fun we will use CountDownTimer to change colors every second and drawable for light bulbs. This will be fun practice, packed with knowledge.

Check our video for the final result:




We will start with setting up our activity.

1. First we will create a new project and add an empty activity.
○ Check our blog on How to start a new project


2. Change ConstraintLayout to RelativeLayout, both will work equaly good, but it will take you longer to position all the elements on activity with ConstraintLayout. With RelativeLayout you can just drag/drop elements, for this purpose it will be the quickest.
○ If you forgot how to change Layout type, check blog on How to prepare activity for a RelativeLayout
○ You will have to delete TextView (“Hello world”) first, to have an empty layout.
(you will use activity_main.xml which was created with the project)


3. Now we need to change the background. Since we will be making an app, that will light up bulbs on a Christmas Tree. All we need is a picture of a Christmas Tree. We have prepared one for you to start with, but you can customize your app and choose your own, with google search.
○ You can download our image on this link Christmas tree
○ We suggest to rename the file to “christmas_tree.png” or just remember, that it will show with another filename in the dialog window.



4. Once you have a picture of a tree, copy/move your file to the drawable folder.
○ You can locate your folder with right click on the drawable folder and using Reveal in Finder (on Mac) Or Show in Explorer (for Windows)

Reveal in Finder

   ■ Then copy the image file so the folder will open.
○ Make size of your file smaller than 1000x1000 so it will work on most devices, if the image is too big an error will occur. (Ours is 540x960)


5. Select a background for your layout, go to activity_main.xml
○ First switch Properties/Attributes toolbox to show all attributes.

View all attributes

   ■ You can do this with the double arrow button (picture above)
   ■ Or with the "View all attributes" link on the bottom of toolbox

View all attributes (bottom)

○ Then look for the background attribute within the list of attributes

Background attribute

○ When you use picker (“...”) it will open dialog window where you can choose the drawable (our image) we have just added

Pick a resource

○ Once you will set a background it will look something like this:

Activity with Christmas tree



6. Now we will prepare drawable for all the light bulbs. First we will show you how to make a circle drawable. We will use it to set it as an image for our ImageViews (or light bulbs). We will set a size as well, this will make it easier for us to put ImageViews on our tree (RelativeLayout).
○ Add a new drawable with a right click onthe  drawable folder (in project window).

New drawable resource

○ Choose New/Drawable resource file. Name it circle

New drawable resource (circle)

○ Go to circle.xml In Layout Editor switch to text view (with the button on picture bellow)

Switch to text view

○ Code in circle.xml should look like this:

Drawable code (start)
 
○ Now we will replace this code with our code:

Drawable circle

○ It has only one shape: “oval” and a size 30dpX30dp and a solid color (you can choose other color but since we will change it with code, we have just used @color/colorPrimary.


7. Now we will change the name of your layout, so that we will be able to reference it later (with R.id.ourLayout)
○ Change ID to “ourLayout
○ With this we will be able to find our layout on an activity with resources


8. Now add as many light bulbs as you like to your activity. For that we will use control ImageView

Drag/drop ImageView

○ Just drag/drop it on your tree (from list of controls). Once you will drop it, it will open a dialog window for drawable, choose “circle” drawable

Pick resource for ImageView

Repeat this process to get something like this: 

Activity with Christmas tree and Light Bulbs

○ You don’t have to name all the ImageViews since we will search for them with code using just a type ImageView


9. We have prepared our activity, now it is time to write some code. First we will add a function that will change colors of our bulbs. We will name it colorLights

colorLights function

○ What the function does is:
   ■ it gets all child views of our layout.
   ■ Next it iterates through all of them with for loop.
      ● For each element we check type and if it is equal to ImageView, we will change color for it.
   ■ For color we will get 3 random numbers and store them in the variables of type int (intR, intG, intB)
   ■ We will apply ImageTintList in order for light bulb to change it’s color. Just copy code to be sure.


10. Now we will add CountDownTimer object in our onCreate method

CountDownTimer

○ Don’t forget start() on the end of the CountDownTimer definition.
○ There will be only one line of code in run method. And this is:

ColorLights

   ■ This will just call the function we prepared before. Put this line of code inside run method.



11. This is it, have fun! Merry Christmas and Happy New Year!