Android Linear Layout: Insert Up to 6 Images Easily

[whitehorsey]

I'm using linear layout to make two so that I can insert up to 6 images. For example, if I have one image it will fit in the center of that layout if I have two it will divide the space equally for the two images, etc.

So far I have this,

<LinearLayout
android:id="@+id/row1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/space"
androidrientation="vertical" >

<LinearLayout
android:id="@+id/row2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="17dp"
android:layout_marginLeft="60dp"
androidrientation="vertical" >
</LinearLayout>
</LinearLayout>

I used two vertical linear layouts to make the rows. How do I tell the images to fit the box if there's one, to split equally if there's two, etc.?

I'm placing the linear layout (rows) in the biggest box (first column second box).

 

[Psinter]

Since I'm late I'll just give you the answer.

This is better done with a ListView, but following the way you want to do it, I would just add weight to each image during run-time. All images are added programatically in a linear vertical layout so they will occupy space in a vertical manner. Since they are fixed we use 6 variables, but you can use a list or an array. Before I give you the code, here is a screenshot of the resulting code. If this is not what you want, then there is no need to read any further. Still, I think you can use it and customize it to your needs.

Inside the first column second box layout you will add:

    <LinearLayout
        android:id="@+id/ImagesLinearLayout"
        android:layout_width="fill_parent"
        android:layout_height="0dip"
        android:layout_weight="0.50"
        android:orientation="vertical" >

    </LinearLayout>

    <LinearLayout
        android:id="@+id/ControlsLinearLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <Button
            android:id="@+id/addImageButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            
            android:onClick="addNewImage"
            android:text="Add New Image" />

        <Button
            android:id="@+id/removeImageButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="removeOneImage"
            android:text="Remove 1 Image" />
    </LinearLayout>

Then, in your activity class corresponding to that layout you will declare the images and layouts as private variables:

        private ImageView image1;
	private ImageView image2;
	private ImageView image3;
	private ImageView image4;
	private ImageView image5;
	private ImageView image6;
	private LinearLayout imagesLinearLayout;
	private LinearLayout.LayoutParams layoutParameters;

In the onCreate() method you will initialize the imagesLinearLayout and layoutParameters as follows:

                //Initialize our box that will contain the images
		imagesLinearLayout = (LinearLayout) findViewById(R.id.ImagesLinearLayout);
		
		//Initialize the information that will divide our images equally 
		//in our linear layout (regardless of whether it is vertical or horizontal)
		layoutParameters = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT, (float) 1);

The addImage(View view) method for the onClick() event declared in the xml:

               if(image1 == null){
			//Initialize image 1
			image1 = new ImageView(this);
			
			//Set image 1 source
			image1.setImageResource(R.drawable.ic_launcher);
			
			//Adds image 1 to view with our layout parameters so the image
			//looks equally divided in space
			imagesLinearLayout.addView(image1, layoutParameters);
			
		}
		else if(image2 == null){
			image2 = new ImageView(this);
			image2.setImageResource(R.drawable.ic_launcher);
			imagesLinearLayout.addView(image2, layoutParameters);
		}
		else if(image3 == null){
			image3 = new ImageView(this);
			image3.setImageResource(R.drawable.ic_launcher);
			imagesLinearLayout.addView(image3, layoutParameters);
		}
		else if(image4 == null){
			image4 = new ImageView(this);
			image4.setImageResource(R.drawable.ic_launcher);
			imagesLinearLayout.addView(image4, layoutParameters);
		}
		else if(image5 == null){
			image5 = new ImageView(this);
			image5.setImageResource(R.drawable.ic_launcher);
			imagesLinearLayout.addView(image5, layoutParameters);
		}
		else if(image6 == null){
			image6 = new ImageView(this);
			image6.setImageResource(R.drawable.ic_launcher);
			imagesLinearLayout.addView(image6, layoutParameters);
		}
		else{
			//Add code specifying that no more images can be added
		}

The removeOneImage(View view) method for the onClick() event declared in the xml:

                boolean removeComplete = false;
		//Remove images starting from the last one added
		//until reaching the first;
		if(image6 != null && !removeComplete){
			imagesLinearLayout.removeView(image6);
			
			//Make image 6 null to prevent memory leaks
			//and to allow future use of this variable
			image6 = null;
			removeComplete = true;  //We are done.
		}
		
		if(image5 != null && !removeComplete){
			imagesLinearLayout.removeView(image5);
			image5 = null;
			removeComplete = true;
		}
		if(image4 != null && !removeComplete){
			imagesLinearLayout.removeView(image4);
			image4 = null;
			removeComplete = true;
		}
		if(image3 != null && !removeComplete){
			imagesLinearLayout.removeView(image3);
			image3 = null;
			removeComplete = true;
		}
		if(image2 != null && !removeComplete){
			imagesLinearLayout.removeView(image2);
			image2 = null;
			removeComplete = true;
		}
		if(image1 != null && !removeComplete){
			imagesLinearLayout.removeView(image1);
			image1 = null;
			removeComplete = true;
		}

