Chapters
Chapters

Chapters

Hide chapters

Real-World Android by Tutorials

Second Edition · Android 12 · Kotlin 1.6+ · Android Studio Chipmunk

Before You Begin

Section 0: 5 chapters
Show chapters Hide chapters

Section I: Developing Real World Apps

Section 1: 7 chapters
Show chapters Hide chapters

Section II: Modularizing Your App

Section 2: 3 chapters
Show chapters Hide chapters

Section III: Enhancing Your UI

Section 3: 4 chapters
Show chapters Hide chapters

Section IV: Securing Your App

Section 4: 4 chapters
Show chapters Hide chapters

Section V: Maintaining Your App

Section 5: 5 chapters
Show chapters Hide chapters

13. Custom Views
Written by Subhrajyoti Sen

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

The definition of a layout is the main step in the creation of the UI of your app. Technically, a layout is an aggregation of UI components following a specific rule that defines the layout itself. For instance, a LinearLayout allows you to align the Views it contains, horizontally or vertically on the screen.

In the Android SDK, each component is an extension, direct or indirect, of the View class. Following the Composite pattern, each layout is also a View with the ability to aggregate other Views. Each layout inherits this aggregation ability from the ViewGroup class they extend.

Figure 13.1 — Android SDK View Hierarchy
Figure 13.1 — Android SDK View Hierarchy

As you can see in Figure 13.1, the Android SDK provides a wide range of View classes that you can use to develop your layouts. But sometimes, these views don’t fit your requirements and you need to create your own custom views. There are several good reasons to create a custom view:

  • Implementing advanced UI designs.
  • Creating reusable UI components.
  • Implementing a complex animation that’s difficult to achieve with standard views.
  • Optimizing performance for complex views such as a chart with many data points.

Creating a Custom View can be a challenging task. In this chapter, you’ll:

  • Learn about Android’s View hierarchy.
  • Extend View and create a custom button.
  • Add custom attributes to the custom view.
  • Integrate animations inside the custom view.
  • Handle state restoration for custom views.
  • Learn how to make custom views more performant.

It’s time to get started!

Creating Custom Views

You can create a custom view in different ways depending on how much you need to customize the existing Views based on your requirements. You can:

  1. Compose existing Views in a custom way using a custom layout. For instance, when you need to implement a logic similar to FlowLayout in Java that’s like LinearLayout, except that it puts a View in a new row or column, in case there’s not enough space in the current one.
  2. Extend an existing View that already provides some, but not all, of the requirements you need. For example, extending the ImageView with more custom attributes regarding the size of the image it displays.
  3. Extend View and implement the drawing logic using the Canvas API.

In the last case, imagine you’re creating an app that displays the speed of a moving vehicle. You need to create a speedometer view, which is challenging to do with standard views.

Instead, you choose to draw the entire view using your own logic. To do so, you need to understand how the Canvas coordinate system works.

Understanding the Canvas Coordinate System

Android’s Canvas uses a 2D matrix. The origin is at the top-left of the screen. The x-axis values increase as they move to the right, while the y-axis values increase as they move downwards:

Decuge 28.3 — Efwpuog Sonxut Maotdohaciy Bgtsuy
Bemira 00.4 — Egcwiez Tucsel Raimrewowav Wfnlob

Implementing a Progress Button

There are cases where it’s impossible to develop a certain UI element using the standard Views. In cases like that, you need to manually draw the UI on Canvas.

Tileno 99.5 — Pyakwovq Gikvew Jbubac
Suxuxo 52.1 — Gbidfuzp Yatnod Tmenad

Extending View

For your first step, you need to create the class for your custom view. Create a new file with name ProgressButton.kt in common/presentation and add the following code to it:

Creating Custom Attributes

When you create a custom view, you need custom attributes. In this case, you want to add an attribute to make the text display during ProgressButton’s processing state.

Reading Custom Attribute Values

You can see a custom parameter as a way to configure your component. Of course, you need a way to access the values from the custom view source code.

Initializing the Paint Objects

As you’ll see later, you’re going to draw your custom component on the Canvas using some Paint objects. Paint is like a paintbrush. It contains the color, style, stroke-width and other properties of the tool you’ll use to draw on the canvas.

Designing the Animation Logic

Before you start writing any code to draw your images, break down the animation logic:

Wiyosi 85.8 — Jye Kkotjigy Micdal Uyekiwoap
Cavago 16.6 — Gje Qligmofn Hophan Osasuveuv

Painting Your Shape

Now, you’ll create the Adopt button by painting it in Canvas. Add the following code in ProgressButton.kt:

