Cómo crear una ActionBar como Google Play que se desvanece al desplazarse

¿Cómo hacer transparente o translúcido ActionBar como Google Play que se desvanece dentro o hacia fuera al desplazarse usando windowActionBarOverlay ?

Compruebe las siguientes capturas de pantalla

** introduzca la descripción de la imagen aquí **

El siguiente es el código que usé en la aplicación que estoy trabajando

Tendrá que usar la función OnScrollChanged en su ScrollView . ActionBar no le permite establecer la opacidad, así que establezca un fondo dibujable en la barra de acción y puede cambiar su opacidad en función de la cantidad de desplazamiento en la vista de desplazamiento. He dado un ejemplo de flujo de trabajo

El conjunto de funciones da el alfa apropiado para la ubicación locationImage basada en su posición WRT window.

this.getScrollY() le indica cuánto ha desplazado el scrollView

 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; } 

EDIT: He añadido un ejemplo de muestra de trabajo en https://github.com/ramanadv/fadingActionBar , puede echar un vistazo.

Introduzca aquí la descripción de la imagen

Por favor, compruebe esta biblioteca https://github.com/ManuelPeinado/FadingActionBar que implementa el efecto cool fading action bar que desea

Esta biblioteca ayuda a la animación https://github.com/ksoichiro/Android-ObservableScrollView

Documentación oficial de Google Developer

Introduzca aquí la descripción de la imagen

Barra de acción en modo de superposición.

Habilitar el modo de superposición

Para habilitar el modo de superposición para la barra de acción, debe crear un tema personalizado que amplíe un tema de barra de acción existente y establezca la propiedad android: windowActionBarOverlay en true.

Solo para Android 3.0 y versiones posteriores

Si su minSdkVersion está establecida en 11 o superior, su tema personalizado debe utilizar el tema Theme.Holo (o uno de sus descendientes) como tema principal. Por ejemplo:

 <resources> <!-- the theme applied to the application or activity --> <style name="CustomActionBarTheme" parent="@android:style/Theme.Holo"> <item name="android:windowActionBarOverlay">true</item> </style> </resources> 

Para Android 2.1 y versiones superiores

Si su aplicación está utilizando la compatibilidad de la biblioteca de soporte en dispositivos que ejecutan versiones inferiores a Android 3.0, el tema personalizado debe utilizar el tema Theme.AppCompat (o uno de sus descendientes) como tema principal. Por ejemplo:

 <resources> <!-- the theme applied to the application or activity --> <style name="CustomActionBarTheme" parent="@android:style/Theme.AppCompat"> <item name="android:windowActionBarOverlay">true</item> <!-- Support library compatibility --> <item name="windowActionBarOverlay">true</item> </style> </resources> 

Especificar el margen superior del diseño

Cuando la barra de acción está en modo de superposición, puede obscurecer algunos de su diseño que deben permanecer visibles. Para asegurarse de que dichos elementos permanezcan por debajo de la barra de acción en todo momento, agregue margen o relleno a la parte superior de las vistas usando la altura especificada por actionBarSize. Por ejemplo:

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingTop="?android:attr/actionBarSize"> ... </RelativeLayout> 

Hay documentación oficial sobre cómo lograr este efecto: https://developer.android.com/training/basics/actionbar/overlaying.html

Editar: Existe una biblioteca de código abierto ObservableScrollView con una gran cantidad de demos de código abierto con diferentes efectos de ActionBar, incluidos los que mencionó. Es un gran recurso: https://github.com/ksoichiro/Android-ObservableScrollView .

Utilizando el explorador de desplazamiento AbsListView que podemos lograr para listview simplemente sin usar otra biblioteca complicada o ScrollView

Fija el listener a la vista de lista

 public class PagedScrollListener implements AbsListView.OnScrollListener { private ActionBar mActionBar; private View mTopHideView; // represent header view @Override public void onScrollStateChanged(final AbsListView view, final int scrollState) { mScrollState = scrollState; } @Override public void onScroll(final AbsListView view, final int firstVisibleItem, final int visibleItemCount, final int totalItemCount) { if (mActionBar != null && mTopHideView != null && mListView != null) { Log.i(TAG, getScrollY() + ""); int currentY = getScrollY(); final int headerHeight = mTopHideView.getHeight() - mActionBar.getHeight(); final float ratio = (float) Math.min(Math.max(currentY, 0), headerHeight) / headerHeight; final int newAlpha = (int) (ratio * 255); Log.i(TAG, newAlpha + " alpha"); mActionBarDrawaqble.setAlpha(newAlpha); }} public void setActionBarRefernce(ActionBar actionBar, View topHideView, float actionBarHeight, ListView listView) { mActionBar = actionBar; mActionBarHeight = actionBarHeight; mTopHideView = topHideView; mListView = listView; mActionBarDrawaqble = new ColorDrawable(ContextCompat.getColor(mContext, R.color.google_plus_red)); mActionBar.setBackgroundDrawable(mActionBarDrawaqble); mActionBarDrawaqble.setAlpha(0); } public int getScrollY() { View c = mListView.getChildAt(0); if (c == null) { return 0; } int firstVisiblePosition = mListView.getFirstVisiblePosition(); int top = c.getTop(); int headerHeight = 0; if (firstVisiblePosition >= 1) { headerHeight = mTopHideView.getHeight(); } return -top + firstVisiblePosition * c.getHeight() + headerHeight; } } 

// Nota: No olvide llamar al método ** setActionBarRefernce ** de escuchas personalizadas

Si está utilizando un CoordinatorLayout en su xml de diseño, debería retirar este artículo describiendo cómo manejar los rollos y hacer que otras vistas reaccionen a ellos.

Hay un ejemplo de lograr lo que pidió, si agrega su imagen como un niño de la CollapsingToolbarLayout toda la magia se maneja de forma automática y puede incluso algunos parámetros como el color de malla, la altura mínima para comenzar a colapsar, etc:

En webView:

 @JavascriptInterface public void showToolbar(String scrollY, String imgWidth) { int int_scrollY = Integer.valueOf(scrollY); int int_imgWidth = Integer.valueOf(imgWidth); String clr; if (int_scrollY<=int_imgWidth-actionBarHeight) { clr = Integer.toHexString(int_scrollY * 255 / (int_imgWidth-actionBarHeight)); }else{ clr = Integer.toHexString(255); } toolbar.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#"+clr+"9CCC65"))); } 
  • Necesita una barra de estado completamente transparente
  • Android: Efecto de parpadeo ListView. ¿Algún consejo sobre cómo deshacerse de esto?
  • Android: Transparencia PNG fallando con BitmapFactory.decodeStream (...) y carpeta de activos
  • Cómo configurar el fondo transparente para el botón de imagen en el código?
  • Círculo transparente con borde
  • Dibuje la forma transparente sobre lienzo
  • Android: hacer que todo alrededor de Dialog sea más oscuro que el predeterminado
  • AppBarLayout transparente y CollapsingToolbarLayout
  • Búsqueda de píxeles de borde de una imagen con envolvente transparente (para detección de colisión)
  • Android Opengl 2.0 Alpha Mezcla tema - texturas medio transparentes
  • Vista transparente sobre ImageView
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.