Hello guys i would like to make my Listview like this, One item scroll at a time and smooth .
here what i've tried so far but no luck :(
Please help and thanks in advance
Custom ListView Class
public class SingleScrollListView extends ListView {
private boolean mSingleScroll = false;
private VelocityTracker mVelocity = null;
final private float mEscapeVelocity = 2000.0f;
final private int mMinDistanceMoved = 20;
private float mStartY = 0;
public SingleScrollListView(Context context) {
super(context);
}
public SingleScrollListView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public SingleScrollListView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public void setSingleScroll(boolean aSingleScroll) {
mSingleScroll = aSingleScroll;
}
public int getVerticalScrollOffset() {
return getFirstVisiblePosition();
}
#Override
public boolean dispatchTouchEvent(MotionEvent aMotionEvent) {
if (aMotionEvent.getAction() == MotionEvent.ACTION_DOWN) {
if (mSingleScroll && mVelocity == null)
mVelocity = VelocityTracker.obtain();
mStartY = aMotionEvent.getY();
return super.dispatchTouchEvent(aMotionEvent);
}
if (aMotionEvent.getAction() == MotionEvent.ACTION_UP) {
if (mVelocity != null) {
if (Math.abs(aMotionEvent.getY() - mStartY) > mMinDistanceMoved) {
mVelocity.computeCurrentVelocity(1000);
float velocity = mVelocity.getYVelocity();
if (aMotionEvent.getY() > mStartY) {
// always lock
if (velocity > mEscapeVelocity) {
smoothScrollToPosition(getFirstVisiblePosition());
} else {
// lock if over half way there
View view = getChildAt(0);
if (view != null) {
if (view.getBottom() >= getHeight() / 2)
smoothScrollToPosition(getFirstVisiblePosition());
else
smoothScrollToPosition(getFirstVisiblePosition() + 1);
}
}
} else {
if (velocity < -mEscapeVelocity)
smoothScrollToPosition(getFirstVisiblePosition() + 1);
else {
// lock if over half way there
View view = getChildAt(1);
if (view != null) {
if (view.getTop() <= getHeight() / 2)
smoothScrollToPosition(getFirstVisiblePosition() + 1);
else
smoothScrollToPosition(getFirstVisiblePosition());
}
}
}
}
mVelocity.recycle();
}
mVelocity = null;
if (mSingleScroll) {
if (Math.abs(aMotionEvent.getY() - mStartY) > mMinDistanceMoved)
return super.dispatchTouchEvent(aMotionEvent);
} else
return super.dispatchTouchEvent(aMotionEvent);
}
if (mSingleScroll) {
if (mVelocity == null) {
mVelocity = VelocityTracker.obtain();
mStartY = aMotionEvent.getY();
}
mVelocity.addMovement(aMotionEvent);
}
return super.dispatchTouchEvent(aMotionEvent);
}
}
Custom Adapter
private class CarListAdapter extends ArrayAdapter<CarList> {
public CarListAdapter() {
super(MainActivity.this, R.layout.list_view_layout, listArray);
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View itemView = convertView;
if (itemView == null) {
itemView = getLayoutInflater().inflate(R.layout.list_view_layout, parent, false);
}
CarList data = listArray.get(position);
ImageView Image = (ImageView) itemView.findViewById(R.id.image_holder);
Image.setImageResource(data.getImageID());
return itemView;
}
}
List View Layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/image_holder"
android:layout_width="match_parent"
android:layout_height="400dp"
android:scaleType="centerCrop"
android:src="#drawable/car_1" />
I liked the UI of your app. For the Answer part I suggest you to use viewpager instead of ListView .
Which come to first real question how to make viewPager scroll vertical ?
Answer is :- override touch events and use use viewpager transformer to give illusion of vertical pager as described in this Answer.
I am just copying snippet here
/**
* Uses a combination of a PageTransformer and swapping X & Y coordinates
* of touch events to create the illusion of a vertically scrolling ViewPager.
*
* Requires API 11+
*
*/
public class VerticalViewPager extends ViewPager {
public VerticalViewPager(Context context) {
super(context);
init();
}
public VerticalViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
// The majority of the magic happens here
setPageTransformer(true, new VerticalPageTransformer());
// The easiest way to get rid of the overscroll drawing that happens on the left and right
setOverScrollMode(OVER_SCROLL_NEVER);
}
private class VerticalPageTransformer implements ViewPager.PageTransformer {
#Override
public void transformPage(View view, float position) {
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
} else if (position <= 1) { // [-1,1]
view.setAlpha(1);
// Counteract the default slide transition
view.setTranslationX(view.getWidth() * -position);
//set Y position to swipe in from top
float yPosition = position * view.getHeight();
view.setTranslationY(yPosition);
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
}
/**
* Swaps the X and Y coordinates of your touch event.
*/
private MotionEvent swapXY(MotionEvent ev) {
float width = getWidth();
float height = getHeight();
float newX = (ev.getY() / height) * width;
float newY = (ev.getX() / width) * height;
ev.setLocation(newX, newY);
return ev;
}
#Override
public boolean onInterceptTouchEvent(MotionEvent ev){
boolean intercepted = super.onInterceptTouchEvent(swapXY(ev));
swapXY(ev); // return touch coordinates to original reference frame for any child views
return intercepted;
}
#Override
public boolean onTouchEvent(MotionEvent ev) {
return super.onTouchEvent(swapXY(ev));
}
}
and it look like this
Now for second part of how to make textView used for cost is go up along with page swipe
You can use vertical view pager with textSwitcher
costNameSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
#Override
public android.view.View makeView() {
LayoutInflater inflater = LayoutInflater.from(getActivity());
TextView textView = (TextView) inflater.inflate(R.layout.offer_heading, null);
return textView;
}
});
costNameSwitcher.setInAnimation(getActivity(), R.anim.slide_in_up);
costNameSwitcher.setOutAnimation(getActivity(), R.anim.slide_out_up);
And on page switch change text in textswitcher like this
verticalViewPager
.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position,
float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageSelected(int position) {
costNameSwitcher.setText("Some Cost");
}
#Override
public void onPageScrollStateChanged(int state) {
}
});
Animations
slide_in_up
<?xml version="1.0" encoding="UTF-8"?>
<translate android:toYDelta="0%p" android:fromYDelta="100%p" android:duration="500" xmlns:android="http://schemas.android.com/apk/res/android"/>
slide_out_up
<?xml version="1.0" encoding="UTF-8"?>
<translate android:toYDelta="-100%p" android:fromYDelta="0%p" android:duration="500" xmlns:android="http://schemas.android.com/apk/res/android"/>
ViewPager with views
/**
* The Class slidingPagerAdapter.
*/
public class slidingPagerAdapter extends PagerAdapter {
private final List<HotOffer> listOfOffers;
private Context mContext;
private LayoutInflater mLayoutInflater;
/**
* Instantiates a new home slides pager adapter.
*
* #param context the context
* #param carousalImage
*/
public slidingPagerAdapter(Context context, List<HotOffer> carousalImage) {
mContext = context;
mLayoutInflater = (LayoutInflater) mContext
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
this.listOfOffers = carousalImage;
}
#Override
public int getCount() {
return listOfOffers.size();
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == ((FrameLayout) object);
}
#Override
public Object instantiateItem(ViewGroup container, final int position) {
final View itemView = mLayoutInflater.inflate(R.layout.carousal_page, container,
false);
Picasso.with(mContext)
.load(listOfOffers.get(position).getImageUrl())
.networkPolicy(NetworkPolicy.OFFLINE)
.fit()
.centerCrop()
.into((ImageView) itemView
.findViewById(R.id.image), new Callback() {
#Override
public void onSuccess() {
}
#Override
public void onError() {
// Try again online if cache failed
Picasso.with(mContext)
.load(listOfOffers.get(position).getImageUrl())
.fit()
.centerCrop()
.into((ImageView) itemView
.findViewById(R.id.image));
}
});
container.addView(itemView);
return itemView;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((FrameLayout) object);
}
}
Showing little bit of next/previous view
// Disable clip to padding
viewPager.setClipToPadding(false);
// set padding manually, the more you set the padding the more you see of prev & next page
viewPager.setPadding(40, 0, 40, 0);
Result :-
You dont need to set left padding ie use
viewPager.setPadding(40, 0, 0, 0);
Why dont you use vertical scrollable viewpager with fragments for this purpose.
I am copying this answer here for your reference.
You can use a ViewPager.PageTransformer to give the illusion of a vertical ViewPager. To achieve scrolling with a vertical instead of a horizontal drag you will have to override ViewPager's default touch events and swap the coordinates of MotionEvents prior to handling them, e.g.:
/**
* Uses a combination of a PageTransformer and swapping X & Y coordinates
* of touch events to create the illusion of a vertically scrolling ViewPager.
*
* Requires API 11+
*
*/
public class VerticalViewPager extends ViewPager {
public VerticalViewPager(Context context) {
super(context);
init();
}
public VerticalViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
// The majority of the magic happens here
setPageTransformer(true, new VerticalPageTransformer());
// The easiest way to get rid of the overscroll drawing that happens on the left and right
setOverScrollMode(OVER_SCROLL_NEVER);
}
private class VerticalPageTransformer implements ViewPager.PageTransformer {
#Override
public void transformPage(View view, float position) {
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
} else if (position <= 1) { // [-1,1]
view.setAlpha(1);
// Counteract the default slide transition
view.setTranslationX(view.getWidth() * -position);
//set Y position to swipe in from top
float yPosition = position * view.getHeight();
view.setTranslationY(yPosition);
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
}
/**
* Swaps the X and Y coordinates of your touch event.
*/
private MotionEvent swapXY(MotionEvent ev) {
float width = getWidth();
float height = getHeight();
float newX = (ev.getY() / height) * width;
float newY = (ev.getX() / width) * height;
ev.setLocation(newX, newY);
return ev;
}
#Override
public boolean onInterceptTouchEvent(MotionEvent ev){
boolean intercepted = super.onInterceptTouchEvent(swapXY(ev));
swapXY(ev); // return touch coordinates to original reference frame for any child views
return intercepted;
}
#Override
public boolean onTouchEvent(MotionEvent ev) {
return super.onTouchEvent(swapXY(ev));
}
}
Of course you can tweak these settings as you see fit.
Related
I have made an app in which I have added functionality of vertical swipe using ViewPager class. Now I need help to show Admob Interstitial ad after 5 swipes. I have seen several other SO question but could not get clarity.
Can anyone help me how can I do this? Here is my code:
MainActivity
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_mains);
mData = dbHelper.getAll(Data.class);
DATA_CARDS = mData.size();
ScreenSlidePagerAdapter screenSlidePagerAdapter = new ScreenSlidePagerAdapter(getSupportFragmentManager());
VerticalViewPager verticalViewPager = (VerticalViewPager) findViewById(R.id.pager);
verticalViewPager.setAdapter(screenSlidePagerAdapter);
}
ScreenSlidePagerAdapter
public class ScreenSlidePagerAdapter extends FragmentStatePagerAdapter {
private static final int NUM_PAGES = MainActivity.DATA_CARDS;
public ScreenSlidePagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
SlidingFragment slidingFragment = new SlidingFragment();
Bundle bundle = new Bundle();
bundle.putInt("position", position);
slidingFragment.setArguments(bundle);
return slidingFragment;
}
#Override
public int getCount() {
return NUM_PAGES;
}
}
VerticalViewPager
public class VerticalViewPager extends ViewPager {
public VerticalViewPager(Context context) {
super(context);
init();
}
public VerticalViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
setPageTransformer(true, new VerticalPageTransformer());]
setOverScrollMode(OVER_SCROLL_NEVER);
}
private class VerticalPageTransformer implements ViewPager.PageTransformer {
#Override
public void transformPage(View view, float position) {
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
} else if (position <= 1) { // [-1,1]
view.setAlpha(1);
// Counteract the default slide transition
view.setTranslationX(view.getWidth() * -position);
//set Y position to swipe in from top
float yPosition = position * view.getHeight();
view.setTranslationY(yPosition);
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
}
/**
* Swaps the X and Y coordinates of your touch event.
*/
private MotionEvent swapXY(MotionEvent ev) {
float width = getWidth();
float height = getHeight();
float newX = (ev.getY() / height) * width;
float newY = (ev.getX() / width) * height;
ev.setLocation(newX, newY);
return ev;
}
#Override
public boolean onInterceptTouchEvent(MotionEvent ev){
boolean intercepted = super.onInterceptTouchEvent(swapXY(ev));
swapXY(ev); // return touch coordinates to original reference frame for any child views
return intercepted;
}
#Override
public boolean onTouchEvent(MotionEvent ev) {
return super.onTouchEvent(swapXY(ev));
}
}
You can add the PageChangeListener to your view pager and call the onPageSelected() calls, for this you need to have class field called e.g. int mAdCounter = 0:
verticalViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageSelected(int position) {
mAdCount++;
if (mAdCount % 5 == 0) {
//Display your add
//It's better if you load the ad before you need to display it, you can hide the adview and load it
} else {
//Hide the adView
}
}
#Override
public void onPageScrollStateChanged(int state) {
}
});
I have a custom vertical view pager that extends view pager. now i want to include pagerTabStrip. Now the thing is it can be align either on top or bottom. But for this customized viewpager i need vertical pagertabstrip as the pages/fragments scrolls verticall.
Here is the code of VerticalViewPager
public class VerticalViewPager extends ViewPager {
public VerticalViewPager(Context context) {
super(context);
init();
}
public VerticalViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
// The majority of the magic happens here
setPageTransformer(true, new VerticalPageTransformer());
// The easiest way to get rid of the overscroll drawing that happens on the left and right
setOverScrollMode(OVER_SCROLL_NEVER);
}
private class VerticalPageTransformer implements ViewPager.PageTransformer {
#Override
public void transformPage(View view, float position) {
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
} else if (position <= 1) { // [-1,1]
view.setAlpha(1);
// Counteract the default slide transition
view.setTranslationX(view.getWidth() * -position);
//set Y position to swipe in from top
float yPosition = position * view.getHeight();
view.setTranslationY(yPosition);
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
}
/**
* Swaps the X and Y coordinates of your touch event.
*/
private MotionEvent swapXY(MotionEvent ev) {
float width = getWidth();
float height = getHeight();
float newX = (ev.getY() / height) * width;
float newY = (ev.getX() / width) * height;
ev.setLocation(newX, newY);
return ev;
}
#Override
public boolean onInterceptTouchEvent(MotionEvent ev){
boolean intercepted = super.onInterceptTouchEvent(swapXY(ev));
swapXY(ev); // return touch coordinates to original reference frame for any child views
return intercepted;
}
#Override
public boolean onTouchEvent(MotionEvent ev) {
return super.onTouchEvent(swapXY(ev));
}
}
The Xml for the VewPager is
<com.mypackage.customViews.VerticalViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="20dp"
android:scrollIndicators="top"
>
<android.support.v4.view.PagerTabStrip
android:id="#+id/pager_title_strip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout_gravity="right"
android:paddingBottom="#dimen/padding8"
android:paddingTop="#dimen/padding8"
android:textColor="#color/link_color" />
</com.TCYonline.android.BetterThink.customViews.VerticalViewPager>
Please help me out.
link check this news app, i want to develop like this.
i want swipe up/down side effect..
i tried this code,but not correctly swiping as i want.
in this code when i swipe up/down,only the text is changing not a layout.
public class ArticlesActivity extends Activity implements GestureDetector.OnGestureListener{
ImageView image,imageArticle;
TextView tv1,tv2,tv3;
private GestureDetector gd;
LinearLayout layout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_articles);
//Creating GestureDetector Object
gd = new GestureDetector(this, this);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
// TODO Auto-generated method stub
//Registering TouchEvent with GestureDetector
return gd.onTouchEvent(event);
}
#Override
public void onBackPressed() {
// TODO Auto-generated method stub
//Destroying Activity
finish();
}
#Override
public boolean onDown(MotionEvent arg0) {
// TODO Auto-generated method stub
return false;
}
#Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
// TODO Auto-generated method stub
//Defining Sensitivity
float sensitivity = 50;
//Swipe Up Check
if(e1.getY() - e2.getY() > sensitivity){
//Setting Image Resource to Up_Arrow on Swipe Up
tv1.setText("Some Text");
tv2.setText("Some Text");
tv3.setText("Some Text");
image.setImageResource(R.drawable.logo);
imageArticle.setImageResource(R.drawable.ic_launcher);
return true;
}
//Swipe Down Check
else if(e2.getY() - e1.getY() > sensitivity){
//Setting Image Resource to Down_Arrow on Swipe Down
tv1.setText("Some Text");
tv2.setText("Some Text");
tv3.setText("Some Text");
image.setImageResource(R.drawable.ic_launcher);
imageArticle.setImageResource(R.drawable.logo);
return true;
}
else{
//If some error occurrs, setting again to Default_Image (Actually it will never happen in this case)
image.setImageResource(R.drawable.logo);
return true;
}
}
#Override
public void onLongPress(MotionEvent arg0) {
// TODO Auto-generated method stub
}
#Override
public boolean onScroll(MotionEvent arg0, MotionEvent arg1, float arg2,
float arg3) {
// TODO Auto-generated method stub
return false;
}
#Override
public void onShowPress(MotionEvent arg0) {
// TODO Auto-generated method stub
}
#Override
public boolean onSingleTapUp(MotionEvent arg0) {
// TODO Auto-generated method stub
return false;
}
}
This will work like inshorts app
main.xml
<com.cardviewanimation.VerticalViewPager
android:id="#+id/verticleViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
content_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:id="#+id/card_view"
android:layout_gravity="center"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
card_view:cardCornerRadius="2dp"
card_view:contentPadding="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="300dp"
android:src="#drawable/background"
android:scaleType="fitXY"/>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
VerticleViewPagerActivity.java
public class VerticleViewPagerActivity extends AppCompatActivity {
VerticalViewPager verticalViewPager;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
verticalViewPager = (VerticalViewPager) findViewById(R.id.verticleViewPager);
verticalViewPager.setAdapter(new VerticlePagerAdapter(this));
}
}
VerticlePagerAdapter.java
public class VerticlePagerAdapter extends PagerAdapter {
String mResources[] = {"To start off lets understand what exactly Android CardView is? Its a new widget for Android, which can be used to display a card sort of a layout in android. As you may know Android material design is inspired from paper and ink concept. Mostly it displays views on top of each other, with shadows. In simple terms, Android CardView is such a view which has all material design properties, most importantly showing shadows according the elevation. The best part about this view is that it extends FrameLayout and it can be displayed on all the platforms of android since it’s available through the Support v7 library. Lets have a look at some of its properties:","To start off lets understand what exactly Android CardView is? Its a new widget for Android, which can be used to display a card sort of a layout in android. As you may know Android material design is inspired from paper and ink concept. Mostly it displays views on top of each other, with shadows. In simple terms, Android CardView is such a view which has all material design properties, most importantly showing shadows according the elevation. The best part about this view is that it extends FrameLayout and it can be displayed on all the platforms of android since it’s available through the Support v7 library. Lets have a look at some of its properties:"};
Context mContext;
LayoutInflater mLayoutInflater;
public VerticlePagerAdapter(Context context) {
mContext = context;
mLayoutInflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
#Override
public int getCount() {
return mResources.length;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == ((LinearLayout) object);
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
View itemView = mLayoutInflater.inflate(R.layout.content_main, container, false);
TextView label = (TextView) itemView.findViewById(R.id.textView);
label.setText(mResources[position]);
container.addView(itemView);
return itemView;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((LinearLayout) object);
}
}
VerticalViewPager.java
public class VerticalViewPager extends ViewPager {
public VerticalViewPager(Context context) {
super(context);
init();
}
public VerticalViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
// The majority of the magic happens here
setPageTransformer(true, new VerticalPageTransformer());
// The easiest way to get rid of the overscroll drawing that happens on the left and right
setOverScrollMode(OVER_SCROLL_NEVER);
}
private class VerticalPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.75f;
#Override
public void transformPage(View view, float position) {
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
} else if (position <= 0) { // [-1,0]
// Use the default slide transition when moving to the left page
view.setAlpha(1);
// Counteract the default slide transition
view.setTranslationX(view.getWidth() * -position);
//set Y position to swipe in from top
float yPosition = position * view.getHeight();
view.setTranslationY(yPosition);
view.setScaleX(1);
view.setScaleY(1);
} else if (position <= 1) { // [0,1]
view.setAlpha(1);
// Counteract the default slide transition
view.setTranslationX(view.getWidth() * -position);
// Scale the page down (between MIN_SCALE and 1)
float scaleFactor = MIN_SCALE
+ (1 - MIN_SCALE) * (1 - Math.abs(position));
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
}
/**
* Swaps the X and Y coordinates of your touch event.
*/
private MotionEvent swapXY(MotionEvent ev) {
float width = getWidth();
float height = getHeight();
float newX = (ev.getY() / height) * width;
float newY = (ev.getX() / width) * height;
ev.setLocation(newX, newY);
return ev;
}
#Override
public boolean onInterceptTouchEvent(MotionEvent ev){
boolean intercepted = super.onInterceptTouchEvent(swapXY(ev));
swapXY(ev); // return touch coordinates to original reference frame for any child views
return intercepted;
}
#Override
public boolean onTouchEvent(MotionEvent ev) {
return super.onTouchEvent(swapXY(ev));
}
}
I got the solution for your problem as inshorts app using vertical view pager. I am sharing some code that can serve your purpose.
public class VerticalViewPager extends ViewPager {
public VerticalViewPager(Context context) {
this(context, null);
}
public VerticalViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
setPageTransformer(false, new DefaultTransformer());
}
private MotionEvent swapTouchEvent(MotionEvent event) {
float width = getWidth();
float height = getHeight();
float swappedX = (event.getY() / height) * width;
float swappedY = (event.getX() / width) * height;
event.setLocation(swappedX, swappedY);
return event;
}
#Override
public boolean onInterceptTouchEvent(MotionEvent event) {
boolean intercept = super.onInterceptTouchEvent(swapTouchEvent(event));
//If not intercept, touch event should not be swapped.
swapTouchEvent(event);
return intercept;
}
#Override
public boolean onTouchEvent(MotionEvent ev) {
return super.onTouchEvent(swapTouchEvent(ev));
}
}
As you can see the class above uses the DefaultTransformer class for transformation which implement ViewPager.PageTransformer for custom animation this class code is given below
public class DefaultTransformer implements ViewPager.PageTransformer {
#Override
public void transformPage(View view, float position) {
float alpha = 0;
if (0 <= position && position <= 1) {
alpha = 1 - position;
} else if (-1 < position && position < 0) {
alpha = position + 1;
}
System.out.println("alpha--" + alpha);
view.setAlpha(alpha);
System.out.println("position--" + position);
System.out.println("view.getWidth()--" + view.getWidth());
view.setTranslationX(view.getWidth() * -position);
float yPosition = position * view.getHeight();
System.out.println("yPosition---"+yPosition);
view.setTranslationY(yPosition);
}
}
and my activity code is like this
public class SwipeUpActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_swipe_layout);
setTitle("");
initViewPager();
}
private void initViewPager() {
VerticalViewPager viewPager = (VerticalViewPager) findViewById(R.id.vertical_viewpager);
//viewPager.setPageTransformer(false, new ZoomOutTransformer());
//viewPager.setPageTransformer(true, new StackTransformer());
String title = "ContentFragment";
viewPager.setAdapter(new ContentFragmentAdapter.Holder(getSupportFragmentManager())
.add(ContentFragment.newInstance(title, 1))
.add(ContentFragment.newInstance(title, 2))
.add(ContentFragment.newInstance(title, 3))
.add(ContentFragment.newInstance(title, 4))
.add(ContentFragment.newInstance(title, 5))
.set());
//If you setting other scroll mode, the scrolled fade is shown from either side of display.
viewPager.setOverScrollMode(View.OVER_SCROLL_NEVER);
}
The layout named activity_swipe_layout is like this
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="#A6000000"
android:layout_height="match_parent">
<gmaillogindemo.com.irk.transforms.VerticalViewPager
android:id="#+id/vertical_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
and the result is looking like this:
after swipe up
I need to create the following layout to my viewpager:
I'm using PageContainer:
public class PagerContainer extends FrameLayout implements ViewPager.OnPageChangeListener{
private ViewPager mPager;
boolean mNeedsRedraw = false;
public PagerContainer(Context context)
{
super(context);
init();
}
public PagerContainer(Context context, AttributeSet attrs)
{
super(context, attrs);
init();
}
public PagerContainer(Context context, AttributeSet attrs, int defStyle)
{
super(context, attrs, defStyle);
init();
}
private void init()
{
// Disable clipping of children so non-selected pages are visible
setClipChildren(false);
// Child clipping doesn't work with hardware acceleration in Android
// 3.x/4.x
// You need to set this value here if using hardware acceleration in an
// application targeted at these releases.
setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}
#Override
protected void onFinishInflate()
{
try
{
mPager = (ViewPager) getChildAt(0);
mPager.setOnPageChangeListener(this);
} catch (Exception e)
{
throw new IllegalStateException("The root child of PagerContainer must be a ViewPager");
}
}
public ViewPager getViewPager()
{
return mPager;
}
private Point mCenter = new Point();
private Point mInitialTouch = new Point();
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh)
{
mCenter.x = w / 2;
mCenter.y = h / 2;
}
#Override
public boolean onTouchEvent(MotionEvent ev)
{
// We capture any touches not already handled by the ViewPager
// to implement scrolling from a touch outside the pager bounds.
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
mInitialTouch.x = (int) ev.getX();
mInitialTouch.y = (int) ev.getY();
default:
ev.offsetLocation(mCenter.x - mInitialTouch.x, mCenter.y - mInitialTouch.y);
break;
}
return mPager.dispatchTouchEvent(ev);
}
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels)
{
// Force the container to redraw on scrolling.
// Without this the outer pages render initially and then stay static
if (mNeedsRedraw)
invalidate();
}
#Override
public void onPageSelected(int position)
{}
#Override
public void onPageScrollStateChanged(int state)
{
mNeedsRedraw = (state != ViewPager.SCROLL_STATE_IDLE);
}
`
And seting like this:
PagerContainer mContainer = (PagerContainer) mainView.findViewById(R.id.pagerContainer);
pager = mContainer.getViewPager();
pager.setOffscreenPageLimit(pagerAdapter.getCount());
pager.setPageMargin(getPx(20));
pager.setClipChildren(false);
But the side pages has the same size of the active page.
I've tried to use pager.setPageMargin but only sets margim between pages.
Can someone help me?
you need a PageTransfomer for that the changes the scale of the page on the left and on the right of the central one. When you implement the interface you'll be forced to implement the
public void transformPage (View page, float position) {
}
page is the current ViewPager's page, while float position is the position of page relative to the current center position of the pager. What you probably want is to change the scaleX and scaleY of page, when position is grater then 1 or less then -1. E.g.
public void transformPage (View page, float position) {
if (position > 1 || position < -1) {
ViewCompat.scaleX(page, 0.75f * paget.getWidth());
ViewCompat.scaleY(page, 0.75f * paget.getHeight());
} else if (position == 0) {
ViewCompat.scaleX(page, 1f);
ViewCompat.scaleY(page, 1f);
}
}
I have not the possibility to try it out so, please check for typo/cast.
I've tried to implement swiperefreshlayout in my code but it keeps refreshing the entire pager instead of just refreshing when i'm on the first Fragment i.e the 0th Fragment.
I tried setting refresh to false as shown, but the loader still appears, and doesn't reset when I go back to the 0th Fragment again.
On setting swiperefreshlayout.enable(false), I can't refresh it anywhere.
Can anyone suggest an alternative?
This is my XML file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/parentLinearLayout"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipe_refresh_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<lbbdapp.littleblackbook.com.littleblackbook.Support.VerticalViewPager
android:id="#+id/verticalViewPager"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</ScrollView>
</android.support.v4.widget.SwipeRefreshLayout>
</LinearLayout>
And this is my activity:
public class FeedActivity extends ActionBarActivity {
PageAdapter mPageAdapter;
ProgressBar mProgressBar;
ProgressDialog prog;
ViewPager pager;
String article_id;
private float x1, x2;
SwipeRefreshLayout mSwipeRefreshLayout;
ArrayList<FragmentObject> mObjectsDataList;
ArrayList<ArticleObject> mArticleDataList=new ArrayList<ArticleObject>();
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.feed_layout);
mObjectsDataList = new ArrayList<FragmentObject>();
DataFetcherTask myTask = new DataFetcherTask();
myTask.execute();
mSwipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.swipe_refresh_layout);
mSwipeRefreshLayout.setColorScheme(android.R.color.holo_blue_bright,
android.R.color.holo_blue_dark,
android.R.color.holo_purple,
android.R.color.darker_gray);
pager=(ViewPager)findViewById(R.id.verticalViewPager);
mSwipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
#Override
public void onRefresh() {
if(pager.getCurrentItem()==0) {
Log.wtf("current item is 0", "0");
mSwipeRefreshLayout.setRefreshing(true);
Log.wtf("Swiping", "Refreshing");
(new Handler()).postDelayed(new Runnable() {
#Override
public void run() {
mSwipeRefreshLayout.setRefreshing(false);
DataFetcherTask myTask = new DataFetcherTask();
myTask.execute();
}
}, 3000);
}
else{
mSwipeRefreshLayout.setRefreshing(false);
}
}
});
}
This is my vertical ViewPager:
public class VerticalViewPager extends ViewPager {
public VerticalViewPager(Context context) {
super(context);
init();
}
public VerticalViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
// The majority of the magic happens here
setPageTransformer(true, new VerticalPageTransformer());
// The easiest way to get rid of the overscroll drawing that happens on the left and right
setOverScrollMode(OVER_SCROLL_NEVER);
}
private class VerticalPageTransformer implements ViewPager.PageTransformer {
#Override
public void transformPage(View view, float position) {
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
} else if (position <= 1) { // [-1,1]
view.setAlpha(1);
// Counteract the default slide transition
view.setTranslationX(view.getWidth() * -position);
//set Y position to swipe in from top
float yPosition = position * view.getHeight();
view.setTranslationY(yPosition);
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
}
/**
* Swaps the X and Y coordinates of your touch event.
*/
private MotionEvent swapXY(MotionEvent ev) {
float width = getWidth();
float height = getHeight();
float newX = (ev.getY() / height) * width;
float newY = (ev.getX() / width) * height;
ev.setLocation(newX, newY);
return ev;
}
#Override
public boolean onInterceptTouchEvent(MotionEvent ev){
boolean intercepted = super.onInterceptTouchEvent(swapXY(ev));
swapXY(ev); // return touch coordinates to original reference frame for any child views
return intercepted;
}
#Override
public boolean onTouchEvent(MotionEvent ev) {
return super.onTouchEvent(swapXY(ev));
}
}
Instead of extending SwipeRefesh over ViewGroup use it inside the each Fragment of ViewPager.
Once this is resolved now you need to check scroll down gesture of ViewPager and SwipeRefresh.
public class NEWSwipeRefresh extends SwipeRefreshLayout {
private View mTargetView;
public NEWSwipeRefresh(Context context) {
this(context, null);
}
public NEWSwipeRefresh(Context context, AttributeSet attrs) {
super(context, attrs);
}
public void setTarget(View view) {
mTargetView = view;
}
#Override
public boolean canChildScrollUp() {
if (mTargetView instanceof YOURVIEW) {
final StaggeredGridView absListView = (YOURVIEW)mTargetView;
return absListView.getChildCount() > 0
&& (absListView.getFirstVisiblePosition() > 0 || absListView
.getChildAt(0).getTop() < absListView
.getPaddingTop());
} else {
return super.canChildScrollUp();
}
}
}
Normally swipe refresh returns -1 and it gives swipe gesture to it's parent now I have overridden it here for listview/gridview so that it can check for visible items, if it is on top then it will give swipe to parent or otherwise it will give it to children.
Well, I was trying to figure this out since few days and it's quite simple. Just put the SwipeRefreshLayout as the parent element of ViewPager and just disable the SwipeRefreshLayout on the particular fragment using OnPageChangeListener as follows:
// viewpager change listener
OnPageChangeListener viewPagerPageChangeListener = new OnPageChangeListener() {
#Override
public void onPageSelected(int position) {
//for the 0th pos disable SwipeRefreshLayout;
if(position != 0){
swipeRefreshLayout.setEnabled(false);
}else swipeRefreshLayout.setEnabled(true);
}
#Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
#Override
public void onPageScrollStateChanged(int arg0) {
}};