Android Animation : Animating multiple views one after the other

The Google Chrome app for Android, on click of menu button there is animation on the views or texts as they display (animate from top to bottom).

So how to animate multiple objects or views one after the other ?

Inspired from Google chrome app, wanted to achieve the same effect so called “Fade In”.

i3a6c

Implementation :

XML Layout :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <Button
        android:id="@+id/animateButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Animate"
        android:layout_gravity="center"/>

    <TextView
        android:id="@+id/textA"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A"
        android:layout_gravity="center"
        android:textSize="48sp"
        />

    <TextView
        android:id="@+id/textB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="B"
        android:layout_gravity="center"
        android:textSize="48sp"
         />

    <TextView
        android:id="@+id/textC"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="C"
        android:layout_gravity="center"
        android:textSize="48sp"
        />

    <TextView
        android:id="@+id/textD"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="D"
        android:layout_gravity="center"
        android:textSize="48sp"
        />

    <TextView
        android:id="@+id/textE"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="E"
        android:layout_gravity="center"
        android:textSize="48sp"
         />

    <TextView
        android:id="@+id/textF"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="F"
        android:layout_gravity="center"
        android:textSize="48sp"
        />

</LinearLayout>

In the above xml i have used 6 textviews to animate, its just an example that i have taken as textviews or it can be any layout or views.

AnimationActivity Class :

public class AnimationActivity extends Activity{

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

		Button animate = (Button)findViewById(R.id.animateButton);
		animate.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				animateButtons();
			}
		});
	}

	public void animateButtons() {
       // int[] imageButtonIds = {R.id.animateButton};
          int[] textViewIds = {R.id.textA, R.id.textB, R.id.textC,R.id.textD,R.id.textE,R.id.textF};

        int i = 1;

        for (int viewId : textViewIds) {
            // Button imageButton = (Button) findViewById(viewId);
               Animation fadeAnimation = AnimationUtils.loadAnimation(this, R.anim.fading_effect);
               fadeAnimation.setStartOffset(i * 200);
            //imageButton.startAnimation(fadeAnimation);

            int textViewId = textViewIds[i-1];
            TextView textView = (TextView) findViewById(textViewId);
            textView.startAnimation(fadeAnimation);

            i ++;
        }
    }

Animation Layout : R.anim.fading_effect

<?xml version="1.0" encoding="utf-8"?>

    <alpha xmlns:android="http://schemas.android.com/apk/res/android"
           android:interpolator="@android:anim/accelerate_decelerate_interpolator"
           android:fromAlpha="0.0" android:toAlpha="1.0"
           android:duration="500" />

In the activity we have fadeAnimation.setStartOffset(i * 200) , we can change the value of 200 to increase or decrease the speed of animation.

Advertisements

Charles Debugging proxy tool

How can we debugg the Apps for HTTP calls ? How to see raw request/response contents of debugging app ?

We can take help of Charles Debugging proxy tool.

What is this Charles tool and how does this work ?

Charles is a web proxy that runs on your desktop computer. It enables you to see what data is sent and received between a web browser and the server.Customers may find these network logs useful when debugging and may request that you include them in your bug reports.

Step by step Instructions :

  1. Visit http://www.charlesproxy.com/

  2. Download the version that suits you.

  3. Install charles.

Collecting the proxy information :

  • Open Charles on your computer.

  • On the menu bar, go to Proxy > Proxy settings.

  • Make a note of the Port value.(usually it will be 8888)

  • Get the network IP address of your computer by opening System Preferences >> Network.
  • Choose the network name and the IP address will be visible. This is the network IP address you’ll need for your Android device.

Android Device Settings – For 3.1 and above.

Go to Settings.

  1. Select “Wireless & Networks”.
  2. Make sure WiFi is turned on and you are connected to your network.
  3. Select WiFi settings using a long press (touch and hold).
  4. Select “Modify network”.
  5. Select “Show Advanced Options”.
  6. Under Proxy Settings, select “Manual”.
  7. For the Proxy Hostname (Server) field, enter your network IP address.
  8. For the Proxy Port field, enter the port number listed in Charles.
  9. Tap Save.

