DEV Community: Dougy Lee

[Android Dev] Add Google Maps Quick and Dirty

Dougy Lee — Tue, 03 Aug 2021 00:05:54 +0000

Sometimes we just want to add a Google Maps activity into a proof-of-concept or just a test project.

We want less overhead of making it well engineered.
We just want to get it running.

Use the Preset

The easiest way to get started on Google Maps is to use the preset Google Maps activity.

This is a template that adds the code to insert a Google map video into your app.

The code here is functional so you don't have to do too much to get it working.
The documentation is very easy to read and the steps are few.

Starting from nothing

You'll need to set up Google Cloud console.
Create a new project inside the Google Cloud console. Enable the Google Maps platform credentials
Copy and paste the API key into the metadata tag in the Android manifest.

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="MAPS_API_KEY" />

Gotchas

The Google Maps template activity uses view binding which can be confusing for new users.
The way we handle the API key is not very secure since we are directly adding it into our manifest file.

Beginner Exercises - Android Lists

Dougy Lee — Thu, 08 Jul 2021 01:14:30 +0000

Following on from my previous post about practicing your Dev skills, Let's practice creating layouts with a RecyclerView.

A quick RecyclerView recap

RecyclerViews are good at displaying your data as a scrollable list of items.

However, there's a bunch of steps involved in displaying the data in these views which may seem daunting for someone new.

The reason why it is more complicated is because they have used a way of writing code called the adapter pattern.

RecyclerViews are the view.
Your feed the RecyclerView object called an adapter.
Your feed the adapter a list of data that you want to display.
You write code in this adapter to convert your data into a view.

There are a lot of little magic tricks that the RecyclerView does such as showing and hiding view holders but I will not go into that detail here.

The Challenge

I have picked a layout from the Play Store screenshots for three popular apps -

Gmail Go
WhatsApp and
Tinder

There are many parts involved in building screens like these.

So for the exercise I will focus on building the RecyclerView and maybe add some of the smaller UI elements like the title bar and the floating action button for fun afterwards.

The engineer's that work for these companies spend a lot of time adding features to the screens. Even If we simply copied all the functionality from the screens, we would not get very far in a session of practice time.

The key skills that I want to practice today are creating the layouts and displaying them onto a RecyclerView.

We will call the session finished when we have the layouts displaying on the screen.

Assessing the Work

Data Model
Layout(s)

Let's analyze each of the designs.

It's helpful to think about the data that we are going to receive.

Sometimes at work, you'll have a data model defined for you by a back end service that you’re calling data from.

Other times, you’ll have to define your own.

For this exercise we will need to define our own since we are just using some dummy data to display onto the screen.

This design is the easiest out of the three since the layouts for each chat item are all the same.

Data

We only need one data object type to represent the “chat”.

Attributes for this chat object that we need to display:

Chat image
Chat title
Chat subtitle
Timestamp
Unread messages count
Is sent and read flag

To simplify our dummy data we will Represent I'll timestamp as a string and we will ignore the typing status.

Layout

The layout is pretty straightforward:

Profile image on the left
text in the middle
status indicators on the right

Gmail

Data

Based on the design that we see, there seems to be two different sections:

The top part of the RecyclerView shows a bunch of email categories.
The bottom part shows individual emails.

From this information, we can try to create objects for each of these concepts.

an email category object
an email object

Now that we know what kind of objects that we need, let's list out all the things that we want to show onto the screen and add them as attributes of these objects.

The category object needs to have these attributes:

Icon
Title
Subtitle
Tint colour
Email count

The email object need to have these attributes:

Icon
Sender
Subject
First line
Time stamp
Is calendar flag
Is starred flag
Has attachment flag
Label
Is Unread

In order to save time and not lose focus on my goal of practicing layouts, I am modeling things like the time stamp as hard coded strings Instead of normal timestamps which are usually:

A long integer for Unix time
A formatted string in a common date and time format e.g. (“2001-07-04T12:08:56.235-0700”)

Layout

There are two different types of layouts used in this RecyclerView:

One layout for displaying an email category
One layout for displaying an email item

The two layouts look very similar:

They both have some kind of icon on the left as a visual cue for the user
They have some text in the middle
They have tags and buttons on the right

Even though they look very similar, I wouldn't use the same layout for both of them.

I would opt to keep the layouts separate since these are conceptually distinct.

In this way, if we wanted to change the look and feel for one of them, we do not have to change or test the other.

When building the RecyclerView to handle two different types of layouts we can make use of the getViewType() function of the RecyclerView adapter.

Tinder

Data

Just like the Gmail app, the Tinder app has two sections in this screenshot:

New matches
Messages

We can model this using these classes:

A profile class
- Image
- Name
A message class
- Profile
- Last Message

The way we serve this up to the adapter is to create a list of profiles to represent the new matches.

We will also provide a list of message objects to the adapter to display the message section

Layout

In this design, we can break down the RecyclerView into different types of rows:

Section header
New matches horizontal gallery
Message row

Just like the Gmail app, we will need to use multiple layouts for each of the different row types.

We will build the horizontal gallery as a nested RecyclerView.

Practice Your Dev Skills

Dougy Lee — Mon, 05 Jul 2021 22:38:59 +0000

Practice Them Skills

The saying "practice makes perfect" goes no further than the truth.

Skills are honed by spending hours of practice so that you get better in your craft.

Soccer players do drills.
Musicians play scales.
Coders copy and paste…

Forgetting to Practice

Sometimes as a developer you forget that you actually do have to put in the hours.

It's really tempting to simply knuckle down and keep forging ahead on work or your pet project.

