Home

Awesome

GuideToCustomViews

The ultimate guide to Android custom views

I've been designing, writing and publishing Android custom views for the past 5 years now. I guess it's about time to sum it up and share the results.

Here you will find the topics related to custom views and a couple of case studies. Code samples will be in Java and Kotlin randomly and the code will be as simple as possible to demonstrate ideas and techniques better. I want this place to be more of a tutorial wiki than a documentation. You can find the documentation on developer.android.com/.

I'll try to add an article or two per week. If there's something missing and you think that I should write about - raise an issue and tell me. If you wish, there's a larger repository with my custom views here.

Topics

  1. Basics
  2. What to extend
  3. Prefix everything
Code
  1. Constructors
  2. Measuring
  3. Custom states
  4. State saving
  5. Edit mode
  6. Drawables
Attributes and styles
  1. Using attributes
  2. Custom attributes
  3. Custom layout attributes
Accessibility
  1. Basic accessibility
  2. Content description and events

Case studies

ProgressTextView
<img src="https://github.com/ZieIony/GuideToCustomViews/blob/master/progresstextview/result.png" width="25%" height="25%"/>

A progress bar that also has a text. The text should be drawn in one color on the 'done' part of the progress and in another color on the 'remaining' part.

See: guide, code.

ChartView
<img src="https://github.com/ZieIony/GuideToCustomViews/blob/master/images/chartview.png" width="25%" height="25%"/>

A simple bar chart with color state lists and bar selecting with clicks.

Topics covered: drawing on canvas, state lists, touch events.

See: code.

A more complete version of the view can be found here

FlowLayout
<img src="https://github.com/ZieIony/GuideToCustomViews/blob/master/images/flowlayout.png" width="25%" height="25%"/>

A layout that displays its children in rows, side to side and then in another line.

Topics covered: measuring, laying out, custom layout attributes, right to left support.

See: code.

InvalidEditText

An EditText with support for an invalid state attribute.

Topics covered: custom states.

See: guide, code.

MoodToggle
<img src="https://github.com/ZieIony/GuideToCustomViews/blob/master/images/moodtoggle.png" width="25%" height="25%"/>

A very simple toggle with accessibility support.

Topics covered: basic accessibility.

See: guide, code.

LandscapeDrawable
<img src="https://github.com/ZieIony/GuideToCustomViews/blob/master/images/landscapedrawable.png" width="25%" height="25%"/>

An animated Drawable depicting a landscape with customizable items: trees, clouds, stars, a sun, and fog.

Topics covered: drawing on Canvas, custom drawables.

See: guide, code.