DEV Community: Pabi Forbes

Theming In Android Revisited: Part 2 - Typography

Pabi Forbes — Fri, 13 Sep 2019 06:26:13 +0000

Theming your Android app is not just about choosing a color scheme and that was one of the mistakes that I made. Theming is composed of other factors such as Typography.

You would think typography is just about choosing a font and slapping it not the the app right? Well, that's the second mistake that I made 😊.

What is Typography?

Typography can be defined as the art and technique of arranging type. Although it is an area we usually depend on designers to attend to, I believe as developers, we should have a clue to how it works under the hood.

Material Design has a really cool guide to typography which can be found here.

Styling Text

Using the Material Design Type Scale to style text in the app aids in creating a uniform look and feel across your app. It provides the following styles to apply to your texts:

Headline

Headline styled text appear the largest on the screen.

Attributes:

textAppearanceHeadline1
textAppearanceHeadline2
textAppearanceHeadline3
textAppearanceHeadline4
textAppearanceHeadline5
textAppearanceHeadline6

Subtitle

Subtitle styled text appears smaller than Headline texts.

Attributes:

textAppearanceSubtitle1
textAppearanceSubtitle2

Body

Body styled text is commonly used for long-from writing such as articles.

Attributes:

textAppearanceBody1
textAppearanceBody2

Caption and Overline

These have the smallest font sizes.

Attributes:

textAppearanceCaption and textAppearanceOverline respectively.

Button

Used to style text that appears on buttons.

Attributes:

textAppearanceButton

Material Design Type Scale In Action

You can use type scale, Headline for example, in your app as follows:

And for text on buttons, you can style it as follows:

This allows you to edit the attributes to better suit your app's look and feel.

A full list of Material Design Type Scale can be found here.

Comment with a pic of how you styled text for your app.

References and Resources

Creative Bloq :What Is Typography?
Material Design Typography

Cover Image: Florian Klauer on Unsplash

Theming In Android Revisited: Part 1

Pabi Forbes — Sat, 03 Aug 2019 19:03:01 +0000

Last year, some time in July, I wrote a blog post about theming in Android. The post received some good comments, so I decided to revisit the topic with newly acquired information to share with the community. But before we get into how to theme our apps, let's see why it should be considered.

What is Theming? 🤷🏿

A theme can be described as unifying an idea and theming is designing or bringing that idea to life to an object, application, or space. Theming is used to create a holistic look and feel.

Should we care about how our application looks like?
Well, you would want to create a memorable experience for your end users. And to create a reusable set of attributes to apply to your entire application. Theming also enables us to create visual consistency in our applications. Smashing Magazine describes visual consistency as follows - "Typefaces, buttons, and labels need to be consistent throughout the app" .

Let's get into theming, for this post, we will be making use of Material Components. Add the following to your gradle file:

com.google.android.material:material:$material_version

Color 🎨

Color was the main topic in my previous post about theming. I also included useful tools such as the Material Design Palette and the Color Tool. Extracting colours from these tools might look like this:

And as pointed out in the previous post by,

[Deleted User]

there seems to be a duplication of color from the exported file from the Material Color Tool. So how do we solve the duplication issue? Well, it is quite simple, we name our colors. A cool online tool you can make use of is Name that Color, and the result looks like this:

That helped us get rid of duplicate colors and we named our colors, because colors have names. That will be particularly useful if we need to define multiple themes for our apps. This is how we will define the style for the app's theme using the colors:

On Colors

"On" Colors - namely On Primary, On Secondary, On Background, On Surface, On Error, as seen in the image above, are used to usually used for iconography, text, and strokes.

Cool Resources 👀

Happy Theming

Android Animations Using Lottie

Pabi Forbes — Wed, 06 Mar 2019 04:54:48 +0000

Animations, Differently

I have written two blog posts based on my (first ever) talk about Android Animations. Little did I know that two months after, I would be given a task that would require me to revisit animations. But this time, I had to approach animations differently. How?! you may ask...

