Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to do a simple image view parallax with coordinator layout without the collpsing toolbar layout?

Hello lets say I have a layout which contains the following

    <ScrollView
        android:id="@+id/scroll"
        android:layout_below="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/button">

        <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="240dp"
            android:scaleType="centerCrop"
            android:src="@drawable/android" />
        <View android:id="@+id/anchor"
            android:layout_width="match_parent"
            android:layout_height="240dp" />
        <TextView
            android:id="@+id/body"
            android:layout_below="@+id/anchor"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/white"
            android:textColor="@android:color/black"
            android:paddingBottom="@dimen/activity_vertical_margin"
            android:paddingLeft="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin"
            android:paddingTop="@dimen/activity_vertical_margin"
            android:text="@string/sample" />
    </RelativeLayout>

    </ScrollView>

is it possible to use coordinator layout to make the image view move with half the speed of the scroll view as it scrolls up or down.

like image 636
Ersen Osman Avatar asked Jul 13 '15 15:07

Ersen Osman


1 Answers

Probably not an intended use of CoordinatorLayout, but I believe I achieved your intended effect by doing the following:

enter image description here

<android.support.design.widget.CoordinatorLayout
android:id="@+id/main_content"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="300px"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:id="@+id/backdrop"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:paddingTop="?attr/actionBarSize"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            app:layout_collapseMode="parallax"/>

        <android.support.v7.widget.Toolbar
            android:id="@+id/myToolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
            <TextView android:id="@+id/textViewTitle"  
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>
            </android.support.v7.widget.Toolbar>
    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <!-- my content that scrolls over the backdrop image -->

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

like image 187
NPike Avatar answered Sep 22 '22 09:09

NPike