1 2 Capture

Genymotion Fastest Android Emulator

Its always been hard to test apps on Android Emulator, people finds it difficult to test apps on Android emulators when compared to simulators on iPhone.

Genymotion is an Android emulator for building and testing apps. Its insanely fast, simple and powerful.

Requirements :

  • 2GB Ram

  • 400MB disk space

  • VT-X/AMD-v capable CPU

  • Recent OpenGL 2.0GPU

Installing Genymotion :

  • Dowload genymotion from here : https://www.genymotion.com/#!/download

  • Save and run the .exe file.

  • Select the setup language and click OK.The Genymotion setup wizard opens.

  • Click Next

  • Select the destination folder by clicking Browse, Click Next.

  • Select the start menu folder by clicking Browse or check Don’t create a Start menu folder and click Next.

  • Select whether or not to create a desktop icon and click Next.

  • Click Install and Finish.

Getting Started :

To start using Genymotion, follow the steps below :

  • Open Genymotion from the programs or from desktop.

1   2 3 4

  • Once the above steps is done deploy the app via eclipse or command line tool.You can as well drag and drop the APK into the virtual device.

Hassel-free Image Loading Libraries

In this part, we are going to talk about some the best Image Loading Libraries for loading images.

It is always not about downloading image from remote location. You also have to think of implementing image caching logic in order to provide a seamless user experience.

Many a times we may have to load multiple images say 50+ with bigger size (640×380) asynchronously in List View or Gird View which might result in OutOfMemory error. Even i have faced this issue and have tried to various ways to fix this, but was not so effective.After doing lot of research i found that there are libraries which will load images asynchronously, and cache images as well.

1) Picasso 

  • Picasso simplifies the process of loading images from external urls and display on your application.
  •  Automatic image caching.
  • Handling Image View recycling.
  • Efficient Memory usage with minimal memory use, also takes care of Out of Memory Exception.
  • Automatic job cancellation in lists where views are re-used.
  • It even does “Image Fade In” which is popular now a days.
  • Batching UI Updates and improve UI responsiveness.
  • Debug indicators to check if its from Network,Disk or Cache.

 Usage :

In Adapter’s getView() :

Picasso.with(mContext).load(Url)
.placeholder(R.drawable.place_holder)
.error(R.drawable.error_image).tag(mContext).into(imageView);

Resource Loading :

Resources, assets, files, content providers are all supported as image sources.

Picasso.with(context).load(R.drawable.image).into(imageView1);
Picasso.with(context).load(“file:///android_asset/my_image.png”).into(imageView2);
Picasso.with(context).load(new File(…)).into(imageView3);

 Read More :

http://square.github.io/picasso/

2) Volley : 

  • Developed and Maintained by Android Dev Team.
  • Asynchronous Networking Library.
  • NetworkImageView is meant to be a direct replacement for the standard ImageView in scenarios when your image resource is coming from a network location (i.e. URL).

Usage :

<ImageView
    android:id=”@+id/image_view”
    android:layout_width=”wrap_content”
    android:layout_height=”wrap_content”
    android:layout_alignParentBottom=”true”
    android:layout_alignParentTop=”true”
   />

Becomes :

<com.android.volley.toolbox.NetworkImageView
android:id=”@+id/image_view”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignParentBottom=”true”
android:layout_alignParentTop=”true”
/>

Setting up the Image Loader Class :

private RequestQueue mRequestQueue;
private ImageLoader mImageLoader;

In constructor or onCreate() initialize the objects :

mRequestQueue = Volley.newRequestQueue(context);
mImageLoader = new ImageLoader(mRequestQueue, new ImageLoader.ImageCache() {
private final LruCache<String, Bitmap> mCache = new LruCache<String, Bitmap>(10);
public void putBitmap(String url, Bitmap bitmap) {
mCache.put(url, bitmap);
}
public Bitmap getBitmap(String url) {
return mCache.get(url);
}
});

Loading an Image into Image View :

