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()
}
}
}
android kotlin imageview onscrolllistener asked Nov 14 '18 at 15:54
Robert PalRobert 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.
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()
}
}
}
asked Nov 14 '18 at 15:54
Robert PalRobert 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.
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()
}
}
}
asked Nov 14 '18 at 15:54
Robert PalRobert 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.
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()
}
}
}
asked Nov 14 '18 at 15:54
Robert PalRobert Pal
58110
asked Nov 14 '18 at 15:54
Robert PalRobert Pal
58110
edited Nov 16 '18 at 12:18
Robert Pal
asked Nov 14 '18 at 15:54
Robert PalRobert Pal
58110
asked Nov 14 '18 at 15:54
Robert PalRobert Pal
58110
asked Nov 14 '18 at 15:54
Robert PalRobert Pal
58110
58110
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
