Category

Programming

Material Design – appCompat v21

I had a Material Weekend and it was amazing. 🙂 I created a simple app implementing material design. The source code will be available on Github.

Material Design Demo

Material Design

Material design is a comprehensive guide for visual, motion, and interaction design across platforms and devices. In simple words Material Design is Awesome. This is a game changer in the Android realm.

Let’s Get Started

The Android 5.0 SDK was released a couple of days ago and among the many cool updates, includes new UI widgets and theming abilities to create material design style apps. To enable you to bring your updated designs to older platforms, we have also updated the support libraries including AppCompat. In this post I’ll outline what’s new in AppCompat and how you can use it in your app.

AppCompat (aka ActionBarCompat) started out as a backport of the Android 4.0 ActionBar API for devices running on Gingerbread, providing a common API layer on top of the backported implementation and framework implementation. The new v21 appcompat update provides the API and feature-set that is up to date with Android 5.0.

Android 5.0 introduces a new widget…. Toolbar .  This  gives you much more control and flexibility in using it that the ActionBar does.

Toolbar

Setting Up

If you’re using Gradle, which I highly recommend; then the first thing to do is to add appcompat as a dependency in your build.gradle:
 

New integration

If you are not currently using AppCompat, or you are starting from scratch, then here’s how to set it up:  

  • All of your Activities must extend from ActionBarActivity. It extends from FragmentActivity from the v4 support library, so you can continue to use fragments.
  • All of your themes (that want an action bar/Toolbar) must inherit from Theme.AppCompat. There are variants available including Light and NoActionBar.
  • When inflating anything to be displayed on the action bar (such as a SpinnerAdapter for list navigation in the action bar), make sure you use the action bar’s themed context retrieved via getSupportActionBar().getThemedContext().
  • You must use the static methods in MenuItemCompat for any action-related calls on a MenuItem.

The Action Bar API guide is a comprehensive guide for AppCompat, although it needs to be updated for v21. Just ignore the ‘Example theme’ section at the bottom, where it mentions that you need to set ‘two version for each action bar style property’.

Migration from previous setup

If you already have an existing AppCompat setup then here’s how to update your theme to take advantage of the new capabilities: We now use the support implementation of Toolbar/ActionBar on all platforms meaning that we no longer read any android: attributes related to the action bar. For apps which already have existing appcompat setups, this means that you should remove your v14+ themes which re-set the same values in the android namespace. Please note, this is ONLY applicable for styles/widgets which affect the action bar. For most apps, you now only need one theme declaration, in values/: values/themes.xml:

Theming

AppCompat has support for the new color palette theme attributes which allow you to easily customise your theme to fit your brand with a primary and accent colour. Here’s a quick example: values/themes.xml:

 

By setting these, AppCompat will automatically propagate the values to the framework attributes on API 21+. This automatically colours the status bar and recents task entry.

On older platforms, AppCompat emulates the color theming where possible. At the moment this is limited to coloring the action bar and some widgets.

Widgets

Toolbar

Firstly, Toolbar is fully supported in AppCompat and has feature and API parity with the framework widget. To use it, you need to use the class android.support.v7.widget.Toolbar. There are two ways to use Toolbar:

  • Use a Toolbar as an action bar when you want to use the existing ActionBar facilities (such as menu inflation and selection, ActionBarDrawerToggle etc.) but want to have more control over it’s appearance.
  • Use a standalone Toolbar when you want to use the pattern in your app in situations the Action Bar would not support e.g. showing multiple toolbars on the screen, spanning only part of the width etc.

Action Bar

To use Toolbar as an action bar, the first thing you need to do is disable the decor provided action bar. The easiest way is to have your theme extend from Theme.AppCompat.NoActionBar (or the light variant).

Second, you need to create a Toolbar instance, usually via your layout XML:
The height, width, background, etc are totally up to you, these are just good examples. As Toolbar is just a ViewGroup, you can style and position it however you want. Then in your Activity or Fragment, you set the Toolbar to act as your action bar:

Standalone

