Skip to main content

Image Slider App

Create Android Image Slider App

  1. Go to File → New → New Project and enter your Application Name. Let’s say Android Image Slider
  2. Enter company domain, this is used to uniquely identify your App’s package worldwide.
  3. Choose project location and minimum SDK and on the next screen choose Simple Activity, since we would be adding most of the code Ourselves. Then Click on Next.
  4. Choose an Activity Name. Make sure Generate Layout File check box is selected, Otherwise we have to generate it ourselves.Then click on Finish. We have kept the Activity Name as MainActivity.java. This will be the default screen when the user opens the app for the first time.
Gradle will configure your project and resolve the dependencies, Once it is complete proceed to the next steps.
We need to add the dependency for CircleIndicator in the app’s build.gradle file.

build.gradle

1
compile 'me.relex:circleindicator:1.2.2@aar'

Add Layout for Android Image Slideshow

  1. Add the following code to the activity_main.xml. The layout consist of an Android ViewPager and a CircleIndicator wrapped inside a RelativeLayout.

    2. activity_main.xml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">
            <android.support.v4.view.ViewPager
                android:id="@+id/pager"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_alignParentTop="true" />
            <me.relex.circleindicator.CircleIndicator
                android:id="@+id/indicator"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:layout_alignParentBottom="true"/>
        </RelativeLayout>
    </LinearLayout>
  2. Now Let’s add the code for layout of each slide that will be shown in the Android Image Slider. Add the following code in the slide.xml file. It consists of an ImageView wrapped in a FrameLayout.

    3. slide.xml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <ImageView
            android:id="@+id/image"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:adjustViewBounds="true"
            android:layout_gravity="center"
            android:src="@drawable/beast"
            android:scaleType="centerCrop"/>
    </FrameLayout>

Implement Android Image Slider using ViewPager

  1. To create android image slideshow, We will hook up a PagerAdapter to android ViewPager.
    Create a new class MyAdapter.java and add the following code.

    2. MyAdapter.java

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    package com.androidtutorialpoint.androidimageslider;
    import android.content.Context;
    import android.support.v4.view.PagerAdapter;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.ImageView;
    import java.util.ArrayList;
    public class MyAdapter extends PagerAdapter {
        private ArrayList<Integer> images;
        private LayoutInflater inflater;
        private Context context;
        public MyAdapter(Context context, ArrayList<Integer> images) {
            this.context = context;
            this.images=images;
            inflater = LayoutInflater.from(context);
        }
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }
        @Override
        public int getCount() {
            return images.size();
        }
        @Override
        public Object instantiateItem(ViewGroup view, int position) {
            View myImageLayout = inflater.inflate(R.layout.slide, view, false);
            ImageView myImage = (ImageView) myImageLayout
                    .findViewById(R.id.image);
            myImage.setImageResource(images.get(position));
            view.addView(myImageLayout, 0);
            return myImageLayout;
        }
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view.equals(object);
        }
    }
    MyAdapter.java will popluate the custom content in our ViewPager:
    To implement the abstract class PagerAdapter. We need to override the following methods which have been defined as abstract methods.
    1. instantiateItem(ViewGroup, int) – This method should create the page for the positiion passed to it as an argument. Here we inflate() the slide.xml layout to create the android images slider set the image resource for the ImageView in it. Finally, the inflated view is added to the ViewPager using addView() and return it.
    2. destroyItem(ViewGroup, int, Object) – Removes the page for the given position from the container. Here we have simply removed object using removeView().
    3. getCount() – returns the number of available views in the ViewPager.
    4. isViewFromObject(View, Object) – This method checks whether the view passed to it is associated with the key returned by the instantiateItem(). This method is important for proper functioning of the PagerAdapter. We just compare the two input view and the key and return the result.
  2. Next, Let’s implement the android image slider. Add the following code to your MainActivity.java

    3. MainActivity.java

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    package com.androidtutorialpoint.androidimageslider;
    import android.os.Bundle;
    import android.os.Handler;
    import android.support.v4.view.ViewPager;
    import android.support.v7.app.AppCompatActivity;
    import java.util.ArrayList;
    import java.util.Timer;
    import java.util.TimerTask;
    import me.relex.circleindicator.CircleIndicator;
    public class MainActivity extends AppCompatActivity {
        private static ViewPager mPager;
        private static int currentPage = 0;
        private static final Integer[] XMEN= {R.drawable.beast,R.drawable.charles,R.drawable.magneto,R.drawable.mystique,R.drawable.wolverine};
        private ArrayList<Integer> XMENArray = new ArrayList<Integer>();
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            init();
        }
        private void init() {
            for(int i=0;i<XMEN.length;i++)
                XMENArray.add(XMEN[i]);
            mPager = (ViewPager) findViewById(R.id.pager);
            mPager.setAdapter(new MyAdapter(MainActivity.this,XMENArray));
            CircleIndicator indicator = (CircleIndicator) findViewById(R.id.indicator);
            indicator.setViewPager(mPager);
            // Auto start of viewpager
            final Handler handler = new Handler();
            final Runnable Update = new Runnable() {
                public void run() {
                    if (currentPage == XMEN.length) {
                        currentPage = 0;
                    }
                    mPager.setCurrentItem(currentPage++, true);
                }
            };
            Timer swipeTimer = new Timer();
            swipeTimer.schedule(new TimerTask() {
                @Override
                public void run() {
                    handler.post(Update);
                }
            }, 2500, 2500);
        }
    }
We have created an Array containing the images of X-MEN poster, We get the data set from XMEN Array – the List of X-MEN posters. After that, we reference the ViewPager in the activity’s view and then set the adapter to be an unnamed instance of MyAdapter.
Next, we reference the CircleIndicator and use the setViewPager to set the indicator.
To create android image slider effect. We have used a Handler to update the android image slider on a new thread. Then we use Timer to schedule tasks for repeated execution in a background thread at an interval of 2.5 seconds starting with a delay of 2.5 seconds.
Now run the Android Image Slider app on an emulator or an actual Android Device and you should see a beautiful android image slideshow. Try to experiment with image slider in your app and

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