Category: android

Android ConstraintLayout — Build a layout from Scratch + Q&A — Sunday (26 Nov) 5PM GMT+2 [Live Stream]

Android ConstraintLayout — Build a layout from Scratch + Q&A — Sunday (26 Nov) 5PM GMT+2 [Live Stream]

I’ve seen quite a lot of misuse/misunderstanding of how to use ConstraintLayout practically. I was contemplating the best way to talk about these common “Don’ts” that I see people do.

I’ve decided to try do something a bit different than a blog post. I’ll be live streaming on Sunday, 26 November at 5PM GMT+2 (that is today 😄 ) on YouTube and Twitch.

Join me and ask questions whilst I code this layout below. I’ll also cover some common mistakes that I’ve seen people make when using ConstraintLayout.

Follow me on YouTubeTwitch and Twitter to get more updates!

Hope to see you there

ConstraintLayout Android Example
ConstraintLayout Android Example
Android Accessibility – Making your app Switch Access Compatible

Android Accessibility – Making your app Switch Access Compatible

I received an email a few days ago, where I had a request for the Book Dash Android app to support “Switch Access”. To be honest, I had no idea what this email meant. My first thought was, “Hey, this will never run on a Nintendo Switch” but I realised that this probably wasn’t what they were requesting. After doing a bit more research on what exactly Switch Access is in Android, I realised there isn’t a lot of information around the Android Accessibility feature. Hopefully after reading through this blog post you will be interested in making sure your app is Switch Access compatible.

What is Accessibility?

Accessibility refers to the design of products, devices, services, or environments for people who experience disabilities (ref). For example, some people may be visually impaired and use a service like TalkBack on their device, which speaks out everything on their screen. Some people may enlarge the size of the font of their phone so they can read it clearly. Whilst others might suffer from muscle conditions that prevent them from being able to use the touch screen. This is where Switch Access is meant to help.

What is Android Switch Access?

Switch Access allows users with limited dexterity to use their Android device without using the touch screen. Users typically would use a device similar to the one pictured below to navigate the user interface of their phone.

Switch Access Android
Typical Switch Device

Some switches have one button, others have two buttons or more. Switch Access can be configured to use a keyboard, a device like the one pictured above or built-in buttons on your device such as the volume up and volume down key.

Here is a video explaining how it works:

Great, we’ve now seen how it works, lets try use it on our app.

Enabling Switch Access for Testing

In order to test our apps with Switch Access, we need to enable it. In order to enable it you need to do the following:

  1. Open Settings on your device.
  2. Open the “Accessibility” section.
  3. There should be a service listed called “Switch Access”. Select this service. Before enabling the service, click on the “Settings” for the service. Click “Assign Switches for Scanning”. Here is where you will map certain key events to “Next” and “Select” action.

    Switch Access Settings
    Switch Access Settings
  4. Click “Select”, and then press the key you want to map to the “Select” function. I pressed the “Volume Down” button. Repeat this for the “Next” action, I used the “Volume Up” for the “Next” action but you can use any key you wish.

    Switch Access Android - Assign action to button
    Switch Access Assign Action to Button
  5. Once you have done this, click back and enable “Switch Access”.

We can now navigate through our phone using the volume up and down buttons.

How do I make my app Switch Access compatible?

This is the part that was a mystery that I was battling to solve myself. No amount of Googling got me the result I was looking for, so hopefully my insights can help you achieve compatibility for your apps.

TL;DR: Make sure views that are clickable are selectable and reachable by a keyboard. Make sure views that require gestures can also be properly navigated to without using the required gesture.

Unfortunately there is no “enable this flag and switch access will work” solution to this problem. After using the Book Dash app with Switch Access enabled, I realised there were a few places that didn’t work well with the service enabled.

Switch Access problems in Book Dash

1. Inability to turn a page of the book

The screen that displays the book for reading is in a ViewPager, which means users have to swipe to get to the next page. This was intuitive for me whilst using the touch screen, but not whilst using it with Switch Access. There was no way to turn the page of the book without swiping on the screen. 

The solution for my ViewPager gesture scrolling, was to add click listeners onto each page of the book to go to the next and previous page of the book. I then added “focusable” fields onto the views that had click listeners attached. The following lines were added to each page container (with the click listeners pointing to the correct logic):

Switch Access Android - Navigate and Turn pages
Switch Access Android – Navigate and Turn pages

2. Two clickable areas on the download button

Another example in the Book Dash app was the Download Book button which had two clickable areas. Accessing it using Switch Access caused a bit of frustration, as a secondary dialog showed up asking which one to select.

Multiple clickable areas on download button - Switch Access Android
Multiple clickable areas on download button

The solution for this issue was to remove android:clickable="true" on the outer view, as the custom view already defined a clickable attribute. Simple fix, but saves users a lot of frustration!

If you want to see more code, check out the open source Github repository for more information.

Summary

Enabling Switch Access and testing your app with it on allows you to make your app accessible for users with limited dexterity. This is vitally important if you want to make a high quality, accessible app. In the next few posts we will be looking into other small improvements to make the app more accessible.

Make sure to subscribe to this blog to follow the journey of making Book Dash more accessible. Have something to add? Let me know on Twitter.

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

ConstraintLayout – Guidelines, Barriers, Chains and Groups

ConstraintLayout – Guidelines, Barriers, Chains and Groups

Since my initial blog post about ConstraintLayout, there have been a whole bunch of new features added (and lots of improvements) to ConstraintLayout. This blog post aims to cover some of the new features, namely Guidelines, Barriers, Chains and Groups.

Some of these features require using Android Studio 3.0 Beta 5 and the beta version of ConstraintLayout. In order to use the beta version of ConstraintLayout, make sure you have at least the following dependency in your app level build.gradle file:

Guidelines

Guidelines are small visual helpers to design layouts with. Views can be aligned to a guideline which can simplify layouts, especially if you have the same margin values duplicated on a lot of elements.

Guidelines can be specified in dp from start or end of the screen or they can be a percentage of the width of the screen. To cycle through the different guideline modes, you can click the round icon at the top of the guideline.

To create a guideline and use it, see below:

Guidelines in ConstraintLayout
Guidelines in ConstraintLayout

If you are curious as to how a guideline looks in XML, this is what it looks like:

Other views in the layout can then constrain themselves to the guideline.

Barriers

Barriers are one of my favourite features in ConstraintLayout. A barrier is an invisible view that contains reference to the views that you wish to use to form a “barrier” against. If one of the views grows, the barrier will adjust its size to the largest height or width of the referenced items. Barriers can be vertical or horizontal and can be created to the top, bottom, left or right of the referenced views. Other views can then constrain themselves to the barrier.

Below is an example of creating a barrier from two views and constraining a view to it. As you can see, adjusting the size of the TextView, the barrier adjusts its size and the constrained view moves.

Barriers in ConstraintLayout
Barriers in ConstraintLayout

If you are curious as to how this is created, this is what it looks like in XML:

The property app:constraint_referenced_ids contains a list of view ids that will form the barrier.

Chains

Chains allow you to control the space between elements and how the elements use the space. To create a chain, select the elements that you want to form part of the chain, and then right click – “Chain” – “Create Horizontal/Vertical Chain”.

Chains in ConstraintLayout Android
ConstraintLayout Chains

You are then able to cycle through the different chain modes. There are four different modes: spread_inside, packed, spread and weighted.

Different Chain Modes in ConstraintLayout

The XML for creating a chain is different in that all the views have the constraints defined on them and the first item in the chain specifies the chainStyle.

Groups

With groups, you can logically group together certain views. Don’t confuse this with normal ViewGroups in Android though. A group in ConstraintLayout only contains references to the view ids and not nesting the views inside a group. With a group, you can set the visibility of all views in the group, by just setting the groups visibility without needing to set every view’s visibility. This is useful for things such as error screens or loading screens where a few elements need to change their visibility at once.

