Change ImageView height using onScrollChangeListener

I have a fixed ImageView (200dp) at the top of the screen and some other content (texts, lists, etc) under that image and I'm using a NestedScrollView.

I want to resize the image smoothly as I scroll the screen if I go down and to increase it again if I go up (the image only should be in range 100dp - 200dp). The image starts at 200dp and when I start scrolling I want the image to change its height slower till the it gets equal to 100dp. After that, if I start scrolling up, the image should become bigger again in height, till I reach the top of the scroll (when it should be 200dp).

Let's say the raport of yScroll vs Height should be 5 to 1, I mean for 5 scroll coordinates of y the height should modify by 1dp.

That's the code I wrote in Kotlin, but it's ok that the responses to be in Java too.

It's working only to resize smaller the image (I don't know how to get the image bigger on scroll up) and other problem could be that if I will scroll up and down in the upper part of the screen, the image will resize too and I want that the resize could happen only: image smaller when scrolling down, image bigger when scrolling up.

nested_scroll_view?.viewTreeObserver?.addOnScrollChangedListener {

        val scrollY = nested_scroll_view?.scrollY



        // 200 = height size, 100 = half height size

        if (scrollY != null) {

            if (scrollY in 100..200) {

                photoIv.layoutParams.height = photoIv.layoutParams?.height!! - 1

                photoIv.requestLayout()

            }

        }

    }

EDIT: I wrote a similar code in Javascript that would do the same effect. I want to obtain it in Android.

<script>

    function myFunc(scrollTop)

    {

        var scrollSpeed = parseFloat(document.getElementById('tSpeed').value);

        document.getElementById('pheader').style.marginTop = 0 - Math.min(scrollTop*scrollSpeed/2,50); 

        document.getElementById('dcontainer').style.top = 200 - Math.min(scrollTop*scrollSpeed,100);

    }

</script>

<body style="background-color: lightgoldenrodyellow;">

 <div id="pcontainer" style="overflow:hidden; height:200px; width:600px; z-index:1; position: absolute; top: 0px;">

   <img id="pheader" src="test.jpg" style="height:200px; width:600px; margin-top: 0px;" />

  </div>

 <div id="dcontainer"

    onscroll="myFunc(this.scrollTop);"

    style="overflow-y:scroll; background-color: white; height:400px; width:600px; padding-top:0px; z-index:2;position: absolute; top: 200px;">

   blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>

  </div>

  <input type="text" value="1" id="tSpeed" style="position: absolute; top: 650px;" />

</body>

EDIT: That's what I achieved till now, but the problem is that the image is shaking on the first part of the scroll (if I scroll using left click holded and down), but if I use the scroll wheel, the image will get smaller, but of course, the scroll zone will jump to the end.

    nested_scroll_view?.viewTreeObserver?.addOnScrollChangedListener {

        val scrollY = nested_scroll_view?.scrollY



        if (scrollY != null) {

            val photoMarginsUpDown = Math.min(scrollY, 100) 



            if(photoMarginsUpDown <= 100) {

                val marginLayoutParams = photoIv.layoutParams as ViewGroup.MarginLayoutParams

                marginLayoutParams.setMargins(0, -photoMarginsUpDown, 0, -photoMarginsUpDown)

                photoIv.requestLayout()

            }

        }

    }

edited Nov 16 '18 at 12:18

asked Nov 14 '18 at 15:54

Robert Pal

58110

add a comment |

I have a fixed ImageView (200dp) at the top of the screen and some other content (texts, lists, etc) under that image and I'm using a NestedScrollView.

Let's say the raport of yScroll vs Height should be 5 to 1, I mean for 5 scroll coordinates of y the height should modify by 1dp.

That's the code I wrote in Kotlin, but it's ok that the responses to be in Java too.

