I have a Custom ViewPager which act like a Carousel, the thing is I want to be able to show multiple page on one. To do so we have 2 solutions :
Using the margins setPageMargin() method
Or we can use Override the getPageWidth method of the adapter of my ViewPager.
The first solution is working great but I want to be able to precise exactly the percentage of my current page. The thing is with the getPageWidth solution my current page is shifting at the left. It's logical because she only takes 80% of her previous size. So I tried to override the scrollTo function of my custom ViewPager like this :
#Override
public void scrollTo(int x, int y) {
x = (int) (x - (getWidth() - getWidth()*getAdapter().getPageWidth(getCurrentItem()))/2);
super.scrollTo(x, y);
}
It's working but I can't scroll as before, it's just acting really weird, don't go in the good direction, don't follow the finger... Is there any solution which allow me to have a working scroll and a centered current page ?
Here is my adapter :
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import java.util.ArrayList;
public class CarouselAdapter extends FragmentPagerAdapter implements ViewPager.OnPageChangeListener {
private ArrayList<Entity> mData = new ArrayList<>();
private ScaledRelativeLayout cur = null, next = null;
private float scale;
private MainActivity context;
private FragmentManager fragmentManager;
public CarouselAdapter(MainActivity context, FragmentManager fragmentManager, ArrayList<Entity> mData) {
super(fragmentManager);
this.fragmentManager = fragmentManager;
this.context = context;
this.mData = mData;
}
#Override
public float getPageWidth(int position) {
return (0.85f);
}
#Override
public Fragment getItem(int position) {
if (position == MainActivity.FIRST_PAGE) {
scale = MainActivity.BIG_SCALE;
} else {
scale = MainActivity.SMALL_SCALE;
}
position = position % mData.size();
Fragment fragment = CarouselFragment.newInstance(context, mData.get(position), position, scale);
return fragment;
}
#Override
public int getCount() {
return mData.size();
}
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
if (positionOffset >= 0f && positionOffset <= 1f) {
cur = getRootView(position);
cur.setScaleBoth(MainActivity.BIG_SCALE - MainActivity.DIFF_SCALE * positionOffset);
if (position < mData.size()-1) {
next = getRootView(position +1);
next.setScaleBoth(MainActivity.SMALL_SCALE + MainActivity.DIFF_SCALE * positionOffset);
}
}
}
#Override
public void onPageSelected(int position) {}
#Override
public void onPageScrollStateChanged(int state) {}
private ScaledRelativeLayout getRootView(int position) {
return (ScaledRelativeLayout) fragmentManager.findFragmentByTag(this.getFragmentTag(position)).getView().findViewById(R.id.rootItem);
}
private String getFragmentTag(int position) {
return "android:switcher:" + context.carousel.getId() + ":" + position;
}
}
More useless but here is my MainActivity :
import android.support.v4.app.FragmentActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Button;
import java.util.ArrayList;
public class MainActivity extends FragmentActivity {
public static int FIRST_PAGE;
public final static float BIG_SCALE = 1.0f;
public final static float SMALL_SCALE = 0.85f;
public final static float DIFF_SCALE = BIG_SCALE - SMALL_SCALE;
public CarouselViewPager carousel;
private CarouselAdapter carouselAdapter;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
FIRST_PAGE = mData.size()/2;
carouselAdapter = new CarouselAdapter(this, this.getSupportFragmentManager(), mData);
carousel = (CarouselViewPager) findViewById(R.id.carousel);
carousel.setAdapter(carouselAdapter);
carousel.addOnPageChangeListener(carouselAdapter);
carousel.setCurrentItem(Math.round(FIRST_PAGE));
carousel.setOffscreenPageLimit(3);
carousel.setClipToPadding(false);
carousel.setScrollDurationFactor(2.5f);
}
}
Edit :
root.post(new Runnable() {
#Override
public void run() {
int width = root.getWidth();
Log.w("Post", "Width : " + width + ", newWidth : " + (width * 0.8));
// root.setPadding((int) (width * 0.125), 0, (int) (width * 0.125), 0);
ViewPager.LayoutParams params = (ViewPager.LayoutParams) root.getLayoutParams();
params.width = (int) (width * 0.8);
root.setLayoutParams(params);
root.requestLayout();
root.forceLayout();
root.invalidate();
}
});
Regards
Instead of setPageMargin or getPageWidth You can just set padding to your ViewPager.
<android.support.v4.view.ViewPager
android:id="#+id/main_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:clipToPadding="false" />
Notice the clipToPadding part, it is important to show other pages.
If you want to show your width as x% of the screen, you can do this in Java
mRootView.post(new Runnable() {
#Override
public void run() {
int w = mRootView.getWidth();
mViewPager.setPadding(w * 0.25, 0, w * 0.25, 0);
// 25% padding on either side so pages takes exactly 50% space
}
});
Related
Want to create the view pager same as following UI, applied custom transformer but not working.
ViewPager.java
public class MyViewPager extends ViewPager implements ViewPager.PageTransformer {
public static final String TAG = "MyViewPager";
private float MAX_SCALE = 0.0f;
private int mPageMargin;
private boolean animationEnabled=true;
private boolean fadeEnabled=false;
private float fadeFactor=0.5f;
public MyViewPager(Context context) {
this(context, null);
}
public MyViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
// clipping should be off on the pager for its children so that they can scale out of bounds.
setClipChildren(false);
setClipToPadding(false);
// to avoid fade effect at the end of the page
setOverScrollMode(2);
setPageTransformer(false, this);
setOffscreenPageLimit(3);
mPageMargin = dp2px(context.getResources(), 50);
setPadding(mPageMargin, mPageMargin, mPageMargin, mPageMargin);
}
public int dp2px(Resources resource, int dp) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, resource.getDisplayMetrics());
}
public void setAnimationEnabled(boolean enable) {
this.animationEnabled = enable;
}
public void setFadeEnabled(boolean fadeEnabled) {
this.fadeEnabled = fadeEnabled;
}
public void setFadeFactor(float fadeFactor) {
this.fadeFactor = fadeFactor;
}
#Override
public void setPageMargin(int marginPixels) {
mPageMargin = marginPixels;
// setPadding(mPageMargin, mPageMargin, mPageMargin, mPageMargin);
}
#Override
public void transformPage(View page, float position) {
if (mPageMargin <= 0|| !animationEnabled)
return;
page.setPadding(mPageMargin / 3, mPageMargin / 3, mPageMargin / 3, mPageMargin / 3);
if (MAX_SCALE == 0.0f && position > 0.0f && position < 1.0f) {
MAX_SCALE = position;
}
position = position - MAX_SCALE;
float absolutePosition = Math.abs(position);
if (position <= -1.0f || position >= 1.0f) {
if(fadeEnabled)
page.setAlpha(fadeFactor);
// Page is not visible -- stop any running animations
} else if (position == 0.0f) {
// Page is selected -- reset any views if necessary
page.setScaleX((1 + MAX_SCALE));
page.setScaleY((1 + MAX_SCALE));
page.setAlpha(1);
} else {
page.setScaleX(1 + MAX_SCALE * (1 - absolutePosition));
page.setScaleY(1 + MAX_SCALE * (1 - absolutePosition));
if(fadeEnabled)
page.setAlpha( Math.max(fadeFactor, 1 - absolutePosition));
}
}
}
UPDATE - if you want to make current page zoom use below PageTransformer
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;
public class JavaActivity extends AppCompatActivity {
ViewPager2 myViewPager2;
MyAdapter MyAdapter;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_java);
myViewPager2 = findViewById(R.id.viewpager);
MyAdapter = new MyAdapter(this);
myViewPager2.setOrientation(ViewPager2.ORIENTATION_HORIZONTAL);
myViewPager2.setAdapter(MyAdapter);
myViewPager2.setOffscreenPageLimit(3);
float pageMargin = getResources().getDimensionPixelOffset(R.dimen.pageMargin);
float pageOffset = getResources().getDimensionPixelOffset(R.dimen.offset);
myViewPager2.setPageTransformer((page, position) -> {
float myOffset = position * -(2 * pageOffset + pageMargin);
if (position < -1) {
page.setTranslationX(-myOffset);
} else if (position <= 1) {
float scaleFactor = Math.max(0.7f, 1 - Math.abs(position - 0.14285715f));
page.setTranslationX(myOffset);
page.setScaleY(scaleFactor);
page.setAlpha(scaleFactor);
} else {
page.setAlpha(0);
page.setTranslationX(myOffset);
}
});
}
}
OUTPUT
NOTE: you can download complete code from my GitHub repositories
Try this way
JavaActivity
import android.os.Bundle;
import android.view.View;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.view.ViewCompat;
import androidx.viewpager2.widget.ViewPager2;
public class JavaActivity extends AppCompatActivity {
ViewPager2 myViewPager2;
MyAdapter MyAdapter;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_java);
myViewPager2 = findViewById(R.id.viewpager);
MyAdapter = new MyAdapter(this);
myViewPager2.setOrientation(ViewPager2.ORIENTATION_HORIZONTAL);
myViewPager2.setAdapter(MyAdapter);
myViewPager2.setOffscreenPageLimit(3);
float pageMargin= getResources().getDimensionPixelOffset(R.dimen.pageMargin);
float pageOffset = getResources().getDimensionPixelOffset(R.dimen.offset);
myViewPager2.setPageTransformer(new ViewPager2.PageTransformer() {
#Override
public void transformPage(#NonNull View page, float position) {
float myOffset = position * -(2 * pageOffset + pageMargin);
if (myViewPager2.getOrientation() == ViewPager2.ORIENTATION_HORIZONTAL) {
if (ViewCompat.getLayoutDirection(myViewPager2) == ViewCompat.LAYOUT_DIRECTION_RTL) {
page.setTranslationX(-myOffset);
} else {
page.setTranslationX(myOffset);
}
} else {
page.setTranslationY(myOffset);
}
}
});
}
}
activity_java layout file
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".JavaActivity">
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/viewpager"
android:clipToPadding="false"
android:clipChildren="false"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
>
MyAdapter
import android.content.Context;
import android.graphics.Color;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {
private Context context;
public MyAdapter(Context context) {
this.context = context;
}
#NonNull
#Override
public MyViewHolder onCreateViewHolder(#NonNull ViewGroup parent, int viewType) {
View view = LayoutInflater.from(context).inflate(R.layout.row_item, parent, false);
return new MyViewHolder(view);
}
#Override
public void onBindViewHolder(#NonNull MyViewHolder holder, int position) {
holder.tvName.setText(String.format("Row number%d", position));
if (position % 2 ==0){
holder.imgBanner.setBackgroundColor(Color.RED);
}else {
holder.imgBanner.setBackgroundColor(Color.GREEN);
}
}
#Override
public int getItemCount() {
return 15;
}
public class MyViewHolder extends RecyclerView.ViewHolder {
TextView tvName;
ImageView imgBanner;
public MyViewHolder(#NonNull View itemView) {
super(itemView);
tvName = itemView.findViewById(R.id.tvName);
imgBanner = itemView.findViewById(R.id.imgBanner);
}
}
}
row_item layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_marginLeft="#dimen/pageMarginAndOffset"
android:layout_marginRight="#dimen/pageMarginAndOffset"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/imgBanner"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorAccent"
android:contentDescription="#string/app_name"/>
<TextView
android:id="#+id/tvName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:layout_centerInParent="true"
android:textColor="#android:color/white"
android:textSize="20sp"
android:textStyle="bold"
tools:text="Hello"/>
</RelativeLayout>
OUTPUT
Using ViewPager2 (that has RecyclerView in it).
vp2 is instance of ViewPager2
This worked for me:
RecyclerView rv = (RecyclerView) vp2.getChildAt(0);
rv.setPadding(80, 0, 80, 0);
rv.setClipToPadding(false);
I used FragmentStateAdapter for it and overriding getItemId() and containsItem() for add/remove fragments.
result is here:
You can make use of clipToPadding and programmatically adding the pageMargin and padding to your viewpager.
Try something like this-
viewpager.setClipToPadding(false);
viewpager.setPadding(40, 0, 70, 0);
viewpager.setPageMargin(20);
I have already implemented Carousel Viewpager ...but I m stuck at one point.
There is 10 image item in ArrayList ...First 3 item (0,1,2 position) are showing and we can scroll horizontally one by one
What I want, When I click on first position i.e, 0 it should go position 1 and when I click on position 2, it should come position 1.
How can I achieve this?enter image description here
Method in mainActivity
private void showDrinkList() {
try {
DisplayMetrics metrics = new DisplayMetrics();
Objects.requireNonNull(getActivity()).getWindowManager().getDefaultDisplay().getMetrics(metrics);
int pageMargin = ((metrics.widthPixels / 3) * 2);
pager.setPageMargin(-pageMargin);
CarouselPagerAdapter adapter = new CarouselPagerAdapter(context,this.getChildFragmentManager(), this.getChildFragmentManager(), pager, drinkLists);
pager.setAdapter(adapter);
pager.addOnPageChangeListener(adapter);
if (drinkLists.size() > 1)
pager.setCurrentItem(1);
pager.setOffscreenPageLimit(3);
pager.setHorizontalScrollBarEnabled(true);
} catch (Exception e) {
e.printStackTrace();
} }
Carousel Adapter -
import android.content.Context;
import android.graphics.Interpolator;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.Log;
import android.widget.Toast;
import java.lang.reflect.Field;
import java.util.List;
import ae.frink.android.R;
import ae.frink.android.app.customDialog.RedeemDialog;
import ae.frink.android.model.BeanDrinkImage;
import ae.frink.android.utils.FixedSpeedScroller;
import ae.frink.android.utils.ViewPagerCustomDuration;
public class CarouselPagerAdapter extends FragmentPagerAdapter implements ViewPager.OnPageChangeListener {
public final static float BIG_SCALE = 0.8f;
private final static float SMALL_SCALE = 0.4f;
private final static float DIFF_SCALE = BIG_SCALE - SMALL_SCALE;
private FragmentManager context;
private Context c;
private FragmentManager fragmentManager;
private float scale;
public static ViewPager viewPager;
private List<BeanDrinkImage.DrinkList> drinkLists;
private CarouselPagerAdapter adapter;
//private ItemFragment itemFragment;
public CarouselPagerAdapter(Context c, FragmentManager context, FragmentManager fm, ViewPager viewPager,
List<BeanDrinkImage.DrinkList> drinkLists) {
super(fm);
this.fragmentManager = fm;
this.context = context;
this.c = c;
// this.itemFragment = new ItemFragment(drinkLists);
this.viewPager = viewPager;
this.drinkLists = drinkLists;}
#Override
public Fragment getItem(int position) {
// make the first pager bigger than others
try {
if (position == 0) //BarInformationFrag.FIRST_PAGE)
scale = SMALL_SCALE;
else if(position == 1)
scale = BIG_SCALE;
else if(position == 2)
scale = SMALL_SCALE;
else
scale = SMALL_SCALE;
position = position % drinkLists.size();
} catch (Exception e) {
e.printStackTrace();
}
Log.e("drinkSize", "....----" + drinkLists.size());
// ItemFragment itemFragment = new ItemFragment();
return ItemFragment.newInstance(context, position, scale, drinkLists);
}
#Override
public int getCount() {
// int count = 0;
// try {
// count = BarInformationFrag.count * BarInformationFrag.LOOPS;
// } catch (Exception e) {
// // TODO: handle exception
// e.printStackTrace();
// }
// return count;
return drinkLists.size();
}
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
try {
if (positionOffset >= 0f && positionOffset <= 1f) {
CarouselLinearLayout cur = getRootView(position);
CarouselLinearLayout next = getRootView(position + 1);
cur.setScaleBoth(BIG_SCALE - DIFF_SCALE * positionOffset);
next.setScaleBoth(SMALL_SCALE + DIFF_SCALE * positionOffset);
}
} catch (Exception e) {
e.printStackTrace();
}
}
#Override
public void onPageSelected(int position) {
}
#Override
public void onPageScrollStateChanged(int state) {
}
#SuppressWarnings("ConstantConditions")
private CarouselLinearLayout getRootView(int position) {
return (CarouselLinearLayout) fragmentManager.findFragmentByTag(this.getFragmentTag(position))
.getView().findViewById(R.id.root_container);
}
private String getFragmentTag(int position) {
return "android:switcher:" + viewPager.getId() + ":" + position;
}
#Override
public int getItemPosition(Object object) {
return POSITION_NONE;
}
}
Carousel Linear Layout -
import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.widget.LinearLayout;
public class CarouselLinearLayout extends LinearLayout {
private float scale = CarouselPagerAdapter.BIG_SCALE;
// private float scale = .5f;
public CarouselLinearLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CarouselLinearLayout(Context context) {
super(context);
}
public void setScaleBoth(float scale) {
this.scale = scale;
this.invalidate();
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// The main mechanism to display scale animation, you can customize it as your needs
int w = this.getWidth();
int h = this.getHeight();
canvas.scale(scale, scale, w / 2, h / 2);
}
}
item Fragment -
import android.annotation.SuppressLint;
import android.content.Context;
import android.content.SharedPreferences;
import android.os.Bundle;
import android.preference.PreferenceManager;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;
import com.squareup.picasso.Picasso;
import java.util.ArrayList;
import java.util.List;
import java.util.Objects;
import ae.frink.android.R;
import ae.frink.android.app.customDialog.RedeemDialog;
import ae.frink.android.connection.ApiClient;
import ae.frink.android.model.BeanDrinkImage;
import static ae.frink.android.Carousel.CarouselPagerAdapter.viewPager;
public class ItemFragment extends Fragment {
private static final String POSITON = "position";
private static final String SCALE = "scale";
private static final String DRAWABLE_RESOURE = "resource";
private static final String DRINK_LIST = "drinkList";
private List<BeanDrinkImage.DrinkList> dL;
private static final String IMAGE = "image";
public ArrayList<Integer> imageArray;
private Context context;
private List<BeanDrinkImage.DrinkList> drinkLists;
private SharedPreferences sharedPreferences;
private int screenWidth;
private int screenHeight;
/* private int[] imageArray = new int[]{R.drawable.cocktail_lime_gin_fizz_1, R.drawable.cocktail_lime_gin_fizz_1,
R.drawable.cocktail_lime_gin_fizz_1, R.drawable.cocktail_lime_gin_fizz_1, R.drawable.cocktail_lime_gin_fizz_1,
R.drawable.cocktail_lime_gin_fizz_1, R.drawable.cocktail_lime_gin_fizz_1, R.drawable.cocktail_lime_gin_fizz_1,
R.drawable.cocktail_lime_gin_fizz_1, R.drawable.cocktail_lime_gin_fizz_1};
*/
public ItemFragment() {
}
/*
#SuppressLint("ValidFragment")
public ItemFragment(List<BeanDrinkImage.DrinkList> drinkLists) {
this.drinkLists = drinkLists;
}
*/
public static Fragment newInstance(FragmentManager context, int pos, float scale, List<BeanDrinkImage.DrinkList> dL) {
ItemFragment fr = new ItemFragment();
Bundle b = new Bundle();
b.putInt(POSITON, pos);
b.putFloat(SCALE, scale);
b.putParcelableArrayList(DRINK_LIST, (ArrayList) dL);
//drinkLists=dL;
// this.context = context;
// this.dL = dL;
// b.putIntegerArrayList(IMAGE, imageArray);
Log.e("drinkSize", "....+++"+dL.size());
fr.setArguments(b);
return fr;//frFragment.instantiate(context, ItemFragment.class.getName(), b);
}
#Override
public void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWidthAndHeight();
sharedPreferences = PreferenceManager.getDefaultSharedPreferences(getActivity());
}
#SuppressLint("SetTextI18n")
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
if (container == null) {
return null;
}
context = getActivity();
final int postion = this.getArguments().getInt(POSITON);
float scale = this.getArguments().getFloat(SCALE);
this.imageArray = this.getArguments().getIntegerArrayList(IMAGE);
drinkLists = (ArrayList) this.getArguments().getParcelableArrayList(DRINK_LIST);
// TODO 21 sep changes
// LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(screenWidth / 3,
// h/4);
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(screenWidth / 2,
screenWidth/2);
LinearLayout linearLayout = (LinearLayout) inflater.inflate(R.layout.fragment_image, container, false);
TextView textView = (TextView) linearLayout.findViewById(R.id.text);
CarouselLinearLayout root = (CarouselLinearLayout) linearLayout.findViewById(R.id.root_container);
ImageView imageView = (ImageView) linearLayout.findViewById(R.id.pagerImg);
ImageView starImage = (ImageView) linearLayout.findViewById(R.id.imgStar);
imageView.setLayoutParams(layoutParams);
String imageUrl = "";
try {
Log.e("drinkSize", "...."+drinkLists.size());
if (drinkLists.size() > 0) {
imageUrl = ApiClient.IMAGE_URL + drinkLists.get(postion).getImage();
Picasso.get().load(imageUrl).into(imageView);
Log.e("drinkName", drinkLists.get(postion).getDrinkName());
textView.setText(drinkLists.get(postion).getDrinkName());
if (drinkLists.get(postion).getIs_recomended() == 1) {
starImage.setVisibility(View.VISIBLE);
} else {
starImage.setVisibility(View.INVISIBLE);
}
}
imageView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if (getActivity() != null) {
RedeemDialog redeemDialog = new RedeemDialog(getActivity(), drinkLists, postion);
redeemDialog.setCanceledOnTouchOutside(true);
redeemDialog.show();
// 12-march
/* if (sharedPreferences.getString(CommonVar.IS_SUBSCRIBED, "0").equals("0")) {
Toast.makeText(getContext(), "Please subscribe first", Toast.LENGTH_SHORT).show();
} else {
RedeemDialog redeemDialog = new RedeemDialog(getActivity(), list, postion);
redeemDialog.setCanceledOnTouchOutside(true);
redeemDialog.show();
}*/
}
}
});
root.setScaleBoth(scale);
} catch (Exception e) {
e.printStackTrace();
}
return linearLayout;
}
/**
* Get device screen width and height
*/
private void getWidthAndHeight() {
DisplayMetrics displaymetrics = new DisplayMetrics();
try {
Objects.requireNonNull(getActivity()).getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
screenHeight = displaymetrics.heightPixels;
screenWidth = displaymetrics.widthPixels;
} catch (Exception e) {
e.printStackTrace();
}
}
}
if (position == 0) {
scale = SMALL_SCALE;}
else if(position == 1){
scale = BIG_SCALE;
}
else if(position == 2)
{
scale = SMALL_SCALE;
}
else{
scale = SMALL_SCALE;
}
holder.setIsRecyclable(false);
I have a ScrollView which hosts a ViewPager which hosts Fragments of dynamic height. Since a ScrollView and ViewPager don't go well together due to the scroll handling, I used one of the custom solution from here. But I am currently getting really abnormal results. The first fragment in the ViewPager always gets a height of 0. Also sometimes the fragments don't show their content but when I scroll back and forth and come back to that fragment, content might show up.
Some code for you to look at :
The custom ViewPager :
import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
/**
* Created by Narayan Acharya on 12/07/2016.
*/
public class DynamicHeightWrappingViewPager extends ViewPager {
private View mCurrentView;
public DynamicHeightWrappingViewPager(Context context) {
super(context);
}
public DynamicHeightWrappingViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
if (mCurrentView == null) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
return;
}
int height = 0;
mCurrentView.measure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
int h = mCurrentView.getMeasuredHeight();
if (h > height) height = h;
heightMeasureSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY);
Log.d("ViewPager Measure", h + ":" + heightMeasureSpec);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
public void measureCurrentView(View currentView) {
mCurrentView = currentView;
requestLayout();
}
}
The custom ScrollView :
import android.content.Context;
import android.util.AttributeSet;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.widget.ScrollView;
/**
* Created by Narayan Acharya on 12/07/2016.
*/
public class ChildrenHeightAdaptingScrollView extends ScrollView {
private GestureDetector mGestureDetector;
public ChildrenHeightAdaptingScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
mGestureDetector = new GestureDetector(context, new YScrollDetector());
setFadingEdgeLength(0);
}
#Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
return super.onInterceptTouchEvent(ev)
&& mGestureDetector.onTouchEvent(ev);
}
// Return false if we're scrolling in the x direction
class YScrollDetector extends GestureDetector.SimpleOnGestureListener {
#Override
public boolean onScroll(MotionEvent e1, MotionEvent e2,
float distanceX, float distanceY) {
return (Math.abs(distanceY) > Math.abs(distanceX));
}
}
}
The PagerAdapter :
import android.app.Fragment;
import android.app.FragmentManager;
import android.support.v13.app.FragmentPagerAdapter;
import android.util.Log;
import android.view.ViewGroup;
/.. Some more project specific imports here../
/**
* Created by Narayan Acharya on 22/06/2016.
*/
public class EventsPagerAdapter extends FragmentPagerAdapter {
private Event event;
private int PAGE_COUNT = 2;
private int mCurrentPosition = -1;
private String tabTitles[] = new String[]{"INFO", "FAQs"};
public EventsPagerAdapter(FragmentManager fm, Event event) {
super(fm);
this.event = event;
}
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
return EventInfoFragment.getInstance(event);
case 1:
return EventFAQsFragment.getInstance(event);
default:
return null;
}
}
#Override
public int getCount() {
return PAGE_COUNT;
}
#Override
public CharSequence getPageTitle(int position) {
// Generate title based on item position
return tabTitles[position];
}
#Override
public void setPrimaryItem(ViewGroup container, int position, Object object) {
super.setPrimaryItem(container, position, object);
if (position != mCurrentPosition) {
Fragment fragment = (Fragment) object;
DynamicHeightWrappingViewPager pager = (DynamicHeightWrappingViewPager) container;
if (fragment != null && fragment.getView() != null) {
mCurrentPosition = position;
pager.measureCurrentView(fragment.getView());
Log.d("Requested Measure for", position + " " + fragment.getClass().getSimpleName());
}
}
}
}
As per my observations, the only difference I could spot in the code from the link I mentioned above and the one I am using is that the link uses FragmentPagerAdapter from support library v4 while I am using from the v13(Cannot change this to v4, due to some other restrictions). What are the major differences between the two versions of support library for how I am using it?
This might seem like really stupid and I am not sure why this works exactly! If anyone knows why, please do answer.
The problem with the ViewPager collapsing was that it simply contained a WebView in each Fragment. I toiled hard trying to find solutions and writing more custom ViewPagers and ScrollViews. Just when I was about to give up I wrapped the WebView in a LinearLayout and the Fragment at position 0 did not collapse. It works smoothly now.
So if anyone is getting blank pages while trying this or similar solutions please try to wrap it in a LinearLayout or something.
Hope this helps someone!
I'm trying to create interface like
.
Central element is ViewPager with full-size image, top element is RecyclerView with preview images. But I couldn't find the way to magnet elements to center. Is there way to override behavior of RecyclerView?
I found the solution exactly what you need. I created a small example on github.com: AndroidPreviewSlider
The thing is that top view is ViewPager and center view is ViewPager too.
Detailed code is below:
Adapter for top preview
public class PhotoPreviewAdapter extends FragmentPagerAdapter {
private static final int DEFAULT_SIDE_PREVIEW_COUNT = 3;
private final int sidePreviewCount;
private final List<PhotoInfo> photoInfos;
public PhotoPreviewAdapter(FragmentManager fm, List<PhotoInfo> photoInfos) {
this(fm, DEFAULT_SIDE_PREVIEW_COUNT, photoInfos);
}
public PhotoPreviewAdapter(FragmentManager fm, int sidePreviewCount, List<PhotoInfo> photoInfos) {
super(fm);
this.sidePreviewCount = sidePreviewCount;
this.photoInfos = photoInfos;
}
public int getSidePreviewCount() {
return sidePreviewCount;
}
#Override
public Fragment getItem(int position) {
if (isDummy(position)) {
return DummyPreviewFragment.newInstance();
} else {
return PhotoPreviewFragment.newInstance(photoInfos.get(getRealPosition(position)));
}
}
private boolean isDummy(int position) {
return position < sidePreviewCount || position > photoInfos.size() - 1 + sidePreviewCount;
}
private int getRealPosition(int position) {
return position - sidePreviewCount;
}
#Override
public int getCount() {
return photoInfos.size() + (sidePreviewCount * 2);
}
#Override
public float getPageWidth(int position) {
return 1.0f / getElementsPerPage();
}
private int getElementsPerPage() {
return (sidePreviewCount * 2) + 1;
}
}
Adapter for central view is simple
public class PhotoViewAdapter extends FragmentPagerAdapter {
private final List<PhotoInfo> photoInfos;
public PhotoViewAdapter(FragmentManager fm, List<PhotoInfo> photoInfos) {
super(fm);
this.photoInfos = photoInfos;
}
#Override
public Fragment getItem(int position) {
return PhotoViewFragment.newInstance(photoInfos.get(position));
}
#Override
public int getCount() {
return photoInfos.size();
}
}
And one of the main is sync listener
public class OnSyncPageChangeListener implements ViewPager.OnPageChangeListener {
private int scrollState = ViewPager.SCROLL_STATE_IDLE;
private final ViewPager syncToViewPager;
private final ViewPager syncWithViewPager;
public OnSyncPageChangeListener(ViewPager syncToViewPager, ViewPager syncWithViewPager) {
this.syncToViewPager = syncToViewPager;
this.syncWithViewPager = syncWithViewPager;
}
#Override
public void onPageScrolled(final int position, final float positionOffset, final int positionOffsetPixels) {
if (scrollState != ViewPager.SCROLL_STATE_IDLE) {
final float ratio = calculateRatioForPosition(position);
final float scrollX = syncWithViewPager.getScrollX();
final float scrollY = syncWithViewPager.getScrollY();
syncToViewPager.scrollTo((int) (scrollX * ratio), (int) scrollY);
}
}
private float calculateRatioForPosition(int position) {
final float syncToViewPagerWidth = syncToViewPager.getWidth();
final float syncWithViewPagerWidth = syncWithViewPager.getWidth();
final float syncToViewPagerElementWeight = syncToViewPager.getAdapter().getPageWidth(position);
final float syncWithViewPagerElementWeight = syncWithViewPager.getAdapter().getPageWidth(position);
final float syncToViewPagerElementsCount = (1.0f / syncToViewPagerElementWeight);
final float syncWithViewPagerElementsCount = (1.0f / syncWithViewPagerElementWeight);
final float syncToViewPagerElementWidth = syncToViewPagerWidth / syncToViewPagerElementsCount;
final float syncWithViewPagerElementWidth = syncWithViewPagerWidth / syncWithViewPagerElementsCount;
return syncToViewPagerElementWidth / syncWithViewPagerElementWidth;
}
#Override
public void onPageSelected(final int position) {
}
#Override
public void onPageScrollStateChanged(final int state) {
scrollState = state;
if (state == ViewPager.SCROLL_STATE_IDLE) {
syncToViewPager.setCurrentItem(syncWithViewPager.getCurrentItem(), false);
}
}
}
And finally init ViewPager's
#Bind(R.id.photoPreviewPager)
ViewPager photoPreviewPager;
#Bind(R.id.photoViewPager)
ViewPager photoViewPager;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
final List<PhotoInfo> photoInfos = PhotoInfosProvider.generate();
final PhotoPreviewAdapter photoPreviewAdapter = new PhotoPreviewAdapter(getSupportFragmentManager(), photoInfos);
final PhotoViewAdapter photoViewAdapter = new PhotoViewAdapter(getSupportFragmentManager(), photoInfos);
photoPreviewPager.setAdapter(photoPreviewAdapter);
photoPreviewPager.addOnPageChangeListener(new OnSyncPageChangeListener(photoViewPager, photoPreviewPager));
photoViewPager.setAdapter(photoViewAdapter);
photoViewPager.setOffscreenPageLimit(photoPreviewAdapter.getSidePreviewCount() * 2 + 1);
photoViewPager.addOnPageChangeListener(new OnSyncPageChangeListener(photoPreviewPager, photoViewPager));
}
More detailed code is in repo
The LinearLayoutManager have a scrollToPositionWithOffset method that takes both the position and also the offset of the start of the item from the start of the RecyclerView, which seems like it would accomplish what you need.
You can use this image slider(https://github.com/jjhesk/LoyalNativeSlider) instead of the ViewPager .
First of all, you can use this google official example to create visual effect of pulling this view to center. You'll have ImageView over ViewPager for displaying animated appearing. When animation will be finished, make make your ImageView Gone and show requested image in ViewPager.
I have tried several solutions but need help. The topics below are really useful but I think I'm doing something wrong. How to set layout height/settings for both? Let's say I have 2 LinearLayout for content and bottom menu.
Also I don't want the bottom menu disappeared after sliding. It should be constant there. I am using fragments for menu clicks/change views.
Android: Expand/collapse animation
Android animate drop down/up view proper
As my comment seemed to help, I will post the link as an answer: https://github.com/umano/AndroidSlidingUpPanel
The full code cannot be pasted in StackOverflow, but the whole library will help you to achieve what you need.
The 2.2 version of the Umano Android app features a sexy sliding up
draggable panel for the currently playing article. This type of a
panel is a common pattern also used in the Google Music app and the
Rdio app. This is an open source implementation of this component that
you are free to take advantage of in your apps. Umano Team <3 Open
Source.
<com.sothree.slidinguppaneldemo.SlidingUpPanelLayout
android:id="#+id/sliding_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Main Content"
android:textSize="16sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center|top"
android:text="The Awesome Sliding Up Panel"
android:textSize="16sp" />
</com.sothree.slidinguppaneldemo.SlidingUpPanelLayout>
You can also try this custom view for ExpandablePanel found it somewhere when i needed to create something like this.
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Point;
import android.util.AttributeSet;
import android.util.Log;
import android.view.Display;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Transformation;
import android.widget.LinearLayout;
public class ExpandablePanel extends LinearLayout {
private final int mHandleId;
private final int mContentId;
// Contains references to the handle and content views
private View mHandle;
private View mContent;
// Does the panel start expanded?
private boolean mExpanded = false;
// The height of the content when collapsed
private int mCollapsedHeight = 0;
// The full expanded height of the content (calculated)
private int mContentHeight = 0;
// How long the expand animation takes
private int mAnimationDuration = 0;
int height;
private Context context;
// Listener that gets fired onExpand and onCollapse
private OnExpandListener mListener;
public ExpandablePanel(Context context) {
this(context, null);
this.context = context;
}
public void setSize(int size) {
this.height = size;
}
/**
* The constructor simply validates the arguments being passed in and sets
* the global variables accordingly. Required attributes are 'handle' and
* 'content'
*/
public ExpandablePanel(Context context, AttributeSet attrs) {
super(context, attrs);
mListener = new DefaultOnExpandListener();
TypedArray a = context.obtainStyledAttributes(attrs,
R.styleable.ExpandablePanel, 0, 0);
// How high the content should be in "collapsed" state
mCollapsedHeight = (int) a.getDimension(
R.styleable.ExpandablePanel_collapsedHeight, 0.0f);
// How long the animation should take
mAnimationDuration = a.getInteger(
R.styleable.ExpandablePanel_animationDuration, 500);
int handleId = a.getResourceId(R.styleable.ExpandablePanel_handle, 0);
if (handleId == 0) {
throw new IllegalArgumentException(
"The handle attribute is required and must refer "
+ "to a valid child.");
}
int contentId = a.getResourceId(R.styleable.ExpandablePanel_content, 0);
if (contentId == 0) {
throw new IllegalArgumentException(
"The content attribute is required and must "
+ "refer to a valid child.");
}
mHandleId = handleId;
mContentId = contentId;
a.recycle();
}
// Some public setters for manipulating the
// ExpandablePanel programmatically
public void setOnExpandListener(OnExpandListener listener) {
mListener = listener;
}
public void setCollapsedHeight(int collapsedHeight) {
mCollapsedHeight = collapsedHeight;
}
public void setAnimationDuration(int animationDuration) {
mAnimationDuration = animationDuration;
}
/**
* This method gets called when the View is physically visible to the user
*/
#Override
protected void onFinishInflate() {
super.onFinishInflate();
mHandle = findViewById(mHandleId);
if (mHandle == null) {
throw new IllegalArgumentException(
"The handle attribute is must refer to an"
+ " existing child.");
}
mContent = findViewById(mContentId);
if (mContent == null) {
throw new IllegalArgumentException(
"The content attribute must refer to an"
+ " existing child.");
}
// This changes the height of the content such that it
// starts off collapsed
android.view.ViewGroup.LayoutParams lp = mContent.getLayoutParams();
lp.height = mCollapsedHeight;
mContent.setLayoutParams(lp);
// Set the OnClickListener of the handle view
mHandle.setOnClickListener(new PanelToggler());
}
/**
* This is where the magic happens for measuring the actual (un-expanded)
* height of the content. If the actual height is less than the
* collapsedHeight, the handle will be hidden.
*/
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// First, measure how high content wants to be
mContent.measure(widthMeasureSpec, MeasureSpec.UNSPECIFIED);
mContentHeight = mContent.getMeasuredHeight();
Log.v("cHeight", mContentHeight + "");
Log.v("cCollapseHeight", mCollapsedHeight + "");
if (mContentHeight < mCollapsedHeight) {
mHandle.setVisibility(View.GONE);
} else {
mHandle.setVisibility(View.VISIBLE);
}
// Then let the usual thing happen
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
/**
* This is the on click listener for the handle. It basically just creates a
* new animation instance and fires animation.
*/
private class PanelToggler implements OnClickListener {
public void onClick(View v) {
Animation a;
if (mExpanded) {
a = new ExpandAnimation(mContentHeight, mCollapsedHeight);
mListener.onCollapse(mHandle, mContent);
} else {
a = new ExpandAnimation(mCollapsedHeight, mContentHeight);
mListener.onExpand(mHandle, mContent);
}
a.setDuration(mAnimationDuration);
mContent.startAnimation(a);
mExpanded = !mExpanded;
}
}
/**
* This is a private animation class that handles the expand/collapse
* animations. It uses the animationDuration attribute for the length of
* time it takes.
*/
private class ExpandAnimation extends Animation {
private final int mStartHeight;
private final int mDeltaHeight;
public ExpandAnimation(int startHeight, int endHeight) {
mStartHeight = startHeight;
mDeltaHeight = endHeight - startHeight;
}
#Override
protected void applyTransformation(float interpolatedTime,
Transformation t) {
android.view.ViewGroup.LayoutParams lp = mContent.getLayoutParams();
lp.height = (int) (mStartHeight + mDeltaHeight * interpolatedTime);
mContent.setLayoutParams(lp);
}
#Override
public boolean willChangeBounds() {
return true;
}
}
/**
* Simple OnExpandListener interface
*/
public interface OnExpandListener {
public void onExpand(View handle, View content);
public void onCollapse(View handle, View content);
}
private class DefaultOnExpandListener implements OnExpandListener {
public void onCollapse(View handle, View content) {
}
public void onExpand(View handle, View content) {
}
}
}