AQuery Image Loading

I believe you folks got hands on experience in using AQuery library from my previous posts, if not take a look at below posts to know how easy it is to write Android code with AQuery library.

Introduction to AQuery – Android Query
AQuery Button Listener
AQuery AJAX Callback

It’s time to explore the other most wonderful feature of AQuery and that is ‘Image loading’. In this post we will be developing simple application to demonstrate how to load Images from Network using AQuery library by putting few lines of code.

Video Demo

Steps to download Image from Network and render over UI using AQuery library

  1. Create ImageView in Android layout.
    <ImageView
                android:id="@+id/simpleLoadImg"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:contentDescription="Simple Load" />
  2. Invoke image( ) method to load Image from Network (Internet):
    aq.id(R.id.simpleLoadImg).image("http://programmerguru.com/android-tutorial/wp-content/uploads/2014/01/asynctask_thumb.png",false,false);

    Make sure you have created AQuery object (aq) and instantiated it inside onCreate( ) method.

  3. Syntax of image( ) method:
    image(The image url, Enable/disable memory cache, Enable/Disable file cache);

It would be helpful for you if you take a look at AQuery Image loading Documentation to understand the list of supported methods in AQuery to download Images from Network.

Quick Links

Project Structure

  • Create new android project [File >> New >> Android Application Project] with project name AQueryImageLoading
  • Choose Build SDK and minimum required SDK [I chose version 4.1 and 2.2]
  • Enter package name as ‘com.prgguru.example’
  • Click next and select BlankActivity
  • Click next and provide Activity name and Layout name as ‘AQueryImageLoading’ and ‘main’ respectively.

Code Listings

Open main.xml, now you can view the layout as either XML or in graphical view and just replace the XML with below one:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" >

    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/simpleLoadImg"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:contentDescription="Simple Load" />

        <Button
            android:id="@+id/simpleLoadBtn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <ImageView
            android:id="@+id/loadProgressImg"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:contentDescription="Simple Load" />

        <ProgressBar
            android:id="@+id/progress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:visibility="invisible" />

        <Button
            android:id="@+id/loadProgressBtn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <ImageView
            android:id="@+id/loadProgressDialogImg"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:contentDescription="Simple Load" />

        <Button
            android:id="@+id/loadProgressDialogBtn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

       <ImageView
            android:id="@+id/loadEffectImg"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:contentDescription="Simple Load" />

        <Button
            android:id="@+id/loadEffectBtn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>

</ScrollView>

AQueryImageLoading.java
Open AQueryImageLoading.java and replace it with below code. Each line is added with comment and I hope it is self understandable. If you still have any doubt/question, discuss it right away in the comment section.

package com.prgguru.example;

import android.app.Activity;
import android.app.ProgressDialog;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;

import com.androidquery.AQuery;

