How to show viewpager with margin or different design

Question

I am using view pager to show some fragments.

I tried to achieve this by referring this : Android ViewPager - Smooth Transition for this Design

My View pager containing layout:

<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:background="@color/white"
android:orientation="vertical"
android:weightSum="1"
tools:context="com.tpayerapp.Fragments.DepositMoneyFragment">


<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_centerInParent="true"
    android:clipToPadding="false"
    android:layout_above="@+id/indicator"
    android:layout_below="@+id/tabs"
    android:padding="80dp" />

<me.relex.circleindicator.CircleIndicator
    android:id="@+id/indicator"
    android:layout_width="fill_parent"
    android:layout_height="40dp"
    android:layout_alignParentBottom="true"
    android:layout_centerInParent="false"
    app:ci_drawable="@drawable/radius"
    app:ci_drawable_unselected="@drawable/grey_radius"
    app:ci_height="6dp"
    app:ci_width="6dp">


</me.relex.circleindicator.CircleIndicator>

Fragment 1 layout:

<RelativeLayout 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:layout_marginLeft="40dp"
android:layout_marginRight="40dp"
tools:context="com.tpayerapp.Fragments.PayPalFragment">


<ImageView
    android:id="@+id/imageView25"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentBottom="false"
    android:layout_alignParentRight="false"
    android:layout_alignParentTop="false"
    android:layout_alignWithParentIfMissing="false"
    android:layout_centerHorizontal="false"
    android:layout_centerInParent="true"
    android:background="@color/colorAccent"
    app:srcCompat="@drawable/paypal" />

View pager fragment java code:

    public class DepositMoneyFragment extends Fragment {
    private ViewPager viewPager;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view = inflater.inflate(R.layout.fragment_deposit_money, container, false);


        setUpUI(view);

        return view;
    }

    public void setUpUI(View view) {


        viewPager = (ViewPager) view.findViewById(R.id.viewpager);
        setupViewPager(viewPager);


        CircleIndicator indicator = (CircleIndicator) view.findViewById(R.id.indicator);
        indicator.setViewPager(viewPager);

        viewPager.setPageTransformer(false, new ViewPager.PageTransformer() {
            @Override
            public void transformPage(View page, float position) {
                int pageWidth = viewPager.getMeasuredWidth() - viewPager.getPaddingLeft() - viewPager.getPaddingRight();
                int pageHeight = viewPager.getHeight();
                int paddingLeft = viewPager.getPaddingLeft();
                float transformPos = (float) (page.getLeft() - (viewPager.getScrollX() + paddingLeft)) / pageWidth;

                final float normalizedposition = Math.abs(Math.abs(transformPos) - 1);
                page.setAlpha(normalizedposition + 0.5f);

                int max = -pageHeight / 10;

                if (transformPos < -1) { // [-Infinity,-1)
                    // This page is way off-screen to the left.
                    page.setTranslationY(0);
                } else if (transformPos <= 1) { // [-1,1]
                    page.setTranslationY(max * (1-Math.abs(transformPos)));

                } else { // (1,+Infinity]
                    // This page is way off-screen to the right.
                    page.setTranslationY(0);
                }


            }

        });
    }

    @Override
    public void onResume() {
        super.onResume();

        ((OnFragmentTitleChangeListener) getActivity()).onFragmentTitle(getResources().getString(R.string.deposite));
    }

    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getChildFragmentManager());
        adapter.addFragment(new PayPalFragment(), "");
        adapter.addFragment(new PayStackFragment(), "");
        adapter.addFragment(new NIBBSFragment(), "");

        viewPager.setAdapter(adapter);
    }
}

What needs to be done to get this design? Please help. Thank you..

Answer 1

I see you have hard coded the viewPager height to android:layout_height="200dp". Can you try using android:layout_height="match_parent" instead?

Answer 2

try this link carousel layout with viewpager, if you need more code related to this view, this are main classes you need.

CarouselLinearLayout.java

import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.util.Log;
import android.widget.LinearLayout;

public class CarouselLinearLayout extends LinearLayout {
private float scale = CarouselPagerAdapter.BIG_SCALE;

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);
}

}

CarouselPagerAdapter.java

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;

public class CarouselPagerAdapter extends FragmentPagerAdapter implements 
 ViewPager.OnPageChangeListener {

public final static float BIG_SCALE = 1.0f;
public final static float SMALL_SCALE = 0.7f;
public final static float DIFF_SCALE = BIG_SCALE - SMALL_SCALE;
private MainActivity context;
private FragmentManager fragmentManager;
private float scale;

public CarouselPagerAdapter(MainActivity context, FragmentManager fm) {
    super(fm);
    this.fragmentManager = fm;
    this.context = context;
}

@Override
public Fragment getItem(int position) {
    // make the first pager bigger than others
    try {
        if (position == MainActivity.FIRST_PAGE)
            scale = BIG_SCALE;
        else
            scale = SMALL_SCALE;

        position = position % MainActivity.count;

    } catch (Exception e) {
        e.printStackTrace();
    }
    return ItemFragment.newInstance(context, position, scale);
}

@Override
public int getCount() {
    int count = 0;
    try {
        count = MainActivity.count * MainActivity.LOOPS;
    } catch (Exception e) {
        // TODO: handle exception
        e.printStackTrace();
    }
    return count;
}

@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:" + context.pager.getId() + ":" + position;
}

}

Answer 3

Try Change margin to padding

 <RelativeLayout 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:paddingLeft="40dp"
 android:paddingRight="40dp"
 tools:context="com.tpayerapp.Fragments.PayPalFragment">


<ImageView
android:id="@+id/imageView25"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="false"
android:layout_alignParentRight="false"
android:layout_alignParentTop="false"
android:layout_alignWithParentIfMissing="false"
android:layout_centerHorizontal="false"
android:layout_centerInParent="true"
android:background="@color/colorAccent"
app:srcCompat="@drawable/paypal" />