Android Image Slider Example

Android Image Slider Example – Here i will explain how to create Image View Slider example in android studio using ViewPager. This is very simple to make image slider example in android. ViewPager is a Android library used for allow the users to perform the actions like swipe the images from left or right action. It’s a popular widget in Android most of all android developers used ViewPager library for their projects.

Image Slider concepts are widely used in various places. So we can’t skip this experience as a android developers. Therefore learn about how slide the images from server end or our local file system. When you are get the image from server, then the response time is very good. so follow server side files for store your image or document where you view the file.

ViewPager require Page Adapters to make the swipe screen in the fragment layout. Use ViewPager you can get the Images and Text from server side or internal memory. You have use this project offline also its working because all of files stored in internal memory not server side.

Android Image Slider Example

Just follow steps to make image slider example in android. First as usual create new project and choose empty activity after project creation open the default class of MainActivity.java file and add the following code.

MainActivity.java

package in.vetbossel.motivationalquotes;

import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {
   // private AdView mAdView;
    private ViewPager viewPager;
    private SlideAdapter myadapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        viewPager = (ViewPager) findViewById(R.id.viewpager);
        myadapter = new SlideAdapter(this);
        viewPager.setAdapter(myadapter);

    }
}

Create new Class

Now you have to create one class for show the slider images from ViewPager Library. Give some name for that class i give SlideAdapter.java file name. End of the article you can get the full source code. For the demo purpose here I have explain some of Java files.

SlideAdapter.java

package in.vetbossel.motivationalquotesenglish;

import android.content.Context;
import android.graphics.Color;
import android.support.v4.view.PagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class SlideAdapter extends PagerAdapter {
    Context context;
    LayoutInflater inflater;

    // list of images
    public int[] lst_images = {
            R.drawable.billgates,
            R.drawable.billgates,
            R.drawable.billgates,
            R.drawable.billgates,
            R.drawable.billgates,
            R.drawable.billgates,
            R.drawable.billgates,
            R.drawable.billgates,
            R.drawable.billgates,
            R.drawable.billgates,
            R.drawable.billgates,
            R.drawable.billgates
 };
 // list of titles
    public String[] lst_title = {
            "Bill Gates",
            "Bill Gates",
            "Bill Gates",
            "Bill Gates",
            "Bill Gates",
            "Bill Gates",
            "Bill Gates",
            "Bill Gates",
            "Bill Gates",
            "Bill Gates",
            "Bill Gates",
            "Bill Gates"
};
// list of descriptions
    public String[] lst_description = {
            "Success is a lousy teacher. It seduces smart people into thinking they can't lose.",
            "It's fine to celebrate success but it is more important to heed the lessons of failure.",
            "We all need people who will give us feedback. That's how we improve.",
            "If you can't make it good, at least make it look good.",
            "Everyone needs a coach. It doesn't matter whether you're a basketball player or a tennis player.",
            "If your culture doesn't like geeks, you are in real trouble.",
            "Your most unhappy customers are your greatest source of learning.",
            "Life is not fair; get used to it.",
            "If you think your teacher is tough, wait till you get a boss.",
            "If your Business is not on the Internet, then your business will be out of Business.",
            "We have got to put a lot of money into changing behavior.",
            "To win big, you sometimes have to take big risks."
 };
// list of background colors
    public int[]  lst_backgroundcolor = {
            Color.rgb(55,55,55),
            Color.rgb(55,55,55),
            Color.rgb(55,55,55),
            Color.rgb(55,55,55),
            Color.rgb(55,55,55),
            Color.rgb(55,55,55),
            Color.rgb(55,55,55),
            Color.rgb(55,55,55),
            Color.rgb(55,55,55),
            Color.rgb(55,55,55),
            Color.rgb(55,55,55),
            Color.rgb(55,55,55)
 };

public SlideAdapter(Context context) {
        this.context = context;
    }

    @Override
    public int getCount() {
        return lst_title.length;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return (view==(LinearLayout)object);
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        inflater = (LayoutInflater) context.getSystemService(context.LAYOUT_INFLATER_SERVICE);
        View view = inflater.inflate(R.layout.slide,container,false);
        LinearLayout layoutslide = (LinearLayout) view.findViewById(R.id.slidelinearlayout);
        ImageView imgslide = (ImageView)  view.findViewById(R.id.slideimg);
        TextView txttitle= (TextView) view.findViewById(R.id.txttitle);
        TextView description = (TextView) view.findViewById(R.id.txtdescription);
        layoutslide.setBackgroundColor(lst_backgroundcolor[position]);
        imgslide.setImageResource(lst_images[position]);
        txttitle.setText(lst_title[position]);
        description.setText(lst_description[position]);
        container.addView(view);
        return view;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((LinearLayout)object);
    }
}

You have to upload the images in res/drawable folder and call from SlideAdapter class.

Create Layout Files

Now you have to create layout files so first open the default file of activity_main.xml code and add the following code.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="in.vetbossel.motivationalquotesenglish.MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </android.support.v4.view.ViewPager>

</RelativeLayout>

After that create one new Layout file for assign the image slider values and colours.

slide.xml

<?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"
    android:gravity="center"
    android:id="@+id/slidelinearlayout">

    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:id="@+id/slideimg"/>

    <TextView
        android:padding="16dp"
        android:id="@+id/txttitle"
        android:textStyle="bold"
        android:textSize="30sp"
        android:text="Title Here"
        android:textColor="#fff"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:padding="16dp"
        android:id="@+id/txtdescription"
        android:textAlignment="center"
        android:textSize="24sp"
        android:text="Description is Here"
        android:textColor="#fff"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

Gradle Scripts

Here i will add the code of gradle dependency and project dependency code just use for same.

build.gradle(Project)

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    repositories {
        jcenter()
        maven {
            url 'https://maven.google.com/'
            name 'Google'
        }
        google()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.1.3'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        jcenter()
        maven {
            url 'https://maven.google.com/'
            name 'Google'
        }
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

Gradle dependency:

build.gradle(Module:app)

apply plugin: 'com.android.application'

android {
    compileSdkVersion 26
    buildToolsVersion '27.0.3'
    defaultConfig {
        applicationId "in.vetbossel.motivationalquotesenglish"
        minSdkVersion 15
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    androidTestImplementation('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    implementation 'com.android.support:appcompat-v7:26.1.0'
    implementation 'com.android.support.constraint:constraint-layout:1.0.2'
    testImplementation 'junit:junit:4.12'
    implementation 'com.google.android.gms:play-services-ads:15.0.0'
}

Conclusion

I hope above explanations are very helpful for your learning experience. Android developers have good salary in all software companies. So learn android as quickly & get high salary job. In my blog I will post android projects & articles it will help for further development.

Tags: ,

Leave a Reply