Android layouts to the next level: Custom Views, Compound ViewGroups and Custom ViewGroups

Alberto Ballano
4 min readMar 2, 2016

As Android developers one of our tasks is to create screens or layouts that match a specific design: setup a root ViewGroup, start adding ui elements (aka widgets) and other ViewGroups until we have the desired layout.

At some point in the career of most of us an idea grows in our minds when this happens: “should I go further and create a custom View/ViewGroup? Maybe a compound ViewGroup? If so, which one?”

So this idea also came to my mind several times and for one reason or another (also called "excuse" or "laziness") I didn't do it, or maybe I just scratched the surface and only did the easy Compound ViewGroup.

So, why are Compound ViewGroups "the easy" way? What's the benefit of Custom Views/ViewGroups? What should I choose?

Let's first add some definitions:

Custom View

A custom view is a custom widget (like TextView, ImageView, etc.), in which we define what and how the things has to be drawn into the Canvas.

What benefits does it have?

The main benefit is that we can do whatever we want and, therefore, we can extend the functionality of the widgets that come with the platform in order to show a more complex View.

How hard is to implement?

Medium-hard. Well, always depends if you just want to draw some basic shapes or you need something more complex that includes animations. For the basic things the drawing process is fairly easy, you just need to fight a bit with math ;) But if you want to have movement (animations) inside then the process becomes a bit harder.

A random example (obtained from one of my starred libs in github) could be this Twitter-like-button lib from

, specifically in this class. As you can see there's nothing weird in the code, just math: he draw circles with different colors into the screen and enables an animation from outside with ObjectAnimator exposing a Property that changes the radius and size of the dots, cool right?

Compound ViewGroup

A class that may extend any ViewGroup child (LinearLayout, RelativeLayout, etc. but not ViewGroup) and that basically inflates (via xml) or creates widgets and puts them together. So is essentially just a wrapper around a layout that offers some custom behaviour to it (animations, logic, etc.).

What benefits does it have?

The main benefit is portability since you have your class (or classes) outside of your Activity's xml and you can just include it in another places and then customize whatever you allow to customize :)

How hard is to implement?

Very easy, since you're not doing anything special, just wrapping a layout + behaviour in a different class so there's no much difference time-wise if you just do it in your Activity's xml (expose some methods, add possibility to configure it and you're done).

Following the example for the Custom View, we also have a nice Compound ViewGroup in the same repo. He doesn't need to layout the children in any specific way, he just need a class that puts them together, manages the checked state and that adds some animation when it is clicked, so better do it there than inside your Activity (or Fragment) so you can reuse it later on.

Custom ViewGroup

This one is essentially a Compound ViewGroup that extends the ViewGroup class. Why? To measure and layout the widgets it contains in the screen for better performance.

What benefits does it have?

It has all the benefits from a Compound ViewGroup + it will render your child views in the screen in a more efficient way than using another ViewGroup. Why? Because we know exactly where are this views going to be in the screen so we don't need to "ask" the children and do additional measures.

How hard is to implement?

I'd say medium: from my personal experience I can tell you that is not a big deal if you have an example like the one below, your ViewGroup is not so complex and you like to play with the values and methods.

For this I'll just point to this nice article from Sriram Ramani.

Conclusion

That said let's ask ourselves: when should I use them?

  • Custom View: if you have something fancy or you need a widget that basically doesn't exists, then be brave, get some nice examples or guides and just do it.
  • Compound ViewGroup: whenever you have one or more widgets (maybe with an animation or some extra logic) that should be part of a bigger group so you can reuse it later, but you don't need to layout them or you can reuse any ViewGroup's children (if you have several ViewGroups in your layout then you might consider this as well), then you should think about creating a Compound ViewGroup.
  • Custom ViewGroup: same case as before but you cannot use a single LinearLayout, RelativeLayout, etc. and you already have complex views in your app so you really need this extra optimization.

I personally enjoyed a lot playing with them and I really recommend you to do it at some point so you'll become more experienced :)

Resources:

https://sriramramani.wordpress.com/2015/05/06/custom-viewgroups/

http://www.vogella.com/tutorials/AndroidCustomViews/article.html

https://github.com/frogermcs/LikeAnimation

--

--