DEPRECATED - Use the project for more of guide and ideas how to apply parallax techniques. Parralloid has more abstract implimentations.
A Parallax ScrollView which takes a background and foreground view, in the ParallexScrollView.
Please download the demo. Bakground image thanks to shoptalklondon.
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.
<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>
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.