Join FlipAndroid.COM Telegram Group: https://t.me/joinchat/F_aqThGkhwcLzmI49vKAiw


Android CollapsingToolbarLayout Título de fondo

Estoy trabajando con el CollapsingToolbarLayout de la nueva Android Design Support Library.

He definido su título y está funcionando bien, el único problema que todavía tengo es que cuando se desplaza, el texto se pierde, dependiendo de la imagen en el fondo.

  • Android: detección de lanzamiento de aplicaciones desde el hogar o la historia
  • Escuchar los botones de volumen en el servicio de fondo?
  • ¿Cuál es la mejor manera de comprobar si una cadena contiene una URL en Java / Android?
  • ScrollingViewBehavior para ListView
  • ¿Cómo implementar la aplicación de Android en un dispositivo?
  • Añadir eventos táctiles a la clase VrPanoramaView de SDK de cartón google para android
  • Lo que me gustaría hacer, se establece un fondo para el título CollapsingToolbarLayout, pero no he encontrado una manera de hacerlo.

    ¿Hay de todos modos para lograr esto?

    ¡Gracias!

    Diseño:

    <android.support.design.widget.CoordinatorLayout android:id="@+id/main_content" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="@dimen/detail_backdrop_height" android:fitsSystemWindows="true" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginEnd="64dp" app:expandedTitleMarginStart="48dp" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:id="@+id/ivBigImage" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" android:scaleType="centerCrop" app:layout_collapseMode="parallax"/> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_gravity="fill_vertical" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:paddingTop="24dp"> <android.support.v7.widget.CardView android:id="@+id/cvDescription" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp"> <LinearLayout style="@style/Image.Info.CardContent" android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/description" android:textAppearance="@style/TextAppearance.AppCompat.Title"/> <TextView android:id="@+id/tvDescription" android:layout_width="match_parent" android:layout_height="wrap_content" android:text=""/> </LinearLayout> </android.support.v7.widget.CardView> </LinearLayout> </android.support.v4.widget.NestedScrollView> 

    Configuración del título CollapsingToolbarLayout en la actividad:

     CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar); collapsingToolbar.setTitle("Some title here"); 

    Editar:

    Aquí puede ver una secuencia de imágenes cuando colapso la barra de herramientas. Puede ver cómo el texto del título no es legible. El problema es que no tengo control de las imágenes que muestro, por lo que para algunas imágenes se ve bien, pero para otros, como este ejemplo, no se ve bien en absoluto y no es legible. Lo que tenía en mente era tal vez añadir algún tipo de antecedentes al texto, por lo que siempre hay el mismo color en la parte posterior del texto y siempre es legible.

    Introduzca aquí la descripción de la imagen

  • Descartar PopupWindow en touch fuera de popup, sin utilizar el constructor obsoleto
  • Vista de visualización en la parte superior de la barra de acción
  • Cómo animar FloatingActionButton de la nueva biblioteca de soporte de diseño
  • Diseño inferior en un cajón de navegación Android
  • Cómo hacer un ListView transparente en Android?
  • ¿Cómo ver toda la lista de dispositivos en Firebase Analytics?
  • 4 Solutions collect form web for “Android CollapsingToolbarLayout Título de fondo”

    Utilice una protección de texto scrim (desplácese hacia abajo un poco). Mi ejemplo asume que el texto del título es blanco, así que algunos ajustes pueden ser necesarios optimizar para su caso.

    Dentro de su CollapsingToolbarLayout , añada lo siguiente después de ivBigImage:

     <View android:layout_width="match_parent" android:layout_height="@dimen/sheet_text_scrim_height_top" android:background="@drawable/scrim_top" app:layout_collapseMode="pin"/> <View android:layout_width="match_parent" android:layout_height="@dimen/sheet_text_scrim_height_bottom" android:layout_gravity="bottom" android:layout_alignBottom="@+id/image" android:background="@drawable/scrim_bottom"/> 

    En su carpeta Drawable, agregue:

    Scrim_top.xml

     <shape xmlns:android="http://schemas.android.com/apk/res/android"> <gradient android:angle="270" android:startColor="@color/translucent_scrim_top" android:centerColor="@color/translucent_scrim_top_center" android:endColor="@android:color/transparent"/> </shape> 

    Y scrim_bottom.xml

     <shape xmlns:android="http://schemas.android.com/apk/res/android"> <gradient android:angle="90" android:startColor="@color/translucent_scrim_bottom" android:centerColor="@color/translucent_scrim_bottom_center" android:endColor="@android:color/transparent"/> </shape> 

    Para los colores, usted debe hacer estos más oscuros en las pruebas iniciales por lo que es más obvio que tiene que trabajar, pero para la producción que utiliza:

     <color name="translucent_scrim_top">#26000000</color> <color name="translucent_scrim_top_center">#0C000000</color> <color name="translucent_scrim_bottom">#2A000000</color> <color name="translucent_scrim_bottom_center">#0D000000</color> 

    Y para dimensiones, utilicé una altura de 88dp.

    Utilice un scrim de protección de texto del ejemplo de Amagi82 y agregue el parámetro CollapsingToolbarLayout la app:expandedTitleTextAppearance .

     <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" . app:expandedTitleTextAppearance="@style/TextAppearance.Design.CollapsingToolbar.Expanded.Shadow" . . app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

    Por ejemplo, agregue esto en su estilo xml:

     <style name="TextAppearance.Design.CollapsingToolbar.Expanded.Shadow"> <item name="android:shadowDy">0</item> <item name="android:shadowDx">0</item> <item name="android:shadowRadius">8</item> <item name="android:shadowColor">@android:color/black</item> </style> 

    Editar:

    Si desea cambiar el color de la barra de herramientas una vez que se ha "encogido", debe establecer el atributo contentScrim del diseño de barra de herramientas colapsado en ese color:

     <android.support.design.widget.CollapsingToolbarLayout app:contentScrim="@color/[color you want]" ...> 

    Señalar el valor de este atributo al color que desea que la barra de herramientas se convierta en resolverá su problema, según lo entiendo.

    Espero que responda a su pregunta!

    Eso es un montón de trabajo que lograr aquí por escrito que gran parte del código. Lo logré de 2 maneras.

    1 Una solución sencilla utilizando una vista con color TransparentBlack
    CÓDIGO >>

    Explicación del código:
    1 El CollapsingToolbarLayout tiene un estilo con sólo un tamaño de texto.
    2 Predeterminado CollapsingToolbarLa margen inferior del margen se reemplaza a 16dp.
    3. Nuestra cabecera con paralaje collapseMode es un RelativeLayout con un ImaveView y una vista.
    4. Esta simple vista con un BG en la parte inferior del encabezado superior El diseño relativo con el color de contraste (aquí # 77000000), actúa como el BG para CollapsingToolbarLayout del Título colapsado en color blanco.

      <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/redeem_detail_collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/color_window_background" android:fitsSystemWindows="true" app:expandedTitleMarginBottom="16dp" app:expandedTitleTextAppearance="@style/CollapsingTitleStyle" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <!--header view--> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" app:layout_collapseMode="parallax"> <ImageView android:id="@+id/redeem_detail_top_bg" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" android:scaleType="centerCrop" android:src="@drawable/splash" /> <!--A view that draws a semi tranparent black overlay so that title is visible once expanded --> <View android:layout_width="match_parent" android:layout_height="48dp" android:layout_alignParentBottom="true" android:background="@color/black_transparent" /> </RelativeLayout> <android.support.v7.widget.Toolbar android:id="@+id/redeem_detail_toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:title="Redeem" /> </android.support.design.widget.CollapsingToolbarLayout> 

    Imágenes para el estilo 1:

    A) Cuando el Título de CollapsingToolbarLayout se expande Completamente:

    Título ampliado

    B) Cuando CollapsingToolbarLayout Title se está reduciendo al desplazarse hacia arriba:

    Encogiéndose

    2 Respuesta anterior

    El método ya es mencionado por Joao Ferreira.

    Esto es lo que parece con shadowRadius = 16: Observe la sombra

    Introduzca aquí la descripción de la imagen

    PS por favor actualizar o pedir más si hay confusiones 🙂

    FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.