Develop Reference

Make a bingo table in Android xml

I am trying to create a large square and inside the large square there will be 25 small squares.I am using a png image of the square with small 25 squares in it and using linear and linear horizontal to align the large text view inside the square. But when I change the device screen the text comes out of the boundary of the png image square.
Is there any solution for this?
This the square image i am using
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.nijinsha.bingomultiplayer.Game_Act"
android:background="#drawable/bkgd"
android:padding="5dp">
<ImageView
android:layout_width="330dp"
android:layout_height="340dp"
android:id="#+id/imageView"
android:src="#drawable/bgrid"
android:background="#drawable/gdbk"
android:scaleType="fitXY"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
<LinearLayout
android:orientation="vertical"
android:layout_width="330dp"
android:layout_height="340dp"
android:layout_alignTop="#+id/imageView"
android:layout_alignLeft="#+id/imageView"
android:layout_alignStart="#+id/imageView">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="68.5dp"
android:weightSum="1">
<TextView
android:layout_width="62dp"
android:layout_height="match_parent"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="02"
android:id="#+id/textView1"
android:gravity="center_vertical|center_horizontal"
android:textSize="50sp" />
<TextView
android:layout_width="62dp"
android:layout_height="match_parent"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="05"
android:id="#+id/textView2"
android:gravity="center_vertical|center_horizontal"
android:textSize="50sp" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Edit
The problem is with devices which is not HD

The problem was with the width of the imageView. I changed the width to 300 and now no problem. The problem was imageView was at its maximum and could not be bigger on low pixel density devices.

I can not display the same design on different phones(DialogFragment)

I am have some problem with displaying design on different devices.
I am do not solve this problem.
This is photo - enter link description here
This is xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="39dp"
android:layout_marginLeft="39dp"
android:layout_gravity="center_horizontal"
android:background="#ffffffff">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="225.75dp"
>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="ItemName"
android:id="#+id/itemName"
android:layout_weight="3"
android:paddingTop="14dp"
android:paddingLeft="14dp"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="ItemPrice"
android:id="#+id/itemPrice"
android:layout_weight="1"
android:paddingRight="14dp"/>
</LinearLayout>
<ImageView
android:layout_width="match_parent"
android:layout_height="161.75dp"
android:id="#+id/itemImage"
android:layout_weight="16"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Buy 1 and Get 2 for free "
android:id="#+id/textView9"
android:layout_gravity="center_horizontal"
android:paddingBottom="25dp"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="101dp"
android:layout_gravity="center_horizontal"
android:background="#drawable/placeholder_blue"
android:gravity="center_vertical"
android:paddingTop="26dp"
android:paddingBottom="26dp">
<Button
android:layout_width="49dp"
android:layout_height="49dp"
android:text="-"
android:id="#+id/itemMinus"
android:layout_marginLeft="48dp"
android:background="#fff"/>
<TextView
android:layout_width="match_parent"
android:layout_height="49dp"
android:text="1"
android:id="#+id/textView11"
android:layout_weight="1"
android:gravity="center_vertical|center_horizontal"
android:background="#fff"
android:textAlignment="gravity"/>
<Button
android:layout_width="49dp"
android:layout_height="49dp"
android:text="+"
android:id="#+id/itemPlus"
android:layout_marginRight="48dp"
android:background="#fff"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:background="#android:color/transparent"
android:paddingTop="38.5dp"
>
<ImageButton
android:layout_width="65.25dp"
android:layout_height="65.25dp"
android:id="#+id/itemCancel"
android:src="#drawable/cancel"
android:background="#android:color/transparent"
android:layout_marginRight="12dp"/>
<ImageButton
android:layout_width="65.25dp"
android:layout_height="65.25dp"
android:id="#+id/itemAdd"
android:src="#drawable/apply"
android:background="#android:color/transparent"
android:layout_marginLeft="12dp"/>
</LinearLayout>
</LinearLayout>
On the photo left to right:
LG g3 - 5" 1280 x 720 294 dpi
samsung galaxy s5 - 5,1" 1080x1920 432 dpi
samsung galaxy note 4 - 5.7" 1440x2560 515 dpi
nexus 6 5.96" 1440x2560 493 dpi
the problem is that my DialogFragment displaying design on different devices. I need to make it always as the first phone (LG g3).
what am I doing wrong? I have 5 folders with pictures mdpi hdpi xhdpi xxhdpi xxxhdpi. I cut them a script in Photoshop. I checked the calculator. all the same. but still displayed crooked. I tried to use the values weight.
EDIT: All pictures displayed normal. But my DialogFragment displayed always at the center. I need to top-left corner DialogFragment was always under the button is on him and had no padding down

Why not try mixing in RelativeLayout? If you use the layout_weight it really depends on the screen size and density from my understanding and if you use RelativeLayout maybe you could align them the way you want properly. Like using its center_horizontal="true", above="#id/x", below="#id/y".

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>

set images for multiple devices which has different ppi pixels

