Material design and Raster vs Vector assets

The sixth sprint deals making an app look nice with different types of image assets and using Material Design. This article will discuss some of the differences in these different types of image assets and also generally look at using Material Design.

Image Assets & Android Drawables

Sooner or later you're going to have to add some kind of image to your app, and what kind of image you add is actually quite important. There are two types of images, Vector images and Raster images. Which type you use is going to be dependent on the situation.

Vector assets

A Vector image contains instructions for where to draw lines, and this is very performance light. Generally this is used for drawing icons and very undetailed pictures. An example of a Vector image would be a basic settings gear: It's really basic image with no detail whatsoever, just a color and shapes. This is incredibly easy to draw and therefore takes very little time to do so. Adding a Vector image in Android Studio is very simple. Under your res, folder right click drawable -> new -> Vector Asset. This will open up a dialog, and you can press the choose button to go through a list of pre-made Vector images. Google has provided a website to look through all possible Vector images: https://design.google.com/icons/

Raster assets

A Raster image is a dot matrix data structure, or basically a 2d array which maps colors to pixels in a particular location. Raster images are much more difficult for the system to draw than Vector images, and they take up much more memory space. A good example of how Raster images are created is shown below: Notice how in the blown up picture you see each pixel and how each pixel has different color values. For the Fitness Explorer app I used both Vector and Raster images. For the button leading to the FlexGrid I used a Vector image because the button itself doesn't need high amounts of detail. When used in the app it looks a little different: For the Raster image I used the Google Fit icon on the dialog that shows up when the user doesn't connect Fitness Explorer to Google Fit. The reason I used a Raster image is because this image is much more detailed than the previous. Once again it looks a little different in the app: As I stated above, your choice in image type is going to be dependent on the situation. A Raster image is a much larger file than a Vector image. Also, there will need to be multiple sizes which are used based on screen resolution (to prevent the images from appearing blurry on high resolution devices). As a result, storing all of this information in memory can be quite strenuous on the app. When programming an Android app you'll also need to worry about the size of the actual app which is referred to as the APK size. Having multiple Raster images can drastically increase the APK size. For this reason, it's better to use a Vector image when possible.

Material Design

Making an app look visually appealing is often just as important as making sure it is running efficiently. This is where Material Design comes in. Material Design makes liberal use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows. Basically, Material Design is the physical appearance and layout of an app. Choosing certain physical requirements for your app can be quite difficult. Luckily Google and some other useful websites are here to help! Google's Material Design site: https://material.google.com/ This site explains the standards that each layout should adhere to so the programmer can make a nice looking app. Material Palette: http://www.materialpalette.com/ This site is used to choose the color layout for an app. Basically you choose two colors, a main color and an accent color, and it will create a color palette using these colors. It is a very useful tool.

Empty State Design

Empty state design is important because there are multiple opportunities for when the user may have no data available. For example, when they just download an app they might not have any data, or when the user doesn't have any network available. These are just some examples of when an empty state might be shown. A good Empty State Design addresses three things:* An explanation of content going in that section

• User orientation. Let the user know where they are in the application
• An explanation of what action the user must take for data to exist on that screen Most of the time these three concerns can be addressed using a basic image and/or using one or two lines of text to inform the user. When an empty data state addresses these three concerns, the user can feel confident of what they need to do in order for data to show on the screen.

Next Sprint

In the next sprint I'll examine the general concept of asynchronous programming (and how it applies to Android development). I'll also look specifically at using the Observer Pattern to monitor state changes, something that I used a lot in Fitness Explorer when integrating the Google Fit API.