Using Lottie

The task was to replace all the progress bars in the Android application, with the custom loaders from the Illustrators in the team. So this time, I would not make use of the View Animation Framework nor the Property Animation Framework.
The Illustrators provided the custom loader animations in the form of a json file. So how do we load json animation files? By using a cool library called Lottie.

Lottie for Android is a library created by Airbnb that aids in rendering animations created using After Effects.

The Setup

Inside your app gradle file in your project add the following dependency:

dependencies { implementation 'com.airbnb.android:lottie:$lottieVersion' }

And that is all you need to get started.

Loading Animations

To make use of the Lottie tool, animations need to be placed inside the assets (...\app\src\main\assets) folder inside your project.This is where Lottie loads the animations from.
Once the animations are placed in the folder, we can add them to the layouts.

Adding Lottie Animation Views To Layouts

A Lottie Animation View is used to load a Lottie animation. To add a LottieAnimationView to a layout, we make use of the <com.airbnb.lottie.LottieAnimationView/> tag as follows:

<com.airbnb.lottie.LottieAnimationView android:layout_width="match_parent" android:layout_height="wrap_content" app:lottie_autoPlay="true" app:lottie_loop="true" app:lottie_fileName="your_filename.json" />

For example, let's say we have a fingerprint animation we want to display while we authenticate the user's fingerprint. We would add it to a layout as follows:

<com.airbnb.lottie.LottieAnimationView android:layout_width="wrap_content" android:layout_height="wrap_content" app:lottie_autoPlay="true" app:lottie_loop="true" app:lottie_fileName="fingerprint.json" />

Result:

Fingerprint animation

Animations can help bring your application to life, help provide visual feedback for your users, and make the user interface more appealing and usable. Lottie is an awesome tool that can assist in achieving that. Go ahead and give it a try.

Previous Blogs Posts

Quick Tutorial

Github

Cool Resources:

Credits:

Fingerprint Animation file

Developer's Digest: Revisited

Pabi Forbes — Tue, 19 Feb 2019 11:24:34 +0000

The Developer's Digest...ive System

In case you missed the original post, you can find it here, where I gave readers a run down of how my diet looks like.

A lot has changed since, and seeing more posts about keeping healthy as a developer, I was inspired to write about my diet again. I am still a "lazy chewer" (if that term exists), but I have incorporated more meals in a day to my diet and I take more vitamins. Here's a breakdown of my meals in an average day at work:

Breakfast

I start my morning by taking some Spirulina Powder mixed with water, about 250ml . I then have my breakfast typically at around 05:45am and it composes of some bran cereal with warm milk (lactose free). I then take my Vitamin B Complex, Omega vitamins, as well as my Iron supplements tablets. One of each.

Snack One

This snack is a smoothie that I have 3 hours after breakfast and it is made with Oats, milk, yoghurt ,honey, berry mix, egg, and some hemp powder. I know some people are horrified of the thought of a raw egg in a drink, but I can barely taste it. I also try to change up the fruit mix for my smoothie from day to day.

Snack Two

Green salad, chicken breasts with some salad dressing or mayonnaise.
I usually eat this an hour or two after drinking my smoothie.

Lunch

Lunch is usually a larger portion as compared to the snacks and I usually have some red meat or fish, with a salad or two on the side, and rice with some gravy.

Snack Three

A packet of crisps.

Dinner

Dinner is similar to what I would have for lunch.

And yes, I drink water throughout the day. Water is very essential. Changing my diet for the better has made a major difference. I feel less tired and I have become more productive. I do have days where I would have fast food, having a diet is not about eliminating certain foods but rather eating in moderation.

Some awesome posts to read:

A Developers Guide to Getting Fit

Eric Bishard ・ Feb 9 '19

#discuss #beginners #fitness #guide

4 tips to stay fit as a software developer

Milos Protic ・ Jan 13 '19

#discuss #fitness #lifestyle

What is your routine for staying fit and healthy?

Ben Halpern ・ May 23 '18

