Android Details: Adding a Customized Loading Indicator

In the last few sprints in our eat foody project we focused on improving the design. Especially on the Android app we had a lot of potential to take the design to a higher level. After we added a custom font (Source Sans Pro), gave the buttons and the actionbar a new coat of paint and finally did some layout adjustments, we still weren't satisfied with some details. One of them was the boring standard Android loading indicator:

Android Standard Loading/Progress Indicator


The basic idea came from an excellent blog post about design details of Path's iOS App. One of the details is a custom loading indicator, which is clear in the message but also beautiful. Quickly, our team agreed to implement a eat foody-styled version.


First, we took a selection of the images from a fantastic free food icon set and adjusted the colors for our purposes.

Secondly, we had to use the graphics to implement the loading indicator on Android. We added a fairly simple LinearLayout as a basis for the view. You can find the view configuration as a gist on Github.

Lastly, we needed to add some smooth animation to the view. The idea is simple: always highlight one of the five icons in a different color. The implementation was quickly done. You can find the entire class on the Github gist.

The class structure:

 public class EatFoodyLoadingView extends LinearLayout {

    // variables ...

    // constructor where we start the animation
    public EatFoodyLoadingView(Context context) {

    mHandler = new Handler();;

Runnable mStatusChecker = new Runnable() {  
    public void run() {
        mHandler.postDelayed(mStatusChecker, 500);

private void displayLoadingPosition(int loadPosition) {  
    // switch image views


The result is a nice and very unique loading animation. It is much more eye-catching than the standard Android loading indicator:

Eat Foody Custom Loading Indicator

Explore the Library

Find interesting tutorials and solutions for your problems.