Kotlin Gridview display issue on click and Scroll

Question

I am having a gridview which is populated from a list of string. List of string is a simple array of alphabets. Here is my Activity Xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/BackGroundPnl"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/ic_background"
    android:orientation="vertical">

    <GridView
        android:id="@+id/GvAlphabets"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:horizontalSpacing="5dp"
        android:layoutDirection="rtl"
        android:numColumns="3"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        android:verticalSpacing="5dp" />
</LinearLayout>

And here is my Adapter code

package com.example.nooraniqaida

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.BaseAdapter
import android.widget.TextView
import android.graphics.Color
import android.widget.GridView

internal class MainAdapter(
    private val context: Context,
    private val AlphabetList: List<String>,
    private val AlphabetsPronunciationList: List<String>
) :
    BaseAdapter() {
    private var layoutInflater: LayoutInflater? = null
    private lateinit var TextViewTitle: TextView
    private lateinit var TextViewDescription: TextView

    override fun getCount(): Int {
        return AlphabetList.size
    }

    override fun getItem(position: Int): Any? {
        return null
    }

    override fun getItemId(position: Int): Long {
        return 0
    }

    override fun getView(
        position: Int,
        convertView: View?,
        parent: ViewGroup
    ): View? {
        var convertView = convertView
        if (layoutInflater == null) {
            layoutInflater =
                context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
        }

        if (convertView == null) {
            convertView = layoutInflater!!.inflate(R.layout.row_item, null)
        }

        TextViewTitle = convertView!!.findViewById(R.id.TextViewTitle)
        TextViewTitle.text = AlphabetList[position]

        TextViewDescription = convertView!!.findViewById(R.id.TextViewDescription)
        TextViewDescription.text = AlphabetsPronunciationList[position]

        TextViewDescription.setOnClickListener(View.OnClickListener { v ->
            (parent as GridView).performItemClick(
                v,
                position,
                0
            )
        })

        return convertView
    }
}

And here is my activity code

package com.example.nooraniqaida

import android.content.Context
import android.media.MediaPlayer
import android.os.Bundle
import android.widget.AdapterView.OnItemClickListener
import androidx.appcompat.app.AppCompatActivity
import android.media.AudioManager
import android.os.Build
import android.view.View
import android.widget.TextView
import android.widget.LinearLayout
import android.widget.ImageButton
import android.widget.GridView
import android.view.ViewGroup

import android.widget.EditText