Previewing Your Shape

You’ve drawn your first shape on the canvas. To preview it, open fragment_details.xml and add the following code inside the ConstraintLayout tag:

Behayi 95.0 — Atexuox Gduno of bri Unots Cofler
Laqeho 15.6 — Afuqeud Vxuze az dhu Onibh Fommex

Kubewu 00.9 — KvicvavxDoyrah Dxabiaf ig Buvoar Enovuv
Wehuwu 42.6 — MbukdecwNaydud Jletour od Naquic Alejay

Adding Animation

Your next step is to add the animation that changes the button from an oval to a circle when the user clicks it. You need to change the offset value and update the view every time the offset changes. To do this, you’ll use ValueAnimator, which is a class that takes an initial and final value and animates between them over the given duration.

Animating the Button

Next, you’re ready to begin the animation, so add the following method to ProgressButton:

Drawing the Progress Bar

Now that you’ve started animating the offset value, you need to write the commands to draw the progress bar. Remember, the progress bar will appear as an arc that spins inside the round button until the view finishes loading.

Starting the Animation

Open AnimalDetailsFragment.kt and add the following code at the end of displayPetDetails(), like this:

Nazifa 04.6 — Kco VcebfixlGojjoh Acojahoiq’t Locik Yyire
Xuviwo 20.7 — Nxo RjuxbolvResmin Edojekuol’m Visuj Pqeha

Animating the Progress Bar

The code to animate the value of the starting angle of the arc is similar to the one to animate the button width. Open ProgressButton.kt and add the following code:

Starting the Progress Bar Animation

The progress bar animation needs to start when the shrinking animation stops. To do this, invoke startProgressAnimation from the onAnimationEnd callback inside startLoading(), as follows:

Drawing the Check Icon

When the progress bar completes, you want to display a check icon as an indication that the action has finished successfully. The check looks fairly simple at first glance — you might think that you can use a PNG or a vector drawable for it and call it a day. But why not make it a bit more interesting? Instead, you’ll use Canvas to draw the icon.

Niyoki 66.1 — Bqa Wetekop Ckejc
Wedeli 20.0 — Jre Jojaqet Rwefd

Saving Canvas

Before you can perform that transformation, you need to call save on Canvas. save creates a restore point for Canvas. After rotating the Canvas multiple times and translating it to a different position, you just call restore() to send Canvas back to its original state.

Creating the Perpendicular Lines

Now, comes the part where you draw the check — which means it’s time for a little math.

Putting Everything Together

Now, you have all the theory you need to build your icon. To implement it, add the following code at the end of onDraw in ProgressButton.kt:

Binding the Animation to the Adopt Button

Start by opening AnimalDetailsFragment.kt and adding the following code to the click listener on adoptButton:

Manually Stopping the Animation

There’s one last thing to do: If the user exits the fragment before the animation completes, you should stop the animations. Otherwise, you’ll leak memory because the animations will continue, even though the view was destroyed.

Enhancing Performance

The Android SDK provides a wide range of views that have improved over the years. The engineers at Google have had many years to fine-tune the performance of different views to give users the best possible experience.

Creating Objects Inside onDraw

As a standard practice, you should avoid object creation inside methods that the app calls at a high frequency. Consider onDraw — it can be called multiple times in one second! If you create objects inside it, the app will create them every time it needs to call onDraw. That’s a lot of extra CPU work that you could easily avoid.

Understanding Overdraw

Overdraw is the number of times a pixel is redrawn in a single frame. For example, say that you draw a shape on the canvas, then draw another shape on top of it. You could have avoided the computations you made to draw the first shape. In this case, the overdraw is 1 since it was redrawn once.

Kovoqo 53.0 — Qoqpoj Coer Ulifcvix
Yoloju 09.8 — Piwquf Neak Iyeznhaq

Reducing Overdraw

Open ProgressButton.kt and check for any code that sets a background you don’t need. OK, there’s no such code here.

Vomidu 33.38 — Inehkzex Nupizif
Vohopu 14.43 — Iyoqljal Cadikej

Key Points

  • Create custom views when you need to add features to an existing view or draw views that are too complex to implement using standard views.
  • You need to extend View to create your custom view.
  • Draw shapes with Canvas using drawLine(), drawLineRoundedRect(), etc.
  • You can save Canvas’ state, move it around and restore it to its original state using save() and restore().
  • Avoid performing long calculations and creating objects inside onDraw().
  • Avoid nested view hierarchy and unnecessary backgrounds to reduce overdraw.
12. MotionLayout & Motion Editor
14. Style & Theme
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2026 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now