To add a group – see below:

Groups in ConstraintLayout

If you are wondering how this looks in XML, here it is:

The property app:constraint_referenced_ids contains a list of all the view ids that need to be a part of the group.

Practical Example

I wanted to try recreate the Google Play Movies detail screen only using ConstraintLayout to see how much I could build in the UI Editor. The results completely blew me away.

ConstraintLayout Android Example
ConstraintLayout Android Example

For the code relating to this layout, checkout this Github repository.

There are loads more features in ConstraintLayout, so subscribe to the blog to receive updates. Have anything to add? Let me know on Twitter.

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

 

References:

Highlights from Google Developer Days Europe 2017 – Kraków, Poland

Highlights from Google Developer Days Europe 2017 – Kraków, Poland

This past week I was in Kraków for the Google Developer Days Europe Conference and the Google Developer Experts Summit. There was a lot to learn about new technology and I enjoyed meeting and spending time with many developers from across the globe. I didn’t know much about Kraków before visiting but I’m really thankful to have spent the past week there, exploring the area, having great conversations and eating lots of pierogis!

Google Developer Experts Summit 2017

The Summit was held in the Polish Aviation Museum which was such a great venue for the conference. I loved the attention to detail at the conference. The conference started with an address by Jason Titus and had some really good content to follow. The summit is a yearly event that all Google Developer Experts are invited to attend. The summit covers a whole range of content about Android, Web, IoT etc.

Google developer Experts Summit
Google Developer Experts Summit – Highlights

Google Developer Days Europe – 2017

After the Google Developer Experts Summit, GDD Europe took place in the ICE Conference centre. The conference was a huge success, I was very lucky to be involved in the event by speaking about Android Things!

Speaking in the main auditorium in front of a few hundred people was my highlight of the conference (and also pretty scary!). Overall, I had a great time speaking and you can catch my presentation below.

Some of the other highlights for me of the event included all the cool IoT stuff you could play with at the Android Things booth, including the Android DrawBot. The DrawBot took a photo and then converted your face into a line drawing.

Android Things IoT at Google Developer Days Europe
Android Things IoT at Google Developer Days Europe

There was a lot to see and take in during this conference. I especially enjoyed Florina’s talk about Architecture components, Wojtek’s talk about Android Performance Tools. Another talk that was really interesting was ARCore SDK, which went into detail around Android’s new Augmented Reality SDK and how you can use it.

Free Android Things IoT kits were also handed out, the kit included the Pico i.MX7D device and a few peripherals.

Android Things Kit at Google Developer Days Europe
Android Things Kit from GDD Europe

As with most Google Conferences, there is so much to see and do, including great conversations with highly skilled developers. If you ever are presented with the opportunity of attending a Google conference, I highly encourage you to go.

Google Developer Days Europe Highlights

Kraków is a beautiful city and I thoroughly enjoyed my time there. Till next time! Thanks #GDDEurope 😃

Wawel Castle
Wawel Royal Castle in Kraków
Android Oreo – (8.0) – Features I’m excited about

Android Oreo – (8.0) – Features I’m excited about

Google has officially announced the next version of the Android operating system and it is called Android Oreo! If you are a mad Android fanatic like me, then you probably already know this by now. Historically, Google has named its versions of Android after different tasty sweets or desserts, each version is named alphabetically – it started with Cupcake, Donut, to the more recent ones such as Marshmallow and Nougat. One of the big reasons why I love Android is because of the delicious sweet treats that the releases are named after.

There was a buzz of excitement at Google I/O 2017 this year with people trying to guess the next version name. Suggestions of Oatmeal Cookie, Oreo, Orange soda and some even suggested Ouma Rusks (okay I admit – that one was all me). On Monday the 21st of August, the announcement was made that Android O would be called Android Oreo!

Read More Read More