nested_scroll_view?.viewTreeObserver?.addOnScrollChangedListener {

        val scrollY = nested_scroll_view?.scrollY



        // 200 = height size, 100 = half height size

        if (scrollY != null) {

            if (scrollY in 100..200) {

                photoIv.layoutParams.height = photoIv.layoutParams?.height!! - 1

                photoIv.requestLayout()

            }

        }

    }

EDIT: I wrote a similar code in Javascript that would do the same effect. I want to obtain it in Android.

<script>

    function myFunc(scrollTop)

    {

        var scrollSpeed = parseFloat(document.getElementById('tSpeed').value);

        document.getElementById('pheader').style.marginTop = 0 - Math.min(scrollTop*scrollSpeed/2,50); 

        document.getElementById('dcontainer').style.top = 200 - Math.min(scrollTop*scrollSpeed,100);

    }

</script>

<body style="background-color: lightgoldenrodyellow;">

 <div id="pcontainer" style="overflow:hidden; height:200px; width:600px; z-index:1; position: absolute; top: 0px;">

   <img id="pheader" src="test.jpg" style="height:200px; width:600px; margin-top: 0px;" />

  </div>

 <div id="dcontainer"

    onscroll="myFunc(this.scrollTop);"

    style="overflow-y:scroll; background-color: white; height:400px; width:600px; padding-top:0px; z-index:2;position: absolute; top: 200px;">

   blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>

  </div>

  <input type="text" value="1" id="tSpeed" style="position: absolute; top: 650px;" />

</body>

    nested_scroll_view?.viewTreeObserver?.addOnScrollChangedListener {

        val scrollY = nested_scroll_view?.scrollY



        if (scrollY != null) {

            val photoMarginsUpDown = Math.min(scrollY, 100) 



            if(photoMarginsUpDown <= 100) {

                val marginLayoutParams = photoIv.layoutParams as ViewGroup.MarginLayoutParams

                marginLayoutParams.setMargins(0, -photoMarginsUpDown, 0, -photoMarginsUpDown)

                photoIv.requestLayout()

            }

        }

    }

edited Nov 16 '18 at 12:18

asked Nov 14 '18 at 15:54

Robert Pal

58110

add a comment |

I have a fixed ImageView (200dp) at the top of the screen and some other content (texts, lists, etc) under that image and I'm using a NestedScrollView.

Let's say the raport of yScroll vs Height should be 5 to 1, I mean for 5 scroll coordinates of y the height should modify by 1dp.

That's the code I wrote in Kotlin, but it's ok that the responses to be in Java too.

nested_scroll_view?.viewTreeObserver?.addOnScrollChangedListener {

        val scrollY = nested_scroll_view?.scrollY



        // 200 = height size, 100 = half height size

        if (scrollY != null) {

            if (scrollY in 100..200) {

                photoIv.layoutParams.height = photoIv.layoutParams?.height!! - 1

                photoIv.requestLayout()

            }

        }

    }

EDIT: I wrote a similar code in Javascript that would do the same effect. I want to obtain it in Android.

<script>

    function myFunc(scrollTop)

    {

        var scrollSpeed = parseFloat(document.getElementById('tSpeed').value);

        document.getElementById('pheader').style.marginTop = 0 - Math.min(scrollTop*scrollSpeed/2,50); 

        document.getElementById('dcontainer').style.top = 200 - Math.min(scrollTop*scrollSpeed,100);

    }

</script>

<body style="background-color: lightgoldenrodyellow;">

 <div id="pcontainer" style="overflow:hidden; height:200px; width:600px; z-index:1; position: absolute; top: 0px;">

   <img id="pheader" src="test.jpg" style="height:200px; width:600px; margin-top: 0px;" />

  </div>

 <div id="dcontainer"

    onscroll="myFunc(this.scrollTop);"

    style="overflow-y:scroll; background-color: white; height:400px; width:600px; padding-top:0px; z-index:2;position: absolute; top: 200px;">

   blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>

  </div>

  <input type="text" value="1" id="tSpeed" style="position: absolute; top: 650px;" />

