Efecto action bar google play

[rafaxplayer]

Hola compañeros , me gustaria saber como implementar la action bar de google play en mi app.

El te es que me imagino que es la toolbar de api 21 pero no se como consegir el efecto del scroll que hace que se superponga en la imagen y quede tranparente cuando coinciden y tome color la toolbar cuando no se encuentra en scroll 0, no se si me explico , unas imagenes para que veais que quiero hacer:

Aqui la barra esta sobre la imagen y el alfa es transparente:



Y aqui cuando se hace scroll ahcia abajo la barra va tomando color



Lo he intentado de varias maneras pero nada, alguna sugerencia?

[kriogeN]

Hola, ese efecto no es nuevo, ya estaba disponible en Google Play Music desde hace mucho tiempo.

Aquí tienes un artículo que explica como hacerlo con ActionBar:

http://cyrilmottier.com/2013/05/24/p...he-next-level

Yo lo seguí en su día y es bastante fácil, ahora, si estás usando Support 21 no te vale, porque la Support 21 y la ActionBarCompat no se llevan bien, al menos yo no he conseguido quitar el borde negro a la izquierda de la ActionBarCompat.

Pero creo que no sería complicado adaptarlo para que funcionase con la Toolbar, incluso si me apuras creo que es bastante más sencillo que con la ActionBar.

[rafaxplayer]

Bueno hare pruebas y ya comentare por aquí.

[JamesRevelo]

Mi hermano, ese efecto se realiza con el atributo android:windowActionBarOverlay en el tema de la aplicación. El siguiente articulo te lo explica completico:

Action Bar superpuesta y translucida

Espero te sirva

[rafaxplayer]

Bueno el tema es que con action bar no tengo problemas en conseguir el efecto igual que el link de kriogen:

http://cyrilmottier.com/2013/05/24/p...he-next-level

pero en mi app uso appcompat y el widget toolabr y con el no hay forma lo he intentado adaptar de todas las formas y el mayor problema es que no consigo que la barra se superponga encima de la imagen como con actionBar y android:windowActionBarOverlay, esta propiedad no funciona con appcompat y toolbar , por si el fallo es mio poongo el codigo que uso no vaya ser alguna cagada mia

Activity onCreate:

Toolbar toolbar =(Toolbar)findViewById(R.id.toolbar_details);
        if (toolbar != null) {

           setSupportActionBar(toolbar);
           getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        }

el layout de la toolbar;

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:id="@+id/toolbar_details"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
   android:minHeight="?attr/actionBarSize"
    android:alpha="0.2"
    app:theme="@style/AppTheme.Base.ActionBar.Overlay"
    />

El layout contenedor;

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.rafaxplayer.amsfiles.DetailsActivity">

    <include layout="@layout/toolbar" />



    <ScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"

            android:orientation="vertical"
            android:padding="5dp">

            <ImageView
                android:id="@+id/imageDetails"
                android:layout_width="match_parent"
                android:layout_height="192dp" />

            <TextView
                android:id="@+id/textName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:autoText="false"
                android:padding="5dp"
                android:text="ApzName"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:textColor="@color/secondary_text_default_material_dark"
                android:textSize="@dimen/abc_text_size_display_1_material"
                android:textStyle="bold|italic" />

            <TextView
                android:id="@+id/textComment"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="5dp"
                android:text="Comment"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="@color/material_blue_grey_800" />
</LinearLayout>
    </ScrollView>


</LinearLayout>

y el theme.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="AppTheme" parent="AppTheme.Base" />

    <style name="AppTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:textColorPrimary">@color/material_blue_grey_900</item>
        <item name="windowActionBar">false</item>
        <item name="android:windowBackground">@color/windowBackgroundColor</item>


    </style>

    <style name="AppTheme.Base.ActionBar" >
        <item name="windowActionBarOverlay">true</item>
        <item name="android:windowActionBarOverlay">true</item>
    </style>

    <style name="AppTheme.Base.ActionBar.Overlay" >
        <item name="android:background">@color/colorPrimary</item>
        <item name="background">@color/colorPrimary</item>


    </style>
</resources>

manifest:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.rafaxplayer.amsfiles">

    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme">
        <activity
            android:name="com.rafaxplayer.amsfiles.MyActivity"
            android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name="com.rafaxplayer.amsfiles.ListFilesActivity"
            android:label="@string/title_activity_list_files"></activity>
        <activity
            android:name="com.rafaxplayer.amsfiles.DetailsActivity"
            android:label="@string/title_activity_details"
            android:theme="@style/AppTheme.Base.ActionBar"></activity>

    </application>

</manifest>

Con conseguir hacer overlay con la widget toolbar ya me conformo ,seria un inicio , como lo veis?

[kriogeN]

Hacer el "overlay" con la Toolbar es sencillo, basta con que la Toolbar esté pintada por encima.

La Toolbar a diferencia de la ActionBar es un elemento más en el Layout de la Activity, si usas un RelativeLayout y al final del todo pones a la Toolbar con un alignParentTop=true conseguirás lo que buscas.

[rafaxplayer]

Bueno he conseguido adaptar a medias el código del efecto del blog que comentemos a widget toolbar con appcompat.

Solo que ahora tengo un problema , si mo codigo es este:

 backdrawableToolbar = getResources().getDrawable(R.drawable.gardien_bar);
        backdrawableToolbar.setAlpha(0);
        toolbar = (Toolbar)findViewById(R.id.toolbar_details);
        if (toolbar != null) {

            setSupportActionBar(toolbar);
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        }



        getSupportActionBar().setBackgroundDrawable(backdrawableToolbar);

        ((NotifyingScrollView) findViewById(R.id.scroll_view)).setOnScrollChangedListener(mOnScrollChangedListener);

private NotifyingScrollView.OnScrollChangedListener mOnScrollChangedListener = new NotifyingScrollView.OnScrollChangedListener() {

        public void onScrollChanged(ScrollView who, int l, int t, int oldl, int oldt) {
            final int headerHeight = findViewById(R.id.imageDetails).getHeight() - getSupportActionBar().getHeight();
            final float ratio = (float) Math.min(Math.max(t, 0), headerHeight) / headerHeight;
            final int newAlpha = (int) (ratio * 255);
            backdrawableToolbar.setAlpha(newAlpha);

        }
    };

y custom NotifyingScrollView ya esta posteado en el post anterior.

Bueno el problema es que ssi establezco el drawable en alpha = 0 como en el ejemplo y como muestro en el código, el scroll no hace nada ,no cambia el alpha de la barra , pero si elimino la linea backdrawableToolbar.setAlpha(0); entonces al iniciar la activity me sale la barra visible (que no es lo que quiero claro esta ), pero el scroll funciona y al mover la barra surge el efecto.
no entiendo cual es el fallo por muchas vueltas que le doy , como lo veis vosotros?

[gonza28]

Lograste solucionarlo rafaxplayer?
Yo estoy en la misma busqueda. Me interesa tirar todo hacia arriba coando se hace sroll. Tengo un banner y mas abajo un listview pero estoy usando a demas de appcompat, el toolbar. Asi que por lo que veo estoy orinado por un dinosaurio.
Si lo lograste, pasa la receta porfa. saludos

[rafaxplayer]

No lo logre , o parcialmente si , en api 21 me funciona perfectamente pero menor no.

[Charlie84]

Yo anteriormente hacía algo parecido con FadingActionBar, y ahora para AppCompat el creador publicó este Gist: https://plus.google.com/106514622630...ts/Y5iBqpzP4T9, sin embargo no consigo que funcione. En parte porqué hay alguna función que no funciona en inferiores a api 16.