Skip to main content

Android Auto Swipeable Image Slider Using Image URL


Automatic image sliding is used by thousands of android applications which servers multiple type of contents distribution in their applications like E-Commerce applications. Image slider shows the exclusive products or their category to app user therefore they can easily understand the major category in application. The AndroidImageSlider library allows us to create awesome image slider in our android application within a few code integration.

Contents in this project Automatic Multiple Image Slider :

  1. Watch the demo video.
  2. Start a new project in Android Studio.
  3. Integrate the AndroidImageSlider libraries in your project.
  4. Add Internet permission in AndroidManifest.xml file.
  5. Adding SliderLayout in activity_main.xml file.
  6. Defining SliderLayout object in MainActivity.java file & assign there ID.
  7. Define HashMap .
  8. Creating + Calling Method to Add Image name and URL in HashMap .
  9. Complete final code for Android Image Slider Project.

1. Watch the demo video :

2. Start a new project in Android Studio :

Next step is to start a new android project or open an existing project in studio in which you want to add the Image Slider.

3. Integrate the AndroidImageSlider libraries in your project :

1. Open your project’s build.gradle(Module : app) file .
2. Add Picasso, Nineoldandroids and Image Slider library.
compile 'com.squareup.picasso:picasso:2.3.2'
compile 'com.nineoldandroids:library:2.4.0'
compile 'com.daimajia.slider:library:1.1.5@aar'
3. Screenshot after adding these libraries :
Image Slider

4. Add Internet permission in AndroidManifest.xml file.

<uses-permission android:name="android.permission.INTERNET"/>

 5. Adding SliderLayout in activity_main.xml file.

<com.daimajia.slider.library.SliderLayout
    android:id="@+id/slider"
    android:layout_width="fill_parent"
    android:layout_height="300dp"/>

 6. Defining SliderLayout object in MainActivity.java file & assign there ID.

SliderLayout sliderLayout ;

sliderLayout = (SliderLayout)findViewById(R.id.slider);

 7. Define HashMap .

HashMap<String, String> HashMapForURL ;

HashMap<String, Integer> HashMapForLocalRes ;

 8. Creating + Calling Method to Add Image name and URL in HashMap.

public void AddImagesUrlOnline(){

    HashMapForURL = new HashMap<String, String>();

    HashMapForURL.put("CupCake", "http://androidblog.esy.es/images/cupcake-1.png");
    HashMapForURL.put("Donut", "http://androidblog.esy.es/images/donut-2.png");
    HashMapForURL.put("Eclair", "http://androidblog.esy.es/images/eclair-3.png");
    HashMapForURL.put("Froyo", "http://androidblog.esy.es/images/froyo-4.png");
    HashMapForURL.put("GingerBread", "http://androidblog.esy.es/images/gingerbread-5.png");
}

public void AddImageUrlFormLocalRes(){

    HashMapForLocalRes = new HashMap<String, Integer>();

    HashMapForLocalRes.put("CupCake", R.drawable.cupcake);
    HashMapForLocalRes.put("Donut", R.drawable.donut);
    HashMapForLocalRes.put("Eclair", R.drawable.eclair);
    HashMapForLocalRes.put("Froyo", R.drawable.froyo);
    HashMapForLocalRes.put("GingerBread", R.drawable.gingerbread);

}

 9. Complete final code for Android Image Slider Project.

Code for MainActivity.java file.
package com.androidjson.imageslider_androidjsoncom;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.widget.Toast;
import com.daimajia.slider.library.Animations.DescriptionAnimation;
import com.daimajia.slider.library.SliderLayout;
import com.daimajia.slider.library.SliderTypes.BaseSliderView;
import com.daimajia.slider.library.SliderTypes.TextSliderView;
import com.daimajia.slider.library.Tricks.ViewPagerEx;
import java.util.HashMap;

