how to create parallax effect like viber profile using coordinate layout

Question

I want to get the parallax effect used in viber profile/ android contacts. I have seen it can be done using custome class, but is it possible to do it with coordinate layout?

Edit 1: I have already done this. preview What I want more is to make the profile pic show half of the height initially and when we drag the screen downward able to see full picture and when we release again picture come in the initial state(half picture).

http://stackoverflow.com/questions/36659006/using-a-coordinatorlayout-to-collapse-a-full-screen-imageview-and-replace-it-wit — Aditya Vyas-Lakhan, Apr 05 '17 at 04:28

score 0 · Answer 1 · answered Apr 04 '17 at 11:23

This is exactly you need

http://www.androidauthority.com/using-coordinatorlayout-android-apps-703720/

<android.support.design.widget.CoordinatorLayout
    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"
    tools:context="com.sample.foo.usingcoordinatorlayout.FabAndSnackbarActivity">

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp"
            app:title="@string/collapsing_toolbar">

            <ImageView
                android:id="@+id/toolbarImage"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                android:src="@drawable/bg"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />
        </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">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="28sp"
            android:lineSpacingExtra="8dp"
            android:text="@string/long_latin"
            android:padding="@dimen/activity_horizontal_margin" />
    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_margin="@dimen/activity_horizontal_margin"
        android:src="@drawable/mascot_icon"
        app:layout_anchor="@id/appBar"
        app:layout_anchorGravity="bottom|end" />
</android.support.design.widget.CoordinatorLayout>

OUTPUT

how to create parallax effect like viber profile using coordinate layout

1 Answers1