#discuss

6 Ways to Start Getting Physically Fit as a Coder

Patrick God ・ Dec 2 '17

#health #life #fitness

What does your diet look like?

Happy reading and eating!

DevFestZA: Bringing Your Android Application To Life Using Animations (Part 2)

Pabi Forbes — Thu, 10 Jan 2019 03:53:26 +0000

In case you have missed Part 1 of this blog post series, you can catch up below:

DevFestZA: Bringing Your Android Application To Life Using Animations (Part 1)

Pabi Forbes ・ Dec 24 '18

#android #animations #devfestza

I chose to speak about Android Animations because I started to explore them a bit, and they are fun.
Android provides two frameworks that you can use to implement animations; namely the View Animation Framework and the Property Animation Framework .
You can read more about them here and here.

To see how my talk went (my voice was shaky because I was extra nervous), you can view it on GDGJohannesburg's YouTube playlist

More useful links:
Material Design: Understanding Motion

Android Animation Library

Android Rocket Demos

Functional Animations

Happy Reading

DevFestZA: Bringing Your Android Application To Life Using Animations (Part 1)

Pabi Forbes — Mon, 24 Dec 2018 13:13:27 +0000

DevFestZA
The South African leg of DevFest was hosted in the city of Johannesburg, and it was amazing. I had submitted a topic for the CFP (Call For Proposal), which had to be about Google technologies. My topic was Bringing Your Android Application To Life Using Animations.
I was super nervous as this was my first time ever giving a talk about Android. I just thought to myself: The room will have Android professionals, who are possibly more experienced than I am, what could they possibly learn from me?
My plan of action was to share what I have learnt about animations. Similar to how we write about our experiences while coding, but this time, it was not a blog post, rather a talk.

I chose animations because:

I had slowly started exploring animations
It would be a topic that I would have fun talking about
Animations are fun, we can animate almost anything in our Android apps
Animations are often overlooked

Planning It All Out

I used my blog post planning techniques to help guide the structure of my talk. The technique has planning steps as follows:

Introduction (this may be a background story as to why the content is created or the problem that you are trying to solve.)
Body (the body will contain most of the content, it may also include steps in resolving the problem stated in the introduction.)
Conclusion (you can state your final thoughts in the conclusion, maybe even the lessons you have learned from tackling the problem.)

With that in mind, I planned my talk about animations to unfold as follows:

What animations are?
What role do they play?
How to use animations?
When to use animations?

The Content
When we create applications, we rarely create them to be used solely by ourselves. We want to create applications that are functional and visually appealing.People interact with their mobile phones everyday. Mobile phones have become our go-to devices. People naturally expect some form of feedback when they interact with their mobile phones.

Feedback is essential.

Using animations is a great way to provide feedback. Objects respond to our interactions & people expect a similar level of responsiveness from application elements. Animations add visual cues that notify the user about what is going on in your application. Animations are particularly useful when the UI changes state; such as when content loads or a new action has become available.

InVision makes use of the term Functional Animations : “Functional animations are types of animations that are subtle, have clear and logical purpose.”
It does not mean that every element should be animated. Animations should be meaningful and be used to provide reassurance.

In part 2, we will explore Android animations and I will share some useful links.

Cover Image by DESIGNECOLOGIST on Unsplash
Sticky Note Image by rawpixel on Unsplash

Spooktober: Git Horror Story

Pabi Forbes — Sun, 28 Oct 2018 13:16:09 +0000

Since it is the month of all things spooky, I thought it would be a good idea to post one of my scary experiences while developing, to get into the mood of Spooktober.
This scary experience comes in the form of git. So here's the story...

I was placed on an Android project, where I had to add a new feature and apply flavour specific resources. So the first thing to do was to clone the project. Alright, I've done that before so it shouldn't be an issue. Oh was I wrong. The project source resides on BitBucket and I make use of Git Bash terminal to clone and to run other commands. I go to BitBucket and choose the develop branch (see image below), then proceeded to press the "Clone" button, pasted the link into my terminal.

