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?
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
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.