En este artículo, vamos a crear una barra de herramientas colapsable y un botón de acción flotante (FAB) en el desplazamiento con RecyclerView . Muchas aplicaciones populares tienen este efecto, por ejemplo. LinkedIn. A continuación se muestra el video de muestra para mostrar lo que vamos a construir. Tenga en cuenta que vamos a implementar este proyecto utilizando el lenguaje Kotlin .
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 Kotlin como lenguaje de programación.
Paso 2: Agregar dependencia de enlace de vista
Vaya a build.gradle (aplicación) y la siguiente dependencia dentro de la etiqueta de Android y haga clic en sincronizar ahora.
construir características {
viewBinding true
}
Paso 3: trabajar con el archivo activity_main.xml
Vaya al archivo activity_main.xml y consulte el siguiente código. A continuación se muestra el código para el archivo activity_main.xml . Se agregan comentarios dentro del código para comprender el código con más detalle.
XML
<?xml version="1.0" encoding="utf-8"?> <!--first of all you have to change the layout as CoordinatorLayout.--> <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <!--First child of CoordinatorLayout layout should be App Bar Layout--> <com.google.android.material.appbar.AppBarLayout android:id="@+id/appBarLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <!-- Add Material toolbar make the layout_scrollFlags to scroll|enterAlways (Important)--> <com.google.android.material.appbar.MaterialToolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_scrollFlags="scroll|enterAlways" app:title="@string/app_name" /> </com.google.android.material.appbar.AppBarLayout> <!--Add a recycler view inside layout behaviour add "@string/appbar_scrolling_view_behavior" (Important) by default it comes from the @string--> <androidx.recyclerview.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#F5F8FD" android:orientation="vertical" android:padding="5dp" app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> <!--Add a floating action button "com.google.android.material.behavior.HideBottomViewOnScrollBehavior" (Important)--> <com.google.android.material.floatingactionbutton.FloatingActionButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|right" android:layout_margin="16dp" android:src="@drawable/ic_baseline_add_24" app:fabSize="normal" app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior" app:tint="@android:color/white" /> </androidx.coordinatorlayout.widget.CoordinatorLayout>
Paso 4: cree un nuevo archivo de diseño y asígnele el nombre de archivo single_item.xml
Vaya al archivo single_item.xml y consulte el siguiente código. A continuación se muestra el código para el archivo single_item.xml . Es el diseño de elemento único que usaremos en RecyclerView.
XML
<?xml version="1.0" encoding="utf-8"?> <com.google.android.material.card.MaterialCardView 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_marginBottom="10dp" android:layout_marginStart="5dp" android:layout_marginEnd="5dp" android:layout_height="110dp"> <androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent"> <!--Add image view, We will not set any data here.--> <ImageView android:id="@+id/iv_language" android:layout_width="80dp" android:layout_height="90dp" android:layout_marginStart="20dp" android:layout_marginTop="10dp" android:scaleType="fitCenter" android:src="@mipmap/ic_launcher" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="parent" /> <!--Text view for showing the language name--> <TextView android:id="@+id/tv_lang_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="30dp" android:layout_marginTop="30dp" android:text="Language" android:textSize="16sp" android:textStyle="bold" app:layout_constraintLeft_toRightOf="@id/iv_language" app:layout_constraintTop_toTopOf="parent" /> <!--Text View for showing the exp--> <TextView android:id="@+id/tv_exp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:text="Exp : 3 years" app:layout_constraintLeft_toLeftOf="@id/tv_lang_name" app:layout_constraintTop_toBottomOf="@id/tv_lang_name" /> </androidx.constraintlayout.widget.ConstraintLayout> </com.google.android.material.card.MaterialCardView>
Paso 5: Crea una nueva clase modelo
Cree una nueva clase Language.kt . Usaremos datos de «Idioma» genérico personalizado para pasar la lista que se mostrará en la vista del reciclador.
Kotlin
// this is the Language model class class Language( val name : String ="", val exp : String = "" )
Paso 6: trabajar con la clase de adaptador
Cree una nueva clase RvAdapter.kt que actuará como una clase de adaptador para la vista del reciclador. Los comentarios se agregan antes del código para una mejor comprensión.
Kotlin
import android.view.LayoutInflater
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView
import com.introidx.collapsingtoolbargfg.databinding.SingleItemBinding
class RvAdapter(
private var languageList: List<Language>) : RecyclerView.Adapter<RvAdapter.ViewHolder>() {
// create an inner class with name ViewHolder
// It takes a view argument, in which pass the
// generated class of single_item.xml
// ie SingleItemBinding and in the
// RecyclerView.ViewHolder(binding.root) pass it like this
inner class ViewHolder(val binding: SingleItemBinding) : RecyclerView.ViewHolder(binding.root)
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
val binding = SingleItemBinding.inflate(LayoutInflater.from(parent.context), parent, false)
return ViewHolder(binding)
}
// bind the items with each item of
// the list languageList which than will be
// shown in recycler view
// to keep it simple we are not
// setting any image data to view
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
with(holder) {
with(languageList[position]) {
// set text to language name
binding.tvLangName.text = this.name
// set exp
binding.tvExp.text = this.exp
}
}
}
// return the size of languageList
override fun getItemCount(): Int {
return languageList.size
}
}
Paso 7: Trabajar con MainActivity.kt
Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt . Se agregan comentarios dentro del código para comprender el código con más detalle.
Kotlin
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.recyclerview.widget.LinearLayoutManager
import com.introidx.collapsingtoolbargfg.databinding.ActivityMainBinding
class MainActivity : AppCompatActivity() {
// view binding for the activity
private var _binding: ActivityMainBinding? = null
private val binding get() = _binding!!
// get reference to the adapter class
private var languageList = ArrayList<Language>()
private lateinit var rvAdapter: RvAdapter
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
_binding = ActivityMainBinding.inflate(layoutInflater)
setContentView(binding.root)
// define layout manager for the Recycler view
binding.recyclerView.layoutManager = LinearLayoutManager(this)
// attach adapter to the recycler view and also handle item click
// attach adapter to the recycler view
rvAdapter = RvAdapter(languageList)
// add adapter to the recycler view
binding.recyclerView.adapter = rvAdapter
// create objects of Language
// create some row data
val language1 = Language("Java", "3 Year exp")
val language2 = Language("Kotlin", "2 Year exp")
val language3 = Language("Python", "1 Year exp")
val language4 = Language("CPP", "5 Year exp")
val language5 = Language("PHP", "No exp")
// pass raw data t rhe list
languageList.add(language1)
languageList.add(language2)
languageList.add(language3)
languageList.add(language4)
languageList.add(language5)
languageList.add(language3)
languageList.add(language4)
languageList.add(language5)
languageList.add(language3)
languageList.add(language4)
languageList.add(language5)
rvAdapter.notifyDataSetChanged()
}
// on destroy of view make the
// binding reference to null
override fun onDestroy() {
super.onDestroy()
_binding = null
}
}
Producción: