Loading images from gallery into ImageButton(view)

Question

im looking to have two buttons on the same layout, you click the first button, chose an image and that button changes to that image chosen. You click the second button and that image chosen will replace the button. Easiest to use an imageButton instead of ImageView. I would like the code if possible, thank you.

(Still dont understand? The end should be 2 images next to each other chosen by the user.)

MainActivity:

package com.example.triptych;

import android.app.Activity;
import android.content.Intent;
import android.database.Cursor;
import android.graphics.BitmapFactory;
import android.net.Uri;
import android.os.Bundle;
import android.provider.MediaStore;
import android.view.View;
import android.widget.ImageButton;
import android.widget.Toast;

public class MainActivity extends Activity {
    private static int RESULT_LOAD_IMG = 1;
    String imgDecodableString;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void loadImagefromGallery(View view) {
        // Create intent to Open Image applications like Gallery, Google Photos
        Intent galleryIntent = new Intent(Intent.ACTION_PICK,
                android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
        // Start the Intent
        startActivityForResult(galleryIntent, RESULT_LOAD_IMG);
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        try {
            // When an Image is picked
            if (requestCode == RESULT_LOAD_IMG && resultCode == RESULT_OK
                    && null != data) {
                // Get the Image from data

                Uri selectedImage = data.getData();
                String[] filePathColumn = { MediaStore.Images.Media.DATA };

                // Get the cursor
                Cursor cursor = getContentResolver().query(selectedImage,
                        filePathColumn, null, null, null);
                // Move to first row
                cursor.moveToFirst();

                int columnIndex = cursor.getColumnIndex(filePathColumn[0]);
                imgDecodableString = cursor.getString(columnIndex);
                cursor.close();
                ImageButton imageButton = (ImageButton) findViewById(R.id.buttonLoadPicture);
                // Set the Image in ImageView after decoding the String
                imageButton.setImageBitmap(BitmapFactory
                        .decodeFile(imgDecodableString));

            } else {
                Toast.makeText(this, "You haven't picked Image",
                        Toast.LENGTH_LONG).show();
            }
        } catch (Exception e) {
            Toast.makeText(this, "Something went wrong", Toast.LENGTH_LONG)
                    .show();
        }

    }

}

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <ImageButton
        android:id="@+id/buttonLoadPicture"
        android:layout_width="160dp"
        android:layout_height="300dp"
        android:layout_marginLeft="10dp"
        android:layout_weight="0.51"
        android:contentDescription="TODO"
        android:onClick="loadImagefromGallery"
        android:src="@drawable/ic_launcher"
        android:text="@string/load_picture" />

    <ImageButton
        android:id="@+id/button2"
        android:layout_width="160dp"
        android:layout_height="300dp"
        android:layout_marginLeft="180dp"
        android:layout_weight="0.51"
        android:contentDescription="TODO"
        android:onClick="loadImagefromGallery"
        android:src="@drawable/ic_launcher"
        android:text="@string/load_picture" />

</RelativeLayout>

Another question, do I create another activity for the second button and paste the same code or do I do it on the same activity?

Answer 1

getContentResolver().query should not be called from UI thread

Answer 2

You can try something like this:

In your MainActivity class you need to create 2 different methods to handle gallery pick images , and call it in on click of two different image buttons, see below code: your MainActivity.java will look like this:

public class MainActivity extends ActionBarActivity {
    private static int RESULT_LOAD_IMG = 1, RESULT_LOAD_IMG_TWO = 2;
    String imgDecodableString, imgDecodableStringTwo;
    ImageButton btn_load, btn_loadTwo;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        btn_load = (ImageButton) findViewById(R.id.buttonLoadPicture);
        btn_loadTwo = (ImageButton) findViewById(R.id.buttonLoad);
        btn_loadTwo.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                loadImagefromGalleryTwo(btn_loadTwo);
            }
        });
        btn_load.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                loadImagefromGallery(btn_load);
            }
        });
    }

    public void loadImagefromGallery(View view) {
        Intent galleryIntent = new Intent(Intent.ACTION_PICK,
                android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
        startActivityForResult(galleryIntent, RESULT_LOAD_IMG);
    }

    public void loadImagefromGalleryTwo(View view) {
        Intent galleryIntent = new Intent(Intent.ACTION_PICK,
                android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
        startActivityForResult(galleryIntent, RESULT_LOAD_IMG_TWO);
    }

    @SuppressLint("NewApi")
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        try {
            if (requestCode == RESULT_LOAD_IMG && resultCode == RESULT_OK && null != data) {

                Uri selectedImage = data.getData();
                String[] filePathColumn = { MediaStore.Images.Media.DATA };

                Cursor cursor = getContentResolver().query(selectedImage, filePathColumn, null, null, null);
                cursor.moveToFirst();

                int columnIndex = cursor.getColumnIndex(filePathColumn[0]);
                imgDecodableString = cursor.getString(columnIndex);
                cursor.close();

                Drawable d = new BitmapDrawable(getResources(), BitmapFactory.decodeFile(imgDecodableString));
                btn_load.setBackground(d);

            } else if (requestCode == RESULT_LOAD_IMG_TWO && resultCode == RESULT_OK && null != data) {
                Uri selectedImage = data.getData();
                String[] filePathColumn = { MediaStore.Images.Media.DATA };

                Cursor cursor = getContentResolver().query(selectedImage, filePathColumn, null, null, null);
                cursor.moveToFirst();

                int columnIndex = cursor.getColumnIndex(filePathColumn[0]);
                imgDecodableStringTwo = cursor.getString(columnIndex);
                cursor.close();

                Drawable d = new BitmapDrawable(getResources(), BitmapFactory.decodeFile(imgDecodableStringTwo));
                btn_loadTwo.setBackground(d);
            }
        } catch (Exception e) {
            Toast.makeText(this, "Something went wrong", Toast.LENGTH_LONG).show();
        }

    }
}

Output:

Hope it helps!

Answer 3

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
  <ImageButton
    android:id="@+id/buttonLoadPicture"
    android:layout_width="160dp"
    android:layout_height="300dp"
    android:layout_marginLeft="10dp"
    android:layout_weight="0.51"
    android:contentDescription="TODO"
    android:onClick="loadImagefromGallery"
    android:src="@drawable/ic_launcher"
    android:text="@string/load_picture" />

<ImageButton
    android:id="@+id/button2"
    android:layout_width="160dp"
    android:layout_height="300dp"
    android:layout_marginLeft="180dp"
    android:layout_weight="0.51"
    android:contentDescription="TODO"
    android:onClick="loadImagefromGallery"
    android:src="@drawable/ic_launcher"
    android:text="@string/load_picture" />