Develop Reference

Android: How to align images depending on size of another image? (Controller consisting of 4 buttons)

I have 4 image buttons which should be aligned like this:
As you can see they overlap, so I can't use a simple table layout, because of "collapsing" table rows. My attempt was to use transparent images among those image buttons while I used nested and overlapping LinearLayouts to align them. With this attempt I don't have to worry about density related calculations. This seemed to work in the first place, but unfortunately one of the invisible buttons overlays the real image buttons, so I can't click at least one image button anymore, because it's like clicking the invisible button, overlaying the real image button.
Another difficulty is that I can't use density related alignments within the xml file. The reason is that these image buttons are scaled in a different way than other scaled images. This is because these image buttons should always be as big as a thumbnail despite of a phone or a tablet. So the usual alignment with margin is not applicable here.
I think the only way to achieve this is to calculate it programmatically. Or any other ideas?

Here's my version (less Views), based on my original tip:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/controller_container"
android:layout_width="240dp"
android:layout_height="240dp"
>
<ImageButton
android:id="#+id/button_invisible_center"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_centerInParent="true"
android:contentDescription="button_invisible"
android:visibility="invisible"
/>
<ImageButton
android:id="#+id/button_left"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_toLeftOf="#id/button_invisible_center"
android:layout_alignTop="#id/button_invisible_center"
android:background="#drawable/button_control"
android:contentDescription="#string/button_left"
/>
<ImageButton
android:id="#+id/button_up"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_above="#id/button_invisible_center"
android:layout_alignLeft="#id/button_invisible_center"
android:background="#drawable/button_control"
android:contentDescription="#string/button_up"
/>
<ImageButton
android:id="#+id/button_right"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_toRightOf="#id/button_invisible_center"
android:layout_alignTop="#id/button_invisible_center"
android:background="#drawable/button_control"
android:contentDescription="#string/button_up"
/>
<ImageButton
android:id="#+id/button_down"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_below="#id/button_invisible_center"
android:layout_alignLeft="#id/button_invisible_center"
android:background="#drawable/button_control"
android:contentDescription="#string/button_down"
/>
</RelativeLayout>
The result is:
I re-arranged the Views in order to minimize their count and therefore increase performances, being the layout lighter.
What was the trick? wrap_content in the container, shrunk everything to the center, whyle match_parent (which worked perfectly) was just out of specifics.
So I gave the buttons fixed sizes 80*80 dp and the container 3 times 80 dp (maximum combined width and height).
The image I used is't "cut out", so it better illustrates the concept.
Enjoy!
[EDIT]
In your case, this part
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
is not needed. Just replace it with
<RelativeLayout
since it's meant to be placed inside another container.

Now I have a solution due to Golem's tip although it doesn't work with just one centered invisible item. I had to place invisible buttons left of "up", right of "up", left of "down" and in the center where one button has 100x100dp, the invisible side buttons have 80x80dp and the invisible center button has 60x60dp. If you know any better, let me know.
<RelativeLayout
android:id="#+id/controller_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|left" >
<ImageButton
android:id="#+id/button_invisible_top_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_control_invisible_side"
android:contentDescription="#string/button_invisible" />
<ImageButton
android:id="#+id/button_up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button_invisible_top_left"
android:background="#drawable/button_control"
android:contentDescription="#string/button_up" />
<ImageButton
android:id="#+id/button_invisible_top_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button_up"
android:background="#drawable/button_control_invisible_side"
android:contentDescription="#string/button_invisible" />
<ImageButton
android:id="#+id/button_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/button_invisible_top_left"
android:background="#drawable/button_control"
android:contentDescription="#string/button_left" />
<ImageButton
android:id="#+id/button_invisible_center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button_left"
android:layout_below="#id/button_up"
android:background="#drawable/button_control_invisible_center"
android:contentDescription="#string/button_invisible" />
<ImageButton
android:id="#+id/button_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button_invisible_center"
android:layout_below="#id/button_invisible_top_right"
android:background="#drawable/button_control"
android:contentDescription="#string/button_up" />
<ImageButton
android:id="#+id/button_invisible_bottom_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/button_left"
android:background="#drawable/button_control_invisible_side"
android:contentDescription="#string/button_invisible" />
<ImageButton
android:id="#+id/button_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button_invisible_bottom_left"
android:layout_below="#id/button_invisible_center"
android:layout_alignBottom="#id/button_invisible_bottom_left"
android:background="#drawable/button_control"
android:contentDescription="#string/button_down" />
</RelativeLayout>

How can I evenly space my ImageViews in a RelativeLayout

