1

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.

Dejan Skledar
  • 11,280
  • 7
  • 44
  • 70
user_4685247
  • 2,878
  • 2
  • 17
  • 43
  • 2
    if you want to ask a question then first post your code too so that we could see what have you tried so far ... ? – Umair Mar 18 '15 at 12:45
  • @Darkie : As the OP has no idea what the layout type is or how the effect is achieved, I'd consider this a valid question even without the OP posting any code. – Squonk Mar 18 '15 at 12:51

1 Answers1

2

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

Community
  • 1
  • 1
Mohammad Arman
  • 7,020
  • 2
  • 36
  • 50
  • Correct me if I'm wrong, but isn't this only for the actionbar? I'm more interested in the preview image/video that seems to move behind the bottom part of the layout – user_4685247 Mar 18 '15 at 13:24
  • Yes, noticed that. That is not supported in my given source. I know about another library which works exactly what you want. But I didn't test that. Thats why I didn't share. You can check this. Hopefully it will help. Check this: https://github.com/ManuelPeinado/FadingActionBar – Mohammad Arman Mar 18 '15 at 13:28