Search code examples
androidandroid-5.0-lollipopandroid-4.4-kitkat

Name of the layout or how it's done?


In short I want a preview similar to Google Plays, where you can slide up and the top image/video preview fades back and the rest of the view is moved up.

Preview

I've got a view that I want to be hiden like the video in this example, the action bar can remain stationary at all times, but I need the bottom part to be dragable.

I can't seem to find out which layout that is, or how it is done, all I managed to find were unrelated such as ViewPager. My current min sdk version is 18, the compile version is 21.


Solution

  • The following is the code I used in the app I am working

    You will have to use the OnScrollChanged function in your ScrollView. ActionBar doesn't let you set the opacity , so set a background drawable on the actionbar and you can change its opacity based on the amount of scroll in the scrollview. I have given an example workflow

    The function sets gives the appropriate alpha for the view locationImage based on its position WRT window .

    this.getScrollY() gives you how much the scrollView has scrolled

    public void OnScrollChanged(int l, int t, int oldl, int oldt) {
        // Code ...
        locationImage.setAlpha(getAlphaForView(locationImageInitialLocation- this.getScrollY()));
    }
    
    
    private float getAlphaForView(int position) {
        int diff = 0;
        float minAlpha = 0.4f, maxAlpha = 1.f;
        float alpha = minAlpha; // min alpha
        if (position > screenHeight)
            alpha = minAlpha;
        else if (position + locationImageHeight < screenHeight)
            alpha = maxAlpha;
        else {
            diff = screenHeight - position;
            alpha += ((diff * 1f) / locationImageHeight)* (maxAlpha - minAlpha); // 1f and 0.4f are maximum and min
                                                // alpha
            // this will return a number betn 0f and 0.6f
        }
        // System.out.println(alpha+" "+screenHeight +" "+locationImageInitialLocation+" "+position+" "+diff);
        return alpha;
    }
    

    You can download an example working sample at https://github.com/ramanadv/fadingActionBar

    Credit: CommandSpace