Efecto Parallax en Android con Ejemplo

En los últimos años, todas las aplicaciones de Android han priorizado la experiencia del usuario. Una aplicación bien diseñada tendrá altas calificaciones de usuarios y popularidad. Muchos efectos están disponibles en el espacio UI/UX para brindar a los usuarios una buena experiencia. Parallax es uno de esos efectos. Echemos un vistazo a lo que se trata todo esto, así como una aplicación de muestra para ver cómo funciona.

¿Qué es exactamente el paralaje?

El término «paralaje» suena como un término matemático. Sí, esta técnica se deriva de un principio matemático. Es una técnica utilizada en gráficos por computadora y diseño web en la que las imágenes de fondo se mueven más rápido que las imágenes de primer plano, creando la ilusión de profundidad en una escena 2D y aumentando la inmersión. El desplazamiento de paralaje puede ser una técnica realmente interesante para darle más vida y carácter a partes de su aplicación. No se limita a Android/aplicaciones web. La mayoría de las aplicaciones de juegos usan este efecto para crear la ilusión de que los objetos se mueven hacia atrás con un solo objeto enfocado. Las animaciones de desplazamiento de Material Design incluirán parallax en Android. En algunos diseños se utiliza un efecto de desplazamiento de paralaje con una imagen de encabezado.

Uso del efecto Parallax en una aplicación de Android

1. Comencemos por hacer un nuevo proyecto.
2. Comience un nuevo proyecto de Android.
3. A continuación, elija Actividad vacía y Siguiente nombre: Parallax Nombre del paquete de Android: com.geeksforgeeks.example.parallax
4. Kotlin es el lenguaje.
5. Finalizar

Agreguemos las dependencias necesarias.

implementation "androidx.coordinatorlayout:coordinatorlayout:1.1.0"
implementation 'androidx.recyclerview:recyclerview:1.1.1'
implementation 'com.google.android.material:material:1.2.0-alpha05'

En esta sección, crearemos una aplicación que mostrará una lista de libros con un efecto de desplazamiento de paralaje. Comencemos con el diseño XML. Para comenzar, necesitaremos un diseño de barra de herramientas colapsable que podamos agregar al XML de la actividad principal. Un diseño de barra de herramientas plegable es análogo a un FrameLayout. Los elementos que se agregaron más recientemente se colocarán en la parte superior. Este posicionamiento es fundamental para que el paralaje funcione correctamente.

Comencemos con el esqueleto de la actividad main.xml y luego agreguemos el código del elemento requerido más adelante.

<androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.material.appbar.AppBarLayout>
    <com.google.android.material.appbar.CollapsingToolbarLayout>
        <ImageView/>
        <android.appcompat.widget.Toolbar />
        <com.google.android.material.tabs.TabLayout/>
    </com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager/>
</androidx.coordinatorlayout.widget.CoordinatorLayout> 

Nuestro archivo main.xml de actividad se verá así:

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".GfgMainActivity">
  
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="true">
  
        <include layout="@layout/toolbar"/>
  
        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabGravity="fill"
            app:tabTextAppearance="@style/TextAppearance.AppCompat.Medium"
            app:tabSelectedTextColor="@android:color/black"
            app:tabBackground="@android:color/holo_orange_dark"
            app:tabTextColor="@android:color/white"
            app:tabIndicatorColor="@android:color/white"
            app:tabMode="fixed" />
  
    </com.google.android.material.appbar.AppBarLayout>
  
    <androidx.gfgViewPager.widget.GfgViewPager
        android:id="@+id/gfgViewPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="17dp"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"/>
  
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Tenga en cuenta que se han agregado los siguientes atributos al diseño anterior:

Para usar con el CollapsingToolbarLayout:

app:layout scrollFlags="scroll|exitUntilCollapsed"

Con respecto a ImageView:

app:layout scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
app:layout collaps"
Mode="parallax"

En relación con la barra de herramientas:

app:layout scrollFlags="scroll|enterAlways"

En nuestra MainActivity, debemos configurar el Viewpager y las pestañas. Debido a que hemos incluido pestañas en nuestro diseño, necesitaremos un ViewPager para que funcione. Además, crearemos un Fragmento que cargue RecyclerView y un adaptador que cargue los elementos en RecyclerView. En la actividad me encargo de configurar el view pager y las pestañas, así como cargar el fragmento para el viewpager. Estoy cargando tres pestañas y un fragmento aquí. Estos atributos se definen en ScreenSlidePagerAdapter.

class GfgMainActivity : FragmentActivity() {
    private lateinit var gfgGfgViewP: GfgViewP
    private lateinit var gfgTabLayout : GfgTabLayout
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        gfgGfgViewP = findViewById(R.id.gfgViewP)
        gfgTabLayout = findViewById(R.id.theTabs)
        gfgTabLayout.setupWithGfgViewP(gfgGfgViewP)
  
        val pagerAdapter = ScreenSlidePagerAdapter(supportFragmentManager)
        gfgGfgViewP.adapter = pagerAdapter
    }
  
    override fun onBackPressed() {
        if (gfgGfgViewP.currentItem == 0) {
            // If the user is currently looking at the 
            // first step, allow the system to handle the
            // Back button. This calls finish() on this 
            // activity and pops the back stack.
            super.onBackPressed()
        } else {
            // Otherwise, select the previous step.
            gfgGfgViewP.currentItem = gfgGfgViewP.currentItem - 1
        }
    }
  
    private inner class ScreenSlidePagerAdapter(fm: FragmentManager) :
        FragmentStatePagerAdapter(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {
        override fun getCount(): Int = 3
        override fun getItem(position: Int): Fragment = BooksFragment().newInstance()
        override fun getPageTitle(position: Int): CharSequence? {
            var title  = ""
            when(position) {
                0 -> title ="Android"
                1 -> title = "DSA"
                2 -> title = "Interviews"
            }
            return title
        }
    }
}

Cree un CoursesFragment que cargará Recyclerview.

class CoursesFragment : Fragment() {
    fun newInstance(): CoursesFragment {
        return CoursesFragment()
    }
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        val view : View? = inflater.inflate(R.layout.courses_fragment, container, false)
        val rvCourses : RecyclerView = view!!.findViewById(R.id.courseList)
        rvCourses.layoutManager = LinearLayoutManager(activity);
        val recyclerAdapter = CoursesRecyclerAdapter(Util().getCourses())
        rvCourses.adapter = recyclerAdapter
        return view
    }
}

Producción:

Configure la velocidad de desplazamiento y otros atributos en ImageView del diseño de la barra de herramientas para personalizarlos. En resumen, la biblioteca de soporte de Android contiene una gran cantidad de utilidades que nos ayudan a mejorar nuestra aplicación en todos los sentidos. Necesitamos investigarlos y usarlos para crear aplicaciones más útiles.