NetworkImageView networkImageView = (NetworkImageView)view.findViewById(R.id.image_view);
networkImageView.setImageUrl(“http://yoururl.com/image.png&#8221;,mImageLoader);

Awesome Android Libraries – Part 2

32) Parallax Scrolls

Parallax ScrollView and ListView for Android

GitHub/Download :

https://github.com/nirhart/ParallaxScroll

Google Play Demo App:

https://play.google.com/store/apps/details?id=com.nirhart.parallaxscrollexample

33) Android Ultra-Pull To Refresh

It’s a replacement for the deprecated pull to refresh solution. It can contain any view you want.

It’s easy to use and more powerful than SwipeRefreshLayout.

It’s well designed, you can customize the UI effect you want as easy as adding a headview to ListView.

GitHub/Download :

https://github.com/liaohuqiu/android-Ultra-Pull-To-Refresh

34) List of Open Source Android Projects

List of basic android implementations.

GitHub/Download :

https://github.com/Trinea/android-open-project/tree/master/English%20Version

 

Awesome Android Libraries – Part 1

1) Slide Menu For Android :

Beautiful Animated Slide Menu for Android :

Side-Menu.Android

GitHub/Download :

Slide Menu For Android

2) Animated Context Menu for Android

Context-Menu.Android lets you easily add an awesome animated context menu to your Android app

Context-Menu.Android

GitHub/Download :

Context Menu Android

3) Material Design Navigation Drawer

NavigationDrawer-MaterialDesign is a usage example for the Material Design Navigation Drawer. It slides in from the left edge of the screen and displays the app’s main navigation options.

NavigationDrawer-MaterialDesign

GitHub/Download :

Material Design Navigation Drawer

Google Play Demo App :

Demo App

4) Progress Bars with rounded Corners for Android

Android RoundCornerProgressBar is an easy to use Android library which provides customizable and colorful progress bars with rounded corners. It allows you to configure the round value, change the icon and color. You can also adjust the padding range between progress bar and progress or between image icon and progress.

Android-RoundCornerProgressBar

GitHub/Download :

Progress Bar with Rounded Corners

5) Core Data + SQLite Replacement – Android/iOS/OS X

Realm is a mobile database that runs directly inside phones, tablets or wearables. It can save you thousands of lines of code and weeks of work, and lets you craft amazing new user experiences.

GitHub/Download :

SQLite Replacement

6) Custom Calendar Icons based on the Date selected

Dynamic Calendar is an Android library which generates custom calendar icons based on the date you provide. It allows you to change the background template of generated date icons, specify the typeface, size, position, and more.

GitHub/Download :

Custom Calender Icons

Google Play Demo App :

https://play.google.com/store/apps/details?id=com.kd.dynamic.calendar

7) Transformation Android Library

Glide Transformations provides a variety of image transformations for Glide.

Glide-Transformations

GitHub/Download :

Transformation Android Library

8) Slide-to-dismiss Functionality for Android

Slidr lets you easily add slide-to-dismiss functionality to an Activity.

Slide-to-dismiss-function

GitHub/Download :

Slide-To-Dismiss

9) Record Full-Resolution Videos on Android –  (Requires Android 5.0+)

Telecine lets you capture full-resolution videos directly on your Android phone. No more recording controls cluttering up the video or USB debugging notification in your status bar

GitHub/Download :

Telecine

Google Play Demo App :

https://play.google.com/store/apps/details?id=com.jakewharton.telecine

10) Always-on-Top / Floating UI for Android

Tooleap is an SDK for Android that enhances your app with a floating (always-on-top) UI, thus creating a unique multitasking experience and increasing your app’s availability.

After integrating the Tooleap SDK Jar into your project, you’ll be able to create your own mini apps and provide your users with a floating bubble, and your own easily accessible side screen.

Out-of-the-Box Features:

The Bubble

Tooleap provides your app with a floating bubble. The user can drag the bubble around the screen, and even toss it around.

You can fully customize the bubble. It can show your own icon, and even display a text balloon and a notification badge.

Tapping the bubble will open the side screen along with your mini app of choice.

The Side Screen

The side screen displays your app’s content on top of the screen.

Using Tooleap Activity classes, you can display inside the side screen any content you wish, just like you’d do with a regular Android activity. No need for any special code or implementation on your behalf. In fact, you can even use your app’s existing activities (as will be explained next).

Tooleap SDK comes with a built-in web search screen. Whenever the sidescreen is displayed, your users can also access the Tooleap search screen and perform a web search.

The user can navigate between different mini-apps and the search screen, using the bottom navigation bar.

What can I do with Tooleap

The content displayed by your app inside the side screen is called a “Mini App”.

You can use the Mini Apps to enhance your applications in various ways:

Rich Notifications
Use the Notification Mini App, to display a rich notification, and allow the user to interact with your app, directly from the side screen. For example, a messaging app can pop out a rich notification. The user sees the bubble with the preview text of the notification, and replies the message right from the side screen.

Advanced Multi-Tasking
Use PopOut Mini Apps to give your users the ability to pop out a screen from your app, so they’ll use it along other applications. For example, a music app that allows the user to pop out its playback controls, so they will be only one tap away, even while using other apps.

Home Widgets
Combine the availability of Android Home Screen Widgets, with the ease of development of a regular activity screen. With Home Mini Apps, you can create a mini app available exclusively from your user’s home screen. For example, a weather app that allows its user to check today’s weather, without cluttering his home screen with an extra widget.

Super Available Apps
Integrate into the device’s screen a “sticky” mini app, that can be available on top of any app, or only on top of specific apps on the device. Use a Persistent Mini App to give your user access to your app from any screen on his device. For example, a news app that gives its user a quick access to its headlines, from any application he currently uses.

Customize the mini apps to to your needs, and add as many mini apps as you want to the side screen.

Project Page : http://www.tooleap.com/

Installation Details : http://developer.tooleap.com/sdk-installation-guide/

11) RecyclerView with Animations

RecyclerView Animators is an Android library that allows developers to easily create RecyclerView with animations.

GitHub/Download :

RecyclerView Animators

Google Play Demo App :

https://play.google.com/store/apps/details?id=jp.wasabeef.example.recyclerview

12) Native Android Samples

Sample of all Samples (SOAS) are native Android samples for beginners and experienced (API 14+) with focus on Lollipop and the Material Design Guidelines.

Here’s what the project touches so far:

– Toolbar
– Drawer
– following the updated Material Design Guidelines
– Volley (with forced Caching Option it caches regardless of Server response Headers, Memory and Disk)
– Download images using volley
– with Memory and Disk Caching
– Json
– using Gson
– ListView with a custom Adapter
– based on BaseAdapter
– SwipeToReferesh
– using SwipeRefreshLayout
– Endless Adapter
– using a custom OnScrollListener
– Fragment
– ListFragment and Fragment
– Headless Fragment
– maintain data on config changed
– Landscape, 7” and 10” Tablets specific Layouts
– Custom Views
– Palette
– Themes
– Styles
– Gradle
– Gradle Product Flavors
– Espresso tests
– Travis CI, Continuous Deployment

GitHub Download :

https://github.com/MostafaGazar/soas

13) Charts and Graphs Library for Android

HelloCharts is a charting library for Android which is compatible with API 8+ (Android 2.2). It offers several chart types with support for scaling, scrolling and animations and works best when hardware acceleration is available, so API 14+ (Android 4.0).

Features:

Line Chart
– Cubic Lines, filled Lines, scattered Points
Column Chart
– Grouped, stacked, negative Values
Pie Chart
Bubble Chart
Combo Chart
– Columns/Lines
Preview Charts
– for Column Chart and Line Chart
Zoom
– pinch to zoom, double tap zoom, scroll and fling
Custom and Auto-generated Axes
– top, bottom, left, right, inside
Animations

HelloCharts

GitHub/Download :

https://github.com/lecho/hellocharts-android

14) Media Indexer for Android (APK + Source Code)

