Develop Reference

'TextView' gets cropped on a Samsung Galaxy Tab

I have this simple 'XML' layout. I have tested in various devices and emulators and works fine. But on Galaxy Tab Samsung 9.6inch (1280x800) 157 dpi, text customer gets cropped in the end & becomes "custom".
I have read that i should declare dimens xml for various densities but i thought using DP is what makes your layout look the same in all devices. Am i wrong?
Also this tablet is a ldpi and x-large screen. I have tested it in other similar devices with similar specs and works well. How should i make this work for this device?
NOTE I want specifically 100dp to match others texts in width
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<TextView
android:id="#+id/labelSelGateName"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_paddingLeft="16dp"
android:text="customer" />
</LinearLayout>

There could be the issue of TextSize in that device. Have you tried playing with the text size?
Is this layout is in any other layout?

Its happening because u have used padding on whole side.just set padding only top and bottom as u have only fixed the width.then it should be worked
to support padding just follow below-
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<TextView
android:id="#+id/labelSelGateName"
android:layout_width="132dp"
android:layout_height="wrap_content"
android:layout_paddingLeft="16dp"
android:layout_paddingRight="16dp"
android:text="customer" />
</LinearLayout>

Understanding supporting different screen sizes relating to Images

I still have problems with the correct view for the images in my Application. So on my first device (5,2 inches & 480 density) it looks good.
On the second device (5,5 inches & 420 density) the image doesn't fit and it shows white borders.
This is the ImageView in my layout:
<ImageView
android:id="#+id/iv_image"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#id/tv_topic" />
I placed all my Images in the drawable folder after reading this on a Android Blog:
There are commonly two ways to target all screen DPIs.
1. Easiest way - Make all images to Extra High or Extra Extra High DPI.
Android auto-scales the drawables if the device does not match the drawable DPI. If the only drawables are created in high density, lower DPI screens will down-scale a resource to fit in a layout.
So I implemented all Images in the highest possible resolution ONCE in the drawable folder. Is it necessary to place them all in the specific folders (drawable-ldpi, drawable-mdpi ...)? It would mean that there will be multiple copies of my Image with always the same size.
And yes I read the official documentation of supporting multiple screens a couple times. However I have some problems understanding it.

I advice you to use the layout_weight attribute to keep the constant ratio between the ImageView and the question layout.
Change your layout to something like this :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="4">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/iv_image"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
<LinearLayout
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="3" />
</LinearLayout>

Incorrect background image being shown by XML Layout

I created an XML with a relativelayout that has a webview and a relativelayout inside it. What I did is that I load my app on the webview and the app logo below it using the relativeLayout1.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/urlContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<WebView
android:id="#+id/webView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/relativeLayout1" />
<ProgressBar
android:id="#+id/progressBar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" />
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:background="#drawable/footerl" >
</RelativeLayout>
</RelativeLayout>
But what happens is that the image is correct on portrait on small devices, but becomes distorted on larger devices or when on landscape mode(Once I rotate it). So what I did was I added different sizes of the image on the /res folder:
res/drawable-hdpi/footer.png
res/drawable-ldpi/footer.png
res/drawable-xdpi/footer.png
res/drawable-xxdpi/footer.png
each of the image has a different size, using the maximum width of every device(320px, 480px, 780px, 1200px)
I also used different layouts:
layout/activity_web.xml
layout-large/activity_web.xml
layout-xlarge/activity_web.xml
layout-xlarge-land/activity_web.xml
Still the logo below is distorted. All of the layouts are in portrait mode except the layout-xlarge-land which is in landscape mode. Should I create landscape modes for layout & layout-large ?
UPDATE
I tried Darnmason's answer by adding an image view to see if it will work even though it is rotated into landscape mode:
but what happens is that the image showing but it's width is similar to portrait mode. Did I miss anything as to why it is not stretching?

Using an image as a background doesn't give you much control over image scaling. I would recommend using an ImageView setting
android:src="#drawable/footer"
android:scaleType="centerCrop"
and maybe you'll need android:adjustViewBounds="true"
This will ensure the image fills the screen, cropping as necessary depending on the aspect ratio of the device. It would still make sense to have a portrait and landscape version but you won't have to care about the slight variances in aspect ratio between devices. Some are more wide-screen than others!

Images appearing distorted depsite putting them in the ldpi folder, they apper perfect in screenshots

I have some image resources that are properly sized and put into the drawable-land-ldpi and drawable-port-ldpi. When I see how the app looks, the images appear horizontally streched in landscape and vertically stretched in portrait.
However, if I take a screenshot with DDMS, they appear perfectly sized with no distortions at all! What's happening?
It's on android 4.0.3, an actual device. With the barest simple image layout.
<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"
android:background="#android:color/black"
tools:context=".MainActivity" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/imageb" />
</RelativeLayout>

design is not properly coming in multiple screen support size in android devices

I have created layout,layout-large, layout-small layout-xlarge layout_xlarge-land but if i have created emulator with giving resolution my design is coming good . but i have checked in devices samsung galaxy tab 7 inch and samsung nexus s but my design in not properly coming can anybody tell what is problem? otherwise how to do?
This is my layout for large screen
<?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:background="#FFFFFF"
android:layout_marginLeft="10dip"
android:orientation="vertical">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/black"
android:text="Large Screen" />
<fragment class="com.hcl.gcm.fragment.MeetingFragment"
android:id="#+id/meetingFrag"
android:layout_marginTop="200dip"
android:layout_width="match_parent"
android:layout_height="200dip"/>
<fragment class="com.hcl.gcm.fragment.MeetingRecieveFragment"
android:id="#+id/receivingFrag"
android:layout_marginTop="100dip"
android:layout_width="match_parent"
android:layout_height="200dip"/>
<fragment class="com.hcl.gcm.fragment.ButtonFragment"
android:id="#+id/btnFragment"
android:layout_marginTop="40dip"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
Thanks

The design for Multiple Screen size is always a difficult one in Android.
Some Guidelines I know:
Mostly Use Relative Layouts which suit any screen size.
If you design for different screen sizes, then using different size images are good.
Try to use Nine Patch PNGs for Button backgrounds.
Design a separate App if you develop App also for Tablets. Because Tablet users want rich graphic UIs.
Always check UI in multiple size emulators during development.