Search code examples
javaandroidparallax

Could be possible to make Parallax effect without ToolBar on Android?

I was looking for a long time (looking on third-party libraries also) to make some kind of "Parallax" but without Toolbar, All I've seen is working with Toolbar, but it's not in my best interest, because I removed Toolbar on whole application.

I followed this example: https://www.youtube.com/watch?v=HO82ES_RiSQ but it didn't convince me...

There's anybody who can resolve this issue? I would like to know how can I do Parallax without using Toolbar

Thanks in advance

Solution

  • You can do it in just three steps :)

    1. Add compile 'com.github.ksoichiro:android-observablescrollview:1.6.0' to your dependencies in build.gradle (project on github)

    2. Create layout with ImageView, scrollable content and ObservableScrollView as container.

      activity_layout.xml

      <?xml version="1.0" encoding="utf-8"?>
<com.github.ksoichiro.android.observablescrollview.ObservableScrollView      
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/observable_scrollview"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

   <LinearLayout
       android:layout_width="wrap_content"
       android:layout_height="match_parent"
       android:orientation="vertical">

       <ImageView
           android:id="@+id/image_view"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:adjustViewBounds="true"
           android:src="@drawable/example" />
       <View
           android:id="@+id/your_content"
           android:layout_width="wrap_content"
           android:layout_height="600dp"
           android:background="@android:color/black" />
   </LinearLayout>
</com.github.ksoichiro.android.observablescrollview.ObservableScrollView>

    3. Set ObservableScrollViewCallbacks in your ObservableScrollView and translate over y axis your ImageView in onScrollChange method

      public class MainActivity extends AppCompatActivity implements  ObservableScrollViewCallbacks {
    private ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_layout);
         ObservableScrollView observableScrollView = (ObservableScrollView) findViewById(R.id.observable_scrollview);
         observableScrollView.setScrollViewCallbacks(this);
         imageView = (ImageView) findViewById(R.id.image_view);
    }

    @Override
    public void onScrollChanged(int scrollY, boolean firstScroll, boolean dragging) {
         imageView.setTranslationY(scrollY / 2);
    } 
}

    Very important is imageView.setTranslationY(scrollY / 2); which means that your ImageView is scrolling two times slower than your scrolling content.

    And here is how it looks like:

    Parallax image