how to add Images next to each other in android

Question

HI guys I have a question about adding images to my layout. Right now i have download four pictures, but all my images are stacked on top of each other, I want to able to make them sitting next to each other, like 2 pictures on top and 2 on the bottom, what is the best approaches to this? right now i am using relative layout and I use AsyncTask to handle the images.

my code:

public class MainActivity extends Activity {

//String[] imgUrls = {getString(R.string.uncc_main_thumb),getString(R.string.football_main_thumb,getString(R.string.ifest_main_thumb),getString(R.string.commencement_main_thumb))};
String[] imgUrls={"http://farm5.staticflickr.com/4113/4843614620_c541de5a5c_m.jpg",
                  "http://farm8.staticflickr.com/7265/8151547298_85e60e7368_m.jpg",
                  "http://farm9.staticflickr.com/8054/8414075899_e87a74407b_m.jpg",
                  "http://farm9.staticflickr.com/8210/8277674769_7d1245dbf1_m.jpg"};
RelativeLayout root;
ProgressDialog progressDialog;

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

    root = (RelativeLayout) findViewById(R.id.RelativeLayout1);

    for (String imgUrl : imgUrls) {
        new DownLoadImages().execute(imgUrl);
    }
}

private class DownLoadImages extends
AsyncTask<String, Void, Bitmap> {
    @Override
        protected Bitmap doInBackground(String... params) {
        String imgUrl = params[0];
        Bitmap image = null;
        try {
            URL url = new URL(imgUrl);
            image = BitmapFactory.decodeStream(url.openStream());
            } catch (MalformedURLException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
            } catch (IOException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        return image;
}

       @Override
        protected void onPreExecute() {
            super.onPreExecute();
            // show the loading message while downloading the image
            progressDialog = ProgressDialog.show(MainActivity.this,null, "loading...");
        }

       @Override
       protected void onPostExecute(Bitmap result) {
           if (result == null) {
               result = ((BitmapDrawable) getResources().getDrawable(
                       R.drawable.not_found)).getBitmap();
            }

           ImageView imageViewToBeAdded = new ImageView(getBaseContext());
           imageViewToBeAdded.setLayoutParams(new LayoutParams(
                   LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
           imageViewToBeAdded.setPadding(5, 5, 5, 5);
           imageViewToBeAdded.setImageBitmap(result);
           root.addView(imageViewToBeAdded);
}
}

}

Have you read about Linear and RelativeLayout on android site? — dragi, Mar 25 '14 at 13:16
I think Nicko's solution works great for my project since I only need to show 4 pictures on the screen, thanks for the suggestions tho, i will def. take a look into view Page and gridview for future use. — Samson, May 05 '14 at 13:37
Use GridView and set its column to 2.. then only two image shows in a row. — Zar E Ahmer, Jun 03 '14 at 11:16

score 1 · Answer 1 · answered Mar 25 '14 at 13:16

1

The easiest way is to use a TableLayout with 2 rows.

answered Mar 25 '14 at 13:16

Gabriel Negut

13,860
4
38
45

score 1 · Accepted Answer · answered Mar 25 '14 at 13:35

You can do this in several different ways, for example if you need only those four pictures to be in your screen you can use layout_weight property for your view. For example

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="#aaaaaa"
              android:gravity="center_vertical"
              android:orientation="vertical">
    <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="horizontal"
            >
        <ImageView
                android:layout_weight="1"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"

                android:src="@drawable/top_blue"/>
        <ImageView
                android:layout_weight="1"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"

                android:src="@drawable/top_blue"/>
    </LinearLayout>
    <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_weight="1"
            >
        <ImageView
                android:layout_weight="1"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"

                android:src="@drawable/top_blue"/>
        <ImageView
                android:layout_weight="1"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"

                android:src="@drawable/top_blue"/>
    </LinearLayout>


</LinearLayout>

And that would look like this:

Hope this helps :)

score 0 · Answer 3 · answered Mar 25 '14 at 13:18

0

View Pager View pager

or Grid View With Gallery

answered Mar 25 '14 at 13:18

Engr Waseem Arain

1,163
1
17
36

how to add Images next to each other in android

3 Answers3