Very similar to above, but in this mode you do not set the Toolbar to act as your action bar. For this reason, you can use any AppCompat theme and you do not need to disable the decor-provided action bar. When used by itself, you need to populate the Toolbar with content/actions manually. For instance, if you want it to display actions, you need to inflate a menu into it:See the Toolbar javadoc for more information.

Styling

Styling of Toolbar is done differently to the standard action bar, and is set directly onto the view. Here’s a basic style you should be using when you’re using a Toolbar as your action bar:The app:theme declaration will make sure that your text and items are using solid colors (i.e 100% opacity white).

DarkActionBar

A common question I was asked during development was how to achieve a Toolbar which looks like ‘DarkActionBar’ (dark content, light overflow menu). This is achieved by providing the theme and popupTheme attributes:

This is just the beginning. There is a lot more you can do with Tollbar. This is just a tip of the iceberg.

 

Go ye and Materialise the world 🙂

Create A Repository

In the previous post, GitHub For Beginners , I showed you how to set up Git. In this post i will show you how to create your first Repository.

Let’s get familiar with some git commands that we will use or you will come across them.

Git-Specific Commands

There are a lot of commands used in Git. However, we will go through the basic terms.

git init: Initializes a new Git repository. Until you run this command inside a repository or directory, it’s just a regular folder. Only after you input this does it accept further Git commands.

git config: Short for “configure,” this is most useful when you’re setting up Git for the first time.

git help: Forgot a command? Type this into the command line to bring up the 21 most common git commands. You can also be more specific and type “git help init” or another term to figure out how to use and configure a specific git command.

git status: Check the status of your repository. See which files are inside it, which changes still need to be committed, and which branch of the repository you’re currently working on.

git add: This does not add new files to your repository. Instead, it brings new files to Git’s attention. After you add files, they’re included in Git’s “snapshots” of the repository.

git commit: Git’s most important command. After you make any sort of change, you input this in order to take a “snapshot” of the repository. Usually it goes git commit -m “Message here.” The -m indicates that the following section of the command should be read as a message.

git branch: Working with multiple collaborators and want to make changes on your own? This command will let you build a new branch, or timeline of commits, of changes and file additions that are completely your own. Your title goes after the command. If you wanted a new branch called “cats,” you’d type git branch cats.

git checkout: Literally allows you to “check out” a repository that you are not currently inside. This is a navigational command that lets you move to the repository you want to check. You can use this command as git checkout master to look at the master branch, or git checkout cats to look at another branch.

git merge: When you’re done working on a branch, you can merge your changes back to the master branch, which is visible to all collaborators. git merge catswould take all the changes you made to the “cats” branch and add them to the master.

git push: If you’re working on your local computer, and want your commits to be visible online on GitHub as well, you “push” the changes up to GitHub with this command.

git pull: If you’re working on your local computer and want the most up-to-date version of your repository to work with, you “pull” the changes down from GitHub with this command.

Now that we have learnt how to walk, let’s take a walk in the park. 🙂

Creating an Online Repository

Both Git and GitHub refer to this as a Repository, or “repo” for short, a digital directory or storage space where you can access your project, its files, and all the versions of its files that Git saves.

Go to the GitHub and click New Repository. Give your project a name, “MyRepo“.  If u are working on a top secret project you will have to make it private. You will have to pay for that. The world needs to see you created a Repo. So go ahead and make it public. The Description section is used to give some info about the projects.

Don’t click the checkbox next to “Initialize this repository with a README.” Leave it unchecked for now A Readme file is usually a text file that explains a bit about the project. But we can make our own Readme file locally for practice.

CreateRpo

Finally click “Create Repository“. You have now created an online repository. Told you it would be a walk in the park. So let’s create a Local Repository.

Creating a Local Repository

We just created an Online Repository, but since we will be working locally (on your computer) , let’s mirror that repository we just made as a local directory. Brace yourself for some command line typing. Well you should be getting used to it already.

Step 1: Create a Directory

I like to keep my folders organised. I will create a folder called “GitProjects” that i will use to store all my Git related projects. This is optional though. Open Terminal and type

