10

Sto lavorando a un'app Android con design del materiale. Ho una vista dettagliata con un CollapsingToolbarLayout e un ImageView (funziona fino ad ora). Sfortunatamente il titolo non è leggibile se c'è un'immagine luminosa. screenshot of this issue Finora ho provato ad aggiungere un gradiente (Add gradient to imageview) ma questa soluzione non ha funzionato per me a causa del CollapsingToolbarLayout. Qui potete vedere il mio codice:Come aggiungere un gradiente a un ImageView nidificato in un CollapsingToolbar

<android.support.design.widget.CoordinatorLayout 
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:layout_height="256dp" 
    android:layout_width="match_parent" 
    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" 
     app:layout_scrollFlags="scroll|exitUntilCollapsed" 
     app:contentScrim="@color/primary" 
     android:fitsSystemWindows="true" 
     app:expandedTitleMarginEnd="50dp" 
     app:expandedTitleMarginStart="50dp" 
     > 


     <!--<View 
      android:background="@drawable/actionbar_gradient_dark" 
     />--> 
      <ImageView 
       android:id="@+id/backimg" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:fitsSystemWindows="true" 
       app:layout_collapseMode="parallax" 
       android:scaleType="centerCrop" 
       app:layout_scrollFlags="scroll|enterAlways" 
       /> 

     <android.support.v7.widget.Toolbar 
      android:id="@+id/detailToolbar" 
      android:layout_height="?attr/actionBarSize" 
      android:layout_width="match_parent" 
      app:layout_collapseMode="pin" 
      app:layout_collapseParallaxMultiplier="0.7" 
      app:layout_scrollFlags="scroll|enterAlways" 
      app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/> 

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

Qualcuno sa una soluzione per questo problema?

+0

dou si applica il gradiente solo alle immagini che ha colore simile al carattere? –

+0

Ho usato la sfumatura per tutte le immagini con un colore simile alla mia intestazione. – Jobs

risposta

19

avvolgere l'ImageView in un FrameLayout e aggiungere una vista con uno sfondo:

<FrameLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <ImageView 
     android:id="@+id/backimg" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:fitsSystemWindows="true" 
     app:layout_collapseMode="parallax" 
     android:scaleType="centerCrop" 
     android:src="@drawable/image" 
     app:layout_scrollFlags="scroll|enterAlways" /> 
    <View 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="@drawable/actionbar_gradient_dark" /> 
</FrameLayout> 

Assicurarsi che il gradiente è qualcosa di simile:

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle" > 
    <gradient 
     android:angle="90" 
     android:endColor="@android:color/transparent" 
     android:startColor="@android:color/black" /> 
    <corners android:radius="0dp" /> 
</shape> 
+0

Grazie :) Ha funzionato! – Jobs

+0

dou si applica quel gradiente solo alle immagini che hanno un colore simile al carattere? –