Mizuu is a user friendly media center application for Android tablets and smartphones running Android 4.0.3 (API level 15) or newer. The application helps manage all your movie and TV show video files – and automatically fetches useful information about the video content, including title, plot, cover art and actors.

Features:

Indexing of movie and TV show files on your device or on Samba (CIFS / SMB) and UPnP / DLNA compatible devices.View actor details for movies, including biography, filmography and photos.Many options to customize and personalize the application.Enjoy popular video content from YouTube, Reddit as well as the latest TED Talks.Browse details and watch trailers for upcoming and popular movies with online search.Different widgets for displaying your collections on the home screen.Synchronizes indexed content with your Trakt.tv account

GitHub/Download :

https://github.com/MizzleDK/Mizuu

15) Reachability on Android

Reachability allows you to easily access the top of the screen in Android, like in iPhone 6 and 6 Plus.

Reachability

GitHub/Download :

https://github.com/sakebook/Reachability

16) Awesome UI/UX Libraries for Android

Awesome Android UI is a curated list of awesome UI/UX libraries for Android.

GitHub/Download :

https://github.com/wasabeef/awesome-android-ui

17) Image Picker for Android (APK + Source Code)

Image Searcher allows you to send images found on Google image search directly from your favorite apps.

GitHub/Download :

https://github.com/DSteve595/Image-Searcher

18) Material Design for Android

LollipopShowcase is a showcase of Material Design for Android and some cool new stuff in Lollipop.

GitHub/Download :

https://github.com/mikepenz/LollipopShowcase

Google Play Demo App:

https://play.google.com/store/apps/details?id=com.mikepenz.lollipopshowcase.sample

19) Powerful Icon Library for Android

Android Iconics allows you to use almost any alternative icon font in your projects. One basic function of this library is the feature to drop in new typefaces on the go. The default font of this project is FontAwesome, but you can create and add as many as you like

GitHub/Download :

https://github.com/mikepenz/Android-Iconics

Google Play Demo App :

https://play.google.com/store/apps/details?id=com.mikpenz.iconics.sample

20) Live Wallpaper for Android (APK + Source Code)

Muzei is a live wallpaper that gently refreshes your home screen each day with famous works of art. It also recedes into the background, blurring and dimming artwork to keep your icons and widgets in the spotlight. Simply double touch the wallpaper or open the Muzei app to enjoy and explore the artwork in its full glory.Alternatively, you can choose your favorite photos from your own gallery or other apps to use on your home screen. To keep your wallpaper fresh, Muzei will rotate through your favorite photos every few hours.Muzei also includes a watch face for Android Wear, so you can see your latest wallpaper right on your wrist!Muzei offers a simple API that allows you to build your own wallpaper source.
GitHub/Download :
Google Play Demo App :
21) Face Recognition for AndroidMasaccio is an awesome Android library which automatically detects the presence of faces in images and crop them accordingly to achieve the best visual result.
Masaccio
GitHub/Download :

22) Selectable Rounded ImageView for Android

SelectableRoundedImageView is an Android ImageView that supports different radiuses on each corner. It also supports oval (and circle) shape and border. This would be especially useful for using inside CardView which should be rounded only at top left and top right corners

GitHub/Download :

https://github.com/pungrue26/SelectableRoundedImageView

Google Play Demo App :

https://play.google.com/store/apps/details?id=com.joooonho

23) Twitter Client for Android (APK + Source Code)

Twidere is a powerful Twitter client for Android 1.6+, which gives you a full holo experience and nearly all features of Twitter.

GitHub/Download :

https://github.com/TwidereProject/Twidere-Android

Google Play Demo App:

https://play.google.com/store/apps/details?id=org.mariotaku.twidere

24) Front-end Framework based on Material Design

Materialize is a modern responsive front-end framework based on Material Design which simplifies life for developers and the users they serve.

GitHub/Download :

https://github.com/Dogfalo/materialize

 

25) Material Interaction – 100% Pure Awesomeness

Interactive Experiences for Google’s Material Design Principles by Jongmin Kim, UX Engineer at Google

Demo / Project Page:

http://material.cmiscm.com/

Video / Read and see more about Jongmin Kim:

