I am making an image with my s4 Samsung device which I am trying to put as splash image for my app but I am facing problem that the image is being displayed horizontal and not vertical when I run the app on the device. At first, I put the image in the drawable-hdpi directory and later in drawable-mdpi, drawable-xhdpi and drawable-xxhdpi directories but I am getting the same result.
How can I fix it?
xml file
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background= "#drawable/splash_background"
>
</LinearLayout>
LinearLayout it's for oriented children not for background image. This post enter link description here
can help you
please change the orientation of your image using photoshop/paint or any other image editing software. then replace it with the old image.
Note:
android:orientation="vertical"
is not to change/ rotate the screen!!
orientation property of LinearLayout is defining the alignment of its child components. That means, if you add an ImageView and a TextView, the TextView will be added after the ImageView. Components will be added vertically.
If you need to change the orientation you go through layout for different screens.
and, the drawable-hdpi, mdpi, xxhdpi etc.. are to keep images depending on the device. The device will render images from any of the folder depending on its screen resolution. please read the above link at developer site, it is clear.
This works for me:
<?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:orientation="vertical">
<FrameLayout
android:id="#+id/fl_draw"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/splash_background"
android:scaleType="centerCrop" />
</FrameLayout>
</RelativeLayout>
Related
I set a single image (640x960) as follows:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.example.imagetest.MainActivity"
tools:showIn="#layout/activity_main">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:src="#drawable/launch_image"
android:scaleType="center"/>
</RelativeLayout>
Notice the scaleType is "center" which according to documentation means no scaling. When running on Nexus 5x, this image looks a lot bigger than the screen and is only partially displayed.
I read about android not using resolution directly. Then the question is how to calculate the size of an image that should fit the screen of a particular android device without scaling.
I understand Nine Patch image can be used to create splash images that will not distort the portion of image that should not be scaled. This question is partly for myself to better understand how image pixels relate to the screen of an actual device, and if using Nine Patch image is the only way to guarantee that the splash images will work on android devices of any screen dimensions.
Many thanks
scaleType centerInside should do the trick without having to make calculations in code
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:src="#drawable/launch_image"
android:scaleType="centerInside"/>
I have developed an android application. I used android:background property to make an image as background. But when it is displayed on square displays, the image keeps stretching.
How to make Android Background fit the screen without any stretching ?
I have seen many apps with images or videos that are non stretched , but fills the entire screen of the android phone.
My xml code is given below
<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=".MainActivity"
android:background="#drawable/Splash" >
</RelativeLayout>
You can try and use an ImageView rather than setting it to the background of the RelativeLayout
I have modified your code to look like this
<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=".MainActivity">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/Splash"/>
</RelativeLayout>
Only problem with this solution is that the image might be cut off at parts on some devices. To solve this issue you can create a few images with different aspect ratios for relevant devices and put them into the relevant drawable-xxxx folders.
Also have a look at this thread for other solutions that might suit your requirements better.
you need severalimage for different displays
Supporting Multiple Screens
In Android to support multiple screen you must have to add different images according to screen resolution and screen size.
For more details just visit these links:
Drawable folders in res folder?
http://developer.android.com/guide/practices/screens_support.html
You could use a FrameLayout and put ImageView as background
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imgPlaylistItemBg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:maxHeight="0dp"
android:scaleType="fitXY"
android:src="#drawable/img_dsh" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
</LinearLayout>
</FrameLayout>
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!
I've got a linear layout with layout_height set to wrap_content, so that the layout height is depending of the number of text lines in it.
The problem (that has driven me crazy all morning) is that I want to set an image as background of the layout, but to be sure the image can be used whatever the layout size, I've made the image quite big in height. The goal is for the image to be cropped in height if the layout is small. But I can't manage to do that: whatever I try, the layout is resizing according to the image height.
So, how can I set an image as background of something, but cropping itself so that it doesn't reisze parent layout (of course, I don't know the parent layout size because it depends on the text inside).
As english is not my first language, hope my question is clear...
Thank you in advance.
Edit: some code sample and screenshots:
This is the original card, without the image in background.
This is the code with the image view added:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/drill_background_img" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
... [Card Content Here]
</LinearLayout>
</FrameLayout
... and the result is my card is stretched to the height of my image. But I don't want that. I want the card the same size. But I cannot reduce image height, because, the card can have more text and be more tall, and so my image will have to be taller.
This is code for a Linear Layout that will be in center and adapt the size of text inside.
I have tested it .
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:orientation="vertical"
android:layout_centerHorizontal="true"
android:layout_marginLeft="25dp"
android:layout_marginRight="25dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tvInfo"
android:textColor="#ffffff"
android:background="#drawable/toast_frame"
android:gravity="center" />
</LinearLayout>
Give it a try it should work. Here I am using an Image that is small enough to fit the smallest size. Android will automatically strech it. I use 9patch Images for such cases. To know more about 9patch visit this Link from developer.android.com
Simple online tool to generate 9patch
Also check this SO Answer
I have uploded toast_frame.9.png file here so that you can test it with the code I have given above
**EDIT **
change
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/drill_background_img" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
... [Card Content Here]
</LinearLayout>
</FrameLayout>
to
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/drill_background_img">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
... [Card Content Here]
</LinearLayout>
</FrameLayout>
I hope this will work.
I don't think you can crop the image when using it as "background" attribute for any view.
Image will always be stretched to fill the whole background. Normally for background you should use Nine Patches. Get familiar with it and maybe you can change your functionality or UI spec to use them instead of normal images.
The only way I know of cropping the image is in the ImageView and it's image set by "src", not "background".
I would generally avoid using fixed size images in the components that can change size. You also have to remember that in Android almost everything change size when you think about different orientations, screen sizes, screen densities.
I think that background is always resized to fit container size. But you can use FrameLayout or RelativeLayout and ImageView.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="true">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
...your content here...
</LinearLayout>
</RelativeLayout>
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>