CODEWITHSUNDEEP
androidxmlscrollinstagramparallax
talhaoz
talhaoz

Reputation: 369

CUSTOM VIEW Parallax scrolling like Instagram Profile Page (in Android)

I have been searching for a solution on how to make a parallax scrolling UI just like on the Instagram Profile page.

Instagram Profile Page


The top of the layout includes profile info section and there is a tab layout underneath. And on the bottom, there is a recyclerview. When recyclerview starts to scroll, the profile info section goes up simultaneously.

I found some examples about that, but they only have an imageview parallax(an imageview instead of a profile info section).

Imageview parallax example

I couldn't find any other clear solution to this. Is there a way to implement this layout?

Of course, there is since Instagram did it already but how :D

Thank you in advance for all your answers.

Upvotes: 1

Views: 695

Answers (2)

talhaoz
talhaoz

Reputation: 369

I have implemented a parallax scrolling layout by checking out couple of repos. I saw @evgenkr47's answer after I implemented it but his answer totally right also. Thank you again.

Here is the layout, maybe anyone else also needs it in the future.

Parallax Scrolling Layout

Upvotes: 0

evgenkr47
evgenkr47

Reputation: 21

You can use CoordinationLayout + AppBarLayout + CollapsingToolBarLayout inside ConstraintLayout

For example:

<ConstraintLayout1>
  <ToolBar-> profile nickname
  <CoordinationLayout>
    <AppBarLayout>
    <CollapsingToolBarLayout> 
      <ConstraintLayout2> - hidden part
        --Hidden content--
      </ConstraintLayout2> 
    <ConstrainLayout3>
      <TabLayout/> - will stick to the toolbar
      <FragmentContainerView/>
    </ConstrainLayout3>
    </CollapsingToolBarLayout> 
    </AppBarLayout>
  </CoordinationLayout>
</ConstraintLayout1>

Upvotes: 2

Related Questions