I created a TabLayout on one screen in Jetpack compose and created two pages.I created a TabLayout on one screen in Jetpack compose and created two pages, but there is a problem: even if the content on one screen fits perfectly on the screen, the other tab does not fit exactly on the screen and there are gaps, it seems like it is taking the size of the screen that takes up the largest space as a reference. . I tried to adjust it using padding, modifier etc. but I couldn't. Can you help me with this? here are my codes
IngredientDetailscreen
@OptIn(ExperimentalMaterialApi::class, ExperimentalPagerApi::class)
@Composable
fun IngredientDetailScreen(
navHostController: NavHostController,
nutritionDetail: NutritionItem?,
state: IngredientDetailScreenState,
onChangePortion: (String) -> Unit,
onChangePortionName: (String) -> Unit,
editList: (NutritionItem?, ArrayList<NutritionItem>) -> Unit,
favouriteItem: (ContentDetailFavouriteRequestModel) -> Unit
) {
val onlyNumericPattern = remember { Regex("^\\d+\$") }
var shouldShowPicker by remember { mutableStateOf(false) }
val coroutineScope = rememberCoroutineScope()
val modalBottomSheetState =
rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden)
val list = listOf(
"BESİN DEĞERLERİ",
"TARİFİ"
)
LaunchedEffect(
key1 = Unit,
block = {
})
ModalBottomSheetLayout(
sheetContent = {
ListSheet(
nutritionValueListSize = state.foodRecipe?.ingredients?.size,
ingredientList = state.foodRecipe?.ingredients?.map { it.toUiModel() }
)
},
sheetState = modalBottomSheetState,
sheetShape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp),
) {
Scaffold(topBar = {
TopBar(
onBackClick = { navHostController.popBackStack() },
saveFavourite = { isClickFvrt ->
},
screenDescription = "Girişi Düzenle"
)
}) { padding ->
Column(
modifier = Modifier
.fillMaxSize()
.padding(padding)
.verticalScroll(rememberScrollState())
) {
AddIngredientItem(
startPadding = 15.dp,
endPadding = 15.dp,
imgSize = 75.dp,
nameFontSize = 17.sp,
nameMaxLines = 2,
nameFontWeight = FontWeight.Bold,
image = nutritionDetail?.ntrImg ?: "",
ntrName = nutritionDetail?.ntrName ?: "",
kcal = nutritionDetail?.ntrKcal,
unit = nutritionDetail?.ntrUnit ?: "",
onClick = {}
)
if (state.response?.foodRecipe != null && state.response.foodRecipe.isNotEmpty()) {
Column {
TabLayout(
state = state,
tabList = list,
pagerCount = 2,
nutritionDetail = nutritionDetail,
navHostController = navHostController,
shouldShowPicker = {
coroutineScope.launch {
modalBottomSheetState.animateTo(
ModalBottomSheetValue.Expanded
)
}
}
)
}
} else {
Spacer(modifier = Modifier.padding(bottom = 15.dp))
NutritionValueContent(
hasPayment = state.response?.hasPayment,
kcal = nutritionDetail?.ntrKcal,
mainNutritionValues = state.mainNutritionValues,
nutritionValueList = state.nutritionValues ?: arrayListOf(),
onClickImg = {
navHostController.navigate(RegisterScreen.SignUpPaymentScreen.route)
},
name = state.response?.nutritionalValues?.find { it.seqId == 1 }?.name ?: ""
)
}
if (shouldShowPicker)
ListItemPickerComponent(
onConfirmClick = { portionName, index ->
shouldShowPicker = false
onChangePortionName(portionName)
},
onCancelClick = {
shouldShowPicker = false
},
valueList = state.nutritionValuesNames,
value = state.nutritionValuesNames.first(),
)
BaseBottomSheet(content = {
SheetContent(
saveRecipe = {
val ntrItem = NutritionItem(
ntrId = nutritionDetail?.ntrId,
ntrImg = nutritionDetail?.ntrImg,
ntrName = nutritionDetail?.ntrName,
ntrUnit = nutritionDetail?.ntrUnit,
ntrKcal = nutritionDetail?.ntrKcal,
ntrUnitId = nutritionDetail?.ntrUnitId,
value = state.portion
)
//editList(ntrItem,state.selectedNtrList)
navHostController.previousBackStackEntry?.savedStateHandle?.apply {
set(ADD_INGREDIENT, ntrItem)
}
navHostController.popBackStack()
},
choosePortion = {
shouldShowPicker = !shouldShowPicker
},
onChangeText = { portion ->
if (portion.isEmpty() || portion.matches(onlyNumericPattern))
onChangePortion(portion)
},
keyboardType = KeyboardType.Number,
_portionName = state.portionName ?: "",
_portion = state.portion ?: ""
)
})
}
}
}
}
TabLayout
@ExperimentalPagerApi
@Composable
fun TabLayout(
state: IngredientDetailScreenState,
tabList: List<String>,
pagerCount: Int,
nutritionDetail: NutritionItem?,
navHostController: NavHostController,
shouldShowPicker: (Boolean) -> Unit
) {
val pagerState = rememberPagerState(pageCount = pagerCount)
Tabs(pagerState = pagerState, tabList)
TabsContent(
pagerState = pagerState,
state = state,
nutritionDetail = nutritionDetail,
navHostController = navHostController,
shouldShowPicker = shouldShowPicker
)
}
TabsContent
@ExperimentalPagerApi
@Composable
fun TabsContent(
pagerState: PagerState,
state: IngredientDetailScreenState,
nutritionDetail: NutritionItem?,
navHostController: NavHostController,
shouldShowPicker: (Boolean) -> Unit
) {
HorizontalPager(state = pagerState) { page ->
when (page) {
0 -> {
Column {
NutritionValueContent(
hasPayment = state.response?.hasPayment,
kcal = nutritionDetail?.ntrKcal,
mainNutritionValues = state.mainNutritionValues,
nutritionValueList = state.nutritionValues ?: arrayListOf(),
onClickImg = {
navHostController.navigate(RegisterScreen.SignUpPaymentScreen.route)
},
name = state.response?.nutritionalValues?.find { it.seqId == 1 }?.name
?: "",
)
}
}
1 -> {
var isClickList by remember { mutableStateOf(false) }
Column() {
Spacer(modifier = Modifier.padding(bottom = 15.dp))
FoodPreparation(
cookingTime = state.foodRecipe?.foodCookingtime,
cookingTimeImg = R.drawable.ic_cooking,
peopleCount = state.foodRecipe?.peopleCount,
peopleCountImg = R.drawable.ic_fork_and_spoon,
preparationTime = state.foodRecipe?.foodPreparetime,
preparationTimeImg = R.drawable.ic_preparation
)
Spacer(modifier = Modifier.padding(bottom = 15.dp))
Divider(modifier = Modifier.padding(start = 15.dp, end = 15.dp))
Spacer(modifier = Modifier.padding(bottom = 15.dp))
IngredientHeader(
title = "Malzemeler (${state.foodRecipe?.ingredients?.size ?: ""})",
detailTxt = "Liste",
onClickDetailTxt = {
isClickList = !isClickList
shouldShowPicker(isClickList)
}
)
Row(
modifier = Modifier
.horizontalScroll(rememberScrollState())
.padding(15.dp)
) {
state.foodRecipe?.ingredients?.forEachIndexed { index, item ->
val layoutPadding =
if (index == state.foodRecipe.ingredients.size - 1) 0.dp else 10.dp
HealthItem(
layoutPadding = layoutPadding,
width = 105.dp,
imageSize = 103.dp,
itemId = item.unitId,
articleTypeId = item.nutritionId,
itemName = item.nutritionName ?: "",
image = item.image ?: "",
detailText = item.unitName,
detailTextColor = MaterialTheme.colors.grayColor,
additionalImg = painterResource(id = R.drawable.ic_home_content_recipe),
content = {},
onClick = { itemId, articleTypeId, itemName, image ->
},
)
}
}
Text(
modifier = Modifier.padding(start = 15.dp, end = 15.dp),
text = "Tarifi",
style = MaterialTheme.typography.h3
)
RecipeContent(
state.foodRecipe?.content
)
}
}
}
}
}
this is fit screen
screenshots:
this is not fit screen as you can see the spaces
Why do gaps occur like this? I want it to start from the top but I couldn't, I don't think it's related to modifier or anything else but I'm not sure.