ParallaxScrollView

A Parallax ScrollView which takes a background and foreground view, in the ParallexScrollView.

Demo

Please download the demo. Bakground image thanks to shoptalklondon.

Usage

Look at the demo layout for implimentation.

The basics are, that you need two views added to the ParallaxScrollView and it will do the rest.

• The first View added is the Background
• The second View added is the Foreground.

Layout and measuring is based roughly around a FrameLayout.

The foreground view gets wrapped with a ObservableScrollView regardless with what you put in there, so if you want full control of layout impliment like below.

Attributes

• app:parallexOffset="0.3" - this number needs to be between 0.1 and 1.0. otherwise it defaults to 0.3.
• ParallexScrollView.setParallexOffset(float) - this is the programatic version of the offset value.

Background The background will at the very minimum be the exact size as the parent (matches the ParallexScrollView size). If the ScrollView content is larger than the parent then background calculates a factor based on the scroll capacity, i.e. a parallexFactor of 0.5 will approximatly move the background at half the rate of the foreground scroll.

Foreground Make sure you fill the parent, I haven't overridden this but I may in the future if people have issues with it, as the background will scroll based on the size of foreground content.

Example Layout

<couk.jenxsol.parallaxscrollview.views.ParallaxScrollView xmlns:tools="http://schemas.android.com/tools"
    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"
    app:parallexOffset="0.25" >

    <!-- Background -->

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:scaleType="fitXY"
        android:src="@drawable/bg_sky" />

    <!-- Foreground -->
    <!-- You can place any of the items below as the foreground, but for most control, add the scroll view yourself. -->

    <couk.jenxsol.parallaxscrollview.views.ObservableScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <LinearLayout
            android:layout_width="260dp"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:paddingBottom="@dimen/spacing"
            android:paddingTop="@dimen/spacing" >

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/white"
                android:padding="@dimen/spacing"
                android:text="@string/hello_world" />

        </LinearLayout>
    </couk.jenxsol.parallaxscrollview.views.ObservableScrollView>

</couk.jenxsol.parallaxscrollview.views.ParallaxScrollView>

Licence

Copyright 2012 Christopher Jenkins

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.