class HomeActivity : AppCompatActivity() {
    lateinit var GvAlphabets: GridView
    lateinit var ClickedGridViewItem: LinearLayout
    lateinit var BtnSpeaker: ImageButton
    lateinit var TextViewHeader: TextView
    lateinit var BtnClose: ImageButton
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_home)

        getSupportActionBar()!!.hide() // hide the title bar
        supportActionBar?.hide()

        GvAlphabets = findViewById(R.id.GvAlphabets)
        BtnSpeaker = findViewById(R.id.BtnSpeaker)
        TextViewHeader = findViewById(R.id.TextViewHeader)
        BtnClose = findViewById(R.id.BtnClose)

        BtnSpeaker.setTag(R.drawable.ic_speaker);

        val AlphabetFileName = "alphabets.txt"
        val AlphabetPronunciationFileName = "alphabets_p.txt"
        val AudioFileName = "audio.txt"
        try {
            val AlphabetsList: List<String>;
            val AlphabetsPronunciationList: List<String>;
            val AudioList: List<String>;
            this.assets.open((AlphabetFileName)).bufferedReader().use {
                AlphabetsList = it.readLines()
            };

            this.assets.open((AlphabetPronunciationFileName)).bufferedReader().use {
                AlphabetsPronunciationList = it.readLines()
            };

            this.assets.open((AudioFileName)).bufferedReader().use {
                AudioList = it.readLines()
            };

            val mainAdapter =
                MainAdapter(this@HomeActivity, AlphabetsList, AlphabetsPronunciationList)

            GvAlphabets.adapter = mainAdapter
            GvAlphabets.onItemClickListener = OnItemClickListener { parent, view, position, id ->
                try {
                    val ViewId = view.id
                    if (ViewId == R.id.TextViewDescription) {
                        ClickedGridViewItem = view.parent.parent as LinearLayout
                    }
                    else
                    {
                        ClickedGridViewItem = view as LinearLayout
                    }

                    //Setting default font color and background start
                    var GvChildCount = GvAlphabets.getChildCount()
                    for (i in 0 until GvChildCount) {
                        val GridViewItem = GvAlphabets.getChildAt(i)
                        GridViewItem.setBackgroundResource(R.drawable.gridview_white_item)
                        var TextViewTitle: TextView
                        TextViewTitle = GridViewItem!!.findViewById(R.id.TextViewTitle)
                        TextViewTitle.setTextColor(getResources().getColor(R.color.ArcGreen))

                        var TextViewDescription: TextView
                        TextViewDescription = GridViewItem!!.findViewById(R.id.TextViewDescription)
                        TextViewDescription.setTextColor(getResources().getColor(R.color.black))
                        TextViewDescription.setBackgroundResource(R.drawable.description_background_color)
                    }
                    //Setting default font color and background end

                    //Changing clicked grid item font color and background start
                    ClickedGridViewItem.setBackgroundResource(R.drawable.gridview_gradient_item)
                    var TextViewTitle: TextView
                    TextViewTitle = ClickedGridViewItem!!.findViewById(R.id.TextViewTitle)
                    TextViewTitle.setTextColor(getResources().getColor(R.color.white))

                    var TextViewDescription: TextView
                    TextViewDescription = ClickedGridViewItem!!.findViewById(R.id.TextViewDescription)
                    TextViewDescription.setTextColor(getResources().getColor(R.color.ArcGreen))
                    TextViewDescription.setBackgroundResource(R.drawable.description_background_white)
                    //Changing clicked grid item font color and background end

                    if (ViewId == R.id.TextViewDescription) {
                        TextViewHeader.visibility = View.VISIBLE
                        BtnClose.visibility = View.VISIBLE
                        TextViewHeader.text = TextViewDescription.text
                    }

                    var mp: MediaPlayer? = MediaPlayer()

                    mp!!.setDataSource(AudioList[+position])
                    mp!!.prepare()
                    mp!!.start()
                } catch (e: Exception) {
                    println(e.message)
                }
            }
        } catch (e: Exception) {
            println(e.message)
        }

        BtnSpeaker.setOnClickListener {
            if (BtnSpeaker.getTag() == R.drawable.ic_speaker) {
                BtnSpeaker.setImageResource(R.drawable.ic_mute)
                BtnSpeaker.setTag(R.drawable.ic_mute)
                try {
                    val AudioManagerObj =
                        this.getSystemService(Context.AUDIO_SERVICE) as AudioManager

                    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
                        AudioManagerObj.adjustStreamVolume(
                            AudioManager.STREAM_NOTIFICATION,
                            AudioManager.ADJUST_MUTE,
                            0
                        )
                        AudioManagerObj.adjustStreamVolume(
                            AudioManager.STREAM_ALARM,
                            AudioManager.ADJUST_MUTE,
                            0
                        )
                        AudioManagerObj.adjustStreamVolume(
                            AudioManager.STREAM_MUSIC,
                            AudioManager.ADJUST_MUTE,
                            0
                        )
                        AudioManagerObj.adjustStreamVolume(
                            AudioManager.STREAM_RING,
                            AudioManager.ADJUST_MUTE,
                            0
                        )
                        AudioManagerObj.adjustStreamVolume(
                            AudioManager.STREAM_SYSTEM,
                            AudioManager.ADJUST_MUTE,
                            0
                        )
                    } else {
                        AudioManagerObj.setStreamMute(AudioManager.STREAM_NOTIFICATION, true)
                        AudioManagerObj.setStreamMute(AudioManager.STREAM_ALARM, true)
                        AudioManagerObj.setStreamMute(AudioManager.STREAM_MUSIC, true)
                        AudioManagerObj.setStreamMute(AudioManager.STREAM_RING, true)
                        AudioManagerObj.setStreamMute(AudioManager.STREAM_SYSTEM, true)
                    }
                } catch (e: Exception) {
                    println(e.message)
                }
            } else {
                BtnSpeaker.setImageResource(R.drawable.ic_speaker)
                BtnSpeaker.setTag(R.drawable.ic_speaker)

                try {
                    val AudioManagerObj =
                        this.getSystemService(Context.AUDIO_SERVICE) as AudioManager

                    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
                        AudioManagerObj.adjustStreamVolume(
                            AudioManager.STREAM_NOTIFICATION,
                            AudioManager.ADJUST_UNMUTE,
                            0
                        )
                        AudioManagerObj.adjustStreamVolume(
                            AudioManager.STREAM_ALARM,
                            AudioManager.ADJUST_UNMUTE,
                            0
                        )
                        AudioManagerObj.adjustStreamVolume(
                            AudioManager.STREAM_MUSIC,
                            AudioManager.ADJUST_UNMUTE,
                            0
                        )
                        AudioManagerObj.adjustStreamVolume(
                            AudioManager.STREAM_RING,
                            AudioManager.ADJUST_UNMUTE,
                            0
                        )
                        AudioManagerObj.adjustStreamVolume(
                            AudioManager.STREAM_SYSTEM,
                            AudioManager.ADJUST_UNMUTE,
                            0
                        )
                    } else {
                        AudioManagerObj.setStreamMute(AudioManager.STREAM_NOTIFICATION, false)
                        AudioManagerObj.setStreamMute(AudioManager.STREAM_ALARM, false)
                        AudioManagerObj.setStreamMute(AudioManager.STREAM_MUSIC, false)
                        AudioManagerObj.setStreamMute(AudioManager.STREAM_RING, false)
                        AudioManagerObj.setStreamMute(AudioManager.STREAM_SYSTEM, false)
                    }
                } catch (e: Exception) {
                    println(e.message)
                }
            }
        }
    }
}

And my row_item's Xml is here

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="vertical"
    android:background="@drawable/gridview_white_item"
    android:padding="4dp">

    <TextView
        android:id="@+id/TextViewTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#00FFFFFF"
        android:gravity="center"
        android:text="Numbers"
        android:textAlignment="center"
        android:textColor="@color/ArcGreen"
        android:textSize="50sp"
        android:textStyle="bold" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:weightSum="1">

        <TextView
            android:id="@+id/TextViewHidden"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginRight="3dp"
            android:layout_weight="0.4"
            android:background="@color/Transparent"
            android:gravity="right"
            android:textColor="@color/black" />

        <TextView
            android:id="@+id/TextViewDescription"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/TextViewTitle"
            android:layout_weight="0.6"
            android:background="@drawable/description_background_color"
            android:gravity="left"
            android:paddingLeft="5dp"
            android:textColor="@color/black"
            android:textSize="25sp" />
    </LinearLayout>
</LinearLayout>

Idea is simple, i.e. to show alphabets (loaded from a text file) in grid view and any item of Gridview will be clicked then an audio will be played for the clicked Alphabet. My problem is that whenever I click on a alphabet, it selects (clicks) two alphabets from gridview (though it plays audio correctly), one which I clicked and other any random item. And when I scroll through gridview it keeps changing (randomly) the selected items. I am new to Andoid development. What am I doing wrong here?

Answer 1

It was not possible using GridView. I had to use the RecyclerView with GridLayoutManager.