mkdir ~/GitProjects
mkdir GitProjects/MyRepo

mkdir is short for make directory. It’s a navigational command. The ~/ ensures that we’re building the repository at the top level of your computer’s file structure (Home Directory).

mkdir GitProjects/MyRepo creates a folder called MyRepo in GitProjects. 

Next navigate to MyRepo by typing:

cd ~/GitProjects/MyRepo

cd stands for change directory. It is also a navigation command.

Next type

git init

git. init stands for “initialize.” It tells the computer to recognize this directory as a local Git repository. If you open up the folder, it won’t look any different, because this new Git directory is a hidden file inside the dedicated repository.

git_init

Next, type:

touch README.md

touch really means “create.” This means we are creating a file called README. If you go to your folder, you’ll see an empty README.md file.

Open the README (Home/GitProjects/MyRepo) file and type “This is my first Repo :-)” Save and close the file.

In Terminal, type:

git status

We use the git status command to see what has been modified and staged.

git_status

 

Step 2: Add The README File

It’s time to commit. A commit is essentially a snapshot of all the files in your project at a particular point in time. Before we commit we need to mark the changes that have been committed. This is done by adding the new and changed files to the staging area. This creates a snapshot of the affected files.

We do so by typing the following in the Terminal:

git add *

By using * we are telling git to add All the files in the Directory.

Type git status command again to see the current status.

git_statusadded

Step 3: Commit The README File

After adding the files to the Git staging area, you can commit them to the Git repository. This creates a new commit object with the staged changes in the Git repository and the HEAD reference points to the new commit. The -m parameter allows you to specify the commit message. You should always write your commands in present tense.

Type:

git commit -m "This is the Initial Commit"

git _commit

Now that we’ve done a little work locally, it’s time to “push” our first commit up to GitHub.

So there is only one problem, our online and repository are not in sync.

Push Your Commit

Having both an Local and Remote(Online) Repository is the best present you could ask for. You can edit,delete and update your project without internet connection, at the same time show the world your finished project on GitHub.

This setup makes it easy to have multiple developers working on the same project and later upload or “push” your changes up to the GitHub repository when they’re ready.

To connect your local repository to your GitHub account, you will need to set a remote for your repository and push your commits to it. You will need to know the link you your Online Repository project. In my case it’s https://github.com/username/MyRepo.git.  The username in your case should me different.

Type the following in Terminal. You will be required to enter your GitHub credentials:

You will get the link from your Github online repository Repository. So replace the link in bold with the one from your online repo

Online_repo
git remote add origin https://github.com/username/MyRepo.git
git push origin master

You will be asked for your github username and password.

The following commands will enable git to  save your password in memory for some time:

git config --global credential.helper cache

This will save your password for some minutes.

git config --global credential.helper 'cache --timeout=9200'

origin onto it to indicate a new place from which files will originate.remote is a descriptor of origin, to indicate the origin is not on the computer, but somewhere online.

git_push

Now if you look at your repository on GitHub, you will see your README has been added to it.

repo

Mission Complete!

Congratulation, You are now a Git user, well if you have gotten this far. 😀

You will need to practice practice practice to become a git ninja.

Git Resources

What is have shown you is just the tip of the iceberg, that is can assure you. I did my best to show you how to walk. If you want to fly, you can use the following  resources:

  • Pro Git. An open source book on learning and using Git.
  • Try Git. CodeSchool and GitHub teamed up to make this speedy tutorial. If you want a little more practice with the basics, this should help. And if you have some extra money and want to learn everything there is to know about Git, Code School’s Git Real should do the trick.
  • GitHub Guides. If you’re a visual learner, GitHub’s official YouTube channel is worth your time. You may want to check out Git Basics four-part series.
  • Git Reference. Got the basics down but find yourself always forgetting the commands? This handy site is great as a glossary reference
  • Git – the simple guide. This tutorial is short and sweet, but it was a little too fast for me as a beginner. If you want to refresh on the basics of Git, this should be all you need.