Apps Need Room To Breathe!

Share if the site was helpful

Apps Need Room To Breathe!

Android is a complex operating system.  There’s a lot more variable when developer for Android.  Things are unpredictable when it comes to knowing what phone your user will be on.  There’s literally no limit to how many different kinds of phones could be running Android on a given day.  If you don’t know what you’re doing this can be dangerous for your layouts.

How so?  Doesn’t everything work the same from phone to phone?  Well, no actually.  Things function very similarly, but different phones have different characteristics that can drastically change a user’s experience.  Take screen size for example.  You could design an app and have one user download it on a phone with a 4’’ screen and another on a 6’’ screen.  This may not sound like a huge difference (2 inches is rarely a big decider life), but when it comes to a screen size that’s literally 50% more screen space on one device than another!

How things can go very, very wrong:

If you don’t take different screen sizes into account, then users will most likely miss out on important info. When you’re first learning about how to develop Android apps you’ll most likely use LinearLayout a lot to organize your apps.  This layout takes one view (text, image, button, etc.) and then lines up the next one in a list side by side.  Or you can change it to go vertically.  Either way the end result is a neat row/column of views.  Here’s an image to help you visualize:

But what happens if when your developing you only test the layout on your phone (let’s assume its huge).  Things may look great to you, but when you publish the app and someone with a smaller phone uses it this is what they might see:

How we can prep for things to go very, very wrong:

Trust me as I made this mistake on the first app I ever published: It’s not a fun mistake to make.  Your app is a work of art.  It’s something that you created from nothing and want to show off to your friends, family, and the world.  So when you have someone download it and instantly their greeted with a funky looking layout…well it’s not the best feeling.  Luckily, we can learn from our mistakes and prep for them in the future!

There are situations where you want to use LinearLayout and there are situations where its best to avoid it.  Sometimes you may want to keep the row/column but add scrolling capability to it instead.  Android developers have experienced all these scenarios, and that’s why there’s more options than just LinearLayout.

Layouts like ConstraintLayout and RelativeLayout allow you to position views in relation to one another as well as to their parent.  So you could position pictures on your screen to “attach” to the right or left side, and make your layout look a lot more professional.  That’s of course just the tip of the iceberg though.  There are different screen densities to account for when choosing what images to use.  And you can also have portions of your screen appear/disappear by using fragments. Don’t worry we’ll have posts on both of these topics coming up soon!

If you’re interested in learning more about styling your apps for different screen sizes and how to make your layouts ready for professional use, checkout Phonlab’s Android App Developer course!

 

Making Material Design Work For You

Share if the site was helpful

Making Material Design Work For You

So you’ve built an app.  You’ve come up with a million dollar idea and you’re ready to build it and market it to the masses.  The concept is there and you know enough to develop it.  But does it look…good?

There’s a lot more to that one simple question than we initially see.  No matter what your app has to offer the world, people aren’t going to keep coming back to it unless it has a well designed interface.  This means that things should be both pleasing on the eyes and easy to use.  Users should find themselves knowing exactly where to look when they want something to happen.

So how can we design such an app?  There’s full courses for this one concept that you could enroll in, but here are some key highlights to making your app pop:

ConstraintLayout:

If you’ve taken intro to Android programming courses before then chances are you’ve done a little design with LinearLayout and RelativeLayout.  These are simple ViewGroups that you can use to organize the images and text on a user’s screen.  While these are useful at times, if used improperly they can start to bog down your app (learn why here!).

ConstraintLayout offers a more efficient way to group your apps exactly how you want them on your screen.  You can group your images in relation to one another on the screen or choose to position them a percentage away from your edges.  Really if you can think of a way you want to organize things, chances are there’s a way to do it with ConstraintLayout.  And without hurting your performance too!

Surfaces:

A simple way to think about the surfaces in your app is in terms of pieces of paper being stacked upon one another.  You can have views side by side or on top of one another, but however you organize things you want the user to know what’s important and what’s just extra.  Changing the elevation of your surfaces can bring what your want to the forefront and control where the user is looking.  It’s sneaky, but it makes a world of difference. 

By raising the elevation of a view a bit it begins to cast a shadow onto the views below it.  This way the end user gains a 3D perspective of what objects are closer to them and thus deserve attention.  Things like Floating Action Buttons (FABs) have this built into them already.  Use them wisely thought, as overcrowding your screen with elevated views can make it just look crowded and sloppy.

Custom fonts:

Style runs deep.  Deeper than just picking a font that you think looks neat.  Fonts with a very static and bold tone can give off the impression that your app is serious.  This can be great if you’re making something like a banking app that wants users to take it seriously and see it as secure.  But if you use one of those fonts with an art app it will be very unrelatable.  Likewise if you have a security based app that has fancy cursive writing users will naturally assume that the creators cares more about looks than performance and may lose faith in it.  Obviously I can’t pick for you, but I can tell you the decision matters!

Transitions With Motion:

As I said earlier your user should know what to do without even thinking about it.  This is where transitions and motion can come in handy.  Take for example a list of songs that a user can scroll through.  Well, if your user doesn’t know much about the app and their screen just so happens to load evenly (aka there are no songs cut off at the bottom), they might think they’re already looking at the whole list.  This would be tragic as they wouldn’t know to scroll down and might assume you just don’t have many songs available.

To fix this you could design your app so that when the list appears it slides in from the bottom of the screen.  This way the user sees it scroll a little upon launch, and their pattern recognizing brain will naturally assume it can keep scrolling.  It’s small, but given the right situation the impact can be huge.

What do you look for in an app when you download it?  Or more importantly what have apps lacked in that made you think twice about keeping them?  Let us know in the comments below!