example - toolbar android studio

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

Question

¿Cómo hacer ActionBar transparente o translúcida como Google Play que se desvanece hacia adentro o hacia afuera cuando se desplaza usando windowActionBarOverlay ?

Verifique las siguientes capturas de pantalla

Answer 1

Consulte esta biblioteca github.com/ManuelPeinado/FadingActionBar que implementa el efecto de barra de acción de desvanecimiento que desea

Answer 2

El siguiente es el código que utilicé en la aplicación en la que trabajo

Tendrá que usar la función OnScrollChanged en su ScrollView . ActionBar no le permite establecer la opacidad, por lo tanto, establezca un fondo dibujable en la barra de acciones 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

Los conjuntos de funciones proporcionan el alfa apropiado para la ubicación de la vista en función de su ventana WRT de posición.

this.getScrollY() le indica cuánto ha desplazado 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;
}

EDITAR: He agregado un ejemplo de muestra de trabajo en https://github.com/ramanadv/fadingActionBar , puede echarle un vistazo.

Answer 3

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

Answer 4

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

Answer 5

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

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

Answer 6

Si está utilizando un CoordinatorLayout en su xml de diseño, debe consultar este artículo que describe cómo manejar las volutas y hacer que otras vistas reaccionen ante ellas.

Hay un ejemplo que logra lo que solicitaste, si agregas tu vista de imagen como hija de CollapsingToolbarLayout toda la magia se maneja automáticamente y puedes incluso algunos parámetros como el color de la malla, altura mínima para comenzar a colapsar, etc.

Answer 7

Usando el oyente de desplazamiento AbsListView lo podemos lograr para la vista de lista simplemente sin usar otra biblioteca complicada o ScrollView

establecer el oyente de desplazamiento para ver la 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 se olvide de llamar al método ** setActionBarRefernce ** del oyente personalizado

Answer 8

Documentación oficial del desarrollador de Google

barra de acción en modo superposición.

Habilitar el modo de superposición

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

Solo para Android 3.0 y superior

Si su minSdkVersion está configurada en 11 o superior, su tema personalizado debe usar 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 superior

Si su aplicación utiliza la Biblioteca de soporte para compatibilidad en dispositivos que ejecutan versiones inferiores a Android 3.0, su tema personalizado debe usar 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 oscurecer parte de su diseño que debería permanecer visible. Para garantizar que dichos elementos permanezcan debajo de la barra de acción en todo momento, agregue margen o relleno a la parte superior de la (s) vista (s) 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>