What is a function and how to color your name



Today we will make a function, that will help us color a name. This will be a nice example of what a function is. A function is a block of code, that will give us a result for given parameters. There are a lot of functions already prepared for us in Android and in Java itself. We use them all the time, without knowing it. :D

Here are a few examples, that we will use today and that you have probably already used.

findViewById

findByView

findViewById will find a view for a given resource name. We use this function to find controls we have put on screen.

getText, toString

getText, toString

getText is a function within EditText control, that will return Editable and this is a part of control, that takes care of text, that is displayed. toString is a function on a lot of classes but it is also a part of Editable and will return text as a String. This is a type we can use to read what is written in our control. So when the user writes a text this is probably the functions we will use.



Functions we write

Custom functions

When we are programming, we write a lot of functions. Today we will make a new function that will return an int (a integer representation for color). It will help us color EditText according to the text we have written in the control.



Let’s start


But for this all to make sense, the best thing is to practice. Our app will color names and in the end you will be able to compare the color of your name to the color of the name of your friend or a lover, whatever you choose. These way we will build a simple love calculator.

1. Create a new project

Take a look at our blog on How to start an Android studio project


2. Position elements on screen

We will use ConstraintLayout to position all the elements on the screen (take a look at video to see how to postion elements). So be careful to make all the necessary connections between controls. Check with picture below of the final layout.  (If you want to use RelativeLayout here are instructions on how to change ConstrantLayout to RelativeLayout)

Add two EditText-s (in Palete you will find the PlainText control)
- name the first control “textName1” and the second control “textName2”.
- Set hint to “Enter name” for both controls

Add one Button on screen
- name it “buttonColorName” and
- change the text to “Color your names”

The final layout should look like this

Final layout for name color

Time for code! :)


3. Go to MainActivity.java and prepare all variables to work with controls, these code should go after the MainActivity class definition.

Variables for name color

4. Once we have variables we can initialize values for them. We will do this in the onCreate function of the MainActivity

Find elements for name color

5. We will also add a onClickListener for buttonNameColor

OnClickListenere



And now the functions

 
6. First we will get the text from our EditTexts

Get string from EditText
This code goes into onClick method of our OnClickListener. So first two lines of onClick.

7. It’s time to make our function, first we will make a function itself. The function will return the value of type int and will take 1 parameter of the type String.

Start of first function
This function goes after end of onCreate method. Or just before last "}" in java file. (Not sure, check video :D)

8. We will now add first line of code for our function, and the line is:

Get hash for string

This line will assign a value for the name, we will get the value with the function “hashCode”, this function will assign an integer value to a string. And we will remember this string for later.

9. Finish with adding two more variables, that will do a variant of first line

Hash for variant of text

First line (intG) will get hashCode for the uppercase variant of the name and the second line (intB) will get hashCode for the lowercase variant.

10. Now we have to return a value and it will be a value for a color, since we have created 3 integers we can create an RGB value for the color like this:

Get color from 3 integers

11. The complete function should look like this:

The complete function

12. We have done it, our first function has been written and now we can use it to change a color of the EditText (setBackgroundColor) for each name, our function (getColorForText) will return an appropriate value. We will put these code at the end of the onClick method.

Set background color to EditTexts



And that’s it, you can run the app and check the result, it should look something like this

Final look of app name color

Now check how you names mix and match. Check with lastnames as well. Find you perfect couple!