Set of ImageButtons to Fill Available Space

Question

In my UI design I have a region of variable width (depending on display size and orientation). This region I would like to fill with a set of square ImageButton s with the following constraints

• buttons fill the entire width of the area and adapt automatically to different display orientations and widths
• exception: the buttons do not grow beyond a certain maximum size, and are left-aligned after that
• buttons are and remain square shape
• button images are rather large (300x300px) and should be scaled down to fill the buttons

For this I am using a LinearLayout with horizontal orientation as shown in below XML. The LinearLayout has layout_height = wrap_content , however it seems to stretch to its available height, resulting in the buttons not being square. Also, the max_width setting does not seem to have any effect.

How do I need to change the xml to get the desired layout?

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

     <ImageButton
         android:layout_width="0dp"
         android:maxWidth="50dp"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:scaleType="fitXY"
         android:id="@+id/imageButton1" />

     <ImageButton
         android:layout_width="0dp"
         android:maxWidth="50dp"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:scaleType="fitXY"
         android:id="@+id/imageButton2" />

     <ImageButton
         android:layout_width="0dp"
         android:maxWidth="50dp"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:scaleType="fitXY"
         android:id="@+id/imageButton3" />

     <ImageButton
         android:layout_width="0dp"
         android:maxWidth="50dp"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:scaleType="fitXY"
         android:id="@+id/imageButton4" />

 </LinearLayout>

Answer 1

I would like to suggest you that you should have different dimensions in values directory for different screen sizes for the height and width for the ImageButton .

I tried to make some changes to the layout which you can reconfigure as you require. Kindly notice, if you increase the width of the ImageButton irrespective to it's height it will become a rectangle from a square

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        android:layout_weight="0.25"
        android:gravity="center"
        android:padding="4dp">

        <ImageButton
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:maxHeight="50dp"
            android:minHeight="50dp"
            android:scaleType="fitXY" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        android:layout_weight="0.25"
        android:gravity="center"
        android:padding="4dp">

        <ImageButton
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:maxHeight="50dp"
            android:minHeight="50dp"
            android:scaleType="fitXY" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        android:layout_weight="0.25"
        android:gravity="center"
        android:padding="4dp">

        <ImageButton
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:maxHeight="50dp"
            android:minHeight="50dp"
            android:scaleType="fitXY" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        android:layout_weight="0.25"
        android:gravity="center"
        android:padding="4dp">

        <ImageButton
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:maxHeight="50dp"
            android:minHeight="50dp"
            android:scaleType="fitXY" />
    </LinearLayout>

</LinearLayout>

Output

Answer 2

I discovered that ImageButton s don't handle keeping the aspect ratio of the image very well when they are resized. Alternatives are to create one's own button control and add the missing behavior or simply use ImageViews with OnClickListeners with the layout below.

Setting the enclosing LinearLayout 's width to wrap_content and enclosing it in another container such as GridLayout ensures that the images are left-aligned after reaching the maximum size.

<GridLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

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

         <ImageView
            android:layout_width="0dp"
            android:layout_weight="0.25"
            android:adjustViewBounds="true"
            android:layout_height="wrap_content"
            android:maxHeight="50dp"
            android:layout_margin="2dp"
            android:id="@+id/ImageView1" />
        <ImageView
            android:layout_width="0dp"
            android:layout_weight="0.25"
            android:adjustViewBounds="true"
            android:layout_height="wrap_content"
            android:maxHeight="50dp"
            android:layout_margin="2dp"
            android:id="@+id/ImageView2" />
        <ImageView
            android:layout_width="0dp"
            android:layout_weight="0.25"
            android:adjustViewBounds="true"
            android:layout_height="wrap_content"
            android:maxHeight="50dp"
            android:layout_margin="2dp"
            android:id="@+id/ImageView3" />
        <ImageView
            android:layout_width="0dp"
            android:layout_weight="0.25"
            android:adjustViewBounds="true"
            android:layout_height="wrap_content"
            android:maxHeight="50dp"
            android:layout_margin="2dp"
            android:id="@+id/ImageView4" />

    </LinearLayout>

</GridLayout>

And, for completeness, the Java code:

public class ExampleActivity extends Activity {

    ImageView mImageView1;
    ImageView mImageView2;
    ImageView mImageView3;
    ImageView mImageView4;


    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_example);

        // ...

        mImageView1 = (ImageView) findViewById(R.id.ImageView1);
        mImageView2 = (ImageView) findViewById(R.id.ImageView2);
        mImageView3 = (ImageView) findViewById(R.id.ImageView3);
        mImageView4 = (ImageView) findViewById(R.id.ImageView4);

        mImageView1.setClickable(true);
        mImageView1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // ...
            }
        });
        mImageView2.setClickable(true);
        mImageView2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // ...
            }
        });
        mImageView3.setClickable(true);
        mImageView3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // ...
            }
        });
        mImageView4.setClickable(true);
        mImageView4.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // ...
            }
        });
    }
}