Wrapping up everything together, the whole code assuming the layout is called activity_main.xml and the code of that layout is called MainActivity.java:

activity_main.xml

    <LinearLayout xmlns:android="[PLAIN]http://schemas.android.com/apk/res/android"[/PLAIN] 
    xmlns:tools="[PLAIN]http://schemas.android.com/tools"[/PLAIN] 
    android:id="@+id/MainLinearLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <LinearLayout
        android:id="@+id/ImagesLinearLayout"
        android:layout_width="fill_parent"
        android:layout_height="0dip"
        android:layout_weight="0.50"
        android:orientation="vertical" >

    </LinearLayout>

    <LinearLayout
        android:id="@+id/ControlsLinearLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <Button
            android:id="@+id/addImageButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            
            android:onClick="addNewImage"
            android:text="Add New Image" />

        <Button
            android:id="@+id/removeImageButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="removeOneImage"
            android:text="Remove 1 Image" />
    </LinearLayout>

</LinearLayout>

MainActivity.java:

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.widget.FrameLayout.LayoutParams;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class MainActivity extends Activity {

	private ImageView image1;
	private ImageView image2;
	private ImageView image3;
	private ImageView image4;
	private ImageView image5;
	private ImageView image6;
	private LinearLayout imagesLinearLayout;
	private LinearLayout.LayoutParams layoutParameters;

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

		//Initialize our box that will contain the images
		imagesLinearLayout = (LinearLayout) findViewById(R.id.ImagesLinearLayout);
		
		//Initialize the information that will divide our images equally 
		//in our linear layout (regardless of whether it is vertical or horizontal)
		layoutParameters = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT, (float) 1);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	//Method to add a new image
	public void addNewImage(View view){
		if(image1 == null){
			//Initialize image 1
			image1 = new ImageView(this);
			
			//Set image 1 source
			image1.setImageResource(R.drawable.ic_launcher);
			
			//Adds image 1 to view with our layout parameters so the image
			//looks equally divided in space
			imagesLinearLayout.addView(image1, layoutParameters);
			
		}
		else if(image2 == null){
			image2 = new ImageView(this);
			image2.setImageResource(R.drawable.ic_launcher);
			imagesLinearLayout.addView(image2, layoutParameters);
		}
		else if(image3 == null){
			image3 = new ImageView(this);
			image3.setImageResource(R.drawable.ic_launcher);
			imagesLinearLayout.addView(image3, layoutParameters);
		}
		else if(image4 == null){
			image4 = new ImageView(this);
			image4.setImageResource(R.drawable.ic_launcher);
			imagesLinearLayout.addView(image4, layoutParameters);
		}
		else if(image5 == null){
			image5 = new ImageView(this);
			image5.setImageResource(R.drawable.ic_launcher);
			imagesLinearLayout.addView(image5, layoutParameters);
		}
		else if(image6 == null){
			image6 = new ImageView(this);
			image6.setImageResource(R.drawable.ic_launcher);
			imagesLinearLayout.addView(image6, layoutParameters);
		}
		else{
			//Add code specifying that no more images can be added
		}
	}

	//Method to remove one image
	public void removeOneImage(View view){
		boolean removeComplete = false;
		//Remove images starting from the last one added
		//until reaching the first;
		if(image6 != null && !removeComplete){
			imagesLinearLayout.removeView(image6);
			
			//Make image 6 null to prevent memory leaks
			//and to allow future use of this variable
			image6 = null;
			removeComplete = true;  //We are done.
		}
		
		if(image5 != null && !removeComplete){
			imagesLinearLayout.removeView(image5);
			image5 = null;
			removeComplete = true;
		}
		if(image4 != null && !removeComplete){
			imagesLinearLayout.removeView(image4);
			image4 = null;
			removeComplete = true;
		}
		if(image3 != null && !removeComplete){
			imagesLinearLayout.removeView(image3);
			image3 = null;
			removeComplete = true;
		}
		if(image2 != null && !removeComplete){
			imagesLinearLayout.removeView(image2);
			image2 = null;
			removeComplete = true;
		}
		if(image1 != null && !removeComplete){
			imagesLinearLayout.removeView(image1);
			image1 = null;
			removeComplete = true;
		}

	}
}

That's it.