import android.content.Context
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.*
import coil.compose.rememberAsyncImagePainter
import com.example.newcanaryproject.ui.theme.*
import java.util.*
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
NewCanaryProjectTheme {
// in the below line, we are specifying
// background color for our application
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
// in the below line, we are specifying theme as scaffold.
Scaffold(
// in scaffold we are specifying top bar.
topBar = {
// inside top bar we are specifying background color.
TopAppBar(backgroundColor = greenColor,
// along with that we are specifying title for our top bar.
title = {
// in the top bar we are specifying title as a text
Text(
// in the below line, we are specifying text
// to display in top app bar.
text = "Horizontal List View Example",
// in the below line, we are specifying modifier
// to fill max width.
modifier = Modifier.fillMaxWidth(),
// in the below line, we are specifying text alignment.
textAlign = TextAlign.Center,
// in the below line, we are specifying color for our text.
color = Color.White
)
}
)
}
) {
// in the below line, we are calling custom list
// view function to display custom listview.
customListView(LocalContext.current)
}
}
}
}
}
}
@OptIn(ExperimentalMaterialApi::class)
@Composable
fun customListView(context: Context) {
// in the below line, we are creating and
// initializing our array list
lateinit var courseList: List<ListModel>
courseList = ArrayList<ListModel>()
// in the below line, we are adding data to our list.
courseList = courseList + ListModel("Android", R.drawable.android)
courseList = courseList + ListModel("JavaScript", R.drawable.js)
courseList = courseList + ListModel("Python", R.drawable.python)
courseList = courseList + ListModel("C++", R.drawable.c)
courseList = courseList + ListModel("C#", R.drawable.csharp)
courseList = courseList + ListModel("Java", R.drawable.java)
courseList = courseList + ListModel("Node Js", R.drawable.nodejs)
// in the below line, we are creating a
// lazy row for displaying a horizontal list view.
LazyRow {
// in the below line, we are setting data for each item of our listview.
itemsIndexed(courseList) { index, item ->
// in the below line, we are creating a card for our list view item.
Card(
// inside our grid view on below line
// we are adding on click for each item of our grid view.
onClick = {
// inside on click we are displaying the toast message.
Toast.makeText(
context,
courseList[index].languageName + " selected..",
Toast.LENGTH_SHORT
).show()
},
// in the below line, we are adding
// padding from our all sides.
modifier = Modifier
.padding(8.dp)
.width(120.dp),
// in the below line, we are adding
// elevation for the card.
elevation = 6.dp
)
{
// in the below line, we are creating
// a row for our list view item.
Column(
// for our row we are adding modifier
// to set padding from all sides.
modifier = Modifier
.padding(8.dp)
.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally
) {
// in the below line, inside row we are adding spacer
Spacer(modifier = Modifier.height(5.dp))
// in the below line, we are adding Image to display the image.
Image(
// in the below line, we are specifying the drawable image for our image.
painter = painterResource(id = courseList[index].languageImg),
// in the below line, we are specifying
// content description for our image
contentDescription = "img",
// in the below line, we are setting height
// and width for our image.
modifier = Modifier
.height(60.dp)
.width(60.dp)
.padding(5.dp),
alignment = Alignment.Center
)
// in the below line, we are adding spacer between image and a text
Spacer(modifier = Modifier.height(5.dp))
// in the below line, we are creating a text.
Text(
// inside the text on below line we are
// setting text as the language name
// from our model class.
text = courseList[index].languageName,
// in the below line, we are adding padding
// for our text from all sides.
modifier = Modifier.padding(4.dp),
// in the below line, we are adding color for our text
color = Color.Black, textAlign = TextAlign.Center
)
}
}
}
}
}