title: How to show an image in Surface in Jetpack Compose?
body: <p>Do anyone have a solution for showing an xml shape as a background by using the Jetpack Compose widget Surface ?</p>
  
  <p>Do I need to use DrawImage, or is there a simpler approach ?</p>
  
  <p>In the example below I want to exchange the <code>Color.Blue</code> with a xml file called <code>side_nav_bar.xml</code> which is actually a gradient created with <code>&lt;shape&gt; &lt;/shape&gt;</code></p>
  
  <pre><code>@Composable
  private fun AppDrawer(
      currentScreen: Screen,
      closeDrawer: () -&gt; 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()
      }
  
  
  
  }
  }
  </code></pre>
  
  <p>xml I want to use as background:</p>
  
  <pre><code>&lt;shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="rectangle"&gt;
  &lt;gradient
          android:angle="135"
          android:centerColor="@color/colorPrimaryDark"
          android:endColor="@color/ic_black_background"
          android:startColor="@color/colorPrimary"
          android:type="linear"/&gt;
  &lt;/shape&gt;
  </code></pre>
  
  <p>RG</p>