How to implement a sticky footer in a ListView in Kotlin Android

How to implement a sticky footer in a ListView in Kotlin Android.

How to Implement a Sticky Footer in a ListView in Kotlin Android

In this tutorial, we will learn how to implement a sticky footer in a ListView in Kotlin for Android. A sticky footer is a UI element that remains at the bottom of the screen, even when the content of the ListView is scrolled.

To achieve this, we will create a custom ListView adapter and modify the layout files accordingly.

Step 1: Set up the project

Create a new Android project in Android Studio. Choose an appropriate project name, package name, and minimum SDK version.

Step 2: Define the layout files

We need two layout files for this implementation:

activity_main.xml

This layout file represents the main activity screen and contains the ListView.

<?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"
    tools:context=".MainActivity">

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/footer"
        android:divider="@android:color/darker_gray"
        android:dividerHeight="1dp" />

    <LinearLayout
        android:id="@+id/footer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="vertical">

        <!-- Footer content -->

    </LinearLayout>

</RelativeLayout>

list_item.xml

This layout file represents the individual items in the ListView.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="10dp">

    <!-- Item content -->

</LinearLayout>

Step 3: Create the ListView adapter

Create a new Kotlin class called CustomListAdapter and extend it from the BaseAdapter class. This adapter will be responsible for populating the ListView with data and handling the sticky footer.

class CustomListAdapter(private val context: Context, private val data: ArrayList<String>) : BaseAdapter() {

    override fun getCount(): Int {
        // Return the total number of items in the ListView (excluding the footer)
        return data.size
    }

    override fun getItem(position: Int): Any {
        // Return the data item at the specified position
        return data[position]
    }

    override fun getItemId(position: Int): Long {
        // Return the unique ID for the data item at the specified position
        return position.toLong()
    }

    override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {
        // Inflate the list_item.xml layout file for each ListView item
        val view = convertView ?: LayoutInflater.from(context).inflate(R.layout.list_item, parent, false)

        // Bind the data to the layout views
        val itemTextView = view.findViewById<TextView>(R.id.itemTextView)
        itemTextView.text = data[position]

        return view
    }

    override fun isEnabled(position: Int): Boolean {
        // Disable interaction with the footer item
        return position != data.size
    }

}

Step 4: Implement the MainActivity

Open the MainActivity.kt file and modify it as follows:

class MainActivity : AppCompatActivity() {

    private lateinit var listView: ListView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        listView = findViewById(R.id.listView)

        val data = arrayListOf("Item 1", "Item 2", "Item 3") // Replace with your own data

        val adapter = CustomListAdapter(this, data)
        listView.adapter = adapter
    }
}

Step 5: Run the app

Build and run the app on an emulator or a physical device. You should see the ListView with the sticky footer at the bottom of the screen. The ListView items should be scrollable, while the footer remains fixed.

Conclusion

In this tutorial, we learned how to implement a sticky footer in a ListView in Kotlin Android. By creating a custom ListView adapter and modifying the layout files, we were able to achieve the desired behavior.

Feel free to customize the layout and adapter according to your specific requirements.