Paralax effect in app background

Question

Im new in Android world. I want to put some parallax background effects in my app.

How can I do it? How to approach to this in Android?

Is there any productive way to create 2-3 layer parallax background? Is there some tool, or class in android API?

Or maybe I have to modify background image location or margins "manually" in code?

Im using API level 19.

I have tried to understand Paralloid library, but this is too big to understand without any explanation. Im new to Android and Java, im not familiar with all Layouts and other UI objects, however I'm familiar with MVC.

I started bounty, maybe someone can explain step by step how that library works.

Answer 1

This is what you can do:

In your activity/fragment layout file specify 2 ScrollView's (say background_sv and content_sv).

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <com.example.parallax.MyScrollView
        android:id="@+id/background_sv"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

            <ImageView
                android:id="@+id/parallax_bg"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="..." />
    </com.example.parallax.MyScrollView>

    <com.example.parallax.MyScrollView
        android:id="@+id/content_sv"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >
        </LinearLayout>
    </com.example.parallax.MyScrollView>

</RelativeLayout>

Add a dummy view in the content scrollview of the height of the background and make it transparent. Now, attach a scroll listener to the content_sv. When the content scrollview is scrolled, call

mBgScrollView.scrollTo(0, (int)(y /*scroll Of content_sv*/ / 2f));

The existing API's doesn't have the support to get the scroll events. Hence, we need to create a Custom ScrollView, to provide the ScrollViewListener.

package com.example.parallax;

// imports;

public class MyScrollView extends ScrollView {

    public interface ScrollViewListener {
        void onScrollChanged(MyScrollView scrollView, int x, int y, int oldx, int oldy);
    }

    private ScrollViewListener scrollViewListener = null;

    public MyScrollView(Context context) {
        super(context);
    }

    public MyScrollView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    public MyScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public void setScrollViewListener(ScrollViewListener scrollViewListener) {
        this.scrollViewListener = scrollViewListener;
    }

    @Override
    protected void onScrollChanged(int x, int y, int oldx, int oldy) {
        super.onScrollChanged(x, y, oldx, oldy);
        if(scrollViewListener != null) {
            scrollViewListener.onScrollChanged(this, x, y, oldx, oldy);
        }
    }
}

Here is the activity which hosts both the content ScrollView and background ScrollView

package com.example.parallax;

// imports;

public class ParallaxActivity extends Activity implements ScrollViewListener {

    private MyScrollView mBgScrollView;
    private MyScrollView mContentScrollView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        mBgScrollView = findViewById(R.id.background_sv);
        mContentScrollView = findViewById(R.id.content_sv);
        mContentScrollView.setOnScrollListener(this);
    }

    // this is method for onScrollListener put values according to your need
    @Override
    public void onScrollChanged(MyScrollView scrollView, int x, int y, int oldx, int oldy) {
        super.onScrollChanged(scrollView, x, y, oldx, oldy);
        // when the content scrollview will scroll by say 100px, 
        // the background scrollview will scroll by 50px. It will 
        // look like a parallax effect where the background is 
        // scrolling with a different speed then the content scrollview.
        mBgScrollView.scrollTo(0, (int)(y / 2f));
    }
}

Answer 2

I think the question is unclear, so this is not really an answer so much as an attempt to clarify with more detail than I could include in a comment.

My question is about what kind of parallax effect you want to achieve. Given these three examples (they are demo apps you can install from the Play Store), which if any has the type of parallax effect you want? Please answer in a comment.

• Paralloid Demo

• Parallax Scroll Demo

• Google IO App

Given an answer, we all will find it easier to help out. If you edit your question to include this information, it will be improved.

Answer 3

The following contains an example application published by the author of Paralloid:

https://github.com/chrisjenx/Paralloid/tree/master/paralloidexample

From the GitHub page under the 'Getting Started' section:

Layout

ScrollView

This is an example, please refer to the paralloidexample App for full code.

<FrameLayout ..>
<FrameLayout
        android:id="@+id/top_content"
            android:layout_width="match_parent"
            android:layout_height="192dp"/>

<uk.co.chrisjenx.paralloid.views.ParallaxScrollView
        android:id="@+id/scroll_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true">

    <LinearLayout
        android:id="@+id/scroll_content"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:paddingTop="192dp"/>

</uk.co.chrisjenx.paralloid.views.ParallaxScrollView>
</FrameLayout>

Fragment

Inside your onViewCreated() or onCreateView().

//...
FrameLayout topContent = (FrameLayout) rootView.findViewById(R.id.top_content);
ScrollView scrollView = (ScrollView) rootView.findViewById(R.id.scroll_view);
if (scrollView instanceof Parallaxor) {
        ((Parallaxor) scrollView).parallaxViewBy(topContent, 0.5f);
}
// TODO: add content to top/scroll content

Thats it!

Have a look at the Parallaxor interface for applicable Parallax methods.

Hope this helps!

Also, here is a link to Google's 'getting started' page for android.

Also, here is a link to a 'java tutorial for complete beginners'.

As well as link to some documentation about layouts, which 'define the visual structure for a user interface'.

That being said, you would use the layout to define what the interface looks like and use the subsequent example code to define what happens when you interact with it.

P.S. You can see the application in action here