8

Al abrir la app "WhatsApp", la primera actividad que se nos muestra es la de los chats. En la parte superior, donde dice "WhatsApp", al costado derecho, tenemos el botón de buscar y el de los tres puntitos. Estos dos botones, al mantenerlos seleccionados, hacen un efecto de selección circular al rededor de ellos el cual me gustaría replicar en mi aplicación. Alguien podría decirme como hacerlo?

Intenté con un floating action button, pero no se por que razón el ícono no entra dentro del floating.

Adjunto foto de lo que me ocurre

introducir la descripción de la imagen aquí

Adjunto el código xml del ícono

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
<path
    android:fillColor="#0277bd"
    android:pathData="M10,18h4v-2h-4v2zM3,6v2h18L21,6L3,6zM6,13h12v-2L6,11v2z"/>

Espero poder solucionar este problema. Gracias por leer!

0

2 respuestas 2

10

El efecto se llama "Ripple",

introducir la descripción de la imagen aquí

lo puedes realizar de la siguiente forma:

Efecto contenido dentro de la vista:

android:background="?selectableItemBackground"

Efecto que se extiende más allá de los límites de la vista:

android:background="?selectableItemBackgroundBorderless"

Además de esto puedes usar un RippleDrawable

 <!-- A red ripple masked against an opaque rectangle. --/>
 <ripple android:color="#ffff0000">
   <item android:id="@android:id/mask"
         android:drawable="@android:color/white" />
 </ripple>

Cambiar color de efecto Ripple

Para cambiar el color , ve a tu archivo styles.xml y ubica el tema que usa tu app, agrega la propiedad colorControlHighlight y define el color que deseas se muestre.

 <item name="colorControlHighlight">#ff0000</item>

ejemplo styles.xml:

<resources>


    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <item name="colorControlHighlight">#ff0000</item>

    </style>

</resources>

Si deseas definir el color por Activity, recuerda que puedes definir un tema diferente por Activity en tu AndroidManifest.xml y definir este tema en tu archivo styles.xml:

<activity android:theme="@style/CustomTheme">
5
  • 1
    Jorge, te agradezco otra vez por ayudarme y por la calidad de tu respuesta. La propiedad background con "Borderless" era justo la que buscaba. Me dirías como puedo cambiar el color de la onda que esto genera?
    – Tomas M
    Commented el 23 ene. 2020 a las 16:02
  • @TomasM agregue lo que comentas para cambiar el color del efecto, saludos.
    – Jorgesys
    Commented el 23 ene. 2020 a las 16:42
  • muchas gracias de nuevo Jorge, pero eso va a servir para cambiar el color de TODOS los botones. Yo necesito cambiar el color, dependiendo de la actividad en la que se encuentre mi botón.
    – Tomas M
    Commented el 23 ene. 2020 a las 17:13
  • 1
    Recuerda que puedes definir un tema diferente por activity
    – Jorgesys
    Commented el 23 ene. 2020 a las 17:23
  • WOOOW eso si que no lo sabía. Me adjuntarías algun link o algo donde pueda ver eso? Me va a facilitar muchisimas cosas. O si queres hago una nueva pregunta para esto
    – Tomas M
    Commented el 23 ene. 2020 a las 17:25
0

Si estas intentando emular el comportamiento de Whatsapp te aconsejo que utilices el mismo elemento, utilizando los items del menú conseguirás el resultado que esperas.

Te dejo un ejemplo de menú:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

<item
    android:id="@+id/ic_favorite_button"
    android:title="@string/filter_favorite"
    android:icon="@drawable/ic_star_empty"
    app:showAsAction="always">
</item>

<item
    android:id="@+id/ic_fullscreen"
    android:title="@string/filter_full_screen"
    android:icon="@drawable/ic_full_screen"
    app:showAsAction="always">
</item>
</menu>
1
  • 1
    Gracias nuevamente por responderme amigo! Igualmente tu respuesta no me es útil porque uso estos botones (con el efecto que quiero) en todas partes de mi aplicación. En cambio, con la información que me das, solo puedo aplicar dicho efecto a los botones de una toolbar (creo que asi se llama).
    – Tomas M
    Commented el 23 ene. 2020 a las 15:56

Tu Respuesta

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

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