PDA

Ver la Versión Completa : Efecto action bar google play


rafaxplayer
16/11/14, 18:12:58
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:

http://puu.sh/cThBz/723a301dd8.png

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

http://puu.sh/cThEB/a04be1a251.png

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

kriogeN
16/11/14, 20:14:44
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/pushing-the-actionbar-to-the-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
16/11/14, 23:24:20
Bueno hare pruebas y ya comentare por aquí.

JamesRevelo
18/11/14, 02:12:55
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 (http://hermosaprogramacion.blogspot.com/2014/10/android-temas-estilos.html#action-bar)

Espero te sirva

rafaxplayer
20/11/14, 16:28:37
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/pushing-the-actionbar-to-the-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(tr ue);

}

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
20/11/14, 21:35:09
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
22/11/14, 17:11:18
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(tr ue);

}



getSupportActionBar().setBackgroundDrawable(backdr awableToolbar);

((NotifyingScrollView) findViewById(R.id.scroll_view)).setOnScrollChanged Listener(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
03/01/15, 05:34:38
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
08/01/15, 09:24:08
No lo logre , o parcialmente si , en api 21 me funciona perfectamente pero menor no.

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