Andre Amaral Braga
Andre Amaral Braga

Reputation: 321

Gmail Navigation Drawer effect

I'd like to know how to do that fade effect in Gmail app. When you drag your finger on the navigation drawer and open or close it, the view underneath the navigation drawer gets brighter or darker (if you move it to left, it'll get brighter and vice versa).

I tried to do like the code below, but it was crashing and it wasn't visually good as Gmail app.

    String colorString = "0x00000000";

    int max = MAX_SIZE_X;
    int auxMax = (int) (MAX_SIZE_X * 0.9); // 90
    int betMax = (int) (MAX_SIZE_X * 0.8); // 80
    int auxMaM = (int) (MAX_SIZE_X * 0.7); // 70
    int betMaM = (int) (MAX_SIZE_X * 0.6); // 60
    int auxMid = (int) (MAX_SIZE_X * 0.5); // 50
    int betMid = (int) (MAX_SIZE_X * 0.4); // 40
    int auxMiM = (int) (MAX_SIZE_X * 0.3); // 30
    int betMiM = (int) (MAX_SIZE_X * 0.2); // 20
    int betMin = (int) (MAX_SIZE_X * 0.1); // 10

    if (touch < max && touch >= auxMax) {
        colorString = "#88000000";

    } 
    if (touch < auxMax && touch >= betMax) {
        colorString = "#84000000";

    } 
    if (touch < betMax && touch >= auxMaM) {
        colorString = "#80000000";

    } 
    if (touch < auxMaM && touch >= betMaM) {
        colorString = "#76000000";

    } 
    if (touch < betMaM && touch >= auxMid) {
        colorString = "#72000000";

    } 
    if (touch < auxMid && touch >= betMid) {
        colorString = "#68000000";

    } 
    if (touch < betMid && touch >= auxMiM) {
        colorString = "#64000000";

    } 
    if (touch < auxMiM && touch >= betMiM) {
        colorString = "#60000000";

    } 
    if (touch < betMiM && touch >= betMin) {
        colorString = "#00000000";

    }
    colorInt = Color.parseColor(colorString);

    return colorInt;

Upvotes: 0

Views: 397

Answers (2)

Shamim Ahmmed
Shamim Ahmmed

Reputation: 8383

Please check the following example from Google developer site. It might be helpful.

http://developer.android.com/training/implementing-navigation/nav-drawer.html

The details information could be found about Navigation Drawer pattern:

http://developer.android.com/design/patterns/navigation-drawer.html

Upvotes: 2

tyczj
tyczj

Reputation: 73753

that is the navigation drawer, look here http://developer.android.com/training/implementing-navigation/nav-drawer.html

Upvotes: 0

Related Questions