I had a Android application built in which I had 3 ImageViews placed horizontally across a LinearLayout, they were placed with a android:layout_width="0dp" and android:layout_weight="1" such that they had an even spread in the layout.
Now I have to switch to use a RelativeLayout (because I want to overlap another image and that can't be done with a LinearLayout) so I want to start with replicating the same effect of having the 3 ImageViews evenly spread/scaled across the parent layout, but I'm not sure how to achieve this.
I feel like I need to make use of the android:scaleType... maybe center crop:
Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).
Which sounds good but I can't seem to get it to work right... Any thoughts on how I would achieve this even spread of ImageViews across my RelativeLayout?
Snippet of code right now:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="#+id/dragcircle"
android:layout_width="wrap_content"
android:tag="circle"
android:layout_alignParentLeft="true"
android:layout_height="wrap_content"
android:adjustViewBounds="false"
android:scaleType="centerCrop"
android:src="#drawable/circle" />
<ImageView
android:id="#+id/dragsquare"
android:layout_width="wrap_content"
android:tag="square"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/dragcircle"
android:adjustViewBounds="false"
android:src="#drawable/square" />
<ImageView
android:id="#+id/dragtriangle"
android:layout_width="wrap_content"
android:tag="triangle"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/dragsquare"
android:adjustViewBounds="false"
android:src="#drawable/triangle" />
Note: I can't find a question with the same constraints as this one on SO. There are a number of questions like:
Android: how evenly space components within RelativeLayout?
and
android RelativeLayout, equal spacing?
But if you check out the details you'll see that they are people who have not considered the LinearLayout as an option for equal spacing and switching layout types ends up being the solution. I have, I was using it, but it does not work for me because I need to overlap an image:
Note the example, I have 3 ImageViews with basic shapes, but I also have a 4th ImageView (it starts hidden) which is overlapping the middle one. This is why I must use a RelativeLayout

I think you're going to want to go back to your original LinearLayout to meet all of your needs here.
If the size of your fourth image must match one of your existing image then either you'd want to create a resource that is a composite of the two images to swap to when it needs to be overlaid or replace your center ImageView with a RelativeLayout or FrameLayout that contains the ImageView. When you need to add the fourth image, add it to that layout.
Something like:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/dragcircle"
android:layout_width="0dp"
android:layout_weight="1"
android:tag="circle"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="#drawable/circle" />
<FrameLayout
android:id="#+id/centerimagewrapper"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1" >
<ImageView
android:id="#+id/dragsquare"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:tag="square"
android:src="#drawable/square" />
<ImageView
android:id="#+id/arrow"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/arrow"
android:visibility="invisible" />
</FrameLayout>
<ImageView
android:id="#+id/dragtriangle"
android:layout_width="0dp"
android:layout_weight="1"
android:tag="triangle"
android:layout_height="wrap_content"
android:src="#drawable/triangle" />

You could hide the icon you want to place on existing images and keep your previous LinearLayout to achieve this. Each component of your LinearLayout would be a custom layout (inflated):
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
>
<ImageView
android:id="#+id/img"
android:layout_width="100dip"
android:layout_height="100dip"
android:layout_centerInParent="true"
android:scaleType="fitXY"
android:background="#android:color/transparent"
android:src="img1_src"
/>
<ImageView
android:id="#+id/imgOverlap"
android:layout_width="50dip"
android:layout_height="50dip"
android:layout_centerInParent="true"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:src="img2_src"
android:visibility="gone"
/>
</RelativeLayout>
It appears not possible to use "layout_weight" in a RelativeLayout.
You could also consider a GridView and set its number of columns; each item of the GridView would be the inflated layout above.

you could also do it programatically and tell them to be 33% of the screen width. Look at DisplayMetrics and the attributes of each ImageView if you want to achieve this.

Try this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/dragcircle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:scaleType="fitXY"
android:src="#drawable/circle"
android:tag="circle" />
<ImageView
android:id="#+id/dragtriangle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/triangle"
android:scaleType="fitXY"
android:tag="triangle" />
<ImageView
android:id="#+id/dragsquare"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/dragtriangle"
android:layout_toRightOf="#id/dragcircle"
android:src="#drawable/square"
android:scaleType="fitXY"
android:tag="square" />
</RelativeLayout>

How to achieve this kind of layout in Android

I'm new to Android development and I'm trying to achieve a layout for my app that is capable of handling different screen resolutions/ratios.
I've been reading a lot of the documentation and questions on this site to try to understand the basics and concepts.
First I went through:
developer.android.com/guide/practices/screens_support.html
And questions like:
stackoverflow.com/questions/6403619/how-to-support-all-the-different-resolutions-of-android-products
I've got a pretty basic idea on how to handle things out. But still, its pretty difficult for a starter to get going, and I found myself stucked trying to achieve the solution I came up with.
I designed my app to a target resolution of 480x800, and set it up to always show in portrait mode.
This is how it looks like and how I understand it should work (I used Waldo for the sake of example haha):
(sorry for the link, I need 10 rep to post images)
http://i.imgur.com/KXTAXir.jpg
My root Layout is a LinearLayout, wich contains 3 other Layouts being A and C set up to a weight of 0.8 while B is at 8.4. This is all fine, but the contents of B are set up to DP units at the moment just to be able to test.
B consists of a frame Layout who has 3 other Layouts inside, where 2 of them are working fine, and shown only when needed. The problem is that I need B to be able to adapt based on the contents of it first child: a LinearLayout wich contains 2 ImageView and 1 ProgressBar. I need that those ImageView always keep their ratio.
Here is an example of how it should work:
http://i.imgur.com/cH7fUze.jpg
Imagine those 4 are real screens, wich vary in ratio and size. So my app should only adapt B (from my first image) to keep the images original ratio.
Here is the layout code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/darkgray"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:background="#666666" >
<TextView
android:id="#+id/level_text_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="LEVEL"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/level_text_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="SCORE"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/level_text_clock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="01:59"
android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="8.4" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="200dp"
android:adjustViewBounds="true" />
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="1000"
android:progress="0" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="200dp"
android:adjustViewBounds="true" />
</LinearLayout>
<RelativeLayout
android:id="#+id/pauseMask"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:visibility="gone" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/gameoverMask"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:visibility="gone" >
</RelativeLayout>
</FrameLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:background="#666666" >
<TextView
android:id="#+id/level_text_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="0/0"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="Button"
android:onClick="useHint" />
<Button
android:id="#+id/button2"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/button1"
android:layout_centerVertical="true"
android:text="Button"
android:onClick="toggleSound" />
<Button
android:id="#+id/button3"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/button2"
android:layout_centerVertical="true"
android:text="Button"
android:onClick="togglePause" />
</RelativeLayout>
The last thing that stays unclear to me is how to handle the text and button sizes. Should I set them in DPs? How do I get them to scale accordingly like it can be seen on the bottom of my second picture.
Thank you for your help, I also want this to serve as an example to others that are having trouble to understand how to handle this kind of scenarios.

I'm not sure, if I got your question right.
However, you can specify different layouts for different screen sizes and orientations, as described here: http://developer.android.com/guide/practices/screens_support.html
Just give the respective suffix in the name of your layout XML file.

I ended up creating a custom View for my images. The view calculates the space thats left on its parent, scales the images manually and then resizes itself to the same size of the resulting image.
To resize the progress bar to have the same width as the images, I used a custom listener that gets triggered when my custom views get resized. Then I resize the progressbar to match their width.
With this I achieved what I wanted, a layout that will work perfectly in all screen sizes.

Designing simple android layout?

I'm having a little trouble laying out my android app. I didn't plan it out very well, and i'm not new to java, but im new to these android xml layouts. What i have is a horizontal linear layout parent, which contains two relative layouts. The right relative layout consists of a custom view (GridView) and under it i want 3 buttons. I've added one button (button1) to my xml file and it won't show up on screen as you can see. I'm thinking i need to set the size of my gridview some how? Its height is 2x its width. Or can i set it by pixels programatically at runtime?
I'm also thinking i sort of over complicated things at this point. Like i said i'm new to these weird layouts, im used to just using x and y offsets in .net. Maybe this could all be done in one relative layout instead of using two and nesting them inside a linear layout?
Here's what i got so far:
<?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:orientation="horizontal" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="#string/next" />
<com.mydomain.tetrisv2.PreviewGridView
android:id="#+id/previewGridView1"
android:layout_width="100dp"
android:layout_height="150dp"
android:layout_alignParentLeft="true"
android:layout_below="#+id/textView1" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/previewGridView1"
android:text="Score: " />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<com.mydomain.tetrisv2.GridView
android:id="#+id/gridView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="50dp" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/gridView1"
android:text="Button" />
</RelativeLayout>
</LinearLayout>
I can't post images but heres the visual result: http://i50.tinypic.com/orscgi.png
Also side note (unrelated), this is a project for experimentation and learning purposes but are there any legal copyright repercussions to making a tetris game and putting it on the play store?

Just change our right sides gridview's below button to this code
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" // change is here
android:text="Button" />
Hope this will help you..

automatically resize ImageButtons in LinearLayout

