How to make a background image moving when user scroll a view on android

Question

Hello developer and programmers. I just start learning android app development. Found awesome navigation bar style and want to develop similar design. It has background image and it moves when scroll.

Please help me to develop the same. Thanks. I added an example gif as link.

https://media.giphy.com/media/l4FGv7VknT1zpZACQ/giphy.gif

you can check out slide animations, here are some examples. https://stackoverflow.com/questions/5151591/android-left-to-right-slide-animation — Valdio, Jul 13 '17 at 17:04

score 1 · Accepted Answer · answered Jul 13 '17 at 17:37

This can be achieved by using a custom layout for your navigation drawer alongside a custom implementation of DrawerLayout.DrawerListener. Below is a very simple example that can be easily adapted to the code generated by Android Studio's "New Project -> Navigation Drawer Activity".

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <FrameLayout
        android:id="@+id/nav_view"
        android:layout_width="@dimen/navdrawer_width"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#ccc">

        <ImageView
            android:id="@+id/image"
            android:layout_width="256dp"
            android:layout_height="256dp"
            android:layout_gravity="center"
            android:src="@drawable/mydrawable"/>

    </FrameLayout>

</android.support.v4.widget.DrawerLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private ImageView iv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);
        iv = (ImageView) findViewById(R.id.image);

        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        DrawerLayout.DrawerListener listener = new MyActionBarDrawerListener();
        drawer.addDrawerListener(listener);
    }

    private class MyActionBarDrawerListener extends DrawerLayout.SimpleDrawerListener {

        @Override
        public void onDrawerSlide(View drawerView, float slideOffset) {
            super.onDrawerSlide(drawerView, slideOffset);

            int navdrawerWidth = getResources().getDimensionPixelSize(R.dimen.navdrawer_width);
            float closedAmount = (1 - slideOffset);
            int marginStart = 2 * (int) (navdrawerWidth * closedAmount);

            ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) iv.getLayoutParams();
            MarginLayoutParamsCompat.setMarginStart(params, marginStart);
            iv.setLayoutParams(params);
        }
    }
}

The core of the solution is that you provide a background image but update its marginStart attribute as the drawer slides. You can fiddle with the exact numbers to get the amount of sliding that you like.

Note that I've omitted a lot of code in order to improve readability. In practice you would probably have MyActionBarDrawerListener extend from ActionBarDrawerToggle so that you'd get the navigation icon etc.

Really it's awesome. – Manobendronath Biswas Jul 13 '17 at 19:14 — Manobendronath Biswas, Jul 13 '17 at 19:14

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

Look it's not that hard but still it's not that easy Because this type of effect is said to be Parallax effect. I done a solid googling but still can't find a helpful library. So you have to do this your self Steps are

Learn about custom navigation layout which is made by your fragment.
Once you are done with drawer layout add an Image as a background of your fragment
call mSlidingDrawer.addDrawerListner(new YourDrawerListner()) method // just like Ben P.
Implement onDrawerSlide(View drawerView, float slideOffset)
get the Your Fragment Background Image Instance (I used mImage)
in onDrawerSlide(...) use offset
In your image instance call mImage.animate().setTranslationX(offset).start()

Update

Ben P. answer is better But you can use mine also just add the DrawerListner part of Ben P. to my answer also

Core

It is parallax effect. based on relative motion of elements

How to make a background image moving when user scroll a view on android

2 Answers2

activity_main.xml:

MainActivity.java

Update

Core