http://blog.cmiscm.com/?cat=7

http://cmiscm.com/#/handicraft/84

26) Interactive Paging Indicator Widget for Android

PagerSlidingTabStrip is an interactive indicator to navigate between the different pages of a ViewPager.

GitHub/Download :

https://github.com/jpardogo/PagerSlidingTabStrip

Google Play Demo App :

https://play.google.com/store/apps/details?id=com.astuetz.viewpager.extensions.sample&hl=en

 

27) Material Design Colors for Android

Android-Material-Design-Colors provides color definitions of the Material Design.

GitHub/Download :

https://github.com/wada811/Android-Material-Design-Colors

28) Secure Calls for Android (APK + Source Code)

RedPhone is a free call app that makes private communication simple and offers free, worldwide end-to-end encryption for your calls, securing your conversations, so that nobody can listen in.

GitHub/Download :

https://github.com/WhisperSystems/RedPhone/wiki

Google Play Demo App :

https://play.google.com/store/apps/details?id=org.thoughtcrime.redphone

29) Android Secure Text Messaging (APK + Source Code)

TextSecure is a free messaging app that allows you to take back your privacy while easily communicating with friends.

Using TextSecure, you can communicate instantly while avoiding SMS fees, create groups so that you can chat in real time with all your friends at once, and share media or attachments all with complete privacy. The server never has access to any of your communication and never stores any of your data

GitHub/Download :

https://github.com/WhisperSystems/TextSecure

Google Play Demo App:

https://play.google.com/store/apps/details?id=org.thoughtcrime.securesms

30) Android ViewPager Transformer

ViewPagerTransforms is a library which contains common animations needed for transforming ViewPager scrolling on Android v13+.

This library is a rewrite of the JazzyViewPager library and owes credit of the animation concepts directly to its source. The purpose of this rewrite is to provide an easier to use and extend implementation of ViewPager animations.

ViewPagerTransforms

GitHub/Download :

https://github.com/ToxicBakery/ViewPagerTransforms

 

31) Circular Progress Button for Android

Circular-Progress-Button can morph to circular indeterminate or integer progress. After the progress is completed you can morph to success or error state.

Circular-Progress-Button

GitHub/Download :

https://github.com/dmytrodanylyk/circular-progress-button

 

Why should I use PNG and not JPG ?

Major reason – PNG will give you advantage of Alpha Transparency over JPG.

JPEG – Lossy / Direct only

JPEGs images were designed to make detailed photographic images as small as possible by removing information that the human eye won’t notice. As a result it’s a Lossy format, and saving the same file over and over will result in more data being lost over time. It has a palette of thousands of colours and so is great for photographs, but the lossy compression means it’s bad for logos and line drawings: Not only will they look fuzzy, but such images will also have a larger file-size compared to GIFs!

Good for: Photographs. Also, gradients.

PNG – Lossless / Index and Direct

PNG is a newer format, and is really a good replacement for GIFs. Sadly, however, it has a few drawbacks: Firstly it cannot support animation like GIF can. Secondly it has some support issues with older browsers like IE6. Thirdly, important software like Photoshop have very poor implementation of the format.

Here’s what’s good about it: Unlike GIFs, PNGs can either be Indexed or Direct color (like JPGs), if need be. That means that it can have nice smooth gradients, if you don’t mind a larger file. PNG also supports a nifty thing called Alpha Transparency which means that you have things like smooth drop shadows, even on Indexed color images. Most of the time, an Indexed color PNG filesize will be smaller or equal to a GIF equivalent. Using the extra features (thousands of colours or alpha transparency) will increase the filesize, though.

Essentially using PNG just gives you greater options and flexibility.

PNGs, however, are not intended to replace JPEG images, despite allowing thousands of colours and having compression. A photograph saved as a PNG will likely be at least 5 times larger than a equivalent JPEG image, which very little improvement in visible quality. (Of course, this may be a desirable outcome if you’re not concerned about filesize, and want to get the best quality image you can.)

Good for: Logos, line drawings, and images that require alpha transparency.