Mobile

Bottom Bar Tabs for your Xamarin Forms app

May 15, 2021  3 minute read  

Following on from last weeks article, I am continuing on my UI journey for my contacts app. My app design calls for a bottom app bar, with three sections - contacts, groups, and profile. The contacts and groups will be lists, and the profile will be a detail page for your own details with an editor. To start, I created the three pages as ContentPage views, complete with XAML layout. For example, here is my ListContactsPage XAML file: <?xml version="1.0" encoding="utf-8" ?> <Cont...

Adding an icon font to your Xamarin Forms apps

May 09, 2021  5 minute read  

I’ve started building a new app using Xamarin Forms from scratch. The idea is that I have a list of contacts stored in the cloud. There isn’t anything revolutionary about that, but I’m going to allow sharing of specific lists with others. You could, for example, create a tag called “Cycling Buddies”, and then tag your friends with that. Everyone who subscribes to the same list gets the same information. Even better, you can “broadcast” your information to certain groups, allowing other p...

Rounded corner panels and masks in SwiftUI

May 03, 2020  3 minute read  

I’ve been working on my UI developer skills recently (and I’ve done a few other posts about this as well). If you look at any of the recent design trends on Dribbble or UPLabs, you will see plenty of rounded corners. SwiftUI makes it simple to create rounded corners on all the corners - just add .cornerRadius(radius) as a modifier to the view. What happens when you only want a couple of corners rounded? For this, you need to dive into custom shapes and masks. Let’s set up a view to exper...

Pre-build steps for Flutter using Visual Studio Code

February 20, 2020  2 minute read  

Flutter is not a build system. I know, it’s a terrible way to start, but you have to accept that you need to produce a build system for Flutter. There are build systems written in Dart (such as this one), and I’m sure this situation will get better, but right now? There isn’t a good build system. So I use the node package manager. Here is my basic flow: Run npm init -y. Edit the produced package.json file to use flutter under the covers. Run flutter with npm start instead of the ...

Adding a pre-build step to Android Studio builds

January 20, 2020  2 minute read  

I’m currently writing a cloud-native app with an Android (and iOS) front end. I’ve got my backend configuration written using Terraform, and it outputs a file called infrastructure.json that describes the backend in a JSON format. Now, the question becomes “how do I get that infrastructure.json file into my front end code?” A simple version of this would be to ensure I copy the file every single time I update it. However, a better solution would be to ensure the file exists and to copy it...

Mocking Android resources with Mockito and Kotlin

January 03, 2020  3 minute read  

I bumped into an issue that was a little harder than I expected to solve, so this is the documentation. Requirement: Load a JSON file from the res/raw resource directory. Actually, that wasn’t the problem. The problem was how do you test that functionality? The library I have a basic configuration library that is constructed like this: class Configuration internal constructor(jsonContext: String): Map<String, Any> { internal constructor(stream: InputStream) : this(stream.buf...

Unit testing asynchronous Android network libraries

January 01, 2020  5 minute read  

I’m writing a network library for Android at the moment, and specifically looking at unit tests. In my last article, I looking at mocking the Android context and other Android specific libraries. Since I am writing a network client library, I need to go a step further and deal with the network connection itself. How can I test the asynchronous network calls in a repeatable manner? Fortunately, there’s a library for that. Square, the same people that brought you OkHttp, also produce a moc...

Two tips for unit testing Android libraries

December 24, 2019  3 minute read  

I’m busy writing a networking library for one of my Android apps. The question today is “how do I properly test the library?” There are a few problem areas, and I’ll cover two of them today. How do I properly mock classes that aren’t really Android specific, like android.location.Location and android.net.Uri? How do I properly mock the Android context? Android Studio already integrates the excellent JUnit packages for unit testing. I don’t want to have to write a visual app just to...

Build a better RecyclerView Adapter

December 13, 2019  3 minute read  

Many of my Android apps end up including listst, which are implemented via a RecyclerView. More importantly, I know all the items in the list ahead of time. Every single blog and tutorial always uses the same methodology. This ends up being a lot of boilerplate code. Create a view holder class Create a list adapter Attach the list adapter to the recyclerview Update the view holder class to implement the UI Check out the requirements around clicking Arrange for the list of item...

Handle location and geocoding with SwiftUI

November 05, 2019  5 minute read  

I’m continuing on my Weather app research in SwiftUI. My next problem is this: How do I get the current location (as a longitude / latitude) and a place (like a city) in my app such that the UI is updated when location updates happen? It turns out that this is a fairly easy problem, but it does come with some knowledge that you just have to know. Here is the list: How can I update the UI based on programmatic changes to the value? How can I listen for location updates? How can I c...

Create a bubble background in SwiftUI

November 02, 2019  3 minute read  

I’m continuing to explore SwiftUI, trying to recreate user interfaces that I see on design labs. The latest one is a task list app, found on Uplabs, and created by Rudi Hartano. I liked the design so I decided to replicate it from the Adobe XD file that he provided. One of the pieces he uses is a bubble background: The Adobe XD file shows me that I can use a linear gradient between two colors. However, there are also two slightly translucent circles on the top of it. If I were in Andr...

Why SwiftUI might just convert me to an iOS developer

October 31, 2019  9 minute read  

Confession time. I hated iOS development. First, there was Objective-C (which was a nightmare of epic proportions for cryptic syntax), then there was the Storyboards. Both of them forced you into using what is quite possibly the worst IDE on the market today (XCode), all so you could fit into the Apple ecosystem walled garden, where everything is controlled. Then Swift came along, so I took another look. I loved the direction that Swift was going, but Storyboards and the unintuitive IDE ...

Validating permissions on Android with Kotlin

October 07, 2019  2 minute read  

I’m continuing my educational coding exercise, developing a new photo sharing app. Recently, I completed my user authentication and registration process and I’m now quite happy with it, so I moved on to taking photographs. I’ve got an activity with a toolbar and a floating action button: <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/r...

Using Azure App Configuration for Remote Config with Android

September 22, 2019  11 minute read  

I’ve been playing with a new app recently. I decided I needed some support from the cloud around feature flags (turning on and off features for specific people so I can test things) and for remote configuration. Fortunately, Azure has a service in preview - App Configuration - and it does both of these things. There are preview libraries to go along with it for .NET, Java 8, JavaScript, and Python. Sadly, there is no library for Android Java. Fortunately, we can fix that! Let’s take a l...

Bootstrapping a React Native App: A Comparison

December 10, 2018  7 minute read  

It’s been a while since I have worked on a React Native app. In that time, create-react-native-app (CRNA) has been deprecated, and expo-cli has taken its place as the advised route. There is still react-native init, and Infinite Red has ignite. That is four different ways of bootstrapping a React Native app. Before I continue, let me be clear on what I want: I want to use “best practices” in my app architecture - for state, communication with my AWS-based backend, navigation, and so on. ...

Authentication with AWS Amplify and Android: Fraud Protection and Analytics

November 05, 2018  4 minute read  

This will be an in-depth series on authentication with AWS Amplify. Here are the topics I am going to cover, and I will update each blog with the links as I complete the articles. The basics - a username/password system. Customizing the UI. Authenticating with Facebook. Authenticating with Google. Using third-party authentication providers. Using Time-based One-time passwords (TOTP). Using Biometric authentication. Doing fraud protection and analytics. Over the last seven ...

Authentication with AWS Amplify and Android: Integrating Biometrics

October 29, 2018  8 minute read  

This will be an in-depth series on authentication with [AWS Amplify]. Here are the topics I am going to cover, and I will update each blog with the links as I complete the articles. The basics - a username/password system. Customizing the UI. Authenticating with Facebook. Authenticating with Google. Using third-party authentication providers. Using Time-based One-time passwords (TOTP). Using Biometric authentication. Doing fraud protection and analytics. This is the sevent...

Authentication with AWS Amplify and Android: Integrating TOTP

October 22, 2018  9 minute read  

This will be an in-depth series on authentication with [AWS Amplify]. Here are the topics I am going to cover, and I will update each blog with the links as I complete the articles. The basics - a username/password system. Customizing the UI. Authenticating with Facebook. Authenticating with Google. Using third-party authentication providers. Using Time-based One-time passwords (TOTP). Using Biometric authentication. Doing fraud protection and analytics. Over the last five...

Authentication with AWS Amplify and Android: 3rd Party OIDC Providers

October 15, 2018  10 minute read  

This will be an in-depth series on authentication with [AWS Amplify]. Here are the topics I am going to cover, and I will update each blog with the links as I complete the articles. The basics - a username/password system. Customizing the UI. Authenticating with Facebook. Authenticating with Google. Using third-party authentication providers. Using Time-based One-time passwords (TOTP). Using Biometric authentication. Doing fraud protection and analytics. In the last two ar...

Authentication with AWS Amplify and Android: Google Login

October 08, 2018  8 minute read  

This will be an in-depth series on authentication with [AWS Amplify]. Here are the topics I am going to cover, and I will update each blog with the links as I complete the articles. The basics - a username/password system. Customizing the UI. Authenticating with Facebook. Authenticating with Google. Using third-party authentication providers. Using Time-based One-time passwords (TOTP). Using Biometric authentication. Doing fraud protection and analytics. This is part 4 — a...

Learn to build mobile and web apps with AWS Amplify and Serverless Framework

October 02, 2018  3 minute read  

There has always been a bit of a problem between deploying your backend and then integrating that same backend with your front end code. The front end needs to know where the back end is located. The traditional approach is to create a configuration file for the purpose. But how? The AWS Mobile team created the awsmobile CLI and followed that with the AWS Amplify CLI. These tools are great for new projects. They provide for best practices deployment capabilities on the backend — and automati...

Authentication with AWS Amplify and Android: Facebook Login

October 01, 2018  8 minute read  

This will be an in-depth series on authentication with [AWS Amplify]. Here are the topics I am going to cover, and I will update each blog with the links as I complete the articles. The basics - a username/password system. Customizing the UI. Authenticating with Facebook. Authenticating with Google. Using third-party authentication providers. Using Time-based One-time passwords (TOTP). Using Biometric authentication. Doing fraud protection and analytics. This is part 3 — a...

Authentication with AWS Amplify and Android: Customizing the UI

September 23, 2018  9 minute read  

This will be an in-depth series on authentication with AWS Amplify. Here are the topics I am going to cover, and I will update each blog with the links as I complete the articles. The basics - a username/password system. Customizing the UI. Authenticating with Facebook. Authenticating with Google. Using third-party authentication providers. Using Time-based One-time passwords (TOTP). Using Biometric authentication. Doing fraud protection and analytics. This is part 2 - cus...

Authentication with AWS Amplify and Android: The Basics

September 18, 2018  11 minute read  

This will be an in-depth series on authentication with AWS Amplify. Here are the topics I am going to cover, and I will update each blog with the links as I complete the articles. The basics - a username/password system. Customizing the UI. Authenticating with Facebook. Authenticating with Google. Using third-party authentication providers. Using Time-based One-time passwords (TOTP). Using Biometric authentication. Doing fraud protection and analytics. I’m not going to cov...

Let your analytics drive engagement: Endpoint profiles with AWS Amplify and Android

September 11, 2018  6 minute read  

In my last article, I showed the current best way of integrating analytics into your Android app using Kotlin. The events are only half the story for engagement. You need to be able to segment your users so that you can send them appropriate signals to draw them back to your app. That means understanding your users — where they are, whether they have authenticated (and how), and what they are interested in. Amazon Pinpoint and the AWS Mobile SDK for Android provides some demographic informat...

Integrate Analytics into your Android applications with AWS Amplify

September 04, 2018  5 minute read  

I’ve become a big fan of Kotlin development for my Android apps. I also think that analytics should be integrated into every single app I write. I’ve covered integrating Amazon Pinpoint before via AWS Mobile Hub. Recently, AWS Amplify announced an updated CLI that provides support for native applications and bypasses the need to use the AWS web console for creating resources. Naturally, I wanted to try it out. Integrating analytics is now really easy. Here is how I do it: Start Local You do...

Native Android Development with AWS Amplify

August 27, 2018  5 minute read  

Up until this point, the experience for developing native iOS and Android apps with AWS has been a bit fragmented. There was AWS Mobile Hub; a web console that makes it easy to provision serverless cloud resources and get a configuration file back that describe the endpoints your app needs to communicate with. But because it is a web-based console, it requires the developer to switch back and forth between their local development machine and the browser. There is also the awsmobile CLI, but t...

Converting types with Room and Kotlin

August 08, 2018  5 minute read  

I’ve been working on a personal project, trying to get to grips with the various Android Architecture Components and Kotlin. One of the things I came up with was the requirement to deal with type conversion when using a SQLite database and the Room persistence library. Room is a nice abstraction to the internal SQLite database that converts models to tables within SQLite. It’s nice because it works alongside LiveData and RxJava to provide observable objects — when the database changes, the ob...

Implement Search-on-type in Android with RxJava

June 20, 2018  6 minute read  

I’m working on a new sample which, as is typical, communicates with a backend service for data through a serverless API. In this particular example, it’s a search capability that I am developing and one of the features I want to implement is “search while you type”. Not a problem, you might think. Just put a search box on the page (probably in the action bar), wire up the onTextChange event handler, and do the search. So, that’s what I did: override fun onCreateOptionsMenu(menu: Menu?): Boo...

Unit Testing in Android Studio with Kotlin

May 12, 2018  5 minute read  

I made myself a promise a couple of months ago. My next app would be fully unit tested for the non-UI components and fully instrument-tested for the UI components. That’s a tall order, especially since I’m using the latest and greatest Android Studio Canary. I ran into a few problems. Some can’t be solved and some can. Let’s start with a simple test. I’ve got a class that looks this: data class Note(val id: String = UUID.randomUUID().toString()) { var updated: Long = System.currentTimeMil...

Easy EditText content validation with Kotlin

April 11, 2018  3 minute read  

One of the things that I always deal with in my apps is the need to validate the input fields of a form. I can easily do this with this sample fragment of code (for example, for a length check): field.addTextChangeListener(object: TextWatcher { override fun afterTextChanged(s: Editable?) { val content = s?.text.toString() s?.error = if (content.length >= 6) null else "Minimum length = 6" } override fun beforeTextChanged(s: Editable?) { } override fun onTextChanged(s: Edita...

Using dependency injection with Kotlin

April 06, 2018  6 minute read  

In a recent post, I described how I can do app analytics by using the AWS Mobile SDK and an AWS Mobile Hub project. This is a great way to get usage analytics for your app, but it requires a tight coupling between the provider (the AWS Provider and AnalyticsClient) and the app. You need to initialize the provider early on (preferably in the Application wrapper or the first activity). That causes a tight linkage between the activities where it is used and the client object. This has several i...

Lessons in Kotlin: Toolbar Icons and Reflection

April 01, 2018  5 minute read  

There are many tutorials online on how to produce an Android app bar with an options menu — so much so that it can be boiled down to a few steps, and I’ll reproduce them here: Step 1: Create resources You actually need two resources. The first is a menu: <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/mainActionCamera" an...

Lessons in Kotlin Threading: An Animated Splash Screen

March 29, 2018  2 minute read  

I find quite a lot of Android apps have splash screens. Some splash screens are for showing off the logo; others for hiding the extensive data load times. Whatever the reason, it’s a way for a little bit of creativity to shine through. My first effort My new app needs a splash screen. Splash screens aren’t hard until you need to do something that takes some time, and there are many tutorials on how to produce one out on the Internet. I’m going to focus on the one problem I had. Let’s take a...

Why I’m refactoring to Kotlin

March 21, 2018  5 minute read  

One of the things that is really cool about software development is that we are continually learning and adjusting. I spent a day recently learning Kotlin. I was so impressed with the language, I decided to refactor my entire Family Photos app. It did not take long. Why do I love Kotlin? I have to admit, I was skeptical at first. After all, I tried Swift for iOS as an alternate language and it felt foreign. Admittedly, Objective-C isn’t much better, but Swift definitely had some issues for ...

Testing Mobile Apps: A Primer

March 11, 2018  10 minute read  

Why should you test your mobile app? A recent study showed that almost a quarter of users only use a mobile app once, and a shocking 95% abandon an app within the first month. Some of the reasons that users abandon an app are due to content and engagement. The biggest non-content reasons for abandonment are application crashes and security concerns. No one can prevent all application crashes. The mobile ecosystem is too broad and unpredictable to provide a 100% guarantee. However, testing ens...

The Six Mobile Apps You Should Write

March 10, 2018  2 minute read  

Take a look at the mobile apps on the app stores and you will see patterns emerge. The same pattern is repeated time and time again. It’s crazy to think about this, but you only need to learn how to write six mobile apps that implement the common patterns. You can then pretty much write any app that is out there. Your First App: Notes or Task List There is a reason that just about every beginner tutorial uses the Todo app or the Notes app as the base. It’s a solid basic app that has a varie...

Creating a React Native bridge library

January 19, 2018  7 minute read  

React Native is really good at straddling the line between native and JavaScript. There is a bridge between the two that allows you to call native code from JavaScript. This is awesome for including things that require a special touch. Most React Native developers will never need to worry about the bridge because libraries exist to wrap a lot of the common native libraries that you see in Android and iOS. But what if you want to create a bridge library of your own? That’s a whole other effor...

AsyncStorage, TypeScript, and Async/await in React Native

August 21, 2017  4 minute read  

In the last few posts, I’ve been working on a Notes app in a master-detail pattern for React Native using TypeScript. This is the last post about that project. So far, I’ve: Worked out how to handle orientation changes. Worked out how to implement swipe-to-delete. Figured out the best way to use TypeScript. Integrated MobX for the Flux pattern. Fixed up the project for universal iOS apps. Finally written the Master-Detail pattern. That’s a lot of stuff. This last post is about...

Building a Master-Detail Pattern in React Native

August 16, 2017  5 minute read  

I’m in the middle of writing a simple Notes app in React Native. Thus far, I’ve: Worked out how to handle orientation changes. Worked out how to implement swipe-to-delete. Figured out the best way to use TypeScript. Integrated MobX for the Flux pattern. Fixed up the project for universal iOS apps. Now it’s time to get to the master-detail pattern itself. Master-Detail is a basic pattern that incorporates a list (the master) and a detail page. On phones (and tablets in portrait m...

Universal iOS Apps with React Native

August 14, 2017  less than 1 minute read  

This is one of those short “tip” posts. I was developing a nice React Native app and blogging about it. However, I bumped into a problem where my iOS simulator runs always appeared as if they were on an iPhone. If I ran the app on an iPad, it would still act as if it were on an iPhone. The fix for this is buried inside XCode. Open XCode and then open the .xcodeproj file, which is inside the ios folder of your project. Then click on the project name. You will see a section like this: Note...

Integrating React Native, TypeScript, and MobX

August 11, 2017  5 minute read  

In my last article, I psted about getting TypeScript working with React Native. I’m building a flexible, best-practices, Notes App in React Native. This means I need a backing store, and it has to be local for offline capabilities. React has a definite way of building data into the UI and the manipulation of that data is an architecture known as Flux. Flux isn’t a concrete implementation, however. Normally, I would use Redux as the concrete implementation. However, I have recently started wor...

Debugging React Native with TypeScript and Visual Studio Code

August 09, 2017  2 minute read  

One of the things I really miss from React Native was the support for TypeScript. TypeScript helps me immensely, but it really comes into its own with React programming as the PropTypes are specified for you (no more propTypes static). I’m also getting into MobX as a flux implementation and that uses decorators, which is native in TypeScript. There is lots to love in TypeScript. However, every single guide I saw for implementing TypeScript within React Native was flawed. Specifically, there ...

Implementing swipe-right on a React Native FlatList

August 07, 2017  6 minute read  

I’m progressing on my “master-detail” pattern for a react-native app. The actual implementation of master-detail is shockingly simple (more on that later). However, I bumped into some specific issues when I was implementing it. The first of these was covered last time – how to detect orientation changes in React Native. The next is this. How do I implement swipe-right so that I can add a swipe-to-delete function to a FlatList. Let me explain a little further. The latest edition of React Nati...

Handling orientation changes in React Native

July 26, 2017  3 minute read  

I’ve just returned to my JavaScript days and am trying to learn React Native again. One of the things I like to do is to produce a “perfect” app – one that will work on both tablet and phone in any orientation and that includes all the best practices. Things like my Notes App on Android, for example, took me off to learn content providers. React Native is no different. There are a bunch of things you just have to know. One of the things I want to do is to produce a single app that does maste...

The things I like (and don’t like) about Swift?

June 19, 2017  6 minute read  

Recently, I’ve given myself the task of learning the “native” mobile development platforms. That means Java or Kotlin for Android and Swift or Objective-C for iOS development. Kotlin is a ways behind Java for Android development and I already knew (somewhat) the Java language, so that one was relatively easy. Swift is the new kid on the block, but it’s obviously the way to go for iOS Development. This is not a blog post about how to learn Swift. In fact, I’m probably not going to teach y...

Which is better - React Native or Xamarin Forms?

May 25, 2017  5 minute read  

Let’s talk about a loaded question. After my recent forays into both React Native and Xamarin Forms, I got asked on Twitter – which is better, React Native or Xamarin Forms? Further, I should answer this for JavaScript experts, C# XAML experts and for developers with experience in both. After all, both produce native apps and both use a common codebase. The Short Version There isn’t a clear winner here. If I am a JavaScript expert, I’ll gravitate towards React Native. If I’m a C# exper...