public class AQueryImageLoading extends Activity {
	// AQuery object
	private AQuery aq;
	// Progress Dialog bar object
	ProgressDialog prgDialog;
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		// Instantiate AQuery object
		aq = new AQuery(this);
		// Simple Image Loading
		aq.id(R.id.simpleLoadBtn).text("Simple Image Load").clicked(this, "loadImageFromInternet");
		// Image loading with progress bar
		aq.id(R.id.loadProgressBtn).text("Load Image with progress bar").clicked(this, "loadImageFromInternetWithProgressBar");
		// Image loading with Progress Dialog Bar
		aq.id(R.id.loadProgressDialogBtn).text("Load Image with progress dialog bar").clicked(this, "loadImageFromInternetWithProgressDialogBar");
		// Image loading with Fading effect
		aq.id(R.id.loadEffectBtn).text("Load Image with Effect").clicked(this, "loadImageWithFadeInEffect");
	}

	// Call back method for Button - R.id.simpleLoadBtn click
	public void loadImageFromInternet(View image) {
		Toast.makeText(aq.getContext(), "Download initiated...",Toast.LENGTH_SHORT).show();
		aq.id(R.id.simpleLoadImg).image("http://programmerguru.com/android-tutorial/wp-content/uploads/2014/01/asynctask_thumb.png",false,false);
	}

	// Call back method for Button - R.id.loadProgressBtn click
	public void loadImageFromInternetWithProgressBar(View image) {
		Toast.makeText(aq.getContext(), "Download initiated...",Toast.LENGTH_SHORT).show();
		// Display progress bar by invoking progress method
		aq.id(R.id.loadProgressImg).progress(R.id.progress).image("http://programmerguru.com/android-tutorial/wp-content/uploads/2014/01/why_aysnctask.png",false,false);
	}

	// Call back method for Button - R.id.loadProgressDialogBtn click
	public void loadImageFromInternetWithProgressDialogBar(View image) {
		prgDialog = new ProgressDialog(this);
		prgDialog.setMessage("Downloading Image from Internet. Please wait...");
		prgDialog.setIndeterminate(false);
		prgDialog.setMax(100);
		prgDialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);
		prgDialog.setCancelable(false);
		Toast.makeText(aq.getContext(), "Download initiated...",Toast.LENGTH_SHORT).show();
		// Display Progress Dialog Bar by invoking progress method
		aq.id(R.id.loadProgressDialogImg).progress(prgDialog).image("http://programmerguru.com/android-tutorial/wp-content/uploads/2012/08/full_screen.png",false,false);
	}

	// Call back method for Button - R.id.loadEffectBtn click
	public void loadImageWithFadeInEffect(View image) {
		String imageUrl = "http://programmerguru.com/android-tutorial/wp-content/uploads/2012/07/intent.png";   
		Toast.makeText(aq.getContext(), "Download initiated...",Toast.LENGTH_SHORT).show();
		// Load image with fading effect
		aq.id(R.id.loadEffectImg).image(imageUrl, true, true, 0, 0, null, AQuery.FADE_IN);
	}	
}

Include AQuery.jar
Download AQuery jar from here and place it under lib folder.

AndroidManifest.xml permission

Don’t forget to add write and internet permissions in AndroidManifest.xml:

    <!-- Permission: Allow application to connect to Internet -->
    <uses-permission android:name="android.permission.INTERNET" />

    <!-- Permission: Allow application to write to SDCard -->
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

[pglinkadssmall1]

Demo

That’s all. It’s time to test our code.

Run the application using emulator or device by right clicking on the project >> Run as >> Android applicaiton >> Choose emulator or device.



Download Source Code

Entire project is zipped and is available for download. Unzip the downloaded project and to import the project into eclipse, launch eclipse >> File >> Import.. >> Choose downloaded project(How to import android project in eclipse). If you just want to run the application in your mobile and see the output but don’t want to hit your head with source code, download application(apk) file and install it in your mobile device.

Download Source Code Download Application(apk)

*apk in Android  is the installation file similar to exe in windows.

[pglinkadssmall]

If you feel this article is helpful and interesting please spread a word about it to your friends and colleagues by sharing the article in Facebook or Twitter.

You are always welcome to provide your comments and feedback from comment box.

Reference

AQuery documentation
[pgwriteforus]
[pgfeedback]

Related Articles

Author: Udhay

Share This Post On
468 ad
  • Capkin

    hi I downloaded this code iit is very good but i dont know how i ipmlement this in a slieding menu on every fragments. Can you help me how I have to do this?
    thanks.

  • DuduFi

    Make sure you dont forget to get permission:

  • DuduFi

    If yo download the AQuery source code – inside you have very nice DEMO app that is used to test – it is butifull 🙂
    This demo app is on the market too…

  • Tamawy

    Thank you very much. you saved my day

  • You are welcome. Spread a word about this blog to your friends and colleagues.

Join now to get more access to our Android Tutorials

Join now to get more access to our Android Tutorials

Once you Join, you will receive Mail containing latest Android Tutorials once a month !!

I promise I wont spam you !!

You have Successfully Subscribed!

Pin It on Pinterest

Shares