• Stars
    star
    779
  • Rank 58,364 (Top 2 %)
  • Language
    Java
  • License
    MIT License
  • Created over 10 years ago
  • Updated almost 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Add some depth to your Android scrolling.

Parallax Pager

Android Arsenal

Add some depth to your Android scrolling using the parallax effect!

Installation

Step 1. Add the JitPack repository to your build file

allprojects {
  repositories {
    ...
    maven { url 'https://jitpack.io' }
  }
}

Step 2. Add the dependency

dependencies {
  implementation 'com.github.prolificinteractive:parallaxpager:${parallaxpagerVersion}'
}

Usage

There are 4 important steps:

  1. Use a ParallaxContainer in layout XML

  2. Create a layout XML file for each page

  3. Wrap the Activity Context

  4. Add the attachment code to onCreate of your Activity or onCreateView of your Fragment

1. Use a ParallaxContainer in layout XML

Use the class com.prolificinteractive.parallaxpager.ParallaxContainer in your layout XML, sizing it however you like.

Ex:

<com.prolificinteractive.parallaxpager.ParallaxContainer
      android:id="@+id/parallax_container_1"
      android:layout_width="match_parent"
      android:layout_height="match_parent"/>

2. Create a layout XML file for each page

Each page must have its own layout XML file. Use whichever Layouts or Views you like, as usual.

Ensure this line is added to the Root Element:

xmlns:app="http://schemas.android.com/apk/res-auto"

Assign any combination of the following attributes (all floats):

  • x_in: as the View enters the screen, it will translate in the horizontal direction along with user swiping, at a rate multiplied by this value. Default is 0.

  • x_out: as the View leaves the screen, it will translate in the horizontal direction along with user swiping, at a rate multiplied by this value. Default is 0.

  • y_in: as the View enters the screen, it will translate downward as the user swipes right to left, at a rate multiplied by this value. Default is 0.

  • y_out: as the View leaves the screen, it will translate upward as the user swipes right to left, at a rate multiplied by this value. Default is 0.

  • a_in: as the View enters the screen, it will fade in as the user swipes right to left, at a rate multiplied by this value. Default is 0.

  • a_out: as the View leaves the screen, it will fade out as the user swipes right to left, at a rate multiplied by this value. Default is 0.

Ex:

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

  <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:x_in="@dimen/parallax_speed_medium"
      app:x_out="@dimen/parallax_speed_fast"
      app:y_in="@dimen/parallax_speed_medium_rev"
      app:y_out="@dimen/parallax_speed_fast"
      app:a_in="@dimen/parallax_speed_very_fast"
      app:a_out="@dimen/parallax_speed_very_fast"
      android:text="@string/text_1"
      />

  <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:x_in="@dimen/parallax_speed_medium_rev"
      app:x_out="@dimen/parallax_speed_fast"
      app:y_in="@dimen/parallax_speed_medium"
      app:y_out="@dimen/parallax_speed_fast_rev"
      app:a_in="@dimen/parallax_speed_very_fast"
      app:a_out="@dimen/parallax_speed_very_fast"
      android:text="@string/text_2"
      />
</LinearLayout>

Keep in mind that negative values mean a change in direction for translation effects, and have no effect for alpha. For translation effects, values between 0 and 1 will result in a high level of funkiness.

3. Wrap the Activity Context

Wrap the activity context using com.prolificinteractive.parallaxpager.ParallaxContextWrapper in your activity.

Ex:

  @Override
  protected void attachBaseContext(Context newBase) {
    super.attachBaseContext(new ParallaxContextWrapper(newBase));
  }

Note: If you are using this in conjunction with another library that wraps Context, it doesn't appear to like chaining them together. Instead, we've added the ability to hook into the View creation process to use with other libraries. The sample project shows how to hook into Calligraphy.

Ex:

  @Override
  protected void attachBaseContext(Context newBase) {
    super.attachBaseContext(
        new ParallaxContextWrapper(newBase, new OnViewCreatedListener() {
          @Override public View onViewCreated(View view, Context context, AttributeSet attrs) {
            //Setup view as needed
            return view; //Return the view passed in
          }
        })
    );
  }

4. Add the attachment code to onCreate of your Activity or onCreateView of your Fragment

Important steps in onCreate of an Activity (or onCreateView of a Fragment):

  • Find the parallax container by ID

  • Specify whether the pager should loop (true means it will loop)

  • Submit a Layout Inflater and list the layouts for each page (in order). Currently there must be at least 2 in this list (repeats allowed).

Ex:

// find the parallax container
ParallaxContainer parallaxContainer = (ParallaxContainer) findViewById(R.id.parallax_container);

// specify whether pager will loop
parallaxContainer.setLooping(true);

// wrap the inflater and inflate children with custom attributes
parallaxContainer.setupChildren(getLayoutInflater(),
    R.layout.parallax_view_1,
    R.layout.parallax_view_2,
    R.layout.parallax_view_3,
    R.layout.parallax_view_4);

Extras

Extra 1. Setting a ViewPager.OnPageChangeListener

You can set a ViewPager.OnPageChangeListener after the attachment code in step 4.

// optionally set a ViewPager.OnPageChangeListener
parallaxContainer.setOnPageChangeListener(this);

Extra 2. ViewPager access

You have access to the ViewPager by calling:

parallaxContainer.getViewPager();

This is exposed for use with existing code which requires a ViewPager instance. Please make sure that if you call methods like setAdapter or setOnPageChangeListener on the instance returned, that you do so with forethought and good reason.

