How to create GridView using Jetpack Compose
How to create GridView using Jetpack Compose. GridView is a grid-based form of view where the items in the grid are laid out in a grid arrangement. The information within the grid must be imported either from the database or an array. In this post, we’ll create a basic application to display the various programming languages in the grid, and displaying them with their names by using Jetpack Compose.
InThis Android jetpack compose article I am creating a project to showing list date in gridview in jetpack comapose and when click on card navigation to details screen.
How to create GridView using Jetpack Compose
Step-by-Step Implementation GridView using Jetpack Compose
First, create a new Android Studio Project. Android Studio
To start a new project using Android Studio Please refer to How to Start with a new Project within Android Studio. After selecting the template, choose an empty compose activity. If you are unable to locate this template, you can consider upgrading Android Studio to the latest version. We have demonstrated the app in Kotlin which is why you choose Kotlin as as the primary language when creating an New Project.
Dependencies
dependencies {
/**first we add dependencies */
implementation 'androidx.core:core-ktx:1.7.0'
implementation 'androidx.appcompat:appcompat:1.3.1'
implementation 'com.google.android.material:material:1.4.0'
implementation "androidx.compose.ui:ui:$compose_version"
implementation "androidx.compose.material:material:$compose_version"
implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.4.0'
implementation 'androidx.activity:activity-compose:1.4.0'
testImplementation 'junit:junit:4.+'
androidTestImplementation 'androidx.test.ext:junit:1.1.3'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
//Gson
implementation 'com.google.code.gson:gson:2.8.7'
//Navigate
implementation "androidx.navigation:navigation-compose:2.4.0-alpha08"
}
2. Creating an modal class
Browse to the app’s menu, Java > the name of your app’s package Then right-click it and choose New > Java/Kotlin Class and label your class as GridModal and add the following instructions to the class. Comments are included in the code for you to understand the code in greater detail.
package com.codeplayon.gridlayout.model
data class FruitsData(
val id:Long,
val name :String,
val desc :String
)
Step 3. Adding a new color to the Color.kt file
Go to the app, click Java > the name of your app’s package >> ui.theme Then, open the Color.kt file. Add the following code.
step 4: Add photos to the folder that can be drawn
Copy all images that you would like to include to the view grid. Go to the app, Res > Drawable. Right-click and copy all images into the folder for drawable.
Step 5: Create a FruitDataDetails.kt file for date parser.
package com.codeplayon.gridlayout.view
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.codeplayon.gridlayout.model.FruitsData
import com.codeplayon.gridlayout.ui.theme.Purple500
import com.codeplayon.gridlayout.R
@Composable
fun FruitsDataDetails(data:FruitsData){
Column(modifier = Modifier.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Column(modifier = Modifier.fillMaxWidth()
.height(50.dp)
.background(Purple500),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Text(
text ="Fruits Calories and Sugar",
color = Color.White,
fontSize = 20.sp,
fontWeight = FontWeight.Bold
)
}
Spacer(modifier = Modifier.padding(1.dp))
Image(painter = painterResource(
id = when(data.id){
1L-> R.drawable.apple_min
2L -> R.drawable.banana_min
3L -> R.drawable.orange_min
4L -> R.drawable.grapes_min
5L -> R.drawable.pomegranate_min
6L -> R.drawable.kiwifruit_min
7L -> R.drawable.papaya_min
8L -> R.drawable.pineapple_min
9L -> R.drawable.avocado_min
10L -> R.drawable.peach_min
11L-> R.drawable.apple_min
12L -> R.drawable.banana_min
13L -> R.drawable.orange_min
14L -> R.drawable.grapes_min
15L -> R.drawable.pomegranate_min
16L -> R.drawable.kiwifruit_min
17L -> R.drawable.papaya_min
18L -> R.drawable.pineapple_min
19L -> R.drawable.avocado_min
else -> R.drawable.apple_min
}
),
contentDescription = "Grid Image",
modifier = Modifier
.clip(RoundedCornerShape(10.dp)),
alignment = Alignment.Center
)
Spacer(modifier = Modifier.padding(10.dp))
Text(
text = data.name,
modifier = Modifier
.align(Alignment.CenterHorizontally),
color = Color.Black,
fontSize = 20.sp,
fontWeight = FontWeight.Bold
)
Spacer(modifier = Modifier.padding(1.dp))
Text(
text = data.desc,
modifier = Modifier
.align(Alignment.Start)
.padding(6.dp),
color = Color.Black,
fontSize = 16.sp,
fontWeight = FontWeight.Normal,
)
}
}
Step 6: Create FruitsGridLayout.kt file and user below code.
Hare we are create a card view for shiwing date GridView using Jetpack Compose.
package com.codeplayon.gridlayout.view
import android.content.Context
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.GridCells
import androidx.compose.foundation.lazy.LazyVerticalGrid
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Card
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavController
import com.google.gson.Gson
import com.google.gson.reflect.TypeToken
import com.codeplayon.gridlayout.model.FruitsData
import com.codeplayon.gridlayout.ui.theme.Purple500
import com.codeplayon.gridlayout.R
@ExperimentalFoundationApi
@Composable
fun FruitGrid(navController : NavController){
val context = LocalContext.current
val dataFileString = getJsonDataFromAsset(context,"FruitsList.json")
val gson = Gson()
val gridSampleType = object :TypeToken<List<FruitsData>>(){}.type
val fruitData : List<FruitsData> = gson.fromJson(dataFileString,gridSampleType)
Column(modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Column(modifier = Modifier
.fillMaxWidth()
.height(50.dp)
.background(color = Purple500)
.padding(6.dp),
horizontalAlignment = Alignment.Start,
verticalArrangement = Arrangement.Center
) {
Text(
text ="Fruits Calories and Sugar",
color = Color.White,
fontSize = 20.sp,
fontWeight = FontWeight.Bold
)
}
LazyVerticalGrid(
cells = GridCells.Fixed(3),
modifier = Modifier.padding(10.dp)
){
items(fruitData){data->
FruitDataGridItem(data,navController)
}
}
}
}
@Composable
fun FruitDataGridItem(data:FruitsData,navController :NavController){
Card(modifier = Modifier
.clickable {
val itemVal = Gson().toJson(data)
navController.navigate("grid_detail/$itemVal")
}
.padding(10.dp)
.fillMaxSize(),
elevation = 5.dp,
shape = RoundedCornerShape(5.dp)
) {
Column(modifier = Modifier) {
Image(painter = painterResource(
id = when(data.id){
1L-> R.drawable.apple_min
2L -> R.drawable.banana_min
3L -> R.drawable.orange_min
4L -> R.drawable.grapes_min
5L -> R.drawable.pomegranate_min
6L -> R.drawable.kiwifruit_min
7L -> R.drawable.papaya_min
8L -> R.drawable.pineapple_min
9L -> R.drawable.avocado_min
10L -> R.drawable.peach_min
11L-> R.drawable.apple_min
12L -> R.drawable.banana_min
13L -> R.drawable.orange_min
14L -> R.drawable.grapes_min
15L -> R.drawable.pomegranate_min
16L -> R.drawable.kiwifruit_min
17L -> R.drawable.papaya_min
18L -> R.drawable.pineapple_min
19L -> R.drawable.avocado_min
else -> R.drawable.apple_min
}
),
contentDescription = "Grid Image",
modifier = Modifier
.fillMaxSize()
.align(Alignment.CenterHorizontally)
.clip(RoundedCornerShape(5.dp)),
alignment = Alignment.Center
)
Spacer(modifier = Modifier.padding(3.dp))
Text(
text = data.name,
modifier = Modifier
.align(Alignment.CenterHorizontally),
fontSize = 15.sp,
fontWeight = FontWeight.Bold,
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
Spacer(modifier = Modifier.padding(1.dp))
Text(
text = data.desc,
modifier = Modifier
.padding(7.dp,0.dp,0.dp,20.dp)
,
fontSize = 13.sp,
fontWeight = FontWeight.Normal,
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
}
}
}
fun getJsonDataFromAsset(context: Context, data: String):String {
return context.assets.open(data).bufferedReader().use { it.readText() }
}
Step 7: Working using MainActivity.kt file MainActivity.kt File
Visit go to the MainActivity.ktfile and refer to the following code. The code below is for MainActivity.kt file. Comments are included within the code to explain the code more in depth. GridView using Jetpack Compose.
package com.codeplayon.gridlayout
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import androidx.navigation.NavType
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.navArgument
import androidx.navigation.compose.rememberNavController
import com.google.gson.Gson
import com.codeplayon.gridlayout.model.FruitsData
import com.codeplayon.gridlayout.ui.theme.GridLayoutExampleTheme
import com.codeplayon.gridlayout.view.FruitGrid
import com.codeplayon.gridlayout.view.FruitsDataDetails
class MainActivity : ComponentActivity() {
@ExperimentalFoundationApi
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
GridLayoutExampleTheme {
// A surface container using the 'background' color from the theme
Surface(color = MaterialTheme.colors.background) {
/** ok now call fun NavigatePage*/
NavigatePage()
}
}
}
}
}
@ExperimentalFoundationApi
@Composable
fun NavigatePage(){
val navHostController = rememberNavController()
NavHost(
navController = navHostController,
startDestination = "fruits_data"
){
composable("fruits_data"){
FruitGrid(navController = navHostController)
}
composable("grid_detail/{item}",
arguments = listOf(
navArgument("item"){
type = NavType.StringType
}
)
){navBackStackEntry ->
navBackStackEntry?.arguments?.getString("item")?.let { json->
val item = Gson().fromJson(json,FruitsData::class.java)
FruitsDataDetails(data = item)
}
}
}
}
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
GridLayoutExampleTheme {
Greeting("Android")
}
}
Run your program to check the output of it.
Read More Tutorial
