Android: Custom bottom sheet dialog
Asked Answered
H

1

6

How can I implement following design functionality with android standard component bottom sheet:

  1. Image when Bottom sheet dialog fragment will appear:

enter image description here

  1. Image when user scrolled to up to view bottom of content:

enter image description here

I will use ViewPager to scrolling header images and RecyclerView to showing descriptions and other informations. And parallax effect to ImageView(which are placed in ViewPager) when scrolling content vertically. Have a minimum height of the ImageView(and ViewPager), user can't collapse fully it (Look to second screenshot, which is user scrolled until the end of content).

I want stop scrolling ImageView when it will reach to minimum height(look to second one Screenshot), but the content of below ImageView should be continue scrolling

Howler answered 25/7, 2018 at 10:26 Comment(2)
In my app I just use BottomSheetDialog, create custom a view and it's work fine, i can collapse fully my view when i scroll to the end.Sentiment
Yes, it it will scroll fully, but i wanted stop it when imageview will reach to minimum heightHowler
H
1

This can be done with an if statement in an on scroll view such as shown below:

ScrollView scrollView = findViewById(R.id.scrollView); //Adjust for your code
ImageView imageView = findViewById(R.id.imageView); //Adjust for your code
boolean imageIsHidden = false;
int threshold = 250;
scrollView.getViewTreeObserver().addOnScrollChangedListener(new OnScrollChangedListener() {
    @Override
    public void onScrollChanged() {
        int scrollY = rootScrollView.getScrollY();
        if(scrollY >= threshold){
            imageIsHidden = true;
            //Move image outside of scroll view so it doesn't scroll
        }
        else if(scrollY < threshold && imageIsHidden){
            imageIsHidden = false;
            //Move image inside of scroll view so it does scroll
        }
    }
});    

What this does is has a boolean called imageIsHidden and an integer called threshold. Threshold is where you want it to make it disappear. You will need to play around with this value to find a sweet spot.

You will also need to implement moving the image inside and outside of the scroll view as well in the if and if else statement.

Humiliate answered 7/8, 2018 at 1:49 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.