My First Action for Google Assistant

Actions define support for user requests and the corresponding fulfillment within Google Assistant. Read more.

I came across a couple of videos from Google Developers which show you how to create your first Action from scratch. Neto and Jessica explain the foundations of the platform and describe how to build, test and publish your action, they also make you laugh.

Episode 1

Episode 2

Guided by this videos I made a complementary action for my app Daily Prayer, a simple app that just does what its name implies, and I thought of an action that bring this functionality through Google Assistant.

My Action relies on a Firebase Function for fulfillment which returns the prayer to be read by the assistant, you can find this function code in my GitHub.

Bonus! After submitting my action for review and after a couple of days of waiting my action was approved and apparently Google is giving away free Google assistant t-shirts and Google Cloud credit.

google-assistant-congratulations.PNG

Who doesn’t love free stuff right?

 

Create Adaptive Icons with Android Studio

Android 8.0 (API level 26) introduces Adaptive Icons, these icons have the capacity of displaying variations depending on the OEM specification.

A variety of masks applied to an adaptive icon

To do this, Adaptive icons consist of two layers, the background, and the foreground, these layers are manipulated in different ways to show your app’s icon.

Isometric illustration of creating an adaptive icon

Adaptive icons must follow the following guidelines:

  • Both layers must be sized at 108 x 108 dp.
  • The inner 72 x 72 dp of the icon appears within the masked viewport.
  • The system reserves the outer 18 dp on each of the 4 sides to create interesting visual effects, such as parallax or pulsing.

Demo of parallax applied to an adaptive icon

Fortunately, Android Studio provides a very simple way to add an adaptive icon to your app, here’s how.

Prepare your assets

To create adaptive icons, first, you need to have your assets ready, as I’ve explained, adaptive icons consist of background and foreground so you have to figure out this 2 layers for your app, typically the background being a pattern or solid color and the foreground an image with transparent background. For this example, I’ll be using a material icon vector and a solid color #26A69A.

Create your adaptive icon using Asset Studio

Open your project with Android Studio and launch Asset Studio going to File > New > Image Asset.

Select Launcher Icons (Adaptive and Legacy) on the Icon Type, this way Android studio will auto-generate the icons for new specification and legacy compatibility. Leave the default name and select your foreground and background layers.

You’ll be able to preview all the different icon versions on the right panel and once you finish, Android Studio will generate the required files and make the needed adjustments on your app to get your icon working.

asset-studio

There you go, now your app has an adaptive icon which will look great in every device and Android version.

the fonz thumbs up GIF by GIPHY Studios Originals

Posted in Dev

Android App Icons the Right Way

You have a great Android app and you need to add some icons to it, so you start reading about supporting multiple screen sizes, different densities, bitmap sizes, vector graphics…

scared paper bag GIF by davidsaracino

Stop panicking, here’s the right way to Android App Icons: Vector Drawables.

This guide focuses on using vector drawables, Android 5.0 (API level 21) was the first version to officially support vector drawables with VectorDrawable and AnimatedVectorDrawable, but you can support older versions with the Android support library. Read more.

What is a vector drawable?

A vector drawable refers to a vector graphic defined in an XML file and which can be used by the Android system, this file contains a set of points, lines, curves and specification to generate all the shapes and colors that you see on your screen.

Why vector drawables?

Vector drawables are special because they can scale freely without losing any display quality, you can use a single file to show pixel perfect icons on any screen size and resolution reducing your app’s size and increasing maintainability.

Here are the steps to include your icons as vector drawables in your app:

Get your icons

First, you need to have the icons you want to use in your app in a vector format like SVG. Several icon pages and designers work with this type of icons so you should have no problem finding your icons.

You can download official Material Design Icons in SVG vector format.

material-design-icons.PNG

Add them using Android Studio

Open your project with Android Studio and open Asset Studio by going to File > New > Vector Asset.

asset-studio.PNG

Here you’ll be able to browse your SVG files and set the name among other settings.

If you’d like to edit your icon before adding it like changing the color there are pretty cool vector editors out there totally free to use, personally, I like InkScape.

After you click next you’ll be asked to confirm the icon path and then you’re finished, you’ll have a new single XML file under your drawable folder which you’ll be able to use like any other drawable throughout your application and it will look pixel perfect across all devices and resolutions.

awesome bear GIF by Studio Flox

Posted in Dev