Add some depth to your Android scrolling.

Related tags

UI/UX ParallaxPager
Overview

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.

Comments
  • Support for sdk 21?

    Support for sdk 21?

    When I change the target version in the example module to 21, everything breaks. Is this because the library does not support it, or is it just the example app?

    opened by LeenaMansour 7
  • Listeners and Hooks

    Listeners and Hooks

    This implements a setOnPageChangeListener() for issue #10 and adds in a getViewPager() as forgotten about in issue #5.

    Propose: increment to version 2.1.0 after this PR.

    Please Review:

    • @mluedke2
    opened by dandc87 5
  • Allow subclasses to override page indicator listener

    Allow subclasses to override page indicator listener

    There's no way to add a page indicator at the moment (for example, ViewPagerIndicator). The ViewPager is created internally to the ParallaxContainer, so there's no way to connect it to a ViewPagerIndicator. This pull request adds a protected method that lets you create a subclass which lets you add a page indicator. The method signature is:

    protected void attachOnPageChangeListener(ViewPager viewPager, ViewPager.OnPageChangeListener listener)
    

    I've created a subclass for my project that looks like this:

    package com.example;
    
    import android.content.Context;
    import android.support.v4.view.ViewPager;
    import android.util.AttributeSet;
    
    import com.prolificinteractive.parallaxpager.ParallaxContainer;
    import com.viewpagerindicator.PageIndicator;
    
    public class PageIndicatorParallaxContainer extends ParallaxContainer {
        private PageIndicator mPageIndicator;
    
        @SuppressWarnings("UnusedDeclaration")
        public PageIndicatorParallaxContainer(Context context) {
            super(context);
        }
    
        @SuppressWarnings("UnusedDeclaration")
        public PageIndicatorParallaxContainer(Context context, AttributeSet attrs) {
            super(context, attrs);
        }
    
        @SuppressWarnings("UnusedDeclaration")
        public PageIndicatorParallaxContainer(Context context, AttributeSet attrs, int defStyle) {
            super(context, attrs, defStyle);
        }
    
        @Override
        protected void attachOnPageChangeListener(ViewPager viewPager,
                                                  ViewPager.OnPageChangeListener listener) {
            if (mPageIndicator != null) {
                mPageIndicator.setOnPageChangeListener(listener);
                mPageIndicator.setViewPager(viewPager);
    
            } else {
                viewPager.setOnPageChangeListener(listener);
            }
        }
    
        public void setPageIndicator(PageIndicator pageIndicator) {
            this.mPageIndicator = pageIndicator;
        }
    }
    

    I don't think this class belongs in the ParallaxPager package, but it's a good example.

    opened by scompt 4
  • Button in Parallax View unclickable

    Button in Parallax View unclickable

    I've found that views inflated by the ParallaxLayoutInflater are unresponsive to touch events. I have a button in the last layout (of 5) used with the ParallaxContainer, but I am not receiving an OnClick callback when I press the button. I've tried setting the clickable/enabled attributes of the button from within and from outside of the ParallaxContainer, but it didn't help.

    opened by faifai21 4
  • Not respecting visibility from layout file

    Not respecting visibility from layout file

    All components of the layout file are always visible, even if their visibility was set to invisible/gone. I'm performing some animations once the page is scrolled that require some components to not be visible.

    This is because of the code in ParallaxContainer in onPageScrolled sets the visibility to VISIBLE when the page is on the screen, and GONE when it's off the screen.

    I suggest only changing visibility if the layout hasn't set it to INVISIBLE, but I'm not sure if that would be too obscure for future users of your library. I can put a PR up doing that if you agree.

    Thanks!

    opened by LeenaMansour 3
  • views disappear

    views disappear

    hi, i tried out your lib, looked like it's exactly what i need. faced the problem that all views disappear after scrolling has finished, only the last view i added in setupChildren() remains visible. any hints on this ? using 2.2.1 and followed exactly the example

    opened by qstuff 1
  • A factory has already been set on this LayoutInflater

    A factory has already been set on this LayoutInflater

    I ran into this issue and saw that it was fixed in one of the more recent commits: https://github.com/prolificinteractive/ParallaxPager/commit/a3829d9443de78169e0d94a29a7f2e7d3987f663

    Will the version on Maven Central be updated with this fix?

    Thanks!

    opened by ErikKarlsson 1
  • Being able to listen to pageChange event.

    Being able to listen to pageChange event.

    There isn't currently a straightforward way to allow for tracking the pageChange event. For example, if I have 3 pages scrolling through using ParallaxPager, and I want some images to change or animation to happen once the user scrolls to the 3rd page. Since ParallaxContainer is the pageChangeEventListener and does not allow for setting a new one, it seems the only solution would be to subclass PrallaxContainer.

    Is it possible to attach a pageChangeListener to ParallaxContainer instead?

    Thanks!

    enhancement 
    opened by LeenaMansour 1
  • Pager indicator

    Pager indicator

    The Parallax Pager isn't working with CirclePageIndicator. I tried:

    pageIndicator.setViewPager(parallaxContainer.getViewPager());

    This causes the Parallax Pager to start on the last page and it can't be scrolled (only the pager indicator is moving).

    opened by ErikKarlsson 0
  • Fix issue with compiling using API 21

    Fix issue with compiling using API 21

    Copied a lot of work from the Calligraphy project to fix issue #7.

    It also appears that wrapping the Context multiple times no longer works, so to use Calligraphy in conjunction a work around was created.

    Example project now uses the AppCompat library.

    opened by dandc87 0
  • Update Example

    Update Example

    • [ ] title bg shouldn't be solid? I see it cutting off planets that move through title region
    • [x] no longer need SupportFragmentManager, no longer requires FragmentActivity
    opened by vinc3m1 0
  • Z ordering

    Z ordering

    Hi, Right now page one is overlapped by page two, instead I would like the first page to be on top. How do I accomplish this (reversing z-order of pages)?

    With the standard ViewPager you could use setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer) and set reverseDrawingOrder to true, but this doesn't seem to have any effect.

    opened by ErikKarlsson 0
