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:
Vision
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.
Implementation
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) {
super(context);
}
mHandler = new Handler();
mStatusChecker.run();
}
Runnable mStatusChecker = new Runnable() {
@Override
public void run() {
displayLoadingPosition(loadPosition);
loadPosition++;
mHandler.postDelayed(mStatusChecker, 500);
}
};
private void displayLoadingPosition(int loadPosition) {
// switch image views
}
}
Result
The result is a nice and very unique loading animation. It is much more eye-catching than the standard Android loading indicator:
