Home Ask Login Register

Developers Planet

Your answer is one click away!

jerry February 2016

Set of ImageButtons to Fill Available Space

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 ImageButtons 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
            

Answers


Pankaj Nimgade February 2016

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: 


jerry February 2016

I discovered that ImageButtons 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 

Post Status

Asked in February 2016
Viewed 3,887 times
Voted 4
Answered 2 times

Search




Leave an answer


Quote of the day: live life

Devs Planet ®

2014-2016 www.devsplanet.com

Devs Planet © all rights reserved

Search