Category: android

ConstraintLayout 2.0: ImageFilterView

ConstraintLayout 2.0: ImageFilterView

Whilst browsing through the various examples online with the new ConstraintLayout 2.0, I stumbled upon ImageFilterView. This got my attention immediately and I decided to investigate further.

An ImageFilterView allows you to perform some common image filtering techniques on an ImageView, including saturation, contrast, warmth and crossfade. 

If you have tried to implement these image filters before, you may have run into ColorMatrix. If you look at the source of ImageFilterView you will see that these methods have just been nicely wrapped up with simpler API usage.

For example, if you would like to adjust the warmth, contrast or saturation, all you need to do is set a property on the ImageFilterView:

You can also access this programmatically, so you could add a SeekBar to control these values.

There is also the ability to crossfade between two different images using the crossfade method defined on ImageFilterView. This allows you to merge two images together.

If you are looking for a quick way to add some basic image effects, ImageFilterView is definitely something to consider. It is fast to use and execute since it is backed by ColorMatrix which uses the GPU (and not the CPU) to process the resultant image.

Here is an example of ImageFilterView in action:

Realtime Image Processing with ImageFilterView
Realtime Image Processing with ImageFilterView

 

The downside to using this approach is that you are not in full control of the exact pixel values that are going to be used, which could be problematic if you are developing an image editing application.

Overall, I’m really excited about the ImageFilterView class! I hope it is the start of some awesome Image effects offered by the Android Team.

Check out the ConstraintLayout demo repository for the code used in the above example.

Follow me on Twitter for more.

 

Variable Fonts in Android O 🖍

Variable Fonts in Android O 🖍

This post initially appeared here.

After attending DroidCon Italy 2018 last week, I was excited by the presentation from Nick Butcher and Florina Muntenescu. They spoke about many different aspects related to Text on Android including Spans, Colours, and AutoSizing TextViews, but the one thing that caught my eye was Variable Fonts.

This was the first time I had heard about variable fonts and I wanted to know more. Since working at Over, we have had to package many different font variations with our (work-in-progress) Android App. Users of the app are able to select the variation of a font family (i.e. the bold version) to overlay text onto their photos. This has increased the file size of the app, so I thought variable fonts could be a good alternative.

Read More Read More

42MB to display account information?! Use the Android APK Analyzer to reduce your APK size!

42MB to display account information?! Use the Android APK Analyzer to reduce your APK size!

After looking around at a few Android applications, I realised that there are many developers who don’t know about a great tool in Android Studio — the Android APK Analyzer. I cringe when I go to download a basic application (most of these apps are really simple) and the download size is over 40MB. Whenever I see this, if I have a bit of time, I like to dive into looking at what is bloating the APK.

Looking into these different APKs, I’ve come across some interesting files, from test data to iOS image files, I’ve seen it all. Whilst analyzing these APK files, I’ve noticed some common trends/mistakes that developers make.

I took a look at some of the Top(*) South African Android apps from the Google Play Store and found some interesting information. This blog post aims to show you how easy it is to look into your app and see what the biggest culprit of eating data in your app is. [Disclaimer: I’m not displaying which apps did what — you can figure that out yourself (reach me on Twitter if you want me to help you lower your APK size). ]

The average download size of the Top(*) South African Android app is ~15.3MB — with the largest size sitting at ~ 42MB. 

The largest app on the store had 18.8MB of images and 14MB of native libraries packaged inside.

Okay, so I’ve hopefully gotten your attention. We know our apps are too big, but how do we go about finding this information and improving our apps?

Read More Read More

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.