Android listview kotlin tutorial will guide you to make a listview with custom adapter in android studio.
We will use model class to maintain the data of listview.
Model concept can decrease the complexity when app grows big.
Related examples,
Watch below output video first, then we will develop the tutorial.
Step 1. Make a new project
Create a new project in android studio with kotlin support and empty activity.
Step 2. Download Required Images
Click to download images : download this images
Now put these images in the drawable folder.
You can learn how to add items to the drawable folder here in step 2. (No need to create xml file in drawable, just copy and paste images in drawable).
Step 3. Update activity_main.xml
Update your existing activit_main.xml file with below source code
<?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"> <ListView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/listView" android:divider="@null" /> </RelativeLayout>
Step 4. Making Custom Adapter
Create a new kotlin class named CustomAdapter.kt
Add following code into it
import android.content.Context import android.view.LayoutInflater import android.view.View import android.view.ViewGroup import android.widget.BaseAdapter import android.widget.ImageView import android.widget.TextView import java.util.ArrayList /** * Created by Parsania Hardik on 03-Jan-17. */ class CustomAdapter(private val context: Context, private val imageModelArrayList: ArrayList<ImageModel>) : BaseAdapter() { override fun getViewTypeCount(): Int { return count } override fun getItemViewType(position: Int): Int { return position } override fun getCount(): Int { return imageModelArrayList.size } override fun getItem(position: Int): Any { return imageModelArrayList[position] } override fun getItemId(position: Int): Long { return 0 } override fun getView(position: Int, convertView: View?, parent: ViewGroup): View { var convertView = convertView val holder: ViewHolder if (convertView == null) { holder = ViewHolder() val inflater = context .getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater convertView = inflater.inflate(R.layout.lv_item, null, true) holder.tvname = convertView!!.findViewById(R.id.name) as TextView holder.iv = convertView.findViewById(R.id.imgView) as ImageView convertView.tag = holder } else { // the getTag returns the viewHolder object set as a tag to the view holder = convertView.tag as ViewHolder } holder.tvname!!.setText(imageModelArrayList[position].getNames()) holder.iv!!.setImageResource(imageModelArrayList[position].getImage_drawables()) return convertView } private inner class ViewHolder { var tvname: TextView? = null internal var iv: ImageView? = null } }
While developing listview, we need to create adapter class in which we can define code for each cell of listview.
We need to create one layout resource file(lv_item.xml here in our example, you can name it as you like) in the resource folder.
This file will contain components like TextView,ImageView, etc. as per requirement.
This file represents a single cell of the listview. In our example it contains one ImageView and one TextView.
In getView() method, lv_item.xml is inflated, and all the components of lv_item can be set here for each cell of listview as per requirement.
Step 5. Making lv_item.xml
Code for lv_item.xml is like:
<?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="match_parent" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <ImageView android:id="@+id/imgView" android:layout_width="100dp" android:layout_height="100dp" android:layout_marginLeft="10dp" android:layout_marginTop="10dp" /> <TextView android:id="@+id/name" android:layout_width="match_parent" android:layout_height="110dp" android:gravity="center_vertical" android:textAppearance="?android:attr/textAppearanceMedium" android:paddingLeft="10dp" android:text="Name" /> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="1dp" android:layout_marginTop="10dp" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:background="@color/colorAccent"/> </LinearLayout>
Step 6. Making Model class
Create a class named ImageModel.kt
Code this class is as below
/** * Created by Parsania Hardik on 03-Jan-17. */ class ImageModel { var name: String? = null var image_drawable: Int = 0 fun getNames(): String { return name.toString() } fun setNames(name: String) { this.name = name } fun getImage_drawables(): Int { return image_drawable } fun setImage_drawables(image_drawable: Int) { this.image_drawable = image_drawable } }
Step 7. Update MainActivity.kt class
Update MainActivity.kt class with following source code
import android.support.v7.app.AppCompatActivity import android.os.Bundle import android.util.Log import android.view.View import android.widget.ImageView import android.widget.ListView import java.util.ArrayList class MainActivity : AppCompatActivity() { private val a = 5 private val b = 10 private var lv: ListView? = null private var customeAdapter: CustomAdapter? = null private var imageModelArrayList: ArrayList<ImageModel>? = null private val myImageList = intArrayOf(R.drawable.benz, R.drawable.bike, R.drawable.car, R.drawable.carrera, R.drawable.ferrari, R.drawable.harly, R.drawable.lamborghini, R.drawable.silver) private val myImageNameList = arrayOf("Benz", "Bike", "Car", "Carrera", "Ferrari", "Harly", "Lamborghini", "Silver") override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) lv = findViewById(R.id.listView) as ListView imageModelArrayList = populateList() Log.d("hjhjh", imageModelArrayList!!.size.toString() + "") customeAdapter = CustomAdapter(this, imageModelArrayList!!) lv!!.adapter = customeAdapter } private fun populateList(): ArrayList<ImageModel> { val list = ArrayList<ImageModel>() for (i in 0..7) { val imageModel = ImageModel() imageModel.setNames(myImageNameList[i]) imageModel.setImage_drawables(myImageList[i]) list.add(imageModel) } return list } }
Java Version
Java version of this tutorial : Android Listview Example
So that was the today’s story in kotlin language.
Keep visiting for more interesting tutorials.
Download Code for Android Listview Kotlin
[sociallocker]Download Kotlin Listview[/sociallocker]