The develop branch on BitBucket.

At this point, all seems well. I then proceed to Android Studio to open up the project to make sure that it builds. The project runs a successful build. I go back to my terminal again to run $git status to see the status of the branch I'm currently in. I then noticed that I'm in master. I then run $git checkout develop . It returns a message that states that the branch does not exist.
How can this be possible as it exists on BitBucket.

I repeat the whole process again, hoping for a different outcome. I still encounter the same issue. I ask a colleague if he has a successful clone. He says no. I then wonder if we were given the correct access rights on BitBucket...
But that wouldn't be the cause because I could view all of the branches. At this point I'm too shy to approach my manager for this silly situation.
Next step: Dig up solutions on Stackoverflow.

I Googled my issue, found some suggested solutions on Stackoverflow. The first few solutions didn't work at all. I digged deeper, and finally a solution that worked. The command is $git clone -b .

Some of the reasons why I did not approach my senior/team lead initially was because:

I wanted to should show attempts in trying to solve my issue.
It felt embarrassing, as I am a junior dev. And I've been working with git commands for 3 years so far.

Lessons to take away:

Attempt to solve an issue before you approach a team mate.
Do not spend too long on trying to solve an issue.
Alert your team mates of the issue in time.
Share your solutions with the community.

Which git commands do the trick for you?

Useful links:

Cover Photo by Ehud Neuhaus on Unsplash

Name a more iconic duo...I'll wait.

Pabi Forbes — Sat, 22 Sep 2018 08:01:33 +0000

In this post, we will look into setting our app's icon and awesome resources we can get free to use icons from.

One of the things that I struggled with whilst learning Android development was setting the app icon. I would usually just copy and paste the image resource into the project's drawable folder and then rename it to the current ic_logo (very bad I know, but it was a hack).
Doing it that way would work for some images, but it would look absolutely horrible for others. So I did some research because I really wanted to make my app look appealing. I then read up on using Android Studio Image Asset helper tool to help me achieve what I was initially trying to do. While I wait, let's dig a little deeper into icons and the helper tool.

What's In An Icon?

Think of an icon as a brand image for your application. An app icon is a visual representation of your application. It appears on the user's home screen of their mobile device and in the app store.

A Few Elements Of A Successful App Icon

Unique
Your app icon needs to be one of it's kind. It has to have an element that makes it stand out from the rest.

User-Friendly
Your app's icon needs to be easy to learn and to understand. The icon should be clean and simple.

Recognisable
Users need to be able recognise or identify your icon from previous encounters or from knowledge of the icon.

Communicate Meaning
A user should have an idea about the features of the app by taking a look at the icon.

Memorable
People should ideally remember your app icon. Making your icon unique and user-friendly aids in making it memorable.

Icon vs Logo

Icons should ideally represent an action a user can perform on the application. As mentioned before, it should communicate meaning. A logo on the other hand, can be considered as imagery that represents a company or an organisation.

Setting Your App's Icon Using Android Studio Image Asset

A really cool tutorial has been posted, as shown below, on setting up your app's icon that also shows you how to create adaptive icons.

Article No Longer Available

Handy Links

Awesome Sites To Get Free Icons

UpLabs
The Noun Project
Android Asset Studio
Always remember to attribute the creators of icons that you make use of.

More Resources

Android Material Design Iconography
Icon Design Guidelines

The Android Studio Image Asset coupled with an icon that truly represents your app, makes it easier to keep the imagery of your application consistent throughout all devices and Android software versions.

Thank you to Harpal Singh for the header image, found on Unsplash.

Happy Reading.

Theming Your Android App

Pabi Forbes — Thu, 19 Jul 2018 11:22:11 +0000

Theming your android app might be quite of a task if you don't have an eye for design and color combination. It's much easier when you are placed on a project that has designs created by a UI/UX designer.
A theme is applied throughout the entire app, not just a single view. Theming your app includes creating a color scheme for it. An android app's color scheme is made up of a primary color,or sometimes a combination of the primary color and secondary color.

