Develop Reference

android layout leaving small gaps

So I have a image view and below a relative layout. The desired is to always have the users see the text views and buttons in the nested layout. And the image is a top image ( not a full screen background) but some how there is a small gap and the background of the image is bleed past the image view. I have tried different Image scale types and different layouts completely(frame, all linear,etc..)
http://imgur.com/a/n4aIq
and some code
https://gist.github.com/whatkai/92f66d2322957d86dd3fe28a9a5d03c0
FYI layout-weights left gaps too.

There is too many ways to do it.
Try this solution using LinearLayout (orientation: vertical):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="#+id/REFragment"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:background="#color/accidentAssistanceColor">
<ImageView
android:id="#+id/SettingsImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:contentDescription="#string/app_name"
android:scaleType="fitXY"
android:src="#drawable/ers"
android:layout_weight="1"/>
<LinearLayout
android:background="#color/appStartERSBackground"
android:layout_centerHorizontal="true"
android:id="#+id/onView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/SettingsImage"
android:gravity="bottom|clip_vertical|center"
android:orientation="vertical">
<Button
android:gravity="bottom|end"
android:layout_centerHorizontal="true"
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#android:color/transparent"
android:text="Not Now"
android:textColor="#color/white"/>
<Button
android:id="#+id/button2"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/button"
android:text="approve"
android:textColor="#color/white"/>
<TextView
android:gravity="center_horizontal|center_vertical"
android:id="#+id/text2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/button2"
android:layout_gravity="center"
android:text="BLdfdsAH"
android:textColor="#color/white"/>
<TextView
android:gravity="center_horizontal|center_vertical"
android:id="#+id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="BLAH"
android:textColor="#color/white"
android:textSize="20sp"
android:textStyle="bold"/>
</LinearLayout>
</LinearLayout>
And to answer you about how to scall your image i used android:scaleType fitXY to respect to ratio aspet.
If you desire to understand how every scallType works, see the following link:
https://robots.thoughtbot.com/android-imageview-scaletype-a-visual-guide

set view tag between your image and layout.
like this.
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#000000" />

android layout background image is not showing properly

i have used a background image for a layout in a text sending app.The background image is showing properly in the layout view( in IDE ) but when i am running the app on emulator/phone the quality of the image gets degraded.here is the xml code for the layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/black_bg">
<TextView
android:id="#+id/phoneNum"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Enter Recipient: "
android:textAppearance="?android:attr/textAppearanceLarge"
android:background="#00000000"
android:textColor="#B3FFFFFF" />
<EditText
android:id="#+id/editPhoneNum"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="phone" >
</EditText>
<TextView
android:id="#+id/SMSLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Enter Your Text: "
android:textAppearance="?android:attr/textAppearanceLarge"
android:background="#00000000"
android:textColor="#B3FFFFFF" />
<EditText
android:id="#+id/editSMS"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="textMultiLine"
android:lines="5"
android:gravity="top" />
<Button
android:id="#+id/button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Send" />
</LinearLayout>
any help would be greatly appreciated.

You should put the various size images into the followings folder
for more detail visit this link
ldpi
mdpi
hdpi
xhdpi
xxhdpi

How to implement correct UI for several screens in android

Here i am trying to handle different screens ,These are several screens i am trying to handle ,Here if i adjust for one screen remaining screens getting error ,not getting what is problem
here is
Here is my code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/transactionpagebg" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="160dp"
android:gravity="center"
android:paddingLeft="50dp"
android:text="Current Meter Reading"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#android:color/white" />
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:gravity="center"
android:orientation="horizontal" >
<EditText
android:id="#+id/editText1"
android:layout_width="130dp"
android:layout_height="wrap_content"
android:inputType="number" />
<Spinner
android:id="#+id/spinner1"
android:layout_width="150dp"
android:layout_height="50dp" />
</LinearLayout>
<AbsoluteLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<Button
android:id="#+id/saveButton"
android:layout_width="113px"
android:layout_height="wrap_content"
android:layout_x="61dp"
android:layout_y="330dp"
android:background="#drawable/savebutton" />
<Button
android:id="#+id/settingsButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="208dp"
android:layout_y="330dp"
android:background="#drawable/settingbutton" />
</AbsoluteLayout>
</RelativeLayout>

to do as it need to be, you need to have support for different screen sizes you need to have different layouts, and also some changes in your manifest file...
check this question How to support different screen size in android
and this link http://developer.android.com/guide/practices/screens_support.html

