How To Create a Dashboard on Android TV

Android 2018
We recently re-launched our dashboard on Android TV with some great results.

Why a dashboard?

At Brightec, we help many clients develop and grow mobile applications. Quality is very important and so we write tests and adhere to style guides.

We strive to keep our master branch in a deployable state. We use CircleCi as our CI (continuous integration) tool. It runs our tests and checks on every pull request and deployment. This is great because we now have data on how our master branch is doing.

Find out more about our CI/CD.

Now how do we make that data visible?

We use the visual medium of a dashboard. A TV mounted on the wall, displaying data we get from our CI tool.

Screen Shot 2019-02-19 at 11.01.14.png

We have also found that having a dashboard brings about a positive difference in our culture. Having a dashboard reflects how we care about our projects. It enables us, as a team, to be accountable for our changes and work together to find solutions.

Some history

We have used a few different CI tools in the past. Different tools lend themselves to different approaches to dashboards.

With CircleCi we used a tool called Dashing, hosted on a mac mini. That gave us something looking like this:

Screen Shot 2019-02-14 at 12.08.58.png

Why did we want to change?

More automated

Every time we added a new project to CircleCi we had to reconfigure Dashing. We found this didn’t happen often enough for us to get quick at doing it.

Maintainable

Dashing and its underlying technology is not something we work with all the time. So trying to fix issues and keep it running was difficult and time consuming.

Flexible

For similar reasons we felt unable to write new features or stray too far from a fairly standard implementation.

Clarity & Aesthetics

We felt it was difficult to get the styling and clarity in design that we were looking for.

Android TV…

As a mobile development agency, Android TV felt a natural place to begin exploring a replacement. We are familiar with the platform and felt comfortable.

This familiarity and some previous experience with Android TV meant we could get started on an MVP.

Screen Shot 2019-02-14 at 12.13.10.png

Being careful to design for the form factor and use case led us to a simple block design. We created large and clear typefaces to display the important pieces of data. We used colour to represent the state of a build. Finally, we added some branding flourishes to make it fit our office environment well.

Under the hood, the app uses the CircleCi API to fetch the relevant data. First getting the projects and then the recent builds for each. We sort the list of projects by their latest build status. This ensures the projects which need our attention are displayed prominently.

I hope soon to make the code for this dashboard public, so keep an eye out for that. If that’s something you’d be interested in, let me know by leaving a comment or tweeting me @SykesAlistair.

Future

We plan on expanding the functionality of the dashboard. We’d like to add: manually kicking off jobs, pulling in from other data sources, and creating a mobile app to match (amongst other features).

These prospects are now exciting rather than scary and cumbersome. That’s at least one win for our new dashboard.

Links

https://www.brightec.co.uk/ideas/top-tips-android-tv-development

https://www.brightec.co.uk/ideas/building-apps-android-tv

https://www.brightec.co.uk/ideas/tv-app-design-basics

https://www.brightec.co.uk/ideas/glossary-terms


Looking for something else?

Search over 400 blog posts from our team

Want to hear more?

Subscribe to our monthly digest of blogs to stay in the loop and come with us on our journey to make things better!