How to show an image in Surface in Jetpack Compose?

Question

Do anyone have a solution for showing an xml shape as a background by using the Jetpack Compose widget Surface?

Do I need to use DrawImage, or is there a simpler approach?

In the example below I want to exchange the Color.Blue with a xml file called side_nav_bar.xml which is actually a gradient created with <shape> </shape>

@Composable
private fun AppDrawer(
    currentScreen: Screen,
    closeDrawer: () -> Unit
)
{
val topImage = +imageResource(R.mipmap.empty_1024)


Column(
    crossAxisSize = LayoutSize.Expand,
    mainAxisSize = LayoutSize.Expand
) {

    Surface(color = Color.Blue)
    {
        Column(
            mainAxisSize = LayoutSize.Expand,
            crossAxisSize = LayoutSize.Expand)
        {
            Padding(8.dp) {
                Container(expanded = true, height = 100.dp, width = 100.dp){
                    Clip(shape = RoundedCornerShape(4.dp)) {
                        DrawImage(image = topImage)
                    }
                }
            }

            Padding(8.dp){
                Text(text = "Fuel Empty")
            }

            Padding(8.dp){
                Text(text = "https://www.fuelpump.no")
            }


        }

    }

    Divider()

    DrawerButton(
        icon = R.drawable.ic_baseline_store_24,
        label = "Stations",
        isSelected = currentScreen == Screen.Stations
    ){
        navigateTo(Screen.Stations)
        closeDrawer()
    }

    DrawerButton(
        icon = R.drawable.ic_baseline_map_24,
        label = "Overview",
        isSelected = currentScreen == Screen.Overview
    ){
        navigateTo(Screen.Overview)
        closeDrawer()
    }

    DrawerButton(
        icon = R.drawable.ic_baseline_format_list_numbered_24,
        label = "Statistics",
        isSelected = currentScreen == Screen.Statistics
    ){
        navigateTo(Screen.Statistics)
        closeDrawer()
    }

    Divider()

    DrawerButton(
        icon = R.drawable.ic_baseline_settings_applications_24,
        label = "Settings",
        isSelected = currentScreen == Screen.Settings
    ){
        closeDrawer()
    }

    DrawerButton(
        icon = R.drawable.ic_baseline_build_24,
        label = "Tools",
        isSelected = currentScreen == Screen.Tools
    ){
        closeDrawer()
    }

    DrawerButton(
        icon = R.drawable.ic_baseline_help_24,
        label = "Help",
        isSelected = currentScreen == Screen.Help
    ){
        closeDrawer()
    }



}
}

xml I want to use as background:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
<gradient
        android:angle="135"
        android:centerColor="@color/colorPrimaryDark"
        android:endColor="@color/ic_black_background"
        android:startColor="@color/colorPrimary"
        android:type="linear"/>
</shape>

RG

Answer 1

try this function. I fixed my problem.

inline fun Image(
  asset:        VectorAsset,
  modifier:     Modifier     = Modifier,
  alignment:    Alignment    = Alignment.Center,
  contentScale: ContentScale = ContentScale.Inside,
  alpha:        Float        = DefaultAlpha,
  colorFilter:  ColorFilter? = null
)