There are many ways to make each view look right on various screens. However, I have found two methods are working best for me (at the moment):
To get the views to dynamically set their screen positions, wrap the widgets in a LinearLayout (LL), and put those LLs in a single LL. Set the weight of the inner LL to 1, and they will space themselves equally within the parent LL. This works for horizontal and vertical layouts. The distance between the widgets gets adjusted automatically by the OS.
create different dimens.xml folders/files for the different screen sizes (small, medium, large) and further differentiate them by density of needed (mdpi, hdpi, xhdpi, etc.). This way you can set margins, paddings, font sizes, for each size/density to get what you want.
EDIT: I see you put "TRANSACTION" in the background drawable? You can't do that! You need to create an image with just the text, and put it in an ImageView at the top of the layout. That way, you can set its position and size as needed for different screens, and make the other widgets adjust their positions relative to that image.
Even better would be to find a free font (ttf file) you can use that matches what you want, and put it in a TextView.
Here is a quick example of your layout with the ideas I mentioned. You would put the margins and font sizes in a dimens.xml file, so that you can adjust them.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0000ee"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/hh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="36dp"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="36dp"
android:text="TRANSACTION"
android:textColor="#ffffff"
android:textSize="28sp" />
<TextView
android:id="#+id/test_textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Current Meter Reading"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#android:color/white" />
</LinearLayout>
<LinearLayout
android:id="#+id/test_linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal" >
<EditText
android:id="#+id/test_editText1"
android:layout_width="130dp"
android:layout_height="wrap_content"
android:layout_marginRight="24dp"
android:background="#ffffff"
android:inputType="number" />
<Spinner
android:id="#+id/test_spinner1"
android:layout_width="150dp"
android:layout_height="50dp"
android:background="#999999" />
</LinearLayout>
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1" >
<Button
android:id="#+id/test_saveButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="24dp"
android:text="Save" />
<Button
android:id="#+id/test_settingsButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>

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.

I would Like to make this screen resolution good for all size of screen what i should change

I have few screen i my app and i try to make them good for all size of screen but no successful so i attach the screen and hope for help.
what i would like to get in this screen is:
1.the widget43 to be on top of the screen
2.the widget49 in the middle of the screen
3.the widget47 the problem one in the bottom of the screen even if the widget49 don't take all the space.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="#+id/widget42"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android"
>
<RelativeLayout
android:id="#+id/widget43"
android:layout_width="fill_parent"
android:layout_height="34px"
android:background="#color/blue"
>
<TextView
android:id="#+id/convertedTitleTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
>
</TextView>
<Button
android:id="#+id/convertedBackButton"
android:layout_width="wrap_content"
android:layout_height="32px"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:onClick="backButtonOnClick"
android:text="Back" android:typeface="monospace" android:textColor="#color/white" android:textColorHint="#color/blue" android:background="#color/blue">
</Button>
<Button
android:id="#+id/convertedCancelButton"
android:layout_width="wrap_content"
android:layout_height="32px"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:onClick="cancelButtonOnClick"
android:text="Cancel" android:background="#color/blue" android:textColor="#color/white">
</Button>
</RelativeLayout>
<RelativeLayout
android:id="#+id/widget49"
android:layout_width="fill_parent" android:layout_gravity="bottom" android:layout_height="310dip">
<ListView
android:layout_width="fill_parent"
android:layout_alignParentTop="true"
android:id="#+id/convertedListView" android:hapticFeedbackEnabled="true"
android:layout_below="#+id/widget47" android:layout_above="#+id/widget49" android:layout_alignBottom="#+id/widget43" android:layout_height="match_parent">
</ListView>
</RelativeLayout>
<RelativeLayout android:id="#+id/widget47" android:background="#color/blue" android:layout_width="match_parent" android:layout_height="wrap_content">
<TextView android:layout_centerVertical="true" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_centerHorizontal="true" android:id="#+id/countConvertedTextView" android:text="TextView"></TextView>
</RelativeLayout>
</LinearLayout>
thanks for helping!!!

what bad is going on with different screen size? better to put different size images in different drawable folders as i mentioned below.
drawable
drawable-hdpi
drawable-ldpi
drawable-mdpi

Do one thing...add this property in the relative layout which has id of widget47
android:layout_below="#+id/widget49"
So your relative layout will look like
<RelativeLayout android:id="#+id/widget47"
android:layout_below="#+id/widget49" android:background="#color/blue"
android:layout_width="fill_parent" android:layout_height="wrap_content">