How to achieve this layout effect using colapsing toolbar layout

Question

I want collapsing toolbar layout look like this it is visible like this default.

On Scroll up the height of ImageView reduces and it look like this:

After reducing the height of ImageView 30% to 40% the whole layout will scroll with the reduced ImageView.The reduce ImageView must be scroll not shrink.

I need some starting point I really stuck on this.

In whole scenario toolbar remains on its position nothing happen with toolbar.

Have you tried `android:minHeight="some dp"` attribute for your `ImageView` inside `CollapsingToolbarLayout` ? — Jeel Vankhede, Oct 10 '18 at 13:42
Try taking your `ImageView` inside any container with `ScrollView` as parent with above approach. — Jeel Vankhede, Oct 10 '18 at 13:45
I need viewpager reduces the height 30% then the layout scrolls with imageview also — Qasim Ahmed, Oct 10 '18 at 13:45
@JeelVankhede I want to use colapsing toolbar layout I achive this with nestedscrolview but then tabview viewpager not scroll smoothly best solution I think is that to implement my ownoffsetchangedlistner but I am stuck how to use — Qasim Ahmed, Oct 10 '18 at 13:47
I think that's not possible unless you try to make your custom view. please share layout xml code, will check if anything possible with it. — Jeel Vankhede, Oct 10 '18 at 13:47
I fork diffrent collapsingtoolbar layout examples and try to change them but all of them i change according to mysituation but it stick the header on top of screen https://github.com/hanscappelle/CoordinatorBehaviorExample/tree/master/app/src/main/java/saulmm/myapplication — Qasim Ahmed, Oct 10 '18 at 13:50
@JeelVankhede xml I am currently acheiving this with nested scrolview and on scroll i animate imageview to reduce its height Then it will scroll normally But using this approach tabview viewpagers recyclerview not work smootly — Qasim Ahmed, Oct 10 '18 at 13:54

score 1 · Answer 1 · answered Oct 10 '18 at 14:37

1

This is the working solution I was able to come up with.

onCreate class:

    val displayMetrics = baseContext.resources.displayMetrics
    //setting the "zoomed in" effect on the image
    image.layoutParams.width = displayMetrics.widthPixels + displayMetrics.widthPixels / 2
    val originalWidth = image.layoutParams.width
    scroll_view.setOnScrollChangeListener { _: NestedScrollView?, _: Int, y: Int, _: Int, _: Int ->
        //adjust "if" check and formula as you wish
        if (y < 200) {
            image.layoutParams.width = (originalWidth - y*1.5).toInt()
            image.requestLayout()
        }
    }

Some clarifications. I change the image's width based on the size of the screen, so that the image is "zoomed in" at first, and then it zooms out to it's original form, as the user scrolls down.

Also make sure you have recyclerView.setNestedScrollingEnabled(false); on the RecyclerView you wish to scroll smoothly.

The result if the following:

answered Oct 10 '18 at 14:37

Rado

2,034
2
10
18

1

Nestedscroling enabled false means recyclerview purpose is not fulfilled – Qasim Ahmed Oct 10 '18 at 15:12
1

And I am finding a solution with collapsing layout because nested scrolview with viewpager not work smoothly and many other issues I am facing with nested scrolview and viewpager – Qasim Ahmed Oct 10 '18 at 15:16
1

Well from your question I don't really see the point of the collapsing layout, but yea, this is just the shrinking of the image part of your question. – Rado Oct 10 '18 at 15:21
1

Yes it is answer to my question but I will post my solution if I achieve some results – Qasim Ahmed Oct 10 '18 at 15:23
1

Can I achieve the same effect on offsetchamgelistner – Qasim Ahmed Oct 10 '18 at 15:29
You could look into this: https://stackoverflow.com/questions/31872653/how-can-i-determine-that-collapsingtoolbar-is-collapsed and inside place the same logic I placed in the scroll listener. – Rado Oct 11 '18 at 06:19

How to achieve this layout effect using colapsing toolbar layout

1 Answers1