Efecto de brillo a la imagen en Android

Shimmer Effect es una de las características más populares que vemos en la mayoría de las aplicaciones de Android. Podemos llegar a ver este Efecto Shimmer mientras cargamos la pantalla en forma animada. El uso de Shimmer Effect en la aplicación de Android ofrece una buena experiencia de usuario. En este artículo, vamos a ver cómo implementar el efecto Shimmer en la aplicación de Android. qué

Aplicaciones del Efecto Brillo

• Shimmer Effect se usa principalmente para cargar la pantalla en una forma atractiva.
• Shimmer Effect da una buena apariencia a las imágenes en la aplicación de Android.
• El uso de Shimmer Effect en nuestra aplicación brinda una vista animada de la imagen.

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2: agregue la dependencia de la biblioteca Shimmer Effect en el archivo build.gradle

Luego navegue a los scripts de gradle y luego al nivel build.gradle (Módulo) . Agregue la siguiente línea en el archivo build.gradle en la sección de dependencias.

implementación ‘com.facebook.shimmer:shimmer:0.5.0’

ahora haga clic en Sincronizar ahora sincronizará todos sus archivos en build.gradle().

Paso 3: crea un nuevo efecto Shimmer en tu archivo activity_main.xml

aplicación > res > diseño > actividad_principal.xml actividad_principal.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/black"
    android:paddingLeft="16dp"
    android:paddingTop="16dp"
    android:paddingRight="16dp"
    android:paddingBottom="16dp"
    tools:context=".MainActivity">
  
    <!--Shimmer Effect-->
    <com.facebook.shimmer.ShimmerFrameLayout
        android:id="@+id/shimmer_view_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true">
  
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical">
  
            <!--Image-->
            <ImageView
                android:layout_width="150dp"
                android:layout_height="150dp"
                android:src="@drawable/ic_baseline_account_balance_24" />
  
            <!--Text given to Image-->
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="35dp"
                android:text="Bank"
                android:textColor="@color/purple_200"
                android:textSize="24dp"
                android:textStyle="bold" />
              
        </LinearLayout>
  
    </com.facebook.shimmer.ShimmerFrameLayout>
  
    <!--Button1 to start Shimmer Effect-->
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:paddingLeft="20dp"
        android:text="Start" />
  
    <!--Button2 to stop Shimmer Effect-->
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:paddingRight="20dp"
        android:text="Stop" />
      
</RelativeLayout>

Paso 4: trabajar con el archivo MainActivity.java

Vaya al archivo MainActivity.java y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle.

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
  
import androidx.appcompat.app.AppCompatActivity;
  
import com.facebook.shimmer.ShimmerFrameLayout;
  
public class MainActivity extends AppCompatActivity {
  
    // Variables created for buttons and Shimmer
    Button button1, button2;
    ShimmerFrameLayout container;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        button1 = findViewById(R.id.button);
        button2 = findViewById(R.id.button2);
  
        // Button 1 to start Shimmer Effect
        button1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // If auto-start is set to false
                container.startShimmer(); 
            }
        });
  
        // Button 2 to stop Shimmer Effect
        button2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // If auto-start is set to false
                container.stopShimmer(); 
            }
        });
  
        // Shimmer effect
        container = (ShimmerFrameLayout) findViewById(R.id.shimmer_view_container);
    }
}

Ahora haga clic en la opción de ejecución , tomará algún tiempo construir Gradle . Después de eso, obtendrá la salida en su dispositivo como se indica a continuación.

Producción: