title: Image picker from gallery for Jetpack compose - Android/Kotlin
body: <p>I want to implement an image picker using Jetpack compose I was searching for solutions and I found some tutorials like this one <a href="https://ngengesenior.medium.com/pick-image-from-gallery-in-jetpack-compose-5fa0d0a8ddaf" rel="nofollow noreferrer">https://ngengesenior.medium.com/pick-image-from-gallery-in-jetpack-compose-5fa0d0a8ddaf</a> I used the code they explained and it worked fine but I have a problem!</p>
  <p>My app includes one activity &quot;MainActivity&quot; which start rendering compose components, one of my screens is a form with a field to select image, and other fields, when I used the code below it opens the gallery and I select an image and when clicking OK, it goes to the MainActivity, but I need instead to stay in the same screen of the form so user could continue completing the form, I will list the code and I hope someone could help me with this</p>
  <pre><code>val launcher = rememberLauncherForActivityResult(contract =
      ActivityResultContracts.GetContent()) { uri: Uri? -&gt;
          imageUri = uri
      }
      Column() {
          Button(onClick = {
              launcher.launch(&quot;image/*&quot;)
          }) {
              Text(text = &quot;Pick image&quot;)
          }
  
          Spacer(modifier = Modifier.height(12.dp))
  
          imageUri?.let {
              if (Build.VERSION.SDK_INT &lt; 28) {
                  bitmap.value = MediaStore.Images
                      .Media.getBitmap(context.contentResolver,it)
  
              } else {
                  val source = ImageDecoder
                      .createSource(context.contentResolver,it)
                  bitmap.value = ImageDecoder.decodeBitmap(source)
              }
  
              bitmap.value?.let {  btm -&gt;
                  Image(bitmap = btm.asImageBitmap(),
                      contentDescription =null,
                      modifier = Modifier.size(400.dp))
              }
          }
  
      }
  </code></pre>
  <ul>
  <li>my MainAcrivity, I have a lot of nested screens but let's say that I have a button on main screen that go to form screen like below</li>
  </ul>
  <pre><code>class MainActivity : ComponentActivity() {
  
      override fun onCreate(savedInstanceState: Bundle?) {
          super.onCreate(savedInstanceState)
  
          setContent {
              Button(
                  onClick = {
                      navController.navigate(AppScreens.FormScreen.route)
                  },
                  ) {
                  Text(text = &quot;Go to form screen&quot; )
              }
          }
      }
  }
  </code></pre>
  <ul>
  <li>and here is my form screen include many fields, like text, number, date and image fields</li>
  </ul>
  <pre><code>@Composable
  fun FormScreen() {
      var imageUri by remember { mutableStateOf&lt;Uri?&gt;(null) }
      val context = LocalContext.current
      var bitmap by remember { mutableStateOf&lt;Bitmap?&gt;(null) }
  
      val launcher = rememberLauncherForActivityResult(contract =
      ActivityResultContracts.GetContent()) { uri: Uri? -&gt;
          imageUri = uri
      }
  
      Column {
          // some text field in the form
          // another number field in the form
          // select image filed in the form
          CustomInputFieldContainer(
              label = &quot;select image&quot;
          ) {
              Box(contentAlignment = Alignment.Center, modifier = Modifier.fillMaxSize()) {
                  Column(horizontalAlignment = Alignment.CenterHorizontally) {
  
                      imageUri?.let {
                          if (Build.VERSION.SDK_INT &lt; 28) {
                              bitmap = MediaStore.Images
                                  .Media.getBitmap(context.contentResolver,it)
  
                          } else {
                              val source = ImageDecoder
                                  .createSource(context.contentResolver,it)
                              bitmap = ImageDecoder.decodeBitmap(source)
                          }
  
                          bitmap.let {  btm -&gt;
                              Image(bitmap = btm.asImageBitmap(),
                                  contentDescription =null,
                                  modifier = Modifier.size(400.dp))
                          }
  
                      }
  
                      Button(
                          onClick = { launcher.launch(&quot;image/*&quot;) },
                          contentPadding = PaddingValues(),
                          modifier = Modifier.background(Color.Yellow)
                      ) {
                          Row(
                              modifier = Modifier
                                  .fillMaxWidth()
                                  .wrapContentSize(Alignment.BottomCenter)
                                  .padding(vertical = 10.dp),
                              verticalAlignment = Alignment.CenterVertically
                          ) {
                              Icon(imageVector = Icons.Filled.AddAPhoto, contentDescription = null)
                              Spacer(modifier = Modifier.width(8.dp))
                              Text(text = &quot;Add Photo&quot;)
                          }
                      }
                  }
              }
          }
      }
  
  
  }
  </code></pre>
  <p>now I want to select an image from the gallery when clicking on select image button and back to my form to complete the rest of the fields, when I tried the above code I could select an image but it goes to the main activity which makes me lost the data</p>
  <p>any help for solving this problem?</p>