I am setting up images for different devices as per official google docs.As per google docs we should always use dp(density independent pixels) because pixels may varies for different devices.
So i have managed images as per dp(density independent pixels).
I have put images in drawable xhdpi,hdpi,mdpi and ldpi. it works well for most of devices but for different devices ppi pixels may varies from device to device so dp(density independent pixels) is not fixed so my all calculations according to dp(density independent pixels) goes wrong and cannot be set properly.
Let me explain me with example.
here is my xml i am setting up :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll_footer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FF0000"
android:orientation="horizontal" >
<ImageView
android:id="#+id/ft_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ico_test" />
<ImageView
android:id="#+id/ft_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ico_test" />
<ImageView
android:id="#+id/ft_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ico_test" />
<ImageView
android:id="#+id/ft_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ico_test" />
<ImageView
android:id="#+id/ft_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ico_test" />
<ImageView
android:id="#+id/ft_6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:src="#drawable/ico_test" />
</LinearLayout>
when i see this layout in Micromax canvas 4(294 ppi pixels) it seems perfect.
but in Google Nexus 4(318 ppi pixels) it leaves more space from right side(you can see it in images i have attached.).
i tried to get following details
density :
dpHeight :
dpWidth :
using below java code :
Display display = getWindowManager().getDefaultDisplay();
DisplayMetrics outMetrics = new DisplayMetrics ();
display.getMetrics(outMetrics);
float density = getResources().getDisplayMetrics().density;
float dpHeight = outMetrics.heightPixels / density;
float dpWidth = outMetrics.widthPixels / density;
i get following results for nexus 4 and canvas 4 :
(canvas 4)
density : 2.0
dpHeight : 640
dpWidth : 360
(nexus 4)
density : 2.0
dpHeight : 592
dpWidth : 384
as you can see here dp(density independent pixels) varies for these devices
i think it is because of different ppi pixels so all my calculations according to dp(density independent pixels) goes wrong.
so how can i manage images if dp is not fixed.??
i have also attached screen shot of the images how layout looks in canvas 4 and nexus 4.
I have also referred this question How do I convert ppi into dpi for Android images?
i know i can adjust layouts using the layout weight but i think there must be another solution to this problem.
Please see and help me to solve the problem.

You just cannot support all the devices, Either you can create different layouts or different drawables to target each device.
The best thing you can do is make a flexible UI that divides the view in proportions and for doing this WEIGHT come into existence . Just use weight to divide the UI into proportion like this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll_footer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FF0000"
android:orientation="horizontal"
android:weightSum="6">
<ImageView
android:layout_weight="1"
android:id="#+id/ft_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:layout_weight="1"
android:id="#+id/ft_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:layout_weight="1"
android:id="#+id/ft_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:layout_weight="1"
android:id="#+id/ft_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:layout_weight="1"
android:id="#+id/ft_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:layout_weight="1"
android:id="#+id/ft_6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:src="#drawable/ic_launcher" />
</LinearLayout>

The dp pixels are density independent, not proportion independent. The difference in proportion of height to width between the two devices is the issue you are having, not an occurrence of non-standard dp. The only proper solution is to adjust the weight based on difference in proportion.
If density independent pixels were dependent on the pixels per inch, a density dependent unit, then they would also be density dependent.

Try this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll_footer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FF0000"
android:orientation="horizontal" >
<ImageView
android:id="#+id/ft_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/ft_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/ft_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/ft_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/ft_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/ft_6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher" />
</LinearLayout>

I do in such a way
Display display = getWindowManager().getDefaultDisplay();
int screenWidth = display.getWidth()/6; //number of buttons
button.setLayoutParams(new LinearLayout.LayoutParams(screenWidth, android.view.ViewGroup.LayoutParams.WRAP_CONTENT));
button2.setLayoutParams(new LinearLayout.LayoutParams(screenWidth, android.view.ViewGroup.LayoutParams.WRAP_CONTENT));
....
make it as for each buttons in same way..
or
Tabbar concept works in anotherway..

For your problem as seen in your screenshot your background have repeatable texture. Crop the image for texture and use repeatable background in place of single image. You can use following XML for repeatable background bg_repeat.xml
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/background"
android:tileMode="repeat" />
background.png
give your cropped image as src here and put this XML file in your drawable. Now, in your layout do this -
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_repeat"/>
</LinearLayout>
IMO this will serve your purpose and it will also save you some bites.

I think you need to work with weight here.Just put the same code in your XML and see the difference:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:id="#+id/ft_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ico_test" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:id="#+id/ft_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ico_test" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center" >
<ImageView
android:id="#+id/ft_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ico_test" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center" >
<ImageView
android:id="#+id/ft_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ico_test" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:id="#+id/ft_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ico_test" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:id="#+id/ft_6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:src="#drawable/ico_test" />
</LinearLayout>

You just cannot support all the devices, Either you can create different layouts or different drawables to target each device.
Instead of linear layout use Relative layout that will be better for all devices.

How to remove TableLayout padding in ldpi layout

I am putting two images in a row, its goes well on hdpi and mdpi, but I try to open it in ldpi , the layout just get disturbed by unknown padding (dont know what it is)
Correct image in hdpi and mdpi (how it should be displayed)
http://i.stack.imgur.com/OXw9G.png
Wrong image in ldpi
http://i.stack.imgur.com/wR3kw.png
code is the same, but dont know what happening in ldpi mode.
<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="*"
android:background="#color/Grey">
<TableRow>
<FrameLayout
android:id="#+id/inboxLargeButton"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/inbox_normal"
android:id="#+id/buttonWeddingDayCheatSheet"
android:layout_gravity="center_horizontal">
</ImageView>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="2631"
android:layout_gravity="bottom"
android:gravity="center"
android:textColor="#fff"
android:textSize="50dp" />
</FrameLayout>
<FrameLayout
android:id="#+id/outboxLargeButton"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ourbox_normal"
android:id="#+id/buttonShareFavoriteRecipe"
android:layout_gravity="center_horizontal">
</ImageView>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="0296"
android:layout_gravity="bottom"
android:gravity="center"
android:textColor="#fff"
android:textSize="50dp" />
</FrameLayout>
</TableRow>
</TableLayout>
In ldpi, its also showing extra padding between rows in subsecuent rows of images.
Any help?

As per earlier comment:
It's not unlikely the images are larger than visually required on ldpi, resulting in a scale down. By default, the bounds of the view do not change when downscaling. Try setting android:adjustViewBounds="true" to the ImageViews.