public class MainActivity extends AppCompatActivity
        implements BaseSliderView.OnSliderClickListener,
        ViewPagerEx.OnPageChangeListener
{

    SliderLayout sliderLayout ;

    HashMap<String, String> HashMapForURL ;

    HashMap<String, Integer> HashMapForLocalRes ;

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

        sliderLayout = (SliderLayout)findViewById(R.id.slider);

        //Call this method if you want to add images from URL .
        AddImagesUrlOnline();

        //Call this method to add images from local drawable folder .
        //AddImageUrlFormLocalRes();

        //Call this method to stop automatic sliding.
        //sliderLayout.stopAutoCycle();

        for(String name : HashMapForURL.keySet()){

            TextSliderView textSliderView = new TextSliderView(MainActivity.this);

            textSliderView
                    .description(name)
                    .image(HashMapForURL.get(name))
                    .setScaleType(BaseSliderView.ScaleType.Fit)
                    .setOnSliderClickListener(this);

            textSliderView.bundle(new Bundle());

            textSliderView.getBundle()
                    .putString("extra",name);

            sliderLayout.addSlider(textSliderView);
        }
        sliderLayout.setPresetTransformer(SliderLayout.Transformer.DepthPage);

        sliderLayout.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);

        sliderLayout.setCustomAnimation(new DescriptionAnimation());

        sliderLayout.setDuration(3000);

        sliderLayout.addOnPageChangeListener(MainActivity.this);
    }

    @Override
    protected void onStop() {

        sliderLayout.stopAutoCycle();

        super.onStop();
    }

    @Override
    public void onSliderClick(BaseSliderView slider) {

        Toast.makeText(this,slider.getBundle().get("extra") + "", Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

    @Override
    public void onPageSelected(int position) {

        Log.d("Slider Demo", "Page Changed: " + position);

    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

    public void AddImagesUrlOnline(){

        HashMapForURL = new HashMap<String, String>();

        HashMapForURL.put("CupCake", "http://androidblog.esy.es/images/cupcake-1.png");
        HashMapForURL.put("Donut", "http://androidblog.esy.es/images/donut-2.png");
        HashMapForURL.put("Eclair", "http://androidblog.esy.es/images/eclair-3.png");
        HashMapForURL.put("Froyo", "http://androidblog.esy.es/images/froyo-4.png");
        HashMapForURL.put("GingerBread", "http://androidblog.esy.es/images/gingerbread-5.png");
    }

    public void AddImageUrlFormLocalRes(){

        HashMapForLocalRes = new HashMap<String, Integer>();

        HashMapForLocalRes.put("CupCake", R.drawable.cupcake);
        HashMapForLocalRes.put("Donut", R.drawable.donut);
        HashMapForLocalRes.put("Eclair", R.drawable.eclair);
        HashMapForLocalRes.put("Froyo", R.drawable.froyo);
        HashMapForLocalRes.put("GingerBread", R.drawable.gingerbread);

    }
}
Code for AndroidManifest.xml file .
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.androidjson.imageslider_androidjsoncom">

    <uses-permission android:name="android.permission.INTERNET"/>

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>
Screenshot:

Download Code

Comments

Post a Comment

Popular posts from this blog

web2apk

http://web2apk.com/create.aspx Create App   Intro   About   Changes   MalWare ?   Contact   Privacy Useful Links Bluetooth Mini Keyboards Android Mini PC Reset Android URL App Title Icon or
Post a Comment
Read more

Android Bar Chart Using MpAndroidChart Library Tutorial

https://www.numetriclabz.com/android-bar-chart-using-mpandroidchart-library-tutorial/ Android Bar Chart Using MpAndroidChart Library Tutorial Objective In this tutorial we learn how to implement Bar Chart using MpAndroidChart Library in your Android App. Download Source Code       Step 1 Contents ·        1  Introduction ·        2  Creating Bar chart o    2.1  Create a new Project o    2.2  Adding library in Project o    2.3  Create Layout o    2.4  To Plot Bar Chart §   2.4.1  Initialize the graph id §   2.4.2  Creating a Dataset §   2.4.3  Defining X-axis labels §   2.4.4  Set the data §   2.4.5  Add the description to the chart §   2.4.6  Run your App § ...
2 comments
Read more

how to retrieve image from sqlite database in android and display in listview

 Android platform provides several ways to store data in our application. 1. SQLite database 2. SharedPreferences etc For our post, we will only work with SQLite database. First and foremost, we need to understand what an SQLite database is? SQLite database  is an open source SQL database that stores data to a text file on a device. It executes SQL Commands to perform a set of functions, that is, create, read, update and delete operations. On my previous post, I showed how to  store data in SQLite database from edit text, retrieve and populate it in a listview . For this post, I will show the SQLite CRUD operations with images from gallery and text from EditText. We need to understand this; images are stored in SQLite database as BLOB data type. A BLOB is a large binary object that can hold a variable amount of data.  Note, we can only store images in the database as BLOB data type. We need to convert our image path to a bitmap th...
1 comment
Read more