Primary Color
The primary color is the color that the user will see on the screen and on your app's components the most. The primary color will appear on your appbar, status bar, and tabview for example.

Secondary Color
The secondary color can be used to emphasize the different components on the screen. The secondary color can be used on floating action buttons, progress bars, or switches for example.

Side Note:
It is not always required to have a secondary color. The app can use the primary color's variants as it's secondary color. Primary color variants are the lighter and darker shades of the color.

So how do we tackle the task of theming our apps? Fortunately for android beginners, Material Design has a cool color palette tool, called Color Tool.

The Color Tool helps you visualize how your app would look like with the colors you would choose.
The tool also allows you to export the color xml and just paste it in your android colors.xml file.
You simply click on the Export button on the top right side of the website, it will then download your scheme as an xml file. You then simply copy the text from the xml file to your color.xml file of your Android project, as shown below:

Another awesome tool is the Material Design Palette, which also provides a visualization of the theme. You can simply click on the download button to get the xml version of the scheme, and then just simply copy and paste it into your colors.xml file.

With the tools made available, it is now easier to style your app. Some useful resources:
-Material Design
-Android Developer Guidelines

Need some insipiration? Check out what other developers and designers are crafting on UpLabs.

Credits:
Cover Image - A big thank you to Markus Spiske, taken from Unsplash

Android Views: Peek-A-Boo

Pabi Forbes — Wed, 04 Jul 2018 06:06:41 +0000

In this post, I will be talking about the Visibility attribute for Android views. So what are Android Views? Android Views are user interface elements that are drawn onto the screen and that a user can interact with. For example, a button, a textview,and an imageview.

Android view attributes define how an element looks like, such as it's height, width, and color. Think of them as metadata for views. A view's visibility can be set to gone, invisible, or visible, as indicated in the sample code below:

android:visibility="visible"
This is a view's visibility value by default. This means that the view will always be displayed on the screen.
As it is default, a view's visibility does not have to be explicitly set to visible. As we can see with the sample below, the textview that displays the infamous "Hello World" is visible on the screen.

android:visibility="gone"
When we set textview's visibility attribute to gone,
it will simply not show on the screen and it's space on the layout will be occupied by surrounding elements.
When the view is toggled from gone to visible, surrounding elements will simply make way for the view and the view will ocuppy it's space and show on the screen.
Looking at our sample app below, we can see that the textview is not visible on the screen and it's space is occupied by the buttons.

android:visibility="invisible"
If a view's visibility is set to invisible, the view will not be displayed, but it will still occupy it's space on a layout. So it might make the layout look a little weird with some extra space in-between elements.
Taking a look back at our sample app, the textview is not shown, but it still occupies it's space. The buttons stay in their positions.

Changing Visibility On The Go
Toggling between the different visibility values can be easily achieved programatically. I have added the functionality of toggling between the different visibility attribute value behind the clicks of the buttons. When the "Gone" button is clicked, we change the visibility value to gone. When the "Invisible" button is clicked, we change the visibility value to invisible. When the "Visible" button is clicked, we simply change the visibility value to visible.
Take a peek below:

Toggling between the different visibility values aids us in showing the user relevant content depending on the activity being carried out on the screen. For example, we can show a loader when making a service call, and then only display the underlying content once we have a response from the server. The android visibility attribute is just one of many attributes that are available for us to use and play around with, so don't be shy to try them out.
A cool post you can check out https://guides.codepath.com/android/Defining-Views-and-their-Attributes.

Credits:
Thank you to Andrei Lazarev for the amazing cover image take from https://unsplash.com/photos/U47vtNMkyXg

GDG Johannesburg: IWD Women TechMakers

Pabi Forbes — Tue, 10 Apr 2018 05:01:59 +0000

GDG Johannesburg hosted a meetup on the 4th of April to celebrate International Women's Day. I attended the event and it was nothing but amazing.

What is GDG Johannesburg?

GDG Johannesburg (Google Developer Group Johannesburg) is a local South African community for developers who have a keen interest in Google's developer technologies. It is organized by Rebecca Franks, Christoff Jacobs, Joshua Leibstein, Peter John Welcome, and Kurt Mbanje.

GDG Johannesburg runs meetups every first Wednesday of the month, and each event can have a variety of topics and speakers.

Women TechMakers Meetup

This meetup was aimed at women, so as you would guess, the speakers were women.
Here's what the line up looked like:

17:00 - Welcome Drinks and Snacks
17:30 - Intro to GDG & Women in Tech event welcome!
18:05 - Talk 1 (15 min) -What the hell is UX and Human Centred Design anyway? (Niki De Bruyn)
18:25 - Talk 2 (15 min) - Enhancing your app with Firebase (Mbalenhle Ndaba)
19:00 - Talk 3 (45 min) - Building an artificial John Lennon with Keras (Jade Abbott)
19:45 - End Drinks and Prizes

I thoroughly enjoyed each talk and I have learnt so much from the ladies. The firebase talk was a bonus for me as I wanted to start using it for my future android projects.

Prizes

I managed to win myself a discount voucher on any JetBrains product of my choice. I won the voucher due to the fact that I tweeted the most about the meetup.
At the end of the talks, we also had to fill in a survey, I also won a T-Shirt for that, but I was feeling generous and I decided to hand the T-Shirt to another lady in the audience that hadn't won one yet.

Overall, the meetup was fun and informative, also considering that it was my first time attending a meetup, ever!

Did I mention that there was pizza and cupcakes? Well, there was pizza and cupcakes.

https://thepracticaldev.s3.amazonaws.com/i/6rdh23kf2gawhtqytl4r.jpg
https://thepracticaldev.s3.amazonaws.com/i/ampddwg4gn455qeefqtc.jpg
https://thepracticaldev.s3.amazonaws.com/i/ktau3zlzhyiqhtk3u4xt.jpg

**GDG Johannesburg information extracted from https://www.meetup.com/GDGJohannesburg/

A Developer's Diet

Pabi Forbes — Fri, 30 Mar 2018 17:38:31 +0000

The Developer's Digest...ive System

"I would like to have a large number 6, with a side of cheesy fries, and a large soda." ... Well, that's not how my morning breakfast really goes. I usually have some oatmeal with a dash of milk in the morning, or some corn/bran flakes for breakfast. I would then wash all of that down with some ginger and lemon honeyed tea or some green tea. I have been trying to hold back on coffee a bit. After all, coffee is what fuels software developers. I have realized that green tea actually helps in keeping me awake. That is my morning diet routine.

What's For Lunch?

I have my lunch break at 11:30 am. I usually carry a home cooked meal for lunch, which, on average, has some veges and meat. If I don't carry a home cooked meal, my colleagues and I order some take out. The take out can vary from burgers to pizza, or simply some pie.

Dinner At Tiffany's

Now this is where things get weird. I usually do not have an appetite come supper time. And no, my mom is not a bad cook. I usually get home from work, take a warm shower, do some yoga, have a cup of tea, and then hop on to my bed and read a book til I pass out. Still, no appetite. Even when I do force myself to eat, I can only take two spoonfuls and I feel full.

The Snackdown

I am not big on snacking. Maybe I will have a cup of yogurt and a fruit during the day, but is how far my snacking goes.

Water, Water, and more Water

We sometimes get so distracted by writing code, that we may actually forget to drink water. I try my best to get at least 1.5L of water in my system everyday.

Puree All The Things

I am the laziest chewer(is this a proper word?) out there, well that I know off. I prefer eating warm and soft food. I usually warm up my bread before I eat it. Weird, I know. I do not eat crunchy food, it is loud and feels uncomfortable in my mouth. If I could, I would puree food and just drink it all up.

What's Your Diet?

Do you have special dietary requirements? Are you a picky eater? What are you eating?