Android compose need to place a constraintlayout on top of the UI

I am taking my first steps at jetpack Compose and currently i am developing a recyclerview-like list by using Card (and other compoenent layouts). For my application i have an xml include layout which is of type Constriantlayout and i need this one to be at the top of the UI.

Here is my code currently:

package com.example.cvdriskestimator.Fragments


class leaderBoardActivity : ComponentActivity() {

    private var participantNames = ArrayList<String>()
    private var participantAvatars = ArrayList<Drawable>()



    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            Scaffold() {
                ConstraintCompose()
                participantList()
            }

        }


    }

    @Composable
    fun ConstraintCompose() {

        ConstraintLayout(modifier = Modifier
            .fillMaxHeight()
            .fillMaxWidth()) {
            val (medAppLayoutRefId) = createRefs()
            Box(modifier = Modifier.constrainAs(medAppLayoutRefId)
            {
                top.linkTo(parent.top, 0.dp)
            })
            {
                AndroidView(

                    { context: Context ->
                        val view = LayoutInflater.from(context)
                            .inflate(R.layout.cvd_title_form, null, false)
                        // do whatever you want...
                        view // return the view
                    }
                )
            }

        }
    }


    @Preview
    @Composable
    fun participantList()
    {
        Row(modifier = Modifier
            .clip(RoundedCornerShape(10.dp))
            .background(MaterialTheme.colors.surface))
        {
            val scrollState = rememberLazyListState()
            LazyColumn(state = scrollState, modifier = Modifier.border( 5.dp, Color.DarkGray , shape = RoundedCornerShape(60.dp))){
                items(participantList)
                {
                        participant ->
                    run {
                        participantCard(
                            participantList.indexOf(participant) ,
                            userName = participant.participantName,
                            participantImage = participant.participantDrawable
                        )
                    }
                }
            }
        }

    }

    @Composable
    fun participantCard(
        userID : Int ,
        userName : String , participantImage : Int)
    {
        Card(elevation = 5.dp ,
            modifier = Modifier
                .fillMaxWidth()
                .wrapContentHeight()
                .padding(5.dp)
        )
        {
            Row(modifier = Modifier
                .padding(5.dp)
                .fillMaxWidth()
                .wrapContentHeight() ,
                horizontalArrangement = Arrangement.Center ,
                verticalAlignment = Alignment.CenterVertically ,
                )
            {
                Text( color = Color.Black , fontSize = 20.sp , fontFamily = FontFamily.Default ,  textAlign = TextAlign.Center ,
                    text = userID.toString() + ". " + userName )

                Image(painterResource(id = participantImage),  contentDescription = "participant image" , modifier = Modifier
                    .size(20.dp, 20.dp)
                    .clip(
                        CircleShape
                    )   )
                
                Box(modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentHeight()
                    .padding(5.dp, 0.dp, 0.dp, 5.dp))
                {
                    Text(color = Color.Black, fontSize = 20.sp, modifier =
                    Modifier
                        .border(2.dp, Color.Gray)
                        .padding(10.dp) , text = "Score : " + setParticipantScore(userID ).toString())
                }
                Image(painterResource(id = R.drawable.ic_trophy) , contentDescription = "Participant Trophy"
                    , modifier = Modifier.size(20.dp , 20.dp))

            }
        }
    }
    
    private fun setParticipantScore(id : Int) : Int
    {
        return ((10000) - (id * 500))
    }

    val participantList = listOf<participant>(
        participant("Lampros " , R.drawable.avatar) ,
        participant("Chris" , R.drawable.avatar_b) ,
        participant("Dimitris" , R.drawable.beard) ,
        participant("Kostas" , R.drawable.boy) ,
        participant("Panagiotis" , R.drawable.gamer) ,
        participant("Nikoleta" , R.drawable.woman) ,
        participant("Dimitra" , R.drawable.womanb) ,
        participant("Kyriakos" , R.drawable.man_a) ,
        participant("Giannis" , R.drawable.man_b)
    )

    data class participant(
        var participantName : String ,
        var participantDrawable : Int
    )

}

As an output though i am getting only the card list, so i am guessing there is some problem with how i am defining the constraintlayout and using it programmatically? When i preview the function of ConstraintCompose seperately i can see the layout appearing in the UI Layout.

Any help is appreciated.

Lampros

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum