Screen slides are transitions between one entire screen to another and are common with UIs like setup wizards or slideshows. This lesson shows you how to do screen slides with a ViewPager provided by the support library. ViewPagers can animate screen slides automatically. Here's what a screen slide looks like that transitions from one screen of content to the next:
In this tutorial I am showing a list of images in a custom pager adapter.For full code we can comment below.I am sharing the main activity code with comments for helping you out at each step.
Below is the code snippet for your main activity .
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| package com.roy.airteldemo; | |
| import android.content.Context; | |
| import android.os.Bundle; | |
| import android.os.Handler; | |
| import android.os.Looper; | |
| import android.os.PersistableBundle; | |
| import android.support.design.widget.FloatingActionButton; | |
| import android.support.design.widget.Snackbar; | |
| import android.support.v4.view.PagerAdapter; | |
| import android.support.v4.view.ViewPager; | |
| import android.support.v7.app.AppCompatActivity; | |
| import android.support.v7.widget.Toolbar; | |
| import android.util.Log; | |
| import android.view.LayoutInflater; | |
| import android.view.View; | |
| import android.view.Menu; | |
| import android.view.MenuItem; | |
| import android.view.ViewGroup; | |
| import android.widget.Button; | |
| import android.widget.ImageView; | |
| import android.widget.LinearLayout; | |
| import android.widget.RelativeLayout; | |
| import android.widget.TextView; | |
| import android.widget.Toast; | |
| import com.roy.http.HTTPResponseListener; | |
| import com.roy.http.HttpGet; | |
| import com.roy.utils.AsyncThreadPool; | |
| import com.roy.utils.ImageLoader; | |
| import com.roy.utils.Util; | |
| import com.roy.vo.ImageVO; | |
| import org.json.JSONArray; | |
| import org.json.JSONException; | |
| import org.json.JSONObject; | |
| import java.util.ArrayList; | |
| import butterknife.Bind; | |
| import butterknife.ButterKnife; | |
| public class MainActivity extends AppCompatActivity implements HTTPResponseListener { | |
| @Bind(R.id.pager) | |
| ViewPager mViewPager; | |
| @Bind(R.id.progress_bar) | |
| RelativeLayout mBar; | |
| @Bind(R.id.back_button) | |
| Button btnBack; | |
| @Bind(R.id.foward_button) | |
| Button btnForward; | |
| @Bind(R.id.text_number) | |
| TextView tvCount; | |
| private CustomPagerAdapter mCustomPagerAdapter; | |
| public Handler mUIHandler; | |
| private AsyncThreadPool mThreadPool; | |
| private ArrayList<ImageVO> mImageList = new ArrayList<ImageVO>(); | |
| ImageLoader loader; | |
| @Override | |
| protected void onCreate(Bundle savedInstanceState) { | |
| super.onCreate(savedInstanceState); | |
| setContentView(R.layout.activity_main); | |
| ButterKnife.bind(this); | |
| Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); | |
| setSupportActionBar(toolbar); | |
| mUIHandler = new Handler(Looper.getMainLooper()); | |
| AsyncThreadPool.init(mUIHandler); | |
| mThreadPool = AsyncThreadPool.get(); | |
| fetchImages(); //fetching images -used asynctask for background processing | |
| // button for swiping left and right views | |
| btnBack.setOnClickListener(new View.OnClickListener() { | |
| @Override | |
| public void onClick(View v) { | |
| if (mViewPager.getCurrentItem() >= 0) { | |
| mViewPager.setCurrentItem(getItem(-1), true); | |
| } | |
| } | |
| }); | |
| btnForward.setOnClickListener(new View.OnClickListener() { | |
| @Override | |
| public void onClick(View v) { | |
| if (mViewPager.getCurrentItem() <= mImageList.size() - 1) { | |
| mViewPager.setCurrentItem(getItem(+1), true); | |
| } | |
| } | |
| }); | |
| mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { | |
| public void onPageScrollStateChanged(int state) { | |
| } | |
| public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { | |
| } | |
| public void onPageSelected(int position) { | |
| int count = position + 1; | |
| tvCount.setText(count + " " + "of" + " " + mImageList.size()); | |
| } | |
| }); | |
| } | |
| class CustomPagerAdapter extends PagerAdapter { //custom adpter for showing images | |
| Context mContext; | |
| LayoutInflater mLayoutInflater; | |
| public CustomPagerAdapter(Context context, ArrayList<ImageVO> mList) { | |
| mContext = context; | |
| mImageList = mList; | |
| loader = new ImageLoader(mContext); | |
| mLayoutInflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE); | |
| } | |
| @Override | |
| public int getCount() { | |
| return mImageList.size(); | |
| } | |
| @Override | |
| public boolean isViewFromObject(View view, Object object) { | |
| return view == ((LinearLayout) object); | |
| } | |
| @Override | |
| public Object instantiateItem(ViewGroup container, final int position) { | |
| View itemView = mLayoutInflater.inflate(R.layout.pager_item, container, false); | |
| ImageView imageView = (ImageView) itemView.findViewById(R.id.imageView); | |
| try { | |
| JSONObject obj = (mImageList.get(position).getMedia()); | |
| String url = obj.getString("m"); | |
| loader.DisplayImage(url, imageView); | |
| } catch (Exception e) { | |
| Log.e("log exception", "" + e.getMessage()); | |
| } | |
| container.addView(itemView); | |
| return itemView; | |
| } | |
| @Override | |
| public void destroyItem(ViewGroup container, int position, Object object) { | |
| container.removeView((LinearLayout) object); | |
| } | |
| } | |
| private void fetchImages() { | |
| if (Util.haveNetworkConnection(this)) { | |
| mBar.setVisibility(View.VISIBLE); | |
| String url = "http://api.flickr.com/services/feeds/photos_public.gne?format=json"; | |
| HttpGet getAllLogs = new HttpGet(this, url); | |
| getAllLogs.run(url); | |
| } else { | |
| Toast.makeText(this, "No network connectivity", Toast.LENGTH_SHORT) | |
| .show(); | |
| } | |
| } | |
| @Override | |
| public Boolean setGetStatus(JSONObject finalResult, String getUrl, int responseCode) { //make an interface for updating ui on post execute | |
| mBar.setVisibility(View.GONE); | |
| if (finalResult != null) { | |
| try { | |
| if (finalResult.has("items")) { | |
| JSONArray jsonArray = finalResult.getJSONArray("items"); | |
| for (int i = 0; i < jsonArray.length(); i++) { | |
| JSONObject jsonObject = jsonArray.getJSONObject(i); | |
| ImageVO appObj = new ImageVO(jsonObject); | |
| mImageList.add(appObj); | |
| } | |
| if (mImageList != null && !mImageList.isEmpty()) { | |
| mCustomPagerAdapter = new CustomPagerAdapter(this, mImageList); | |
| mViewPager.setAdapter(mCustomPagerAdapter); | |
| int count = mViewPager.getCurrentItem() + 1; | |
| tvCount.setText(count + " " + "of" + " " + mImageList.size()); | |
| Log.e("logtag", "" + mImageList.size()); | |
| } | |
| } | |
| } catch (JSONException e) { | |
| } | |
| } | |
| return false; | |
| } | |
| private int getItem(int i) { | |
| return mViewPager.getCurrentItem() + i; | |
| } | |
| } |
