Reuse Group of Views using Compound View

Any developer who have spent quite some time on android development most likely have encountered a situation where a group of views is being used in multiple activities. One way to solve this is by using a Compound View.

Flight Detail

Flight Detail Activity


ETicket Activity

In Traveloka apps, those flight details (flight name, icon, departure info, arrival info) appears almost on every page related to flight. From search result to issued e-ticket. Naturally, I would have to find a way on how to reuse those group of views into one reusable component.

For the sake of simplicity, I will just represent the re-usable views as one TextView and one Button 

In my early day as android developer, I would solve the problem by extracting the views into a dedicated layout file, layout_button_text.xml .

and then include layout_button_text.xml in every layout that want to use it.

Now the group of views is only declared once but can be shown in multiple activities. One problem though, the preview of the layout_button_text.xml is not exactly what we want.

Messed up layout

Even though we did specify that the button should render below the text it will not do so because the parent is merge , not RelativeLayout

Android Studio provides a way to solve this by adding tools:showIn attribute.

With that attribute, Android Studio can render the layout_button_text.xml as if it’s already included in the activity_detail.xml . Because in activity_detail.xml we put RelativeLayout as the parent, now it renders perfectly.

Compound View for XML

Everything looks great. We got our reusable views, we got the correct rendering preview. But then I realize my big mistake: The java code still duplicate.

In order to set the content of TextView and Button , I would have to declare the TextView in both  and . Not only declare the fields, but also doing the findViewById()  in each of those activities.

Compound View to the help

By using Compound View / Composite View, we will be able to re-use both xml code and java code.

First, we need to create a java class extending one of the common ViewGroup . Choose the one that should be the parent of the layout, in this case RelativeLayout

Override the first two constructor only, because those are the two that commonly used. The first one used when creating programmatically. The second one via xml.

Set-up our layout and assign all the view objects inside initLayout() . Then add a way to set the content of the TextView and the Button

Now we need to replace the code in our xml files by declaring our Compound View class instead of using include.

We changed the code in our java files as well.

We could as well create a custom attribute for our Compound View so that we could remove those setText() calls in each activity. But that’s for another post.

By using Compound View, we now have a re-usable component that is ready to use in every part of our application without having many duplicate codes.

Ilmu jangan disimpan sendiri, bagikan ke teman-teman anda:



Ahmad Fadli Basyari

Mahasiswa IT di President University. Memiliki hobi membuat aplikasi mobile, blogging dan menonton film.

Leave a Reply

Your email address will not be published. Required fields are marked *


[+] kaskus emoticons nartzco