2

Quiero modificar el tamaño de el CollapsingToolbarLayout para que no exista tanto espacio entre los tres puntos de menu y la barra principal.

Esto es lo que tengo: introducir la descripción de la imagen aquí

Y lo que deseo es "eliminar" o disminuir la barra de color rosa (colorAccent) omo en la siguiente imagen:

introducir la descripción de la imagen aquí

Este es el código del Layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
 tools:context="recyclerview.ejemplo.aldakur.net.ejemplorecyclerview.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/parallax_collapsing"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlways"
            app:contentScrim="?attr/colorPrimary"
            android:background="@color/colorAccent">

            <ImageView
                android:id="@+id/parallax_image"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                android:src="@drawable/images"
                app:layout_collapseMode="parallax"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/parallax_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@android:color/transparent"

                app:layout_scrollFlags="scroll|enterAlways"

                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

    <!--<include layout="@layout/content_main" />-->

    <android.support.v7.widget.RecyclerView
        android:id="@+id/parallax_rv"
        android:scrollbars="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

    </android.support.v7.widget.RecyclerView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/parallax_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

Edito: En Android 4.1 se visualiza correctamente, pero no en Android 6.0

3
  • No ser si lo entiendo, quieres eliminar la parte rosa que es el tamaño que tiene la statusbar y que la imagen se visualice por debajo de ella, mostrando la actionbar por encima de todo?
    – Codelaby
    el 4 nov. 2016 a las 7:59
  • Si te fijas mi statusbar rosa es mas grande que de lo normal. Si te fijas la distancia que tengo yo desde los tres puntitos del menu hacia arriba es mayor que lo norma.
    – aldakur
    el 7 nov. 2016 a las 11:21
  • A parte que el ojo humano con determinadas formas combinación de colores, la percepción que sea diferente es normal a simple vista, pero si lo compruebas pixel a pixel te darás cuenta que es el mismo tamaño.
    – Codelaby
    el 7 nov. 2016 a las 16:33

2 respuestas 2

1

Viendo que el espacio del color rosa es igual a la altura de la statusbar.

Para realizar que los elementos se dibujen por debajo de la StatusBar debes asignar a los que quieras la propiedad android:fitsSystemWindows="true"

Para que fitSystemWindows tenga efecto antes debes asignar al tema de la actividad values-21/styles.xml lo siguiente:

<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">@android:color/transparent</item>

Update

El wrap_content no funciona del todo bien en las imágenes dentro del CollapsingToolbarLayout

La imágenes si no se especifica lo contrario android las visualiza de forma que quepan dentro del view, yo para ajustarlas utilizo la librería glide o bien por código defino el height de la AppBarLayout

Tu código en AppBarLayout defines 200dp de altura, donde tienes wrap_content pon match_parent y añade android:fitsSystemWindows="true" a todos los elementos que quieras que parten den top absoluto.

Prueba ese código:

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="recyclerview.ejemplo.aldakur.net.ejemplorecyclerview.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/parallax_collapsing"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|enterAlways"
            app:contentScrim="?attr/colorPrimary"
            android:fitsSystemWindows="true"
            android:background="@color/colorAccent">

            <ImageView
                android:id="@+id/parallax_image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/images"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/parallax_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@android:color/transparent"

                app:layout_scrollFlags="scroll|enterAlways"

                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

    <!--<include layout="@layout/content_main" />-->

    <android.support.v7.widget.RecyclerView
        android:id="@+id/parallax_rv"
        android:scrollbars="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

    </android.support.v7.widget.RecyclerView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/parallax_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>
2
  • He editado la pregunta. En la pregunta no había apuesto el código correspondiente a CoordinatorLayout en cual tiene la linean android:fitsSystemWindows="true"pero el problema presiste.
    – aldakur
    el 8 nov. 2016 a las 9:26
  • 1
    Sí. Se me duplico. Lo he corregido en la pregunta. Siguiendo tus indicaciones todo es correcto. Gracias!
    – aldakur
    el 8 nov. 2016 a las 11:40
0

Tu implementación del CollapsingToolbarLayout es correcto, mas bien creo que tu imagen es menor al tamaño del AppBarLayout que es de 200dp, y es por eso que se muestra el color de background o contentScrim configurados en tu CollapsingToolbarLayout

1
  • Las dimensiones de la imagen son de 800 x 600 en jpg
    – aldakur
    el 3 nov. 2016 a las 8:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.