android image slider with indicator using ViewPager and Tablayout

 res/layout/activity_main.xml
<? xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    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:id="@+id/constraintLayout"
    android:layout_height="match_parent"
    android::background="@color/white"
    tools:context=".MainActivity">

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

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        app:tabTextColor="@color/white"
        app:tabSelectedTextColor="@color/colorAccent"
        app:tabIndicatorColor="@color/colorAccent"
        android:background="@color/colorPrimary"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        android:layout_gravity="bottom">
        app:tabGravity="center">
        app:tabPaddingEnd="0dp">
        app:tabPaddingStart="0dp">
        app:tabIndicatorHeight="0dp">
        android:background="@android:color/transparent">
    </android.support.design.widget.TabLayout>

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

 res/layout/slider_imageview_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/imageView"
    android:scaleType="fitXY"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".BlankFragment">

</ImageView>

ViewPagerAdapter.java
package com.example.geekscompete.tablayouttextcolordemo;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import import android.widget.ImageView;
import import android.view.View;
import import android.view.ViewGroup;

public class ViewPagerAdapter extends PagerAdapter {

    private Context mContext;
    private Integer [] slider_images={R.drawable.slider_image1,R.drawable.slider_image2,R.drawable.slider_image3};

    public ViewPagerAdapter(Context context) {this.mContext=context; }
    // This determines the number of tabs
    @Override
    public int getCount() {
    return slider_images.length;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
    View itemView = LayoutInflater.from(mContext).inflate(R.layout.slider_imageview_layout, container, false);
    ImageView imageView = itemView.findViewById(R.id.imageView);
    imageView.setImageResource(slider_images[position]);
    container.addView(itemView,position);
    return itemView;
    }

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

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
    ViewPager vp = (ViewPager) container;
    View view = (View) object;
    vp.removeView(view);
   }
   }

 res/drawable/selected_dot.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="true"
    android:dither="true">
<size android:height="12dip" android:width="12dip" />
<solid android:color="@color/silver"/>
</shape>


 res/drawable/selected_dot.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="true"
    android:dither="true">
<size android:height="12dip" android:width="12dip" />
<solid android:color="@color/black"/>
</shape>


 res/values/colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="silver">#C0C0C0</color>
    <color name="black">#000000</color>
</resources>


MainActivity.java
package com.example.geekscompete.tablayouttextcolordemo;

import android.graphics.Color;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    TabLayout tabLayout;
    ViewPager viewPager;

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

        viewPager=findViewById(R.id.viewpager);
        tabLayout=findViewById(R.id.tablayout);

        viewPager.setAdapter(new ViewPagerAdapter(this));
        tabLayout.setupWithViewPager(viewPager);
        tabLayout.getTabAt(0).setIcon(R.drawable.selected_dot);
        tabLayout.getTabAt(1).setIcon(R.drawable.unselected_dot);
        tabLayout.getTabAt(2).setIcon(R.drawable.unselected_dot);

        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
        tabLayout.getTabAt(tab.getPosition()).setIcon(R.drawable.selected_dot);
       }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
            tabLayout.getTabAt(tab.getPosition()).setIcon(R.drawable.unselected_dot);
        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {
        }
       });
    }
}


No comments:

Post a Comment

Popular Posts