Create a nice dashboard
Optimize your splash page to load up faster
Add Lottie animations
...
...

All of these activities are not bad.
In fact, they are really good for exposing yourself to new problems all the time.

These tasks train you for encountering the unknown and you gain very good skills from doing these as well.

Researching quickly
Googl-ing the right things
Integrating it with your existing environment

Work is NOT Practice!

However, there are some things we can get better at by doing things more.

For an app developer, it's really easy to just think “Oh, I've done this once before so I have got it down pat.”

Sometimes it's when we figure out some solution for a problem and end up copying and pasting that bit of code in other sections of our code...

We might try to be smarter by creating a function that embodies this code so that we don't have to write it multiple times...

The end result is that we have only written this code from scratch once.
This is great for a work stand point. Your company doesn't want to pay 3x or 4x engineers to each solve the same problem.
However, as an individual, if you got to do that solution at work, chances are, you only get to do it once.

Your only chance to do the same thing again is if you move companies, or another team/ code-base.

DRY is the Enemy of Repetitive Practice

In our line of work, we rarely see the same problem multiple times.
If we try to apply the DRY principle (Don’t Repeat Yourself), where we minimize the number of times we have to write the same code, we do not get a lot of practice time into our skills.

If we were basing our practice solely on work, then we get a lot of breadth in the problems that we solve but not a lot of depth in our learning.

Dougy Practice Time

Why?

I want to create a blog where you can follow along in my attempt to spend time practicing my craft of Android development.

What do I get from all this practice?

What I hope to see in a week or a month of active practice is a better handling of the tools that I have (particularly Android Studio) as well as being smoother in writing solutions to common problems.

Estimation

As a byproduct of this exercise, I am hoping to be better able to estimate tasks.
This will be great for work -
Scrum masters are always wanting estimates on particular tasks.
This will be great for me -
I will have a better measure of my skills
As an example, I would like to see the time for me to create a layout reduce from say 20 minutes to 10.

Achievement

The more that I practice, the more mastery I have…

The more Mastery I have, the more flow time I will be in…

And my hypothesis is that the more time I spend in flow, the more feeling of achievement I will get.

There's a great sense of satisfaction in computer game speedrunners achieving their personal bests.
Why should something like cutting time in creating a complex layout quickly be any different?

Value Creation

A core tenet of business is that you create value for your customer.
Customers pay you because you bring value to them.
They are MORE happy when you bring MORE value.

Conclusion

Practice your coding skills by solving the same problem from scratch a few times.
I would like to track my progress here and see what I gain out of getting more efficient at Android development.
I will post the little tips and tricks I find here as I come across them.

This is a Dev.to repost from a blog that I'm kickstarting while I learn how to write online: Android Dougy.

I've only just started my blogging journey and I'd love your feedback on what kinds of posts you'd like to see.

Whether it's:

Resources I went through
Tool showcase
Development best practices
Exercises
[Insert your own idea]

Let me know in the comments below!

Learning Blog: Android Navigation Components

Dougy Lee — Wed, 03 Feb 2021 18:57:10 +0000

Practicing Android components by creating a sample app.

Following the developer guides here.

Learning Blog: Kotlin Flows

Dougy Lee — Wed, 03 Feb 2021 00:45:14 +0000

Tutorial: Ray Wenderlich

About

Kotlin Flows are a Kotlin implementation of Reactive Stream.
It is quite powerful and has the potential to remove the need for RxJava for Android projects.

Learning Blog: Linear Regression

Dougy Lee — Mon, 18 Jan 2021 04:41:41 +0000

Follow my Machine Learning progress: Link here.

Coursera Link: Coursera

Preface:

I tried this course 6 years ago and found it very difficult because I couldn't get my head around the math.
I am determined to try it again.

Notes:

I found it very helpful to write out the equations in long form on a piece of paper and reduce it into a vector notation
I also found it helpful to do the partial derivative with the expanded version to get to the result that was presented by Andrew Ng

Milestones:

[x] Viewed coursework
[x] Install octave
[x] Finish assignment

Learning Android: Adaptive Icons

Dougy Lee — Sun, 17 Jan 2021 22:44:41 +0000

Adaptive icons were introduced in Android 8 (Oreo | API 26) to add a bit of design flair to your launcher icons.

The feature allows the user's OEM to determine a mask to apply onto your launcher icon (e.g. cut a square icon, squircle icon)

Key Points:

Foreground/Background layers: 108 x 108 dp
Only works with API 26+
- Move your adaptive icon file to res/mipmap/anydpi-26
Icons for earlier versions use 48 x 48 dp icons

Code

Android Manifest

<application
    …
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"
    …>
</application>

res/mipmap/anydpi-26

<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@drawable/ic_launcher_background" />
    <foreground android:drawable="@drawable/ic_launcher_foreground" />
</adaptive-icon>

DEV Community: Dougy Lee

[Android Dev] Add Google Maps Quick and Dirty

Use the Preset

Starting from nothing

Gotchas

Beginner Exercises - Android Lists

A quick RecyclerView recap

The Challenge

Assessing the Work

WhatsApp

Data

Layout

Gmail

Data

Layout

Tinder

Data

Layout

Practice Your Dev Skills

Practice Them Skills

Forgetting to Practice

Work is NOT Practice!

DRY is the Enemy of Repetitive Practice

Dougy Practice Time

Why?

What do I get from all this practice?

Estimation

Achievement

Value Creation

Conclusion

Learning Blog: Android Navigation Components

Learning Blog: Kotlin Flows

About

Learning Blog: Linear Regression

Preface:

Notes:

Milestones:

Learning Android: Adaptive Icons

Key Points:

Code

Links: