Develop Reference

What type of operation I'm missing..?

I read this Android Studio documentation: https://developer.android.com/guide/practices/screens_support.html#DeclaringTabletLayouts
Well the documentation is pretty obvious, to support different screens.
Use match_parent, wrap_content, create layout-sw folders.. Hmm, eazy task.. Yep, I made 5 layout-sw300dp-700dp folders, every layout owns match-parent and wrap content characteristic.. But somehow my image isn't getting scaled and all I want to do is to scale the image in one of my LinearLayouts..
I know theres a lot of answer out there on the forum, but as you can see its not confusing for me, but I'm sure I'm missing something important to end the screen support..
Should I create different size images and place them in a drawable folder?
Because whenever I'm reviewing another layout file for example sw600dp the image isnt scaled there.. Even the layouts aren't getting scaled..
Should I configure every layout-sw folders? I mean to place bigger image, to resize layouts.
I need to fill up the LinearLayout with the image. Now there's white spaces on the left and right side of the LinearLayout
The code belongs to the RelativeLayout, which has match-parents aswell.
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:gravity="center"
android:padding="15dp"
android:text="This is random text"
android:textColor="#000000"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.39"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
</TextView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="50dp"
android:id="#+id/linearLayout"
android:layout_above="#+id/linearLayout2"
android:layout_alignParentEnd="true">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="50dp"
android:id="#+id/linearLayout2"
android:layout_above="#+id/linearLayout4"
android:layout_alignParentStart="true"
android:layout_marginTop="15dp">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="50dp"
android:layout_marginTop="15dp"
android:id="#+id/linearLayout4"
android:layout_above="#+id/linearLayout5"
android:layout_alignParentStart="true">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_marginTop="15dp"
android:id="#+id/linearLayout5"
android:gravity="fill">
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/info1"
android:layout_gravity="fill_horizontal"
android:contentDescription="" />
</LinearLayout>

Trying to understand Android layouts, image sizes and relations

I'm developing apps for android since over a year now with success, but one thing is still a problem for me:
How to design a layout with a combination of TextViews, ImageViews and Buttons while retaining the relation between each elements on different screen sizes.
I want to build a layout like this:
It's for a listview, so many of these layouts are used. The app has a different layout for smartphones and tablets.
So the orange button on the right should always have 3 lines of text but should still have a maximum width, the image on the left should have the same height as the button on the right. The 3 lines of text in the middle should take up as many space as they can. The star image should have the same hight as the text on their right.
I've managed to build a similar test layout with a TableLayout, here are the previews from AndroidStudio:
Nexus S
Nexus 6
On the Nexus S screen size, the layout is OK but on bigger screens it's ugly. The button is too small, the image on the left is also too small.
Here is the code for my test layout:
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="1"
>
<TableRow android:orientation="horizontal"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/iv1"
android:layout_width="80dp"
android:layout_height="match_parent"
android:contentDescription="#string/dummy"
android:padding="#dimen/raster4dp"
android:scaleType="fitXY"
android:src="#drawable/avatar_1" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="some nice text here"
android:layout_alignParentLeft="true"
android:textAppearance="?android:attr/textAppearanceMedium"
/>
<ImageView
android:id="#+id/iv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/tv1"
android:src="#drawable/ic_male_user_bw"
android:layout_alignParentLeft="true"
/>
<TextView
android:id="#+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="more nice text"
android:layout_toRightOf="#id/iv2"
android:layout_alignBottom="#id/iv2"
android:textAppearance="?android:attr/textAppearanceMedium"
/>
<ImageView
android:id="#+id/iv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/iv2"
android:layout_alignParentLeft="true"
android:src="#drawable/ic_male_user_bw"
/>
<TextView
android:id="#+id/tv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="more nice text"
android:layout_toRightOf="#id/iv3"
android:layout_alignBottom="#id/iv3"
android:textAppearance="?android:attr/textAppearanceMedium"
/>
</RelativeLayout>
<Button
android:id="#+id/btn1"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:background="#drawable/button_dropshadow_black_xml"
android:text="Line1\nLine2\nLine3"
android:textColor="#android:color/white" />
</TableRow>
</TableLayout>
So hopefully my question is not too silly, but i have some problems understanding how to fix this. Currently I'm using a width of fixed 80dp on the button and the image to the left. I think this is not realy the way it works on Android.
What sizes do i need to use here, what kind of layouts?
The sections about sreensizes etc. on the developer site is known by me (https://developer.android.com/guide/practices/screens_support.html) but it wasn't that helpful to me.
Thanks for help! :)

Each terminal has different dimensions. If you put a button that has a size of 80dp, when other terminal screen is larger, that button is going to be smaller compared to the terminal screen you were doing the tests.
You should play with WEIGHT.
| | | |
|_____________|_________________________|____________|
0.3 0.5 0.2 0.3 + 0.5 + 0.2 = 1 <-Weight.
Read this, will help.
Also there's a question similar to yours, check it too.

DP is for setting a fixed amount of pixels, if you don't want to consider the pixel density of your device's screen. This lets you that a button would be shown with the same size in a Nexus 4,5 or in a Samsung Galaxy Mini.
The same "absolute" size. This means that if your image is too big, it could fit in Nexus, but no in the other because of its smaller screen. This is due to the fact that it does not depend on the screen size, neither the pixel density.
What I hardly recommend you is the use of LinearLayouts (with their attribute weight) and RelativeLayouts as direct children (in case you need them). This could be "the same" (not exactly) than the use of "%" in CSS.
Here, you can see an example of weight attribute (The second answer gives you more tips).
Linear Layout and weight in Android
I hope this helps!!

check this .... increase parent layout height if needed:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:orientation="horizontal" >
<ImageView
android:id="#+id/iv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="dummy"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="6"
android:orientation="vertical" >
<TextView
android:id="#+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="some nice text here"
android:textAppearance="?android:attr/textAppearanceMedium" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="#+id/iv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="more nice text"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="#+id/iv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/tv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="more nice text"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="#+id/iv23"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/iv24"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</LinearLayout>
<Button
android:id="#+id/btn1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:background="#565657"
android:text="Line1\nLine2\nLine3"
android:textColor="#android:color/white" />
</LinearLayout>

Create a multiple screen android application

I'm developing an Android 2.3.3 application that will work on every android phone or tablet device and it will only support portrait.
Reading Supporting Multiple Screens I see a table with a lot of screen sizes and densities.
How many layouts do I need? One for every screen size and density?
I think I only need four: one for small, normal, large and x-large.

you basically need four. But if you you want you application to behave different according to different screen sizes AND different orientations, you should use:
/layout-port > for medium layout portrait
/layout-land > for medium layout landscape
/layout-xlarge-port > for xlarge layout portrait
/layout-xlarge-land > for xlarge layout landscape
etc.

From the link you provided:
By default, Android resizes your application layout to fit the current device screen.
In most cases, this works fine.
Therefore the general rule is to use Density Independent Pixels (dips) for size definitions in your layout xmls leaving the rest to be handled by the operating system. Doing so you just have the only layout for all range of devices.
Making separate layouts is not really common practice. Only when you have images that can't be stretched is that really the recommended way. In that case, splitting the graphics based on the size and density of the screen can solve your problem anyway.

One layout is enough for device up to large density , if you also want to implement layout for x-large screen size then you need to make another layout,
just get the images as per ldpi , mpdi and hdpi , place them the relative folders ,
create layout using appropriate layout weights give full size to backgrounds like fill parent and exact size of buttons
like
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/bg"
android:gravity="center"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/bar"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight=".55"
android:gravity="left|center"
android:orientation="vertical" >
<Button
android:id="#+id/goBack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:background="#drawable/back_btn" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight=".25"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Forget Paaword"
android:textColor="#ffffff"
android:textSize="18dp"
android:textStyle="italic" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight=".55"
android:gravity="right|center"
android:orientation="vertical" >
<Button
android:id="#+id/hombutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:background="#drawable/home1" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight=".2"
android:gravity="right|center"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight=".5"
android:gravity="right|center"
android:orientation="horizontal" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:text="User Name"
android:textColor="#ffffff" />
<EditText
android:id="#+id/usernametext"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight=".5" android:imeOptions="actionDone">
<requestFocus />
</EditText>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight=".5"
android:gravity="right|center"
android:orientation="horizontal" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:text="Email Id"
android:textColor="#ffffff" />
<EditText
android:id="#+id/emailtextfp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:inputType="textEmailSubject" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight=".5"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/loginbuttonfp"
android:layout_width="75dp"
android:layout_height="28dp"
android:layout_margin="5dp"
android:background="#drawable/btn" android:text="Ok" android:textColor="#ffffff"/>
<Button
android:id="#+id/cancelbutton"
android:layout_width="75dp"
android:layout_height="28dp"
android:layout_margin="5dp"
android:background="#drawable/btn" android:text="Cancel" android:textColor="#ffffff"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>

I created a tool that allows you to scale/adjust your layouts for tablets and small screen devices and made a blog post about it here: http://onemanmobile.blogspot.com/2012/04/how-to-scale-your-android-layouts-to.html
Basically, defining your layouts in dp units for one size is not enough if you want your app to fit on all devices and tablets, since there's four different "density-buckets".
This tool will allow your layouts to be converted into fitting these density buckets from a default baseline.
Hope it helps.

How do I get the layout on my device to render like it does in the Eclipse graphical designer?

I realize that the Eclipse graphical layout editor often (usually?) doesn't render things the same way that the physical devices or emulator do. I can usually deal with that. However, I have a situation where I can't figure out why there is such a big difference, and more importantly, I can't figure out how to get what I want for a layout on the target devices.
I am attempting to use some custom ImageButton widgets with custom graphics files as buttons. I simply want the buttons to fill the parent layouts they are in. In the designer, they look the way I think they should. But when I run it on a device, the buttons are way to small. Here is what the design looks like, using a device that is set up to emulate the Droid X that I am testing with.
http://pozzy.com/consulting/LayoutDesignInEclipse.PNG
Here is a screen capture of the screen when running on my Droid X:
http://pozzy.com/consulting/ScoreEntryDroidXScreenCapture.png
I tried to trim the code down, but it still relies on a number of button image files. Here is the layout XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
Android:layout_height="fill_parent">
<LinearLayout
android:id="#+id/scoreEntryPlayersAndMainEntry"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/scoreEntryPlayers"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight=".5"
android:orientation="vertical"
android:paddingBottom="4dp"
android:paddingTop="4dp"
android:paddingLeft="4dp" >
</LinearLayout>
<LinearLayout
android:id="#+id/scoreEntryMainEntry"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight=".5"
android:maxWidth="100dp"
android:orientation="vertical"
android:paddingBottom="4dp"
android:paddingLeft="4dp"
android:paddingRight="4dp"
android:paddingTop="4dp" >
<LinearLayout android:id="#+id/scoreEntryPreviousHoleNumberNextRow"
android:orientation="horizontal"
android:background="#drawable/score_entry_background_top"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight=".1"
android:gravity="center|top" >
<ImageButton
android:id="#+id/previousHoleButton"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="2"
android:layout_margin="5dp"
android:scaleType="fitCenter"
android:background="#null"
android:contentDescription="Previous Hole"
android:src="#drawable/score_entry_prev" />
<TextView
android:id="#+id/holeNumber"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#null"
android:paddingTop="20dp"
android:text="##"
android:textColor="#FFFFFF"
android:textSize="24sp"
android:textStyle="bold" />
<ImageButton
android:id="#+id/nextHoleButton"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="2"
android:layout_margin="5dp"
android:scaleType="fitCenter"
android:background="#null"
android:contentDescription="Next Hole"
android:src="#drawable/score_entry_next" />
</LinearLayout>
<LinearLayout
android:id="#+id/scoreEntryCurrentScore"
android:background="#drawable/score_entry_background_middle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight=".8" >
<FrameLayout
android:id="#+id/scoreEntryScoreOverlays"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:visibility="invisible"
android:id="#+id/scoreEntryPlayerScoreLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/currentPlayer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:gravity="center"
android:text="Player Name"
android:textColor="#aaaaaa"
android:textSize="16sp"
android:textStyle="italic" />
<TextView
android:id="#+id/currentScore"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="99"
android:gravity="center"
android:layout_gravity="bottom"
android:textColor="#ff0000"
android:textSize="100sp"
android:textStyle="bold|italic" />
</LinearLayout>
</FrameLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/scoreEntryScoreDownUpRow"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/score_entry_background_bottom"
android:gravity="bottom"
android:layout_weight=".1"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/scoreDownButton"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#null"
android:scaleType="fitCenter"
android:src="#drawable/score_entry_minus" />
<ImageButton
android:id="#+id/scoreUpButton"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#null"
android:scaleType="fitCenter"
android:src="#drawable/score_entry_plus" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Any help in figuring out how to get the buttons filling their respective areas would be greatly appreciated!

I've had exactly the same problem and I have had to workaround it by manipulating it everytime to fit both places which is sad. The eclipse graphics visualizer really sucks sometimes. I' ve
tried http://www.droiddraw.org/ since many people say that is pretty good - but somehow there seems to be a gap between what is seen on the visualizer and then on the actual device. I guess the rule of thumb is to follow this http://developer.android.com/training/multiscreen/screensizes.html to the letter and keep trying . I think Droid Draw works for me better than eclipse, I suppose following the dev link above and using say Droid Draw should ideally work for you.

Android layout help (similar to venmo)

I'm new to Android and am trying to understand how to get a particular layout right? Can anyone explain Which layout does Venmo use for their first screen of the Android app (left most image at the following link: http://30.media.tumblr.com/tumblr_lak5yachMv1qcl8xuo1_500.png)
I tried to create a layout similar to that for learning purposes but can't get it right. Here is my sample layout code:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http``://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:id="#+id/tableLayout1"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:background="#fff"
android:scrollbars="none">
<TableRow
android:layout_height="wrap_content"
android:id="#+id/tableRow1">
<ImageButton
android:layout_height="wrap_content"
android:id="#+id/imageButton5"
android:background="#drawable/icon"
android:layout_width="wrap_content"
android:layout_weight="1">
</ImageButton>
</TableRow>
<TableRow
android:layout_height="wrap_content"
android:id="#+id/tableRow2">
<TextView
android:text="TextView"
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:layout_weight="1">
</TextView>
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_height="wrap_content"
android:layout_margin="0dip"
android:padding="0px"
android:background="#ff6600">
<ImageButton
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/imageButton1"
android:background="#drawable/icon"
android:gravity="left"
android:layout_weight="1">
</ImageButton>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageButton2"
android:background="#drawable/icon"
android:gravity="right"
android:layout_weight="1">
</ImageButton>
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_height="wrap_content">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageButton3"
android:background="#drawable/icon"
android:gravity="left"
android:layout_weight="1">
</ImageButton>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageButton4"
android:background="#drawable/icon"
android:gravity="right"
android:layout_weight="1">
</ImageButton>
</TableRow>
</TableLayout>
What I'm trying to figure out:
How to scale an ImageButton to 50% of the screen width and height
how to have a flexible height of the ImageButton
How to get rid of the margin or padding on the edges such that the ImageButton's stick to the wall and each other.
Is a TableLayout a good approach for this layout?
Are there any guidelines for creating images for ImageButton?
Thank you for your help.

I'm the developer of the Venmo Android app.
The other answer suggests using a GridLayout which might work better, but the Venmo app is actually using a table layout.
Here are answers to each individual question...
To get your images to scale to equal width, you need to give them a layout_width of 0dp and then set android:layout_weight to 1.
To get equal heights, set the ImageButton's layout_height to fill parent, and then set each table row's weight to 1.
I'm not entirely sure of what margin or padding you're running into. If you size the ImageButtons and TableRows like I mentioned above this shouldn't be an issue.
I'm not sure about this one. GridLayout might work better, but I haven't run into any issues with using TableLayout.
There aren't any official guidelines, but I suggest creating states for your drawables so the user can tell when they are pressing the button.
Here's some sample code of how the Venmo app creates the grid:
<TableLayout android:layout_width="fill_parent" android:layout_height="fill_parent">
<TableRow android:layout_weight="1">
<ImageButton android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="fill_parent"
android:src="#drawable/top_left"
android:layout_marginRight="2sp"
android:layout_marginBottom="2sp"
android:background="#drawable/button"/>
<ImageButton android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="fill_parent"
android:src="#drawable/top_right"
android:layout_marginBottom="2sp"
android:background="#drawable/button"/>
</TableRow>
<TableRow android:layout_weight="1">
<ImageButton android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="fill_parent"
android:src="#drawable/bottom_left"
android:layout_marginRight="2sp"
android:background="#drawable/button"/>
<ImageButton android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="fill_parent"
android:src="#drawable/bottom_right"
android:background="#drawable/button"/>
</TableRow></TableLayout>
Keep in mind that if the screen is ever physically smaller than your ImageButton's drawable you're going to run into issues. Also, if you do this you'll definitely want to make a separate layout for landscape orientation.

Use a gridLayout instead and as for the margin there is an attribute that controls it..If you only have 4 images they will render appropriately(the 50%s that you want) if you use the grid layout...the gridView tutorial is quite good actually..have a look http://developer.android.com/resources/tutorials/views/hello-gridview.html