During the third sprint, I was able to get started learning the Android architecture. A large amount of my time was devoted to learning some of the basics like Views, Layouts, and the Object Pooling pattern.

Views are an incredibly important part of Android development, they allow the programmer to easily integrate their ideas in an orderly fashion. And because Google has pre-created layouts that are used in specific ways this allows the user to be able to recognize these views across different apps which makes them more user friendly. Android has many pre-created views to choose from and I used a few for the Fitness Explorer app, including Linear Layout, Scroll View, Card View, Frame Layout, and Recycler View.

Linear Layout and Scroll View

A Linear Layout aligns it's children in a single direction, vertically or horizontally. I used Linear Layout to align all of the pieces of the dashboard in Fitness Explorer vertically so that the views were oriented from the top to bottom one after another.

<script src="https://gist.github.com/drb56/5f400bc80f9632dfb70b498991840eb3.js"></script>

Scroll View is a view that allows the view within to be physically larger than the screen allowing the user to scroll vertically to view other areas of the screen. For Fitness Explorer I used a Scroll View to wrap around the Linear Layout so that everything within the Linear Layout was scrollable. This way you could scroll up and down to bring different parts of the application in and out of view.

<script src="https://gist.github.com/drb56/e7f4b516e49d6bd123f764ad0d768e37.js"></script>

Although Linear Layout and Scroll View are two separate views they work together very well. If you wrap the Scroll View around the Linear Layout you're able to scroll through various things.

Card View

A Card View is a view that allows for individual cards to be displayed on the screen. This allows for a nice, smooth transition from one thing to another. I used Card View in Fitness Explorer to show each individual control on it's own separate card.

<script src="https://gist.github.com/drb56/95ed7cee942656f6266ac2bb170dc2a4.js"></script>

Because the Card View is part of the v7 Support Library you'll have to add the gradle dependency in your app's build.gradle module.

<script src="https://gist.github.com/drb56/2bc981b8e10578751f033db232d53300.js"></script>

Recycler View & Object Pooling Pattern

Recycler View is probably the most interesting of all the views. Using object pooling, which is the ability to create and keep on hand a supply of objects, Recycler View allows for continuous recycling of views that are similar in nature. This is extremely useful because you don't need to create a new view for each individual item which saves a lot of memory and time. The first step for adding the Recycler View to your app is to add the support library import to the build.gradle file under 'dependencies', just like with the Card View.

<script src="https://gist.github.com/drb56/1b3470419ab7575ad2230f24b2c08626.js"></script>

One interesting thing about the Recycler View is that you need an adapter so that it knows where the pool of data is and the views it's recycling.

<script src="https://gist.github.com/drb56/2646d7546822627e80c94a42260f2bd4.js"></script>

Once you've created the adapter you're ready to integrate the Recycler View into your code. I chose to do this programmatically.

<script src="https://gist.github.com/drb56/59842c3537e699a51b2374035f8ac43f.js"></script>

This code creates the scrollable list of activities under the calendar which recycles the views.

Frame Layout

A Frame Layout allows you to 'nest' views on top of each other and only show certain views when a particular event happens. This is great because it doesn't have to do any extra work measuring the screen size to add views in the appropriate way. This feature actually makes this view the least performance intensive out of all the views discussed. In the Fitness Explorer app I have three nested views, one for a loading icon, one for an empty data set, and another for the basic dashboard view. Which one displays is completely dependent on what state the app is in. Adding a Frame Layout to your app is actually quite simple, you just wrap your current XML views in the Frame Layout tag.

<script src="https://gist.github.com/drb56/ca21442afacbb19995330a0efe2c1962.js"></script>

Because the Frame Layout stacks each view on top of each other all you need to do is programmatically find the views and show or hide the specific views using the setVisibility method.

<script src="https://gist.github.com/drb56/c9a7afb7a4e089dfaad34ffeae31fe1c.js"></script>

Next Sprint

The next sprint moves back into some broader concepts, but ties them a little more directly to the Android Architecture. Next time I'll cover creational, architectural, and structural patterns as they apply to Android.