web-dev-qa-db-fra.com

Définir l'effet d'ondulation dans la vue d'image

Vous avez la vue d'image suivante:

<ImageView
    Android:id="@+id/header"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true"
    Android:scaleType="centerCrop"
    app:layout_collapseMode="parallax" 
    Android:clickable="true"
    Android:focusable="true"
    Android:background="?android:attr/selectableItemBackground"/>

Ripple fonctionne très bien si je ne mets pas de bitmap à la vue image. Mais une fois que j'ai défini un bitmap comme celui-ci, l'effet d'entraînement est parti:

ImageView iv=((ImageView)rootView.findViewById(R.id.header));
iv.setImageBitmap(myBitmap);

Ceci est mon ripple.xml:

<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android" 
                  Android:color="?android:colorControlHighlight">
    <item Android:id="@Android:id/mask">
        <shape Android:shape="oval">
            <solid Android:color="?android:colorAccent" />
        </shape>
    </item>
</ripple>

Je suppose que l'image bitmap cache l'effet d'entraînement, comment puis-je le rendre visible? Déjà essayé:

  1. Modification d'Android: arrière-plan à Android: au premier plan, ce qui n'a pas fonctionné.
  2. La configuration d’une autre ImageView transparente par-dessus celle-ci, mais comme elle était transparente, aucune ondulation n’a été affichée.

Des idées? J'ai vu Lollipop Contacts faire cela aussi.

javaandroidandroid-5.0-lollipopripple
14
Jjang

J'ai une galerie d'images (construite avec une RecyclerView et une GridLayoutManager). L'image est définie à l'aide de Picasso. Pour ajouter une ondulation à l'image J'ai enveloppé la ImageView avec une FrameLayout. La disposition de l'article est:

<FrameLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="120dp"
    Android:foreground="@drawable/ripple"
    Android:clickable="true"
    Android:focusable="true"
    >
    <ImageView
        Android:id="@+id/grid_item_imageView"
        Android:layout_width="match_parent"
        Android:layout_height="120dp"
        Android:layout_gravity="center"
        Android:scaleType="centerInside"
        />
</FrameLayout>

Notez leAndroid:foreground. Ce n'est pas la même chose que Android:background. J'ai essayé sansAndroid:clickable="true" et Android:focusable="true" et cela fonctionne aussi , mais ça ne fait pas de mal.

Ajoutez ensuite un ripple.xml pouvant être dessiné dans res/drawable:

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_pressed="true">
        <shape Android:shape="rectangle">
            <solid Android:color="#7FF5AC8E" />
        </shape>
    </item>
    <item>
        <shape Android:shape="rectangle">
            <solid Android:color="@Android:color/transparent" />
        </shape>
    </item>
</selector>

Notez que cette option affiche une couleur semi-transparente en haut de l'image lorsque l'élément est sélectionné (pour les appareils dotés d'une version antérieure à Android 5.0). Vous pouvez l'enlever si vous ne le voulez pas. 

Ajoutez ensuite le ripple.xml dessinable avec ondulation dans res/drawable-v21:

<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:color="@color/coral">
</ripple>

Vous pouvez utiliser l'effet d'entraînement par défaut à la place du ripple.xml personnalisé, mais il est très difficile de voir au-dessus d'une image, car elle est grise:

Android:foreground="?android:attr/selectableItemBackground"
26
Albert Vila Calvo

Vous pouvez y arriver en enveloppant le dessinable dans un RippleDrawable.

ImageView iv=((ImageView)rootView.findViewById(R.id.header));
Drawable image = .... // your image.

RippleDrawable rippledImage = new   
         RippleDrawable(ColorStateList.valueOf(rippleColor), image, null);
iv.setImageDrawable(rippledImage)

;

5
Gabriele Mariotti

Pour les paresseux comme moi:

Android:foreground="?android:attr/selectableItemBackground"

Et personnalisez la couleur d'ondulation dans votre style.

dans values ​​/ styles.xml

<style name="colorControlHighlight_blue">
   <item name="colorControlHighlight">@color/main_blue_alpha26</item>
</style>

Ensuite, dans votre fragment avant inflation dans onCreateView ():

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
   getContext().getTheme().applyStyle(R.style.colorControlHighlight_blue, true); //blue ripple color
   View view = inflater.inflate(R.layout.my_fragment_layout, container, false);
   return view;
}
2
amalBit

Avec un effet circulaire, essayez ceci:

<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:tools="http://schemas.Android.com/tools"
Android:color="@color/colorTema3"
tools:targetApi="Lollipop">
<item Android:id="@Android:id/mask">
    <shape Android:shape="rectangle">
        <solid Android:color="@color/colorPurpleBarra" />
    </shape>
</item>
<item
    Android:id="@Android:id/background"
    Android:drawable="@Android:color/transparent" />

0
Álvaro Agüero