Summary: I want a horizontal row of ImageButtons to scale down evenly to fit in the screen size.
I have a row of ImageButtons at the top of the screen. A left-aligned logo ImageButton and then right-aligned ImageButtons for various actions.
Yes, that does sound a lot like a Honeycomb/ICS Action Bar, but the code is targeted for Froyo, so I need to implement the design in 2.2-compatible layouts.
I programmatically detect when I'm on a 7" screen or larger and switch to larger images for the ImageButtons (as the drawable-xlarge directory only works for 10" and up, and drawable-large works for 4" and up).
This works great on a phone or on a 10" tablet. However, on a 7" tablet, the images are too large for the space in portrait mode (the app is locked to portrait mode).
I have tried many different approaches to making the images scale down, as I'd rather not use yet another set of images just for 7" tablets. But the images are not spaced properly, or scale at different levels, or only some of the images appear on the screen. I've used RelativeLayout, LinearLayout, android:weightSum, setting the images as background images, as src images, etc.
EDIT: Another quirk I noticed in my experimentation was that if I set the same layout_weight, the layout worked, forcing each item to have the same width. If I want some items to have different widths--which is necessary in this case, as the first button needs to be substantially wider--then the layout breaks when I set a layout_weight that doesn't match the others. Only one or two of the items appear on screen, the rest presumable being pushed off.
Here's the layout I'm using. This is my best so far--it works great on 10" tablets and phones, and is almost tolerable on 7" tablets. But the logo--which should be the same height as the buttons and about 2.5 times wider--is noticeably taller than the other buttons. Any suggestions on improving the layout?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/actionBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:padding="5dip"
android:gravity="center_vertical"
android:orientation="horizontal"
android:background="#drawable/action_bar_bg"
>
<ImageButton
android:id="#+id/logoButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/save_logo_03"
android:padding="2dip"
android:adjustViewBounds="true"
android:scaleType="centerInside"
/>
<View
android:id="#+id/spacer"
android:layout_width="50dip"
android:layout_height="1dip"
android:layout_weight="1"
android:visibility="invisible"
/>
<ImageButton
android:id="#+id/listButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/list_button"
android:background="#null"
android:adjustViewBounds="true"
android:padding="2dip"
android:scaleType="centerInside"
/>
<ImageButton
android:id="#+id/mapButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/map_button2"
android:adjustViewBounds="true"
android:padding="2dip"
android:scaleType="centerInside"
/>
<ImageButton
android:id="#+id/ltoButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/lto_button"
android:adjustViewBounds="true"
android:padding="2dip"
android:scaleType="centerInside"
/>
<ImageButton
android:id="#+id/searchButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/search_button"
android:adjustViewBounds="true"
android:padding="2dip"
android:scaleType="centerInside"
/>
</LinearLayout>

Unfortunately, in the end I did have to programmatically change the button sizes depending on the size of the screen.
My final layout looked like this (sanitized):
<?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="wrap_content"
android:layout_weight="0"
android:padding="5dip"
android:gravity="center_vertical"
android:orientation="horizontal"
android:background="#drawable/action_bar_bg"
>
<ImageButton
android:id="#+id/logoButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:background="#null"
android:padding="2dip"
android:adjustViewBounds="true"
android:src="#drawable/logo"
android:scaleType="centerInside"
/>
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"/>
<ImageButton
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:background="#null"
android:padding="2dip"
android:src="#drawable/button1"
android:scaleType="centerInside"
android:adjustViewBounds="true"
/>
<ImageButton
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:background="#null"
android:padding="2dip"
android:src="#drawable/button2"
android:scaleType="centerInside"
android:adjustViewBounds="true"
/>
<ImageButton
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:background="#null"
android:padding="2dip"
android:src="#drawable/button3"
android:scaleType="centerInside"
android:adjustViewBounds="true"
/>
<ImageButton
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:background="#null"
android:padding="2dip"
android:src="#drawable/button4"
android:adjustViewBounds="true"
android:scaleType="centerInside"
/>
</LinearLayout>
Notice the empty View that fills up available space, pushing the other buttons over to the right side of the screen.
In the code, I check the screen size. If it seems to be >= 7", then I switch to larger images.
If it seems to be >=7" but < 9", then I programmatically change the size of the images--and that I had to experiment with to come up with just the right number for it to work. If I had more images or they changed, I would have to repeat it. I'm not proud of such an inflexible solution, but I couldn't find anything else that worked.

This is what I've got:
In your specific case, we can say that your app layout and buttons size are under dependecy of:
The mobile device screensize/resolution;
The number of buttons in the
row;
I recommend 2 approaches to you:
Implementing your layout with RelativeLayout and weight tags. Flexible layouts can be made very easy with these ones;
Programatically define your button sizes using DisplayMetrics class, something like the snippet in the end of this post, and use an extra .xml file (say integer.xml) where you can define a constant value for your number of buttons;
In this snippet, dm is a structure that holds your device resolutions.
DisplayMetrics dm = new DisplayMetrics();
context.getWindowManager().getDefaultDisplay().getMetrics(dm);
Hope it helped you! :)