Update ‘Hier of Daar?’ – Using Custom View Group

0 Flares Filament.io Made with Flare More Info'> 0 Flares ×

As described in my last post, I’m working on an Android app that uses open data. For those interested in Android development, I’d like to share how I tackled a layout challenge I had. If fixed it in the latest update of the app ‘Hier of Daar?’  v1.10. Get it at Google Play.

The layout challenge

Screenshot_1479680411

This screen is built out of multiple layers, where the white icons are on top of the blue-purple swirl. In order to place these icons on the correct spot and with the correct size, this was not really do-able with normal layout options in Android.

First solution; For one device only

To save time I side stepped the problem by only making it look ok for the Nexus 7 (2013). This allowed me to create a video of the app showing the jury how the app works. It’s somewhat acceptable, since the app is a proof of concept.

The big disadvantage being that hardly anyone can try out the app and give feedback without being distracted by how ugly it looks on their device..

Second solution: Custom View Groups

A View Group is a way to group different views. In other words; a layout. For instance, you can make use of LinearLayout or RelativeLayout. A custom View Group does the same thing; it tells the layout where to place the views and how to deal with resizing, etc.

While the custom view groups ( and compound views) still have many secrets for me, it was clear that I could create one that would solve my problem. So after reading some documentation and watching some videos I gave it a go.

Now I have one Swirl class that extends the ViewGroup and only has real code in the onLayout method. Here I place all the views and tell them what their position and size should be by providing a coordinate for their left, top, right, bottom. All values are relative to the size of the total view group.  What’s neat is that once you have the custom view group it will show in Android Studio as it would in the app.

AndroidStudio

The screenshot at the beginning of the post was of the Nexus 7, this next screenshot is of an emulator with a 480 x 800 px resolution and an older version of Android.

Screenshot_1479681603

Up next

There is much that could be improved, for instance a back button would be nice, or making users aware that these white icons can be clicked, etc. But within the existing design, this solution worked and I’m happy with the improvement.

It would be nice to look more into custom views and see what could be improved based on that. Also, while I was researching I came across a video that explained how you can make a custom view that allows users to doodle. That could be nice to incorporate in my Idea Growr app.

 

0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Pin It Share 0 Filament.io Made with Flare More Info'> 0 Flares ×

Leave a Reply

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