Android Image Slider From URL | Fetch Image From Server URL

This tutorial is about Android Image Slider From URL.

In this tutorial, we will how to fetch images from server url to image slider with view pager in android studio.

We will load images from the URL and will show them in viewpager.

Glide library will help us to load images from the server URL.

Our image slider will be able to show the automatic slideshow.

This image slider enables user to swipe left or right to change the current image.

Automatic Slider

Read this tutorial to make image slide from in built images.

Step 1. Gradle File Changes

We are going to use two libraries in this example.

One is Jack Wharton for making sliding layout with viewpager.

Another is Glide to load the images easily and smoothly from the URL.

Add below three lines in your build.gradle(Module: app) file

Step 2. Adding Permission

To fetch the images from server, we need to use internet.

So, we have to define internet permission in AndroidManifest.xml file

Step 3. Slider Layout

Create a new layout xml file under res->layout directory.

Name this file as slidingimages_layout.xml

Write down the below source code in it.

This code represent the single slide layout of the viewpager.

Every slide of the viewpager will use this single layout only.

Step 4. Adapter Class

Let us create an adapter class which will give necessary data to populate the viewpager slides.

Make one new class named class

Copy the below source code in it.

Now let us understand the above code

consider the below line

It defines the string array called urls. This string variable contains the urls of the images.

I have made this string array with it’s values in the class which we will see in the next step.

instantiateItem() method will create every slide of the viewpager.

Coding lines for this method is as following

First of all, compiler will find the whole slide view with the help of the below line

Here, I have used that layout xml file (slidingimages_layout.xml) which we have created in step 3.

After this, compiler will find the ImageView with the help of findViewById() method.

Now to fetch or load the image from url, compiler will execute following code

urls[position] will provide appropriate url of the image.

Above three lines will fetch the image and will show it in the imageview.

Step 5. Final Changes

Now all we need is to make some changes in activity_main.xml and file

Copy and paste below code in activity_main.xml file

I have taken one viewpager in the main layout file.

Now we need to show indicator dots such that in just overlap the viewpager from the bottom of the slider.

For this, I have used relativelayout, so that we can overlap the necessary things properly.

Now write down the following coding lines in file

Explanation of above code

Give your attention to the following line

Here we are setting all the urls in one string array. We have used this string array in the adapter class as we have shown earlier.

Now consider init() method as per below

This method will first set the adapter to the viewpager object.

Then compiler will set the circle indicator to the viewpager object.

You can also set the radius of the circle indicator by using the below line

Following line set the number of pages or slides.

Following code is responsible to enable the automatic slider.

You can change the value from 3000 to other in above code to increase or decrease the time of the automatic slider.

Download Source Code For Android Image Slider From URL

[sociallocker]Download Source Code For ImageSlider From URL[/sociallocker]

Hardik Parsania

I am mobile app developer. I am always passionate about solving complex and real world problems.I have developed many apps with great interest and superior logical skills.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *