Crumbling Layout in Android using external library

    The official widget to make swipe view in Android is ViewPager. To making it more attractive, we should provide transition animation when swiping - sliding between UI screens. In the previous post, with JazzyViewPager, you can make a lot of exciting effect with the container layout but, what about making an effect with content in the ViewPager?
    Now, in this post, with Bitutorial library, we will make the "crumbling effect" for ViewPager content when user swipe to change page!
    DEMO VIDEO:

Import and use library

    Adding this dependency to your app/build.gradle to use this library:

dependencies {
        compile 'com.cleveroad:splittransformation:0.9.0'
    }

   Then, when coding, you have to wrap your pager adapter with TransformationAdapterWrapper:

TransformationAdapterWrapper wrapper = TransformationAdapterWrapper
        .wrap(getContext(), adapter)
        .rows(...)
        .columns(...)
        .piecesSpacing(...)
        .translationX(...)
        .translationY(...)
        .marginTop(...)
        .bitmapScale(...)
        .complexViewDetector(...)
        .bitmapTransformerFactory(...)
        .build();

Sample project

    Creating a layout for project's main activity, containing a ViewPager object and a SquareViewPagerIndicator (also including in Bitutorial library) to make view indicator:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fddc9b"
    android:padding="@dimen/activity_horizontal_margin">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:gravity="center"
        android:text="Mobile OS"
        android:textStyle="bold" />

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

    <com.cleveroad.splittransformation.SquareViewPagerIndicator
        android:id="@+id/indicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginTop="@dimen/activity_horizontal_margin"
        app:trans_debugItemsCount="4" />

</RelativeLayout>

Programmatically coding, including a simple ViewPager adapter (based on PagerAdapter) here:

MainActivity.java

package info.devexchanges.crumblinglayout;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import com.cleveroad.splittransformation.SquareViewPagerIndicator;
import com.cleveroad.splittransformation.TransformationAdapterWrapper;

public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private SquareViewPagerIndicator indicator;

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

        viewPager = (ViewPager) findViewById(R.id.pager);
        indicator = (SquareViewPagerIndicator) findViewById(R.id.indicator);

        //Initializing an adapter and wrap it to TransformationAdapterWrapper
        SimplePagerAdapter adapter = new SimplePagerAdapter(getSupportFragmentManager());
        TransformationAdapterWrapper wrapper = TransformationAdapterWrapper
                .wrap(this, adapter) //wrap existing page adapter
                .rows(10) //number of rows to split image.
                .columns(7) // number of columns to split image
                .marginTop(getResources().getDimensionPixelSize(R.dimen.activity_horizontal_margin))
                .build(); //initializing

        viewPager.setAdapter(wrapper);
        viewPager.setPageTransformer(false, wrapper); //never forget this important line!
        indicator.initializeWith(viewPager); //attaching indicator with ViewPager
    }

    private static class SimplePagerAdapter extends FragmentStatePagerAdapter {

        public SimplePagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return ViewPagerFragment.getInstances(position);
        }

        @Override
        public int getCount() {
            return 7;
        }
    }
}

    The Fragments code, (ViewPager's page content):

ViewPagerFragment.java

package info.devexchanges.crumblinglayout;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

public class ViewPagerFragment extends Fragment {

    private ImageView imageView;
    private TextView textView;
    private static String[] phoneTypes = {"Android", "iOS", "WindowsPhone", "BlackBerry", "Tizen", "Ubuntu phone", "Sailfish"};
    private static int[] drawables = {R.drawable.android, R.drawable.ios, R.drawable.windows_phone,
            R.drawable.blackberry, R.drawable.tizen, R.drawable.ubuntu, R.drawable.sailfish};

    public static ViewPagerFragment getInstances(int position) {
        ViewPagerFragment fragment = new ViewPagerFragment();
        Bundle args = new Bundle();
        args.putInt("position", position);
        fragment.setArguments(args);

        return fragment;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_layout, container, false);
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        int position = getArguments().getInt("position");

        imageView = (ImageView) view.findViewById(R.id.image);
        textView = (TextView) view.findViewById(R.id.text_view);

        imageView.setImageResource(drawables[position]);
        textView.setText(phoneTypes[position]);
    }
}

And the Fragment's layout:

fragment_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/image"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:layout_centerInParent="true" />

    <TextView
        android:id="@+id/text_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/image"
        android:layout_marginTop="@dimen/activity_horizontal_margin"
        android:gravity="center"
        android:text="dsfsdfdsf"
        android:textColor="@android:color/holo_green_dark"
        android:textStyle="bold" />

</RelativeLayout>

    Running application, we have this result:

View Project On Github

Author : Hong Thai

Share