Home > Software design >  Image does not fit in ImageButton - Kotlin Android Studio
Image does not fit in ImageButton - Kotlin Android Studio

Time:03-03

Using Kotlin in Android Studio, I created a form where a user can attach an image by taking a photo using the camera. Once the user clicks the ImageButton, the camera will be launched and the user can take a photo. The captured photo should be then set in the ImageButton. This works, HOWEVER, the image is too large and does not fit nicely in the ImageButton. Rather, it expands the ImageButton.

Here are the screenshots of before and after:
Before
After - As seen in the screenshot, the image does not fit nicely to the ImageButton that is originally square-ish.

I added android:scaleType="fitXY" which worked for most people while doing my research on the net, but to no avail. I have tried android:scaleType="fitCenter" too but it did not work.

XML code:

<ImageButton
        android:id="@ id/imageButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@ id/submitButton"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toEndOf="@ id/textView"
        app:layout_constraintTop_toBottomOf="@ id/textView2"
        android:scaleType="fitXY"
        app:srcCompat="@mipmap/ic_camera_capture" />

.kt code

class FormActivity : AppCompatActivity() {

    lateinit var currentPhotoPath: String
    val REQUEST_IMAGE_CAPTURE = 1
    var selectedPhotoUri : Uri? = null

    companion object {
        const val REQUEST_FROM_CAMERA = 1001
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_formactivity)

        ...

        val imageButton = findViewById<ImageButton>(R.id.imageButton)

        // to launch the camera
        imageButton.setOnClickListener {
            takePictureUsingCamera()
        }
    }

    private fun takePictureUsingCamera(){
        ImagePicker.with(this).cameraOnly()
            .crop()
            .start(REQUEST_FROM_CAMERA)
    }

    // to access the image captured
    override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        super.onActivityResult(requestCode, resultCode, data)
        if (resultCode == RESULT_OK) {
            when (requestCode){
                REQUEST_FROM_CAMERA -> {
                    selectedPhotoUri = data!!.data
                    val bitmap = MediaStore.Images.Media.getBitmap(contentResolver, selectedPhotoUri)
                    val bitmapDrawable = BitmapDrawable(bitmap)

                    val imageButton = findViewById<ImageButton>(R.id.imageButton)
                    // add the image to the image button
                    imageButton.setImageDrawable(bitmapDrawable)
                }
            }

        }
    }
}

CodePudding user response:

The code: android:layout_height="wrap_content" allows button to expand to the size of image.

There are two solutions,

  1. Use small sized image
  2. Add limit to height instead of "wrap_content" attribute.
  • Related