├── .gitignore
├── build.gradle
├── demo
├── .gitignore
├── build.gradle
├── proguard-rules.pro
└── src
│ └── main
│ ├── AndroidManifest.xml
│ ├── java
│ └── ki
│ │ └── pagetransformer
│ │ └── sharedelement
│ │ └── demo
│ │ ├── MainActivity.java
│ │ └── fragment
│ │ ├── BigPictureFragment.java
│ │ ├── HelloFragment.java
│ │ └── SmallPictureFragment.java
│ └── res
│ ├── drawable-v24
│ └── ic_launcher_foreground.xml
│ ├── drawable
│ ├── cat1.webp
│ ├── cat2.jpg
│ ├── cat3.jpg
│ ├── cat4.jpg
│ ├── cat5.jpg
│ ├── cat6.jpeg
│ ├── cat_office.jpg
│ ├── habr.jpg
│ └── ic_launcher_background.xml
│ ├── layout
│ ├── activity_main.xml
│ ├── fragment_big_picture.xml
│ ├── fragment_hello.xml
│ └── fragment_small_picture.xml
│ ├── mipmap-anydpi-v26
│ ├── ic_launcher.xml
│ └── ic_launcher_round.xml
│ ├── mipmap-hdpi
│ ├── ic_launcher.png
│ └── ic_launcher_round.png
│ ├── mipmap-mdpi
│ ├── ic_launcher.png
│ └── ic_launcher_round.png
│ ├── mipmap-xhdpi
│ ├── ic_launcher.png
│ └── ic_launcher_round.png
│ ├── mipmap-xxhdpi
│ ├── ic_launcher.png
│ └── ic_launcher_round.png
│ ├── mipmap-xxxhdpi
│ ├── ic_launcher.png
│ └── ic_launcher_round.png
│ └── values
│ ├── colors.xml
│ ├── strings.xml
│ └── styles.xml
├── gradle.properties
├── gradle
└── wrapper
│ ├── gradle-wrapper.jar
│ └── gradle-wrapper.properties
├── gradlew
├── gradlew.bat
├── images
├── shared-element-demo-ru.gif
└── shared-element-demo.gif
├── readme.md
├── settings.gradle
└── shared-element-view-pager
├── .gitignore
├── LICENSE.txt
├── build.gradle
├── proguard-rules.pro
└── src
└── main
├── AndroidManifest.xml
├── java
└── ki
│ └── pagetransformer
│ └── sharedelement
│ ├── AbstractSePageTransformer.java
│ ├── AuxiliarySePageTransformer.java
│ ├── DefaultSePageTransformer.java
│ ├── SePageTransformer.java
│ └── SharedElementPageTransformer.java
└── res
└── values
└── strings.xml
/.gitignore:
--------------------------------------------------------------------------------
1 | *.iml
2 | .gradle
3 | /local.properties
4 | /.idea/*
5 | /.idea/caches
6 | /.idea/libraries
7 | /.idea/modules.xml
8 | /.idea/workspace.xml
9 | /.idea/navEditor.xml
10 | /.idea/assetWizardSettings.xml
11 | .DS_Store
12 | /build
13 | /captures
14 | .externalNativeBuild
15 | /*.txt
--------------------------------------------------------------------------------
/build.gradle:
--------------------------------------------------------------------------------
1 | // Top-level build file where you can add configuration options common to all sub-projects/modules.
2 |
3 | buildscript {
4 | repositories {
5 | google()
6 | jcenter()
7 | }
8 | dependencies {
9 | classpath 'com.android.tools.build:gradle:3.4.0'
10 |
11 | // NOTE: Do not place your application dependencies here; they belong
12 | // in the individual module build.gradle files
13 | }
14 | }
15 |
16 | allprojects {
17 | repositories {
18 | google()
19 | jcenter()
20 | }
21 | }
22 |
23 | task clean(type: Delete) {
24 | delete rootProject.buildDir
25 | }
26 |
--------------------------------------------------------------------------------
/demo/.gitignore:
--------------------------------------------------------------------------------
1 | /build
2 |
--------------------------------------------------------------------------------
/demo/build.gradle:
--------------------------------------------------------------------------------
1 | apply plugin: 'com.android.application'
2 |
3 | android {
4 | compileSdkVersion 28
5 | defaultConfig {
6 | applicationId "ki.pagetransformer.sharedelement.demo"
7 | minSdkVersion 21
8 | targetSdkVersion 28
9 | versionCode 1
10 | versionName "1.0"
11 | testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
12 | }
13 | buildTypes {
14 | release {
15 | minifyEnabled false
16 | proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
17 | }
18 | }
19 | compileOptions {
20 | sourceCompatibility = '1.8'
21 | targetCompatibility = '1.8'
22 | }
23 | }
24 |
25 | dependencies {
26 | implementation fileTree(dir: 'libs', include: ['*.jar'])
27 | implementation 'androidx.appcompat:appcompat:1.0.2'
28 | implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
29 | implementation 'androidx.legacy:legacy-support-v4:1.0.0'
30 | testImplementation 'junit:junit:4.12'
31 | androidTestImplementation 'androidx.test:runner:1.1.1'
32 | androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.1'
33 | implementation 'androidx.viewpager:viewpager:1.0.0'
34 | implementation 'com.google.android.material:material:1.1.0-alpha04'
35 |
36 | //getting library from remote repository instead of a local module
37 | implementation 'com.github.kirillgerasimov:shared-element-view-pager:0.0.4-alpha'
38 | // implementation project(path: ':shared-element-view-pager')
39 | }
40 |
--------------------------------------------------------------------------------
/demo/proguard-rules.pro:
--------------------------------------------------------------------------------
1 | # Add project specific ProGuard rules here.
2 | # You can control the set of applied configuration files using the
3 | # proguardFiles setting in build.gradle.
4 | #
5 | # For more details, see
6 | # http://developer.android.com/guide/developing/tools/proguard.html
7 |
8 | # If your project uses WebView with JS, uncomment the following
9 | # and specify the fully qualified class name to the JavaScript interface
10 | # class:
11 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview {
12 | # public *;
13 | #}
14 |
15 | # Uncomment this to preserve the line number information for
16 | # debugging stack traces.
17 | #-keepattributes SourceFile,LineNumberTable
18 |
19 | # If you keep the line number information, uncomment this to
20 | # hide the original source file name.
21 | #-renamesourcefileattribute SourceFile
22 |
--------------------------------------------------------------------------------
/demo/src/main/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/demo/src/main/java/ki/pagetransformer/sharedelement/demo/MainActivity.java:
--------------------------------------------------------------------------------
1 | package ki.pagetransformer.sharedelement.demo;
2 |
3 | import androidx.appcompat.app.AppCompatActivity;
4 | import androidx.fragment.app.Fragment;
5 | import androidx.fragment.app.FragmentManager;
6 | import androidx.fragment.app.FragmentPagerAdapter;
7 | import androidx.viewpager.widget.ViewPager;
8 |
9 | import android.os.Bundle;
10 |
11 | import com.google.android.material.tabs.TabLayout;
12 |
13 | import java.util.ArrayList;
14 | import java.util.HashMap;
15 | import java.util.List;
16 | import java.util.Map;
17 |
18 |
19 | import ki.pagetransformer.sharedelement.AuxiliarySePageTransformer;
20 | import ki.pagetransformer.sharedelement.DefaultSePageTransformer;
21 | import ki.pagetransformer.sharedelement.SePageTransformer;
22 | import ki.pagetransformer.sharedelement.demo.fragment.BigPictureFragment;
23 | import ki.pagetransformer.sharedelement.demo.fragment.SmallPictureFragment;
24 | import ki.pagetransformer.sharedelement.demo.fragment.HelloFragment;
25 |
26 |
27 | public class MainActivity extends AppCompatActivity {
28 |
29 | public static final int PAGE_HELLO = 0;
30 | public static final int PAGE_SMALL_CAT = 1;
31 | public static final int PAGE_BIG_CAT = 2;
32 |
33 | public ViewPager viewPager;
34 | public TabLayout tabLayout;
35 |
36 | public final SmallPictureFragment small_picture_fragment = new SmallPictureFragment();
37 | public final BigPictureFragment big_picture_fragment = new BigPictureFragment();
38 | public final HelloFragment hello_fragment = new HelloFragment();
39 |
40 | @Override
41 | protected void onCreate(Bundle savedInstanceState) {
42 | super.onCreate(savedInstanceState);
43 | setContentView(R.layout.activity_main);
44 |
45 | this.viewPager = findViewById(R.id.main_viewPager);
46 | this.tabLayout = findViewById(R.id.main_tabLayout);
47 |
48 | setupViewPager();
49 | setupTabLayout();
50 |
51 | getSupportActionBar().hide();
52 | }
53 |
54 | private void setupTabLayout() {
55 | tabLayout.setupWithViewPager(viewPager);
56 | tabLayout.getTabAt(PAGE_HELLO).setText("First");
57 | tabLayout.getTabAt(PAGE_SMALL_CAT).setText("Second");
58 | tabLayout.getTabAt(PAGE_BIG_CAT).setText("Third");
59 |
60 | }
61 |
62 | private void setupViewPager() {
63 | TestViewPager adapter = new TestViewPager(getSupportFragmentManager());
64 |
65 | adapter.addFragment(PAGE_HELLO, hello_fragment);
66 | adapter.addFragment(PAGE_SMALL_CAT, small_picture_fragment);
67 | adapter.addFragment(PAGE_BIG_CAT, big_picture_fragment);
68 |
69 |
70 | this.viewPager.setAdapter(adapter);
71 | }
72 |
73 | @Override
74 | protected void onStart() {
75 | super.onStart();
76 |
77 | ArrayList fragments = new ArrayList<>();
78 | fragments.add(hello_fragment);
79 | fragments.add(small_picture_fragment);
80 | fragments.add(big_picture_fragment);
81 |
82 |
83 | SePageTransformer transformer = new DefaultSePageTransformer(this, fragments, viewPager);
84 | // Uncomment this to try experimental page transformer
85 | // SePageTransformer transformer = new AuxiliarySePageTransformer(this, fragments, viewPager, findViewById(R.id.main_root));
86 |
87 | transformer.addTransition(R.id.smallPic_image_cat2, R.id.bigPic_image_cat);
88 | transformer.addTransition(R.id.smallPic_text_label3, R.id.bigPic_text_label);
89 | transformer.addTransition(R.id.hello_text, R.id.smallPic_text_label3);
90 |
91 | viewPager.setPageTransformer(false, transformer);
92 | viewPager.addOnPageChangeListener(transformer);
93 | }
94 |
95 | public class TestViewPager extends FragmentPagerAdapter {
96 | private final List fragments = new ArrayList<>();
97 | private final Map itemList = new HashMap<>();
98 | private int size;
99 |
100 | public TestViewPager(FragmentManager manager) {
101 | super(manager);
102 | }
103 | @Override
104 | public Fragment getItem(int position) {
105 | return fragments.get(position);
106 | }
107 |
108 | @Override
109 | public int getCount() {
110 | return fragments.size();
111 | }
112 |
113 | public void addFragment(Fragment fragment) {
114 | fragments.add(fragment);
115 | }
116 |
117 | public void addFragment(int index, Fragment fragment) {
118 | fragments.add(index, fragment);
119 | }
120 |
121 | }
122 | }
123 |
--------------------------------------------------------------------------------
/demo/src/main/java/ki/pagetransformer/sharedelement/demo/fragment/BigPictureFragment.java:
--------------------------------------------------------------------------------
1 | package ki.pagetransformer.sharedelement.demo.fragment;
2 |
3 |
4 | import android.os.Bundle;
5 |
6 | import androidx.annotation.NonNull;
7 | import androidx.annotation.Nullable;
8 | import androidx.fragment.app.Fragment;
9 |
10 | import android.view.LayoutInflater;
11 | import android.view.View;
12 | import android.view.ViewGroup;
13 | import android.widget.ImageView;
14 | import android.widget.TextView;
15 |
16 |
17 | import ki.pagetransformer.sharedelement.demo.MainActivity;
18 | import ki.pagetransformer.sharedelement.demo.R;
19 |
20 |
21 | /**
22 | * A simple {@link Fragment} subclass.
23 | */
24 | public class BigPictureFragment extends Fragment {
25 |
26 | public ImageView bigCatImageView;
27 | public TextView bigCatLabel;
28 | public BigPictureFragment() {
29 | // Required empty public constructor
30 | }
31 |
32 |
33 | @Override
34 | public View onCreateView(LayoutInflater inflater, ViewGroup container,
35 | Bundle savedInstanceState) {
36 | // Inflate the layout for this fragment
37 | return inflater.inflate(R.layout.fragment_big_picture, container, false);
38 | }
39 |
40 | @Override
41 | public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
42 | MainActivity activity = (MainActivity) getActivity();
43 | super.onViewCreated(view, savedInstanceState);
44 |
45 | bigCatImageView = view.findViewById(R.id.bigPic_image_cat);
46 | bigCatLabel = view.findViewById(R.id.bigPic_text_label);
47 |
48 | bigCatImageView.setOnClickListener(v -> activity.viewPager.setCurrentItem(1));
49 |
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/demo/src/main/java/ki/pagetransformer/sharedelement/demo/fragment/HelloFragment.java:
--------------------------------------------------------------------------------
1 | package ki.pagetransformer.sharedelement.demo.fragment;
2 |
3 |
4 | import android.os.Bundle;
5 |
6 | import androidx.fragment.app.Fragment;
7 |
8 | import android.view.LayoutInflater;
9 | import android.view.View;
10 | import android.view.ViewGroup;
11 |
12 | import ki.pagetransformer.sharedelement.demo.R;
13 |
14 |
15 | /**
16 | * A simple {@link Fragment} subclass.
17 | */
18 | public class HelloFragment extends Fragment {
19 |
20 |
21 | public HelloFragment() {
22 | // Required empty public constructor
23 | }
24 |
25 |
26 | @Override
27 | public View onCreateView(LayoutInflater inflater, ViewGroup container,
28 | Bundle savedInstanceState) {
29 | // Inflate the layout for this fragment
30 | return inflater.inflate(R.layout.fragment_hello, container, false);
31 | }
32 |
33 | }
34 |
--------------------------------------------------------------------------------
/demo/src/main/java/ki/pagetransformer/sharedelement/demo/fragment/SmallPictureFragment.java:
--------------------------------------------------------------------------------
1 | package ki.pagetransformer.sharedelement.demo.fragment;
2 |
3 |
4 | import android.os.Bundle;
5 |
6 | import androidx.annotation.NonNull;
7 | import androidx.annotation.Nullable;
8 | import androidx.fragment.app.Fragment;
9 |
10 | import android.view.LayoutInflater;
11 | import android.view.View;
12 | import android.view.ViewGroup;
13 | import android.widget.ImageView;
14 | import android.widget.TextView;
15 |
16 | import ki.pagetransformer.sharedelement.demo.MainActivity;
17 | import ki.pagetransformer.sharedelement.demo.R;
18 |
19 |
20 | /**
21 | * A simple {@link Fragment} subclass.
22 | */
23 | public class SmallPictureFragment extends Fragment {
24 |
25 | public ImageView smallCatImageView;
26 | public TextView smallCatLabel;
27 |
28 | public SmallPictureFragment() {
29 | // Required empty public constructor
30 | }
31 |
32 |
33 | @Override
34 | public View onCreateView(LayoutInflater inflater, ViewGroup container,
35 | Bundle savedInstanceState) {
36 | // Inflate the layout for this fragment
37 | return inflater.inflate(R.layout.fragment_small_picture, container, false);
38 | }
39 |
40 | @Override
41 | public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
42 | super.onViewCreated(view, savedInstanceState);
43 | smallCatImageView = view.findViewById(R.id.smallPic_image_cat2);
44 | smallCatLabel = view.findViewById(R.id.smallPic_text_label2);
45 |
46 | MainActivity activity = (MainActivity) getActivity();
47 |
48 |
49 | smallCatImageView.setOnClickListener(v -> activity.viewPager.setCurrentItem(2));
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/demo/src/main/res/drawable-v24/ic_launcher_foreground.xml:
--------------------------------------------------------------------------------
1 |
7 |
12 |
13 |
19 |
5 |
6 |
7 | 
8 |
9 |
10 |
11 | ## Contents
12 | - **demo** - directory with demo android app that shows Shared Element Transition between ViewPager pages.
13 |
14 | - **shared-element-view-pager** - the library itself
15 |
16 | ## Usage
17 | ### Adding library
18 | 1. Make sure you have jcenter() in you repositories
19 | ```
20 | allprojects {
21 | repositories {
22 | google()
23 | jcenter() //All android studio projects have this repo by default
24 | }
25 | }
26 | ```
27 |
28 |
29 |
30 |
31 | 2. Add library to module dependencies
32 | ```
33 | dependencies {
34 | //...
35 | implementation 'com.github.kirillgerasimov:shared-element-view-pager:0.0.3-alpha'
36 | }
37 | ```
38 |
39 |
40 |
41 |
42 |
43 |
44 | ### Creating shared element transitions
45 |
46 | 1. Add all fragments from your ViewPager to the List in the same order.
47 | ```
48 | ArrayList fragments = new ArrayList<>();
49 | fragments.add(hello_fragment);
50 | fragments.add(small_picture_fragment);
51 | ```
52 |
53 |
54 |
55 |
56 | 2. Create *SharedElementPageTransformer* presumably in *Activity.onCreate()*.
57 | *this* refers to activity:
58 | ```
59 | SePageTransformer transformer = new DefaultSePageTransformer(this, fragments, viewPager);
60 | ```
61 |
62 |
63 |
64 |
65 | 3. Add shared transition by passing pairs of view ids, that need to be linked together
66 |
67 | ```
68 | transformer.addTransition(R.id.smallPic_image_cat2, R.id.bigPic_image_cat);
69 |
70 |
71 | ```
72 |
73 |
74 |
75 |
76 | 4. Set our *transformer* to ViewPager's pageTransformer **AND** onPageChangeListener.
77 | ```
78 | viewPager.setPageTransformer(false, transformer);
79 | viewPager.addOnPageChangeListener(transformer);
80 | ```
81 |
82 |
83 |
84 |
85 |
86 | Look at *ki.pagetransformer.sharedelement.demo.MainActivity* and compile the demo for more details.
87 |
88 |
89 |
90 |
91 | ### Restrictions
92 | Note that *DefaultSePageTransformer* requires page width to be equal to screen to work properly. This transformer does not
93 | create any intermediate extra views to perform animation. That's why it only drown within parent View (that's how drawing works in android).
94 | Fast animation may look fine in that case too though.
95 |
96 | To work with nested views you need to:
97 | 1. create intermediate view in root layout
98 | 2. Place it on top of animated view
99 | 3. addTransition(R.id.intermediateViewId, R.id.targetViewId)
100 | 4. manage view visibility
101 |
102 | Also I created experimental AuxiliarySePageTransformer, that do the following steps for you.
103 | If you animate Recycler View, you still need to provide unique Ids. You could use the following
104 | example:
105 |
106 | ```
107 | @Override
108 | public void onBindViewHolder(ViewHolder holder, int position) {
109 | ImageView imageView = getImageView(holder);
110 | imageView.setId(generateThumbnailId(position));
111 |
112 | }
113 |
114 | //...
115 | private ImageView getImageView(ViewHolder holder) {
116 | return (ImageView) holder.frameLayout.getChildAt(0);
117 | }
118 | public int generateThumbnailId(int itemPosition) {
119 | return 1000000 + itemPosition;
120 | }
121 | //...
122 | v.setOnClickListener(view -> {
123 | transformer.addTransition(generateThumbnailId(itemPosition), R.id.targetViewId);
124 | activity.viewPager.setCurrentItem(2);
125 | }
126 | ```
127 |
128 | AuxiliarySePageTransformer doesn't require View Pager to occupy whole screen.
129 | It works only with Image Views and relative root layout at the moment.
--------------------------------------------------------------------------------
/settings.gradle:
--------------------------------------------------------------------------------
1 | include ':demo', ':shared-element-view-pager'
2 |
--------------------------------------------------------------------------------
/shared-element-view-pager/.gitignore:
--------------------------------------------------------------------------------
1 | /build
2 |
--------------------------------------------------------------------------------
/shared-element-view-pager/LICENSE.txt:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2019 Kirill Gerasimov
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/shared-element-view-pager/build.gradle:
--------------------------------------------------------------------------------
1 | apply plugin: 'com.android.library'
2 | apply plugin: 'com.novoda.bintray-release' // must be applied after your artifact generating plugin (eg. java / com.android.library)
3 |
4 | buildscript {
5 | repositories {
6 | jcenter()
7 | }
8 | dependencies {
9 | classpath 'com.novoda:bintray-release:0.9.1'
10 | }
11 | }
12 |
13 | publish {
14 | userOrg = ''
15 | groupId = 'com.github.kirillgerasimov'
16 | artifactId = 'shared-element-view-pager'
17 | publishVersion = '0.0.4-alpha'
18 | desc = 'This library allows you to perform somewhat similar to Shared Element Transition between ViewPager pages. '
19 | website = 'https://github.com/kirillgerasimov/Shared-Element-View-Pager'
20 | repoName= 'maven'
21 | autoPublish = 'false'
22 | }
23 |
24 | android {
25 | compileSdkVersion 28
26 |
27 |
28 | defaultConfig {
29 | minSdkVersion 14
30 | targetSdkVersion 28
31 | versionCode 1
32 | versionName "1.0"
33 |
34 | testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
35 |
36 | }
37 |
38 | buildTypes {
39 | release {
40 | minifyEnabled false
41 | proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
42 | }
43 | }
44 |
45 | }
46 |
47 | dependencies {
48 | implementation fileTree(dir: 'libs', include: ['*.jar'])
49 | implementation 'androidx.appcompat:appcompat:1.0.2'
50 | testImplementation 'junit:junit:4.12'
51 | }
52 |
--------------------------------------------------------------------------------
/shared-element-view-pager/proguard-rules.pro:
--------------------------------------------------------------------------------
1 | # Add project specific ProGuard rules here.
2 | # You can control the set of applied configuration files using the
3 | # proguardFiles setting in build.gradle.
4 | #
5 | # For more details, see
6 | # http://developer.android.com/guide/developing/tools/proguard.html
7 |
8 | # If your project uses WebView with JS, uncomment the following
9 | # and specify the fully qualified class name to the JavaScript interface
10 | # class:
11 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview {
12 | # public *;
13 | #}
14 |
15 | # Uncomment this to preserve the line number information for
16 | # debugging stack traces.
17 | #-keepattributes SourceFile,LineNumberTable
18 |
19 | # If you keep the line number information, uncomment this to
20 | # hide the original source file name.
21 | #-renamesourcefileattribute SourceFile
22 |
--------------------------------------------------------------------------------
/shared-element-view-pager/src/main/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 |
3 |
--------------------------------------------------------------------------------
/shared-element-view-pager/src/main/java/ki/pagetransformer/sharedelement/AbstractSePageTransformer.java:
--------------------------------------------------------------------------------
1 | package ki.pagetransformer.sharedelement;
2 |
3 | import android.app.Activity;
4 | import android.graphics.Point;
5 | import android.util.Pair;
6 | import android.view.View;
7 |
8 | import androidx.annotation.NonNull;
9 | import androidx.fragment.app.Fragment;
10 | import androidx.viewpager.widget.ViewPager;
11 |
12 | import java.util.ArrayList;
13 | import java.util.HashMap;
14 | import java.util.HashSet;
15 | import java.util.List;
16 | import java.util.Map;
17 | import java.util.Set;
18 |
19 | import static androidx.viewpager.widget.ViewPager.SCROLL_STATE_IDLE;
20 |
21 | public abstract class AbstractSePageTransformer implements SePageTransformer {
22 |
23 | // External variables
24 |
25 | protected final Activity activity;
26 | protected final ViewPager viewPager;
27 |
28 | List fragments;
29 | protected Set> sharedElementIds = new HashSet<>();
30 |
31 | //Internal variables
32 |
33 | protected List pages = new ArrayList<>();
34 | protected Map pageToNumber = new HashMap<>();
35 |
36 | protected Integer fromPageNumber = 0;
37 | protected Integer toPageNumber;
38 |
39 | protected Map idToAbsX = new HashMap<>();
40 | protected Map idToAbsY = new HashMap<>();
41 |
42 | /**
43 | * current view pager position
44 | */
45 | private int position;
46 |
47 | /**
48 | * @param activity activity that hosts view pager
49 | * @param fragments fragment that are in view pager in the SAME ORDER
50 | */
51 | public AbstractSePageTransformer(Activity activity, List fragments, ViewPager viewPager) {
52 | this.activity = activity;
53 | this.fragments = fragments;
54 | this.viewPager = viewPager;
55 | }
56 |
57 | @Override
58 | public void transformPage(@NonNull View page, float position) {
59 | updatePageCache();
60 | if (fromPageNumber == null || toPageNumber == null) return;
61 |
62 | for (Pair idPair : sharedElementIds) {
63 | Integer fromViewId = idPair.first;
64 | Integer toViewId = idPair.second;
65 |
66 | View fromView = activity.findViewById(fromViewId);
67 | View toView = activity.findViewById(toViewId);
68 |
69 | if (fromView != null && toView != null) {
70 | //Looking if current Shared element transition matches visible pages
71 |
72 | View fromPage = pages.get(fromPageNumber);
73 | View toPage = pages.get(toPageNumber);
74 |
75 | if (fromPage != null && toPage != null) {
76 | fromView = fromPage.findViewById(fromViewId);
77 | toView = toPage.findViewById(toViewId);
78 |
79 | // if both views are on pages user drag between apply transformation
80 | if (
81 | fromView != null
82 | && toView != null
83 | ) {
84 |
85 | boolean slideToTheRight = toPageNumber > fromPageNumber;
86 | modifyPositions(fromView, toView, fromPage, toPage, page, position, slideToTheRight);
87 |
88 | }
89 | }
90 | }
91 | }
92 | }
93 |
94 | protected void modifyPositions(View fromView, View toView, View fromPage, View toPage, View currentPage, float position, boolean slideToTheRight) {}
95 |
96 | protected float getPageWidth() {
97 | Point outSize = new Point();
98 | activity.getWindowManager().getDefaultDisplay().getSize(outSize);
99 | return outSize.x;
100 | }
101 |
102 | /**
103 | * Creating page cache array to determine if shared element on
104 | * currently visible page
105 | */
106 | private void updatePageCache() {
107 | pages = new ArrayList<>();
108 |
109 | for (int i = 0; i < fragments.size(); i++) {
110 | View pageView = fragments.get(i).getView();
111 | pages.add(pageView);
112 | pageToNumber.put(pageView, i);
113 |
114 | }
115 | }
116 |
117 |
118 | @Override
119 | public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
120 | fromPageNumber = position;
121 | toPageNumber = positionOffset >= 0 ? position + 1 : position - 1;
122 |
123 | // Set visiblePages = new HashSet<>();
124 | // visiblePages.add(position);
125 | // visiblePages.add(positionOffset >= 0 ? position + 1 : position - 1);
126 | // visiblePages.remove(fromPageNumber);
127 | //
128 | // toPageNumber = visiblePages.iterator().next();
129 |
130 | if (pages == null || toPageNumber >= pages.size()) toPageNumber = null;
131 | }
132 |
133 |
134 | @Override
135 | public void onPageSelected(int position) {
136 | this.position = position;
137 | }
138 |
139 | @Override
140 | public void onPageScrollStateChanged(int state) {
141 | if (state == SCROLL_STATE_IDLE) {
142 | fromPageNumber = position;
143 | }
144 | }
145 |
146 |
147 | /**
148 | * Set up shared element transition from element with fromViewId to
149 | * element with toViewId. Note that you can setup each transition
150 | * direction separately. e.g.
151 | * addTransition(R.id.FirstPageTextView, R.id.SecondPageTextView)
152 | * and
153 | * addTransition(R.id.SecondPageTextView, R.id.FirstPageTextView)
154 | * are different.
155 | *
156 | * @param fromViewId
157 | * @param toViewId
158 | */
159 | public void addTransition(int fromViewId, int toViewId) {
160 | addTransition(fromViewId, toViewId, true);
161 | }
162 |
163 | /**
164 | * Set up shared element transition from element with fromViewId to
165 | * element with toViewId. Note that you can setup each transition
166 | * direction separately. e.g.
167 | * addTransition(R.id.FirstPageTextView, R.id.SecondPageTextView)
168 | * and
169 | * addTransition(R.id.SecondPageTextView, R.id.FirstPageTextView)
170 | * are different.
171 | *
172 | * @param fromViewId
173 | * @param toViewId
174 | * @param bothDirections to include backward transition from toViewId to fromViewId aswell
175 | */
176 | public void addTransition(int fromViewId, int toViewId, boolean bothDirections) {
177 | sharedElementIds.add(new Pair<>(fromViewId, toViewId));
178 | if (bothDirections) {
179 | sharedElementIds.add(new Pair<>(toViewId, fromViewId));
180 | }
181 | }
182 |
183 | @Override
184 | public void removeTransition(int fromViewId, int toViewId, boolean bothDirections) {
185 | sharedElementIds.remove(new Pair<>(fromViewId, toViewId));
186 | if (bothDirections) {
187 | sharedElementIds.remove(new Pair<>(toViewId, fromViewId));
188 | }
189 | }
190 |
191 | @Override
192 | public void removeTransition(int fromViewId, int toViewId) {
193 | removeTransition(fromViewId, toViewId, true);
194 | }
195 |
196 |
197 | public void clearAllTransitions() {
198 | sharedElementIds.clear();
199 | }
200 |
201 |
202 |
203 | }
204 |
--------------------------------------------------------------------------------
/shared-element-view-pager/src/main/java/ki/pagetransformer/sharedelement/AuxiliarySePageTransformer.java:
--------------------------------------------------------------------------------
1 | package ki.pagetransformer.sharedelement;
2 |
3 | import android.app.Activity;
4 | import android.os.Build;
5 | import android.util.Pair;
6 | import android.view.View;
7 | import android.view.ViewGroup;
8 | import android.widget.ImageView;
9 | import android.widget.RelativeLayout;
10 | import androidx.fragment.app.Fragment;
11 | import androidx.viewpager.widget.ViewPager;
12 |
13 | import java.util.HashMap;
14 | import java.util.List;
15 | import java.util.Map;
16 |
17 | /**
18 | * PageTransformer that allows you to do shared element transitions between pages in ViewPager.
19 | * It works only with ImageViews atm. And requires viewpager to be displayed on relative layout.
20 | * Usage:
21 | *
22 | * sharedElementPageTransformer.addTransition(R.id.FirstPageTextView, R.id.SecondPageTextView)
23 | *
24 | */
25 | public class AuxiliarySePageTransformer extends AbstractSePageTransformer {
26 |
27 | private Map, View> intermediateViews = new HashMap<>();
28 |
29 | private final Object relativeLayout;
30 |
31 | /**
32 | * @param activity activity that hosts view pager
33 | * @param fragments fragment that are in view pager in the SAME ORDER
34 | * @param viewPager
35 | * @param relativeLayout
36 | */
37 | public AuxiliarySePageTransformer(Activity activity, List fragments, ViewPager viewPager, Object relativeLayout) {
38 | super(activity, fragments, viewPager);
39 | this.relativeLayout = relativeLayout;
40 | }
41 |
42 | @Override
43 | protected void modifyPositions(View fromView, View toView, View fromPage, View toPage, View currentPage, float position, boolean slideToTheRight) {
44 | Integer fromViewId = fromView.getId();
45 | Integer toViewId = toView.getId();
46 |
47 | Pair idPair = Pair.create(fromView.getId(), toView.getId());
48 |
49 | if (fromView instanceof ImageView && toView instanceof ImageView) {
50 | if (!intermediateViews.containsKey(idPair)) {
51 | // for debug purposes
52 | // TextView imageView = new TextView(activity);
53 | // imageView.setText(idPair.first + " - " + idPair.second);
54 | // imageView.setTextSize(40);
55 | ImageView imageView = new ImageView(activity);
56 | // imageView.setBackgroundColor(0xFF000000);
57 | imageView.setImageDrawable(((ImageView) fromView).getDrawable());
58 | imageView.setMaxWidth(fromView.getWidth());
59 | imageView.setMinimumWidth(fromView.getWidth());
60 | imageView.setMaxHeight(fromView.getHeight());
61 | imageView.setMinimumHeight(fromView.getHeight());
62 | imageView.setScaleType(((ImageView) fromView).getScaleType());
63 |
64 |
65 | RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(fromView.getWidth(), fromView.getHeight());
66 | int[] fromViewPosition = new int[2];
67 | fromView.getLocationInWindow(fromViewPosition);
68 | int[] layoutPosition = getLayoutPosition();
69 |
70 | params.leftMargin = fromViewPosition[0] - layoutPosition[0];
71 | params.topMargin = fromViewPosition[1] - layoutPosition[1];
72 |
73 | intermediateViews.put(idPair, imageView);
74 |
75 |
76 | ((RelativeLayout) relativeLayout).addView(imageView, params);
77 | }
78 |
79 |
80 | // saving shared element position on the screen
81 |
82 | float fromX = idToAbsX.get(fromViewId) != null ? idToAbsX.get(fromViewId) : fromView.getX() - fromView.getTranslationX();
83 | float fromY = idToAbsY.get(fromViewId) != null ? idToAbsY.get(fromViewId) : fromView.getY() - fromView.getTranslationY();
84 |
85 | float toX = idToAbsX.get(toViewId) != null ? idToAbsX.get(toViewId) : toView.getX() - toView.getTranslationX();
86 | float toY = idToAbsY.get(toViewId) != null ? idToAbsY.get(toViewId) : toView.getY() - toView.getTranslationY();
87 | float deltaX = toX - fromX;
88 | float deltaY = toY - fromY;
89 |
90 | // scaling
91 | float fromWidth = fromView.getWidth();
92 | float fromHeight = fromView.getHeight();
93 | float toWidth = toView.getWidth();
94 | float toHeight = toView.getHeight();
95 | float deltaWidth = toWidth - fromWidth;
96 | float deltaHeight = toHeight - fromHeight;
97 |
98 |
99 | int fromId = fromView.getId();
100 | int toId = toView.getId();
101 |
102 | if (position <= -1) {
103 | View intermediateView = intermediateViews.get(idPair);
104 | if (intermediateView != null && currentPage.findViewById(fromId) != null) {
105 | intermediateView.setVisibility(View.INVISIBLE);
106 |
107 | }
108 |
109 | } else if (position < 1) {
110 |
111 |
112 | float sign = slideToTheRight ? 1 : -1;
113 |
114 | View intermediateView = intermediateViews.get(idPair);
115 | if (intermediateView != null && currentPage.findViewById(fromId) != null) {
116 |
117 | float translationXx = (deltaX + deltaWidth / 2) * sign * (-(position));
118 | float translationYy = (deltaY + deltaHeight / 2) * sign * (-(position));
119 |
120 | Float fromViewX = idToAbsX.get(fromId);
121 | Float fromViewY = idToAbsY.get(fromId);
122 |
123 | if (intermediateView.getLayoutParams() instanceof ViewGroup.MarginLayoutParams && fromViewX != null) {
124 | ViewGroup.MarginLayoutParams p = (ViewGroup.MarginLayoutParams) intermediateView.getLayoutParams();
125 | if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
126 | //TranslationX and Y is not working properly so I have to use margin
127 | int[] layoutPosition = getLayoutPosition();
128 | int marginX = (int) (translationXx + fromViewX - layoutPosition[0]);
129 | int marginY = (int) (translationYy + fromViewY - layoutPosition[1]);
130 | p.setMarginStart(marginX);
131 | p.topMargin = marginY;
132 |
133 | }
134 | // intermediateView.setTranslationX(translationXx);
135 | // intermediateView.setTranslationY(translationYy);
136 | intermediateView.requestLayout();
137 | }
138 |
139 | float scaleX = (fromWidth == 0) ? 1 : (fromWidth + deltaWidth * sign * (-position)) / fromWidth;
140 | float scaleY = (fromHeight == 0) ? 1 : (fromHeight + deltaHeight * sign * (-position)) / fromHeight;
141 |
142 | intermediateView.setScaleX(scaleX);
143 | intermediateView.setScaleY(scaleY);
144 | // intermediateView.setVisibility(View.VISIBLE);
145 | // ImageView imageView = intermediateViews.get(Pair.create(idPair.second, idPair.first));
146 | // if (imageView != null) {
147 | // imageView.setVisibility(View.INVISIBLE);
148 | // }
149 | }
150 |
151 |
152 | if (currentPage.findViewById(fromId) != null) {
153 | if (slideToTheRight) {
154 | if ((position > -1) && (position < 0)) {
155 | fromView.setVisibility(View.INVISIBLE);
156 | intermediateView.setVisibility(View.VISIBLE);
157 | } else {
158 | fromView.setVisibility(View.VISIBLE);
159 | intermediateView.setVisibility(View.INVISIBLE);
160 | }
161 | } else {
162 | if ((position > 0) && (position < 1)) {
163 | fromView.setVisibility(View.INVISIBLE);
164 | intermediateView.setVisibility(View.VISIBLE);
165 | } else {
166 | fromView.setVisibility(View.VISIBLE);
167 | intermediateView.setVisibility(View.INVISIBLE);
168 | }
169 | }
170 | }
171 | if (currentPage.findViewById(toId) != null) {
172 | if (slideToTheRight) {
173 | if ((position > 0) && (position < 1)) {
174 | toView.setVisibility(View.INVISIBLE);
175 | intermediateView.setVisibility(View.VISIBLE);
176 | } else {
177 | toView.setVisibility(View.VISIBLE);
178 | intermediateView.setVisibility(View.INVISIBLE);
179 | }
180 | } else {
181 | if ((position > -1) && (position < 0)) {
182 | toView.setVisibility(View.INVISIBLE);
183 | intermediateView.setVisibility(View.VISIBLE);
184 | } else {
185 | toView.setVisibility(View.VISIBLE);
186 | intermediateView.setVisibility(View.INVISIBLE);
187 | }
188 | }
189 |
190 |
191 | }
192 | // if (currentPage.findViewById(toId) != null) {
193 | // if(slideToTheRight) {
194 | // if (position >= 0 || position <= -1) {
195 | // toView.setVisibility(View.VISIBLE);
196 | //// intermediateView.setVisibility(View.INVISIBLE);
197 | // } else {
198 | // toView.setVisibility(View.INVISIBLE);
199 | //// intermediateView.setVisibility(View.VISIBLE);
200 | // }
201 | // } else {
202 | // if (position <= 0 || position >= 1) {
203 | // toView.setVisibility(View.VISIBLE);
204 | //// intermediateView.setVisibility(View.INVISIBLE);
205 | // } else {
206 | // toView.setVisibility(View.INVISIBLE);
207 | //// intermediateView.setVisibility(View.VISIBLE);
208 | // }
209 | // }
210 | //
211 | //
212 | //
213 | // }
214 |
215 |
216 | } else {
217 | View intermediateView = intermediateViews.get(idPair);
218 | if (intermediateView != null && currentPage.findViewById(fromId) != null) {
219 | intermediateView.setVisibility(View.INVISIBLE);
220 |
221 | }
222 | }
223 | }
224 | }
225 |
226 | private int[] getLayoutPosition() {
227 | int[] layoutPosition = new int[2];
228 | ((View) relativeLayout).getLocationInWindow(layoutPosition);
229 | return layoutPosition;
230 | }
231 |
232 | @Override
233 | public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
234 | super.onPageScrolled(position, positionOffset, positionOffsetPixels);
235 |
236 | float pageWidth = getPageWidth();
237 |
238 | for (Pair idPair : sharedElementIds) {
239 | //TODO: get rid of this loop
240 | for (int i = 0; i < pages.size(); i++) {
241 | View page = pages.get(i);
242 | if (page == null) {
243 | return;
244 | }
245 |
246 | View firstView = page.findViewById(idPair.first);
247 |
248 | if (firstView != null) {
249 | float x = getX(firstView) - ((float) i - (position + positionOffset)) * pageWidth;
250 | idToAbsX.put(firstView.getId(), x);
251 | idToAbsY.put(firstView.getId(), (float) getY(firstView));
252 | // System.out.println("onPageScrolled id = " + firstView.getId() + " x = " + x + " y = " + getY(firstView));
253 | }
254 |
255 | View secondView = page.findViewById(idPair.second);
256 |
257 | if (secondView != null) {
258 | float x = getX(secondView) - ((float) i - (position + positionOffset)) * pageWidth;
259 | idToAbsX.put(secondView.getId(), x);
260 | idToAbsY.put(secondView.getId(), (float) getY(secondView));
261 | // System.out.println("onPageScrolled id = " + secondView.getId() + " x = " + x + " y = " + getY(secondView));
262 | }
263 |
264 | }
265 | }
266 |
267 | }
268 |
269 |
270 | @Override
271 | public void removeTransition(int fromViewId, int toViewId, boolean bothDirections) {
272 | super.removeTransition(fromViewId, toViewId, bothDirections);
273 |
274 | Pair idPair = Pair.create(fromViewId, toViewId);
275 | View view = intermediateViews.get(idPair);
276 | ((RelativeLayout) relativeLayout).removeView(view);
277 | intermediateViews.remove(idPair);
278 | if(bothDirections) {
279 | idPair = Pair.create(toViewId, fromViewId);
280 | view = intermediateViews.get(idPair);
281 | ((RelativeLayout) relativeLayout).removeView(view);
282 | intermediateViews.remove(idPair);
283 |
284 | }
285 |
286 | }
287 |
288 | @Override
289 | public void removeTransition(int fromViewId, int toViewId) {
290 | removeTransition(fromViewId, toViewId, true);
291 | super.removeTransition(fromViewId, toViewId);
292 | }
293 |
294 | @Override
295 | public void clearAllTransitions() {
296 | super.clearAllTransitions();
297 | for (Pair idPair : intermediateViews.keySet()) {
298 | removeTransition(idPair.first, idPair.second, true);
299 | }
300 |
301 |
302 | }
303 |
304 | public int getX(View view) {
305 | int[] position = new int[2];
306 | view.getLocationOnScreen(position);
307 | return position[0];
308 | }
309 |
310 | public int getY(View view) {
311 | int[] position = new int[2];
312 | view.getLocationOnScreen(position);
313 | return position[1];
314 | }
315 |
316 | }
--------------------------------------------------------------------------------
/shared-element-view-pager/src/main/java/ki/pagetransformer/sharedelement/DefaultSePageTransformer.java:
--------------------------------------------------------------------------------
1 | package ki.pagetransformer.sharedelement;
2 |
3 | import android.app.Activity;
4 | import android.view.View;
5 |
6 | import androidx.fragment.app.Fragment;
7 | import androidx.viewpager.widget.ViewPager;
8 |
9 | import java.util.List;
10 |
11 | /**
12 | * PageTransformer that allows you to do shared element transitions between pages in ViewPager.
13 | * It requires view pager sides match screen sides to function properly. I.e. ViewPager page width
14 | * must be equal to screen width.
15 | * Usage:
16 | *
17 | * sharedElementPageTransformer.addTransition(R.id.FirstPageTextView, R.id.SecondPageTextView)
18 | *
19 | */
20 | public class DefaultSePageTransformer extends AbstractSePageTransformer {
21 |
22 | /**
23 | * @param activity activity that hosts view pager
24 | * @param fragments fragment that are in view pager in the SAME ORDER
25 | * @param viewPager
26 | */
27 | public DefaultSePageTransformer(Activity activity, List fragments, ViewPager viewPager) {
28 | super(activity, fragments, viewPager);
29 | }
30 |
31 | @Override
32 | protected void modifyPositions(View fromView, View toView, View fromPage, View toPage, View currentPage, float position, boolean slideToTheRight) {
33 | // saving shared element position on the screen
34 | float fromX = fromView.getX() - fromView.getTranslationX();
35 | float fromY = fromView.getY() - fromView.getTranslationY();
36 | float toX = toView.getX() - toView.getTranslationX();
37 | float toY = toView.getY() - toView.getTranslationY();
38 | float deltaX = toX - fromX;
39 | float deltaY = toY - fromY;
40 |
41 | // scaling
42 | float fromWidth = fromView.getWidth();
43 | float fromHeight = fromView.getHeight();
44 | float toWidth = toView.getWidth();
45 | float toHeight = toView.getHeight();
46 | float deltaWidth = toWidth - fromWidth;
47 | float deltaHeight = toHeight - fromHeight;
48 |
49 |
50 | int fromId = fromView.getId();
51 | int toId = toView.getId();
52 |
53 | if (position <= -1) {
54 |
55 | } else if (position < 1) {
56 |
57 | float pageWidth = getPageWidth();
58 | float sign = slideToTheRight ? 1 : -1;
59 |
60 | float translationY = (deltaY + deltaHeight / 2) * sign * (-position);
61 | float translationX = (deltaX + sign * pageWidth + deltaWidth / 2) * sign * (-position);
62 |
63 | if (currentPage.findViewById(fromId) != null) {
64 | fromView.setTranslationX(translationX);
65 | fromView.setTranslationY(translationY);
66 |
67 | float scaleX = (fromWidth == 0) ? 1 : (fromWidth + deltaWidth * sign * (-position)) / fromWidth;
68 | float scaleY = (fromHeight == 0) ? 1 : (fromHeight + deltaHeight * sign * (-position)) / fromHeight;
69 |
70 | fromView.setScaleX(scaleX);
71 | fromView.setScaleY(scaleY);
72 | }
73 | if (currentPage.findViewById(toId) != null) {
74 |
75 | toView.setTranslationX(translationX);
76 | toView.setTranslationY(translationY);
77 | float scaleX = (toWidth == 0) ? 1 : (toWidth + deltaWidth * sign * (-position)) / toWidth;
78 | float scaleY = (toHeight == 0) ? 1 :(toHeight + deltaHeight * sign * (-position)) / toHeight;
79 |
80 | toView.setScaleX(scaleX);
81 | toView.setScaleY(scaleY);
82 | }
83 |
84 |
85 | } else {
86 | }
87 |
88 |
89 | }
90 | }
--------------------------------------------------------------------------------
/shared-element-view-pager/src/main/java/ki/pagetransformer/sharedelement/SePageTransformer.java:
--------------------------------------------------------------------------------
1 | package ki.pagetransformer.sharedelement;
2 |
3 | import android.util.Pair;
4 |
5 | import androidx.viewpager.widget.ViewPager;
6 |
7 | /**
8 | * SePageTransformer stands for Shared Element Page Transformer
9 | */
10 | public interface SePageTransformer extends ViewPager.PageTransformer, ViewPager.OnPageChangeListener {
11 |
12 | /**
13 | * Set up shared element transition from element with fromViewId to
14 | * element with toViewId and vice versa. Note that you can setup each transition
15 | * direction separately using
16 | * addTransition(int fromViewId, int toViewId, boolean bothDirections). e.g.
17 | * addTransition(R.id.FirstPageTextView, R.id.SecondPageTextView, false)
18 | * and
19 | * addTransition(R.id.SecondPageTextView, R.id.FirstPageTextView, false)
20 | * are different.
21 | *
22 | * @param fromViewId
23 | * @param toViewId
24 | */
25 | void addTransition(int fromViewId, int toViewId);
26 |
27 | /**
28 | * Set up shared element transition from element with fromViewId to
29 | * element with toViewId and vice versa. Note that you can setup each transition
30 | * direction separately using
31 | * addTransition(int fromViewId, int toViewId, boolean bothDirections). e.g.
32 | * addTransition(R.id.FirstPageTextView, R.id.SecondPageTextView, false)
33 | * and
34 | * addTransition(R.id.SecondPageTextView, R.id.FirstPageTextView, false)
35 | * are different.
36 | *
37 | * @param fromViewId
38 | * @param toViewId
39 | * @param bothDirections to include backward transition from toViewId to fromViewId aswell
40 | */
41 | void addTransition(int fromViewId, int toViewId, boolean bothDirections);
42 |
43 | void removeTransition(int fromViewId, int toViewId, boolean bothDirections);
44 |
45 | void removeTransition(int fromViewId, int toViewId);
46 |
47 |
48 | void clearAllTransitions();
49 | }
50 |
--------------------------------------------------------------------------------
/shared-element-view-pager/src/main/java/ki/pagetransformer/sharedelement/SharedElementPageTransformer.java:
--------------------------------------------------------------------------------
1 | package ki.pagetransformer.sharedelement;
2 |
3 | import android.app.Activity;
4 | import android.graphics.Point;
5 | import android.util.Pair;
6 | import android.view.View;
7 |
8 | import androidx.annotation.NonNull;
9 | import androidx.fragment.app.Fragment;
10 | import androidx.viewpager.widget.ViewPager;
11 |
12 |
13 | import java.util.ArrayList;
14 | import java.util.HashMap;
15 | import java.util.HashSet;
16 | import java.util.List;
17 | import java.util.Map;
18 | import java.util.Set;
19 |
20 | import static androidx.viewpager.widget.ViewPager.SCROLL_STATE_IDLE;
21 |
22 | /**
23 | * PageTransformer that allows you to do shared element transitions between pages in ViewPager.
24 | * It requires view pager sides match screen sides to function properly. I.e. ViewPager page width
25 | * must be equal to screen width.
26 | * Usage:
27 | *
28 | * sharedElementPageTransformer.addSharedTransition(R.id.FirstPageTextView, R.id.SecondPageTextView)
29 | *
30 | *
31 | *
32 | */
33 | public class SharedElementPageTransformer implements ViewPager.PageTransformer, ViewPager.OnPageChangeListener {
34 | /** Android need the correction while view scaling for some reason*/
35 | private static float MAGICAL_ANDROID_RENDERING_SCALE = 1;
36 | // private static float MAGICAL_ANDROID_RENDERING_SCALE = 0.995f;
37 |
38 | // External variables
39 |
40 | private final Activity activity;
41 | List fragments;
42 | private Set> sharedElementIds = new HashSet<>();
43 |
44 |
45 |
46 | //Internal variables
47 |
48 | private List pages;
49 | private Map pageToNumber = new HashMap<>();
50 |
51 | private Integer fromPageNumber = 0;
52 | private Integer toPageNumber;
53 |
54 | /** current view pager position */
55 | private int position;
56 |
57 | /**
58 | * @param activity activity that hosts view pager
59 | * @param fragments fragment that are in view pager in the SAME ORDER
60 | */
61 | public SharedElementPageTransformer(Activity activity, List fragments) {
62 | this.activity = activity;
63 | this.fragments = fragments;
64 | }
65 |
66 |
67 | @Override
68 | public void transformPage(@NonNull View page, float position) {
69 | updatePageCache();
70 | if (fromPageNumber == null || toPageNumber == null) return;
71 |
72 | for (Pair idPair : sharedElementIds) {
73 | Integer fromViewId = idPair.first;
74 | Integer toViewId = idPair.second;
75 |
76 | View fromView = activity.findViewById(fromViewId);
77 | View toView = activity.findViewById(toViewId);
78 |
79 | if (fromView != null && toView != null) {
80 | //Looking if current Shared element transition matches visible pages
81 |
82 | View fromPage = pages.get(fromPageNumber);
83 | View toPage = pages.get(toPageNumber);
84 |
85 | if (fromPage != null && toPage != null) {
86 | fromView = fromPage.findViewById(fromViewId);
87 | toView = toPage.findViewById(toViewId);
88 |
89 |
90 | // if both views are on pages user drag between apply transformation
91 | if (
92 | fromView != null
93 | && toView != null
94 | ) {
95 | // saving shared element position on the screen
96 | float fromX = fromView.getX() - fromView.getTranslationX();
97 | float fromY = fromView.getY() - fromView.getTranslationY();
98 | float toX = toView.getX() - toView.getTranslationX();
99 | float toY = toView.getY() - toView.getTranslationY();
100 | float deltaX = toX - fromX;
101 | float deltaY = toY - fromY;
102 |
103 | // scaling
104 | float fromWidth = fromView.getWidth();
105 | float fromHeight = fromView.getHeight();
106 | float toWidth = toView.getWidth();
107 | float toHeight = toView.getHeight();
108 | float deltaWidth = toWidth - fromWidth;
109 | float deltaHeight = toHeight - fromHeight;
110 |
111 |
112 | int fromId = fromView.getId();
113 | int toId = toView.getId();
114 |
115 | boolean slideToTheRight = toPageNumber > fromPageNumber;
116 |
117 | if (position <= -1) {
118 |
119 | } else if (position < 1) {
120 |
121 | float pageWidth = getSceenWidth();
122 | float sign = slideToTheRight ? 1 : -1;
123 |
124 | float translationY = (deltaY + deltaHeight / 2) * sign * (-position);
125 | float translationX = (deltaX + sign * pageWidth + deltaWidth / 2) * sign * (-position);
126 |
127 | if (page.findViewById(fromId) != null) {
128 | fromView.setTranslationX(translationX);
129 | fromView.setTranslationY(translationY);
130 |
131 | float scaleX = (fromWidth == 0) ? 1 : (fromWidth + deltaWidth * sign * (-position)) / fromWidth;
132 | float scaleY = (fromHeight == 0) ? 1 : (fromHeight + deltaHeight * sign * (-position)) / fromHeight;
133 |
134 | fromView.setScaleX(scaleX);
135 | fromView.setScaleY(scaleY * MAGICAL_ANDROID_RENDERING_SCALE);
136 | }
137 | if (page.findViewById(toId) != null) {
138 |
139 | toView.setTranslationX(translationX);
140 | toView.setTranslationY(translationY);
141 | float scaleX = (toWidth == 0) ? 1 : (toWidth + deltaWidth * sign * (-position)) / toWidth;
142 | float scaleY = (toHeight == 0) ? 1 :(toHeight + deltaHeight * sign * (-position)) / toHeight;
143 |
144 | toView.setScaleX(scaleX);
145 | toView.setScaleY(scaleY);
146 | }
147 |
148 |
149 | } else {
150 | }
151 |
152 | }
153 | }
154 | }
155 | }
156 | }
157 |
158 | private float getSceenWidth() {
159 | Point outSize = new Point();
160 | activity.getWindowManager().getDefaultDisplay().getSize(outSize);
161 | return outSize.x;
162 | }
163 |
164 | /**
165 | * Creating page cache array to determine if shared element on
166 | * currently visible page
167 | */
168 | private void updatePageCache() {
169 | pages = new ArrayList<>();
170 |
171 | for (int i = 0; i < fragments.size(); i++) {
172 | View pageView = fragments.get(i).getView();
173 | pages.add(pageView);
174 | pageToNumber.put(pageView, i);
175 |
176 | }
177 | }
178 |
179 |
180 | @Override
181 | public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
182 | Set visiblePages = new HashSet<>();
183 |
184 | visiblePages.add(position);
185 | visiblePages.add(positionOffset >= 0 ? position + 1 : position - 1);
186 | visiblePages.remove(fromPageNumber);
187 |
188 | toPageNumber = visiblePages.iterator().next();
189 |
190 | if (pages == null || toPageNumber >= pages.size()) toPageNumber = null;
191 | }
192 |
193 |
194 | @Override
195 | public void onPageSelected(int position) {
196 | this.position = position;
197 | }
198 |
199 | @Override
200 | public void onPageScrollStateChanged(int state) {
201 | if (state == SCROLL_STATE_IDLE) {
202 | fromPageNumber = position;
203 | resetViewPositions();
204 | }
205 |
206 | }
207 |
208 | private void resetViewPositions() {
209 | for (Pair idPair : sharedElementIds) {
210 | View sharedElement = activity.findViewById(idPair.first);
211 | if(sharedElement != null) {
212 | sharedElement.setTranslationX(0);
213 | sharedElement.setTranslationY(0);
214 | sharedElement.setScaleX(1);
215 | sharedElement.setScaleY(1);
216 | }
217 | sharedElement = activity.findViewById(idPair.second);
218 | if(sharedElement != null) {
219 |
220 | sharedElement.setTranslationX(0);
221 | sharedElement.setTranslationY(0);
222 | sharedElement.setScaleX(1);
223 | sharedElement.setScaleY(1);
224 | }
225 | }
226 |
227 | }
228 |
229 | /**
230 | * Set up shared element transition from element with fromViewId to
231 | * element with toViewId. Note that you can setup each transition
232 | * direction separately. e.g.
233 | * addSharedTransition(R.id.FirstPageTextView, R.id.SecondPageTextView)
234 | * and
235 | * addSharedTransition(R.id.SecondPageTextView, R.id.FirstPageTextView)
236 | * are different.
237 | * @param fromViewId
238 | * @param toViewId
239 | */
240 | public void addSharedTransition(int fromViewId, int toViewId) {
241 | addSharedTransition(fromViewId, toViewId, false);
242 | }
243 |
244 | /**
245 | * Set up shared element transition from element with fromViewId to
246 | * element with toViewId. Note that you can setup each transition
247 | * direction separately. e.g.
248 | * addSharedTransition(R.id.FirstPageTextView, R.id.SecondPageTextView)
249 | * and
250 | * addSharedTransition(R.id.SecondPageTextView, R.id.FirstPageTextView)
251 | * are different.
252 | * @param fromViewId
253 | * @param toViewId
254 | * @param bothDirections to include backward transition from toViewId to fromViewId aswell
255 | */
256 | public void addSharedTransition(int fromViewId, int toViewId, boolean bothDirections) {
257 | sharedElementIds.add(new Pair<>(fromViewId, toViewId));
258 | if(bothDirections) {
259 | sharedElementIds.add(new Pair<>(toViewId, fromViewId));
260 | }
261 | }
262 | /**
263 | * In case there is "ladder" appears between while transition.
264 | * You may try to tune that magical scale to get rid of it.
265 | * @param magicalAndroidRenderingScale float between 0 and infinity. Typically very close to 1.0
266 | */
267 | public static void setMagicalAndroidRenderingScale(float magicalAndroidRenderingScale) {
268 | MAGICAL_ANDROID_RENDERING_SCALE = magicalAndroidRenderingScale;
269 | }
270 | }
--------------------------------------------------------------------------------
/shared-element-view-pager/src/main/res/values/strings.xml:
--------------------------------------------------------------------------------
1 |
2 | SharedElementPageTransformer
3 |
4 |
--------------------------------------------------------------------------------