The Floating Action Button

Floating Action Button’s are those neat little buttons you see generally in the lower right corner of an app. They perform some sort of positive action like creating something, like an email or a text. We’re going to see how to add a simple Floating Action Button (hereafter referred to as FAB) to an activity.

For an excellent list of design considerations when creating FAB’s, see Google’s page here.

Add the Gradle Dependency

In your “build.gradle (Module: app)” file, add the line


compile 'com.android.support:design:xx.x.x’

Where the x’s are your apps support library version number. This should be the same as the ‘com.android.support:appcompat-v7:xx.x.x’ number.

Add an Image for Your FAB

Add a vector asset to be used in your button by right clicking on your Drawable folder, and going to New -> Vector Asset.

3

Before you finish adding the icon you want, (I added the plus symbol, called “ic_add”), change the word black to white. We won’t actually change the color here because we need to create the file first but it’s easier to change the name now than later.

Change the Icon Color

Once you’ve created the icon, it will be added to your Drawable folder. Double click on it to open the file. Change the fillColor from “#FF000000” to “FFFFFFFF”.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
         android:width="24dp"
         android:height="24dp"
         android:viewportWidth="24.0"
         android:viewportHeight="24.0">
     <path
         android:fillColor="#FFFFFFFF"
         android:pathData="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
 vector>

Now Code the FAB

Now add the Floating Action Button in your activity_main xml file.


<android.support.design.widget.FloatingActionButton
     android:id="@+id/FAB"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_alignParentBottom="true"
     android:layout_alignParentEnd="true"
     android:layout_alignParentRight="true"
     android:layout_margin="16dp"
     android:src="@drawable/ic_add_white_24dp"
     app:fabSize="normal"/>

AlignParentEnd and AlignParentRight are in there to support Right-To-Left (RTL) layouts, where the end would actually be the left.

If you add the FAB and get rendering errors, go to the Build menu and click on Clean Project. If this doesn’t fix it and you get an error that says “Exception raised during rendering: Unable to locate mode 0” this is because of a bug in the 25.0.0 library. Update your library and this should go away.

2

Respond to Clicks

Now in Main Activity, add the reference to the FAB and add the click listener

public class MainActivity extends AppCompatActivity
{
    FloatingActionButton fab;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        fab = (FloatingActionButton) findViewById(R.id.FAB);
        fab.setOnClickListener(new View.OnClickListener()
        {
            @Override
            public void onClick(View view)
            {
                Toast.makeText(getApplicationContext(), "I've been clicked", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

There you have it! A fine looking Floating Action Button!

fabscreen

Terms you Need to Know

Software Terms

  1. IDE - Integrated Development Environment.  This is where you will do all of your programming, debugging, editing, and publishing.  Basically, it is the piece of software that takes you from the very beginning of your project to the very end.  Android Studio is the IDE we will be using for Android apps.
  2. SDK - Software Development Kit.  This is the set of tools you will use to design your software for a specific platform.  We will be using the Android SDK which is included with Android Studio.  This will allow us to build Android apps, but unlike an IDE, cannot be used to build apps for other platforms.
  3. API - Application Program Interface.  These are sets of tools used to build specific more software.  Say you wanted to write an app that included a way to post to Facebook.  You would have to use one of Facebook's API's to interact with their platform.
  4. AVD - Android Virtual Device.  This is the emulator, a piece of software that will replicate the physical device you want to test your app on.  If you have an Android device, and its recommended that you have one if not more, you can use that too.  But an emulator allows you to set up different screen sizes, memory capabilities, pixel densities and much more.  You can test your app on a wide variety of different devices without having to shell out the money for them.

Android Terms

  1. Activity - An activity is just one page in an app.  The name Activity might lead you to believe that it is an action, or some sort of logic/system that gets performed but it is not.  It is just one page.  So an app can be made of several activities.  There are all sorts of derivatives of Activities but in the most basic sense, just remember that every page is it's own Activity
  2. View - This is any item on screen that either let's the user know some information about the page or let's the user interact with the app.  Examples of Views are check boxes, buttons, text views, and images.   So an Activity is comprised of one or more views and the views allow the user to make the app do what it is intended to do.
  3. Fragment - A fragment is a set of views that can be reused or moved around the app.  It is contained within an Activity just like a view but unlike a view, it can contain child elements inside of it that the user can interact with.

How to use Android Studio

androidstudioguide1

 

Let's break down Android Studio into some more manageable pieces

Project Folder - This where you can access all of your files.  This file structure is very rigid and should not be changed in anyway, just added on to if necesarry.  There are two top level folders here; App and Gradle Scripts.  The app folder contains one of your app's most important files, the manifest file, which contains essential information about your app that it gives to the operating system before any code in your app can be executed.  Then there are the java code files and the resource directory, which includes things like layout files, images, style rules and much more.

Palette - This is where you pick the tools, called Views, that you want to display on screen.  You can simply drag each View over to the Layout Screen to place them or down into the Component Tree.  The views are categorized by type with the more common ones at the top.  You will get familiar with this panel very quickly. 

Component Tree - This panel shows you how you app is laid out in a topological view.  You can expand each parent View to see the child Views it contains.  This is helpful as you get more views into your activity and it becomes difficult to select the right one on screen.  You can also drop Views from the Palette into the tree for more precise placement.

Layout Screen - This is where all that hard work you're putting in will show up.  Drag Views from the Palette into here to see what they will look like on a real device.  The controls at the top let you select if you want the blueprint to be displayed, whether you want portrait or landscape orientation, which API version you want to target, and the theme you want your app to use.

Properties - The Properties panel is perhaps the most important part of all of this.  Each View has certain characteristics that allow it to respond to user interaction and the Properties panel is how you as a developer control them.  Each View should have a unique ID so that it can be referenced through java code.  Along with this, each View has layout properties so that it appears in an attractive way.  It has the ability to call methods in your code in response to certain events, and much more.

What's that Res folder all about?

By default, a few of these folders are included in the res directory (marked with an *).  Often you will find that you need another resource but aren't sure where to put it.  Also, if you try and add a directory that is not names exactly like one of these following folders, it will not show up in your Project Folder.  When you need to add a new resource, right click on the 'res' directory and go to 'New' -> 'Android resource directory'.

androidstudio_openresdirecotry

Here is the list of folders you can add and what each of them should contain.

  • Anim - Also referred to as the tween animator.  This is used for scaling, rotating, translating, or changing the alpha on Views.  What sets this apart from the next folder is that these files don't actually animate the view, they just animate how the view is shown.  Say you have a wide, short button on screen and you animate it 360 degrees around.  As the user sees it rotating, the button itself is in that exact same position, so if you were to click it in its rotated state outside of it's original location, it would have no effect.  The button is not actually there.
  • Animator - This is for property animations, or animations that are not only for views, but any object.  This also animates the whole object, not just the drawing of it.  So if you animate a View with the property animator, the whole view is moved around screen.  It is not just drawn elsewhere.
  • Color - This folder is for providing state-lists of colors.  Many View's can have different operating states, that is, pressed vs not pressed, checked vs not checked, etc.  Based on the state of the View, you can change how it is drawn, or it's color perhaps.  That's what you keep in this folder.  For defining single colors, like red as #FF0000, store that in Values/Colors.xml.
  • Drawable - This folder is for storing either vector drawable files, images that can be scaled without losing resolution.  These are images that are described in Xml format instead of rgb data.  It's like instructions for building the image rather than the image itself.  This is my preferred method for storing images because it keeps total app size down but the images are harder to create.
  • Interpolator - This is for smoothing transitions and animations in your app.  It is not realistic looking to show linear movement on most objects so it is best to smooth in and out of the transition.  This gives a much more visually pleasing look to an app.
  • Layout - This is the folder that holds all of your Layout xml files, the files that describe the look of your Activities, Views, and Fragments. 
  • Menu - This holds the information for the toolbar menu's in your activities.  To set them, use the onCreateOptionsMenu() method and to respond to clicks, use the onOptionsItemSelected() method.
  • Mipmap - Mipmap is the term used to describe different levels of detail of an image.  This is commonly seen in video games.  When you are very far away from an object, say, a mountain, the mountain kind of just looks like a brownish/grayish triangle in the distance.  As you get closer to this mountain, more detail is revealed.  This is because a different, much less detailed mountain was drawn when you were further away from it.  It saves system resources to do things this way.  This is how images are saved in Android.  When you create an image, you should import five different resolutions of that image to accommodate various devices with different screen sizes and pixel densities. 
  • Raw - This is for any files that you can save in their raw form, although it is often used for sound files your app may need. 
  • Transition
  • Values - Strings, colors, dimensions, and other hard coded values that will be used throughout the app.  This is so that if you want to change one value, maybe change an error message if a user forgets to enter a piece of information on a form, you can easily find it right here instead of looking through pages and pages of xXml files for the right line.  Strings are also stored to provide easy ways to translate your app into multiple languages.
  • Xml - This is an odd name since all of these other folders can hold Xml files with the exception of Mipmap maybe.  I've found that when you create a settings Activity, files are automatically put into this folder.

First Things First – Download Android Studio

You've decided you want to take the leap and see what Android development is all about.  Well let's tackle jump the first hurdle and download Android Studio, the official development environment for Android software.  There's going to be a few terms that come up a lot during this process so let's knock those out of the way now.

The Acronyms

  1. IDE - Integrated Development Environment.  This is where you will do all of your programming, debugging, editing, and publishing.  Basically, it is the piece of software that takes you from the very beginning of your project to the very end.  Android Studio is the IDE we will be using for Android apps.
  2. SDK - Software Development Kit.  This is the set of tools you will use to design your software for a specific platform.  We will be using the Android SDK which is included with Android Studio.  This will allow us to build Android apps, but unlike an IDE, cannot be used to build apps for other platforms.
  3. API - Application Program Interface.  These are sets of tools used to build specific more software.  Say you wanted to write an app that included a way to post to Facebook.  You would have to use one of Facebook's API's to interact with their platform.
  4. AVD - Android Virtual Device.  This is the emulator, a piece of software that will replicate the physical device you want to test your app on.  If you have an Android device, and its recommended that you have one if not more, you can use that too.  But an emulator allows you to set up different screen sizes, memory capabilities, pixel densities and much more.  You can test your app on a wide variety of different devices without having to shell out the money for them.

The installation

Those are the big ones you need to worry about in the beginning.  Now let's get to the good stuff.  The first thing you do is navigate to the Android Studio home page and click the big, green download button. 

  androidstudio1

Agree to their terms, click the final download button and save the executable to your downloads folder.  When this is done, navigate to that downloads folder and start it up.  Next you'll see this screen so click next and follow the on screen instructions.

androidstudio2

On the next screen we're asked if we want to install the SDK and the Android Virtual Device (AVD).  Remember those?  We definitely want those so keep them selected and click next.

androidstudio3

Then just agree to their terms if you feel so inclined.  On the next page, just leave the locations the same for Android Studio and the SDK unless you have reason to change them.  On the last page, hit Install, and let Android Studio do it's thing!

That's it.  Easy peezy!  Stick around and we'll go through learning your way around Android Studio in another post.

Create an Amazing Facebook ad with GIMP

Facebook ads are becoming a more common way for businesses of all types to promote on.  You can target specific audiences with a specific interest to make sure the right people see your ads.  You have control over the time your ad is ran and the money you're willing to spend on a campaign and best of all, Facebook will do all of the heavy lifting.  You, however, need to make the ad.  Here is a great, simple technique to produce a high quality ad for Facebook using GIMP.

This is the ad you'll be creating.

done

And this is how you do it.

 

1. Find your image

You need to use an image as a background for this ad.  It's not terribly important what image you use since as you can see, we blur it so its barely recognizable.  It's more important that the image has colors similar to the colors of your brand.  A couple great places to get free images are Pixabay and Pexels.   This is the image we're using for this tutorial.

1d

2. Fire up your GIMP

Start GIMP and import your image.  Just go to File->Open and select your image.  The first thing you need to do, before anything else, is resize the image.  Facebook recommends a size of 1200 x 628.  To do this, click on the "Image" menu and click on Canvas Size.

2a

Set the resolution to 1200 x 628 and click Resize. 

3. Blur the background

Next we want to create that out-of-focus look so our focus will be on the text of your ad and the call-to-action button.  Click on the "Filters" menu and scroll down to Blur.  Then click Gaussian Blur.  I generally set the Horizontal and Vertical Blur Radius to 50 but experiment with whatever works for you.  Click OK on the dialog to apply the blur. 

4. Fade the colors

This is the part where we accentuate your brand colors.  Click on the "Colors" menu and click on Hue-Saturation. 

3a

Fade the Hue and Ligtness sliders to get the color you want.  Try and single out the one color that you most want to see.  Then drag the Saturation slider down to grey out the image but leave that one color that is now just a slight accent.  These are the settings I used.

3b

5. Add the main text

Now let's add some text that says what we're trying to promote.  Click the Text tool, make the font size somewhere in the high 40's or 50's and set the justification for center.  Create a text box in the middle of your image.  Don't worry too much about placement yet since we will be fine tuning that later.  Then type your message.  So this is what we have so far.

3c

6. Create the call-to-action button

Create a new layer and name it button.  Create a box under the text using the rectangle selection tool and fill it in white.

4bNow we're going to add a border.  With the rectangle still selected, click on the "Select" menu and click Shrink.  We'll be doing this a few times so remember that location.

4c

On the dialog that appears, set the value to 2 and click OK.  Click the Delete key to erase everything inside the rectangle.  This should leave you with just a white border.  Then go back to the "Select" menu and click Shrink again.  This time enter a value of 1. Fill this in white.  You should now be left with the original white button with a slight see through border. 

4g

Now add the button text.  For the color, I like to select a color just outside the border of the button to kind of make it look like the words are coming through the back of the button.  Or you can just color it black.  Your choice.  Then add your call-to-action text.  "Get this deal", "Take our offer", whatever you like.  We went with "Click to learn more".

5b

7. Create the outside border

This is very similar to the button border except it uses the inverse colors.  Create another new layer and name this border.  Click the rectangle selection tool and click Ctrl+A to select all.  Go back to the Select menu and click on Shrink.  Enter a value of 32 and click OK.  Now fill everything inside with white.  Click Select -> Shrink and enter a value of 2.  Click OK and click the delete button on your keyboard.  You should be left with this.

6d

8. Line it all up

The last thing we have to do is center the text and the button and Gimp provides a nice tool for doing this.  Create another new layer and name it Grid.  Go to the Filters menu, Filters->Render->Pattern->Grid. 

7a

In the two boxes to the right of Spacing, type  157 for the horizontal lines and 200 for the vertical lines.  Then set the offset at 0 so the grid lines up with the outside.  This will give us perfectly sized boxes without leaving any space around our grid.  Now you just need to line up the text and button in the center of the grid.  It can be a little tough to grab the items you're trying to grab without moving anything else so I find it's easier to turn off the other layers using that eye icon in the layer panel. 

7e

Once you have everything centered, delete that grid and you'll be good to go!

Thanks for having a look, there is a video tutorial here on my YouTube channel if you prefer video.  Good luck!