Releases(3.0.0)
  • 3.0.0(May 9, 2018)

    Updated

    • Gradle Updated
    • ReadMe Updated
    • Moved the library to JitPack

    To use this project in your project:

    Add the repository to your root build.gradle

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

    Add the dependency

    dependencies {
        implementation 'com.github.prolificinteractive:ParallaxPager:2.2.2'
    }
    
    Source code(tar.gz)
    Source code(zip)
Owner
Prolific Interactive
Prolific Interactive is a strategy-led mobile agency partnering with high-growth lifestyle brands.
Prolific Interactive
A simple library to add Emoji support to your Android Application

Emoji A library to add Emoji support to your Android app. Emojis can be picked in a PopupWindow. In order to edit and display text with Emojis this li

Niklas Baudy 1.4k Jan 4, 2023
This library offers a simple method to add a small badge icon to your ActionBar-MenuItem

Android-ActionItemBadge ActionItemBadge is a library which offers a simple and easy to use method to add a badge to your action item! Screenshots Incl

Mike Penz 1.3k Jan 1, 2023
An Android application which visualizes some of the famous Algorithms for finding path from Source to Destination in a 2D grid.

Pathfinding-Visualizer An Android application which visualizes some of the famous Algorithms for finding path from Source to destination in a 2D grid.

Pranjal Mishra 37 Aug 8, 2022
This is a sample Android Studio project that shows the necessary code to create a note list widget, And it's an implementation of a lesson on the Pluralsight platform, but with some code improvements

NoteKeeper-Custom-Widgets This is a sample Android Studio project that shows the necessary code to create a note list widget, And it's an implementati

Ibrahim Mushtaha 3 Oct 29, 2022
Janishar Ali 2.1k Jan 1, 2023
This project created just for help developer who want to and ability of read VISA, UNION PAY, HUMO, ATTO and some other cards data read.

If you enjoy my content, please consider supporting what I do. Thank you. By me a Coffee To get a Git project into your build: Step 1. Add the JitPack

Fozilbek Imomov 1 Oct 15, 2022
TourGuide is an Android library that aims to provide an easy way to add pointers with animations over a desired Android View

TourGuide TourGuide is an Android library. It lets you add pointer, overlay and tooltip easily, guiding users on how to use your app. Refer to the exa

Tan Jun Rong 2.6k Jan 5, 2023
Android view that allows the user to create drawings. Customize settings like color, width or tools. Undo or redo actions. Zoom into DrawView and add a background.

DrawView Android view that allows the user to create drawings. Draw anything you like in your Android device from simple view. Customize draw settings

Oscar Gilberto Medina Cruz 839 Dec 28, 2022
PCard Add payment card screen made using JetPack Compose

PCard Add payment card screen made using JetPack Compose Find this repository useful? ❤️ Support it by joining stargazers for this repository. ⭐ And f

Mohamed Elbehiry 61 Dec 16, 2022
Bubbles for Android is an Android library to provide chat heads capabilities on your apps. With a fast way to integrate with your development.

Bubbles for Android Bubbles for Android is an Android library to provide chat heads capabilities on your apps. With a fast way to integrate with your

Txus Ballesteros 1.5k Jan 2, 2023
Make your native android Toasts Fancy. A library that takes the standard Android toast to the next level with a variety of styling options. Style your toast from code.

FancyToast-Android Prerequisites Add this in your root build.gradle file (not your module build.gradle file): allprojects { repositories { ... ma

Shashank Singhal 1.2k Dec 26, 2022
Make your native android Dialog Fancy. A library that takes the standard Android Dialog to the next level with a variety of styling options. Style your dialog from code.

FancyAlertDialog-Android Prerequisites Add this in your root build.gradle file (not your module build.gradle file): allprojects { repositories { ..

Shashank Singhal 350 Dec 9, 2022
[] Define and render UI specs on top of your Android UI

dspec A simple way to define and render UI specs on top of your Android UI. Usage Enclose the target UI with a DesignSpecFrameLayout, usually the root

Lucas Rocha 561 Dec 16, 2022
Useful library to use custom fonts in your android app

EasyFonts A simple and useful android library to use custom fonts in android apps without adding fonts into asset/resource folder.Also by using this l

Vijay Vankhede 419 Sep 9, 2022
Make a cool intro for your Android app.

AppIntro AppIntro is an Android Library that helps you build a cool carousel intro for your App. AppIntro has support for requesting permissions and h

AppIntro Team 10.3k Dec 30, 2022
:bread: Make your native android Toasts Tasty

TastyToast Make your native android toast look beautiful. Preview About Refer Here Wiki Grab the above demo app from here : Dependency Add dependency

Rahul Yadav 2k Dec 29, 2022
StandOut lets you easily create floating windows in your Android app.

Coming Soon Meanwhile, checkout the demo video at http://www.youtube.com/watch?v=S3vHjxonOeg Join the conversation at http://forum.xda-developers.com/

Mark Wei 1.2k Dec 12, 2022
Android Library to display your changelog

ChangeLog Library ChangeLog Library provides an easy way to display a change log in your Android app. Travis master: Travis dev: Examples Sample appli

Gabriele Mariotti 861 Nov 11, 2022