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

Question

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

Answer 1

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: