Home   Courses   Blog   About

How to make your first custom component for Android Beginners

I was asked to create a TextView that will show the price of a cryptocurrency. When I was looking at all those numbers I didn’t like it at all. Just too much numbers for my taste. The problem is that people are very bad with decimal numbers. So we needed a solution. Working with a designer we came up with a genius solution. Having a few decimal digits in bold would tell you where’s the middle of the decimal number. Depending on the day the price of 1$ in bitcoin is around 0,0001 and that is easy to mistake when paying. So we had to make this clearer to users.

The solution for showing cryptocurrencies

Nice and clean. All the decimal digits to the middle are in bold and the others are not. This way you quickly see the where significant part ends.

We need a component where we can change the size, font name, color... of text and still have the effect of bold decimal digits.

Making a custom TextView

So how do we do this. When I’m building such a component, I always start with using a normal component and study the whole code using it and adding code and design using normal components in the layout. Since I have already done all that for you,  we can skip it and go straight to writing the final code.

The first thing we need to do is add a new class to our project. We will call it CurrencyView. It will inherit from the TextView component. So we will get all the features of TextView straightaway.

  1. Add a new project or work in an existing one if you want
  2. Add a new class  
    • In Kotlin you can add a Kotlin file or a class. And we need a Class to work with. So choose a Class
    • Name it CurrecyView
  3. Now we have to inherit our base class of TextView. But we will go one step further and inherit AppCompatTextView because it will support features on older versions of the platform. If you choose just TextView, Android Studio will let us know, that it is better to use AppCompatTextView. And this is how our class declaration looks like.
    • Inheritance is important in programming and it looks like a bit of magic. With simple instructions we get all the functionalities of an original class for free.
  4. All we need is to add constructors, but Android Studio can help us with that.
    • If you use the component now it will behave as any TextView would. But we will extend its functionalities before running it.

Storing the value

We will work with the TextView component as a basis. We can not use the text property to store our value since we will structure it a little bit more. The first thing is to store a value of a cryptocurrency. Since crypto has a lot of decimal digits the usual solution is to store it in string. So that there is no unwanted rounding of decimal digits. We will do the same.

  1. Let’s add a property value
    • Put this code just after the class declaration
    • In Kotlin, you can set the default value of a property just by using the equals sign.
    • We left getter with the default implementation, but we wanted to override setter. Why? Because we need to format the text, after we have the value for our CurrencyView. You can see that after changing the value (field = value) we use our function makeBold.

Properties for customization

We want to prepare our component to work with a few cases. Some crypto currencies have a lot different values than Bitcoin and we have to change the number of decimal digits for them. That's why we will add 2 more properties (or variables)

  1. Add a variable for the number of decimals and name of the currency
    • With these variables you will be able to change the number of decimals, that will be bolded and the name of the currency.
    • Put this code below the value property.

Formatting our currency value - makeBold

The most important function of our CurrencyView is “makeBold”, that will format our value and return SpannableStringBuilder. SpannableStringBuilder is a class that helps us format text using spans. There are many different spans you can use. We will use StyleSpan for bolding and ForegroundColorSpan for changing the color of the second part of the CurrencyView value. One that is nice to use is also URLSpan for links in your text, QuoteSpan for quotes.... Check all the spans.

  1. Add code for makeBolde below all the constructors
    • Let me explain the code a little bit. First we get the position of “.” which is a decimal placeholder sign and store its position in intDecPos
    • Once we have a decimal point position we can calculate the number of bold characters. We do this in two steps first is raw calculation. The next step just checks if there is less characters in the value than characters we want to bold. If we skip this step, there is a possibility, that an error will occur (try setting 0.01 for a value)
    • Next we start building our text. We append the value and currency name.
    • We bold the text using the setSpan method, we need to specify the type of span (StyleSpan) and start and end of the span. On the end you can see constant SPAN_INCLUSIVE_INCLUSIVE this means that if add new text within this span it will have the same formatting as our span.
    • The last span is just a finesse, it will color the unimportant part of the value in a gray color, so that the important part will be even more obvious.

Using our Currency view on Layout

  1. First you need to add CurrencyView to your layout (usualy activity_main.xml). One way of using our CurrencyView is to add a TextView on your layout and then just change the tag in the XML editor. For example your code could look something like this
    • And you will change it to (the “com.codebrainer.examples” could be different for your project)
  2. Next you will need to set a value for our “currencyValue” component
    • Without setting a value in the code, formatting will not work. For now you can put the code in the onCreate method inside MainActivity after setContentView. When you use this control for a more mature project, this part is used where you bind components with data.

This is our first custom component. Now you have the knowledge for making the next custom component. You can start with changing colors, maybe using this example to add a link in a text. Let us know if we can extend our example even further.