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

Question

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

Answer 1

As I am understanding from your question that you want to place your ConstraintCompose as a header to your list (that scrolls as you scroll the list)

there's a very easy way to do it, add ConstraintCompose() as an item inside your LazyColumn

@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))){

            // Your Constraint Compose here
            item {
                ConstraintCompose()
            }

            items(participantList) { participant ->
                run {
                    participantCard(
                        participantList.indexOf(participant) ,
                        userName = participant.participantName,
                        participantImage = participant.participantDrawable
                    )
                }
            }
        }
    }

}

If you want to make the header sticky you can add it inside a Column, like below

Column() {
     ConstraintCompose()
     participantList()
}