</body>

    nested_scroll_view?.viewTreeObserver?.addOnScrollChangedListener {

        val scrollY = nested_scroll_view?.scrollY



        if (scrollY != null) {

            val photoMarginsUpDown = Math.min(scrollY, 100) 



            if(photoMarginsUpDown <= 100) {

                val marginLayoutParams = photoIv.layoutParams as ViewGroup.MarginLayoutParams

                marginLayoutParams.setMargins(0, -photoMarginsUpDown, 0, -photoMarginsUpDown)

                photoIv.requestLayout()

            }

        }

    }

edited Nov 16 '18 at 12:18

asked Nov 14 '18 at 15:54

Robert Pal

58110

I have a fixed ImageView (200dp) at the top of the screen and some other content (texts, lists, etc) under that image and I'm using a NestedScrollView.

Let's say the raport of yScroll vs Height should be 5 to 1, I mean for 5 scroll coordinates of y the height should modify by 1dp.

That's the code I wrote in Kotlin, but it's ok that the responses to be in Java too.

nested_scroll_view?.viewTreeObserver?.addOnScrollChangedListener {

        val scrollY = nested_scroll_view?.scrollY



        // 200 = height size, 100 = half height size

        if (scrollY != null) {

            if (scrollY in 100..200) {

                photoIv.layoutParams.height = photoIv.layoutParams?.height!! - 1

                photoIv.requestLayout()

            }

        }

    }

EDIT: I wrote a similar code in Javascript that would do the same effect. I want to obtain it in Android.

<script>

    function myFunc(scrollTop)

    {

        var scrollSpeed = parseFloat(document.getElementById('tSpeed').value);

        document.getElementById('pheader').style.marginTop = 0 - Math.min(scrollTop*scrollSpeed/2,50); 

        document.getElementById('dcontainer').style.top = 200 - Math.min(scrollTop*scrollSpeed,100);

    }

</script>

<body style="background-color: lightgoldenrodyellow;">

 <div id="pcontainer" style="overflow:hidden; height:200px; width:600px; z-index:1; position: absolute; top: 0px;">

   <img id="pheader" src="test.jpg" style="height:200px; width:600px; margin-top: 0px;" />

  </div>

 <div id="dcontainer"

    onscroll="myFunc(this.scrollTop);"

    style="overflow-y:scroll; background-color: white; height:400px; width:600px; padding-top:0px; z-index:2;position: absolute; top: 200px;">

   blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>blabla <br>

  </div>

  <input type="text" value="1" id="tSpeed" style="position: absolute; top: 650px;" />

</body>

    nested_scroll_view?.viewTreeObserver?.addOnScrollChangedListener {

        val scrollY = nested_scroll_view?.scrollY



        if (scrollY != null) {

            val photoMarginsUpDown = Math.min(scrollY, 100) 



            if(photoMarginsUpDown <= 100) {

                val marginLayoutParams = photoIv.layoutParams as ViewGroup.MarginLayoutParams

                marginLayoutParams.setMargins(0, -photoMarginsUpDown, 0, -photoMarginsUpDown)

                photoIv.requestLayout()

            }

        }

    }

android kotlin imageview onscrolllistener

edited Nov 16 '18 at 12:18

asked Nov 14 '18 at 15:54

Robert Pal

58110

edited Nov 16 '18 at 12:18

asked Nov 14 '18 at 15:54

Robert Pal

58110

edited Nov 16 '18 at 12:18

asked Nov 14 '18 at 15:54

Robert Pal

58110

asked Nov 14 '18 at 15:54

Robert Pal

58110

asked Nov 14 '18 at 15:54

Robert Pal

58110

add a comment |

0

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53304127%2fchange-imageview-height-using-onscrollchangelistener%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

0

active

oldest

votes

0

active

oldest

votes

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ndtyjky