Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android: Custom bottom sheet dialog

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

like image 837
SBotirov Avatar asked Jul 25 '18 10:07

SBotirov


1 Answers

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.

like image 101
James Avatar answered Sep 20 '22 17:09

James