Extra 3. Overriding parallax visibility

Parallax views will be VISIBLE when onscreen, and GONE when offscreen. If you need to override this behavior, set this attribute on your View in XML:

app:override_visibility="true"

Contributing

To report a bug or enhancement request, feel free to file an issue under the respective heading. If you wish to contribute to the project, fork this repo and submit a pull request.

Code contributions should follow the standards specified in the Prolific Android Code Style.

License

prolific

Copyright (c) 2018 Prolific Interactive

Parallax Pager is maintained and sponsored by Prolific Interactive. It may be redistributed under the terms specified in the LICENSE file.

More Repositories

1

material-calendarview

A Material design back port of Android's CalendarView
Java
5,903
star
2

Caishen

A Payment Card UI & Validator for iOS
Swift
762
star
3

Yoshi

A convenient wrapper around the UI code that is often needed for displaying debug menus.
Swift
267
star
4

Chandelier

A nice swipe layout that provides new actions with a material design look and feel
Java
240
star
5

swift-style-guide

A style guide for Swift.
176
star
6

SamMitiAR-iOS

Ready-and-easy-to-use ARKit framework for the best user experience.
Swift
120
star
7

node-html-to-json

Parses HTML strings into objects using flexible, composable filters.
JavaScript
119
star
8

PIDatePicker

[DEPRECATED] A customizable implementation of UIDatePicker, written in Swift.
Swift
39
star
9

navigation-conductor

A Conductor integration for the Navigation Architecture Component.
Kotlin
38
star
10

android-studio-templates

A set of templates for your Android Studio
FreeMarker
35
star
11

NavigationControllerBlurTransition

[DEPRECATED] A UINavigationController transition that utilizes a blur view for a simple interface.
Swift
35
star
12

HouseOfCards

Android tools for working with a house of (credit) cards
Java
27
star
13

Optik

A Swift library for displaying images from any source, local or remote.
Swift
25
star
14

PIAPIEnvironmentManager

[DEPRECATED] A simple manager for handling the various API Environments in your project.
Objective-C
20
star
15

SOLID-Principles

Exploring the SOLID Principles in Swift. Video: https://www.youtube.com/watch?v=gkxmeWvGEpU&t=2s
Swift
19
star
16

simcoe

A simple, light analytics framework for iOS.
Swift
19
star
17

anchored-behavior

A CoordinatorLayout Behavior to anchor views with an animation.
Kotlin
17
star
18

Marker

A light wrapper around NSAttributedString.
Swift
15
star
19

Kumi-iOS

Swift
15
star
20

TouchIDBlogPost

Accompanies the tutorial "Use Touch ID in Your Swift App"
Swift
12
star
21

Bellerophon

Swift
12
star
22

Pilas

A scrollable stackview.
Swift
9
star
23

applepay-demo

Objective-C
9
star
24

heimdall

A simple validation check overview for you password fields.
Java
8
star
25

mabi

Start your REST Mobile APIs Fast and Build as you Grow
C
8
star
26

PIVideoPlayer

[DEPRECATED] A custom wrapper around AVFoundation for playing silent video files without any chrome.
Objective-C
7
star
27

Velar

A custom alert view presenter.
Swift
6
star
28

geocoder

This is a device independent and plugable replacement for Android's builtin Geocoder.
Kotlin
6
star
29

ShimmerBlocks

Add blocked shimmering views to your view components.
Swift
5
star
30

Cake

[DEPRECATED] A Cocoapods wrapper allowing for greater control over your workspaces
Swift
5
star
31

ballad

Assemble API Blueprint specs with concatenation, templating, and inheritance.
HTML
4
star
32

patrons

SharedPreferences wrappers with an encryption package.
Kotlin
3
star
33

DeathStar

Sample project for the "Conquering the Testing Beast" talk for Swift Camp (http://swiftcamp.io/)
Swift
3
star
34

behalf

Emulate the way browsers make requests and manage cookies.
JavaScript
3
star
35

data-builder

A build tool for JSON and YAML that uses special keys to specify functions, i.e. $import.
JavaScript
2
star
36

TickerCounter

A counter with a ticker animation.
Swift
2
star
37

simplesamlphp-module-mongodb

SimpleSAML Store implementation for MongoDB PHP Library
PHP
2
star
38

flutter_debug_menu

Flutter Debug Menu
Dart
2
star
39

Birdo

Prolific's android wrapper around the UI code that is often needed for displaying debug menus.
Kotlin
1
star
40

glenlivet

Create flexible, reusable processing pipelines powered by plugins.
JavaScript
1
star
41

mabiSkeletonApi

PHP
1
star
42

Olapic-SDK-iOS

Objective-C
1
star
43

prolific-cleaner

Sets up javascript projects to be linted and checked for code styles based on commit and push git hooks.
JavaScript
1
star
44

IQKeyboardManager

Objective-C
1
star
45

simcoe-android

A simple, light analytics framework for Android.
Kotlin
1
star
46

DevKit

Collection of commonly used swift code
Swift
1
star
47

PIPassiveAlert

[DEPRECATED] A passive alert library in Objective-C. 🚨
Objective-C
1
star
48

pandroid-gradle-plugin

The PAndroid Gradle plugin allows all Prolific's Android project to run on our CI pipeline for different build variants.
Groovy
1
star
49

artgun-php

PHP ArtGun API Wrapper
PHP
1
star
50

simplesamlphp-module-mongo

SimpleSAML Store implementation for MongoDB
PHP
1
star