I'm having issues with a 9patch image. The layout is set to 50dp with a 9patch background, but when loaded on small screens the layout is larger than 50dp.
However I have another layout with the same 9patch background (menuBtn) and that doesn't expand so I'm not sure what is making the 9patch misbehave on this one layout.
SS:
<?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="50dp"
android:padding="0dp"
android:background="#drawable/actionbar">
<RelativeLayout
android:id="#+id/menuBtn"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#drawable/actionbar"
android:clickable="true">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/actionbar_menu"/>
</RelativeLayout>
<ImageView
android:id="#+id/div1"
android:layout_width="1px"
android:layout_height="50dp"
android:layout_toRightOf="#id/menuBtn"
android:src="#drawable/actionbar_divider"/>
</RelativeLayout>
9patch img:
Figured it out, it's a weird bug? Anyway the 9patch is taller than 50dp on the small screen size so with the base background set to actionbar, it doesn't scale.
However if I nest another RelativeLayout inside the main RelativeLayout and set that background to actionbar, then it scales just fine. Not sure why the original RelativeLayout doesn't.
Example:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:padding="0dp">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="50dp"
android:padding="0dp"
android:background="#drawable/actionbar">
</RelativeLayout>
</RelativeLayout>
This code works, so yeah...
Related
I have one RelativeLayout with a background image. Inside it, I have another RelativeLayout with a background color. I want the second RelativeLayout be in the middle of the first one, but it gets wrong scales depending on the screen size.
Here's the code:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0099cc">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp">
<RelativeLayout
android:id="#+id/cellphone"
android:layout_marginLeft="80dp"
android:layout_marginBottom="120dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:background="#drawable/cellphone">
<RelativeLayout
android:id="#+id/cellphone_screen"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="40dp"
android:layout_marginBottom="40dp"
android:background="#e34579">
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
Screenshot of a large screen device:
Screenshot of the same code, but of a small screen device:
As you can see, the yellow border should not be visible.
How can I fix it?
P.S.: I have the background image (cellphone.png) in all sizes (from drawable-ldpi to drawable-xxxhdpi).
EDIT:
The cellphone.png image in xxhdpi:
You need to manage margins according to device using dimens.xml
<RelativeLayout
android:id="#+id/cellphone_screen"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="#dimen/marginLeft"
android:layout_marginRight="#dimen/marginRight"
android:layout_marginTop="#dimen/marginTop"
android:layout_marginBottom="#dimen/marginBottom"
android:background="#e34579">
</RelativeLayout>
Try Removing Margins from your Main RalativeLayout
android:layout_marginLeft="#dimen/marginLeft"
android:layout_marginRight="#dimen/marginRight"
android:layout_marginTop="#dimen/marginTop"
android:layout_marginBottom="#dimen/marginBottom"
Well I have to fit one ImageView inside another one. It is smaller and has to be exactly at the center. I have both images scaled for different screen resolutions but I can test only on one phone and I am wondering if I set the second image's height and width with dpi to fit my screen resolution will it be perfectly matched on all screens or is there any property in Android aside from setting the height and width that will automatically center one ImageView inside of other ImageView?
Edit: It's in RelativeLayout and the ImageViews are at the top left so I haven't added anything specific to the because they by default are there.
Edit2: Well changing the first ImageView to be RelativeLayout helps center the second image inside of it but then the RelativeLayout grows too big and enlarges the image that is background. Is there a way to make the RelativeLayout be as big as its background?
try this
<?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" >
<RelativeLayout
android:layout_width="250dp"
android:layout_height="250dp" >
<ImageView
android:id="#+id/base"
android:layout_height="250dp"
android:layout_width="250dp"
android:src="#drawable/home"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
<ImageView
android:id="#+id/center"
android:layout_height="150dp"
android:layout_width="150dp"
android:src="#drawable/home"
android:layout_centerInParent="true"
android:layout_centerVertical="true" />
</RelativeLayout>
</RelativeLayout>
You cannot put an imageView inside another. Hope the following code will be helpful for you.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background_image"
android:gravity="center" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/image_on_center" />
</LinearLayout>
Use RelativeLayout and then use android:layout_centerInParent="true" remember the order you add the ImageViews will decide what is on top :)
Try this:
android:layout_gravity="center"
I have a LinearLayout that has only images in it. The image size is reduced as the height of the layout is not sufficiant. Images are sized correctly.
However: The width of the LinearLayout is too wide. It is actually the size the images would have if adjustviewbound=false would be set instead of true as it is in my case.
This appears to be a problem with the RelativeLayout around it. If I use a LinearLayout for the page, the calculation is correct.
Any ideas how to get the correct width? (no, I can not change the RelativeLayout).
Here is the layout for you to try (I used Android 4.3 API 18):
<?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" >
<LinearLayout
android:id="#+id/map_Test"
android:layout_width="wrap_content"
android:layout_height="10dp"
android:background="#color/red"
android:orientation="horizontal" >
<ImageView
android:id="#+id/map_DrillDownImage1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#android:drawable/ic_dialog_alert" />
<ImageView
android:id="#+id/map_DrillDownImage2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="2dp"
android:adjustViewBounds="true"
android:src="#android:drawable/ic_dialog_email" />
</LinearLayout>
</RelativeLayout>
I have a horizontal linear layout that contains 3 image views. Each image view contains the same image which is 200x200 pixels. Here is my layout xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/image200" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/image200" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/image200" />
</LinearLayout>
</RelativeLayout>
And here is what it looks like:
Notice how the third image from the left is resized I assume because there is not enough real estate to contain 3x 200 pixel wide images.
What I would rather happen is instead of shrinking only the last image, all three images are resized evenly so that they all fit across the screen. How do I setup my layout to evenly fit all three images?
Thank you
UPDATE - after changing my settings here is what things look like:
Notice that the border around the image view is still 200 px high. Why is this happening?
Set Width and height to match_parent for imageviews and set layout_weight=1 for all imageviews. Also set Attribute android:scaleType="fitXY"
This worked perfectly for me:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:adjustViewBounds="true"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<ImageView
android:adjustViewBounds="true"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<ImageView
android:adjustViewBounds="true"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
Layout width when set to 0dp, layout width is what came into picture. And here layout width of the LinearLayout is match parent. So it will take the whole width, and as per the layout width of the images, they take space in the ratio of there weight.
make your three images a width of 0dp
and add them a layout_weight of 1
;)
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/image200" />
#JanTacci Regarding your follow up question "Note, however, that even though the image has been shrunk the actual layout height is still 200 px. Why is this happening?"
I just had the same issue and fixed it by adding this property to each ImageView:
android:adjustViewBounds="true"
My android app currently has two layouts for its splash screen, portrait and landscape. Both use the same simple format - an image that's the same size as the screen, held in a simple linear layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitCenter"
android:src="#drawable/splash_p"
/>
</LinearLayout>
The image used is 320w x 480h and Android automatically resizes it to fit the screen, irrespective of the screen size of the device. Obviously, the image isn't as sharp when resized for a tablet for example.
I should point out here that my goal is to reduce the installed size of the final application as much as possible, and I'm aware that I could include different layouts and sizes of the same images for each differing screen size.
My splash screen is made up of the app's name in the top third of the screen, and then an image in the bottom two thirds of the screen. In order to save memory, I want to crop the app name and the image into two seperate images, and then display them in a linear vertical layout for devices held in portrait mode. I'll then use a linear horizontal layout of image and then app name for landscape mode.
For the portrait layout I've got this:
<?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:orientation="vertical">
<LinearLayout android:id="#+id/linearLayout1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical">
<View android:layout_height="45dp" android:layout_width="45dp" />
<ImageView android:layout_height="fill_parent"
android:src="#drawable/splashtext"
android:scaleType="fitCenter"
android:layout_gravity="center"
android:layout_width="fill_parent"></ImageView>
<View
android:layout_height="35dp"
android:layout_width="35dp" />
<ImageView
android:scaleType="fitCenter"
android:src="#drawable/splashpic"
android:layout_height="fill_parent" android:scaleType="fitCenter" android:layout_width="fill_parent" android:layout_gravity="center"/>
</LinearLayout>
</LinearLayout>
When I display the above in eclipse, it looks ok for smart phones, but the images are not scaled up when displayed on a tablet, although I'm using the android:scaleType="fitCenter" argument. I've tried using dips instead of fill_parent in the imageview layout_width and layout_height but that doesn't work either.
What am I doing wrong? Is there another way to do this?
Thanks
I've edited the question to include this revised XML based on #KaHa6u 's help below. So now I have:
<?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:orientation="vertical">
<LinearLayout android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<View
android:layout_height="15dp"
android:layout_width="15dp"
/>
<ImageView android:layout_height="wrap_content"
android:src="#drawable/splashtext"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_weight="1">
</ImageView>
<View
android:layout_height="15dp"
android:layout_width="15dp"
/>
<ImageView
android:scaleType="fitXY"
android:src="#drawable/splashpic"
android:adjustViewBounds="false"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="4"
android:layout_gravity="center"/>
</LinearLayout>
</LinearLayout>
Which scales up vertically, but not horizontally, so I end up with tall thin images when the screen size increases.
#basinbasin
I just encountered a situation very similar to the one you explained. I needed to have an ImageView on top of the layout, which had to be stretched ONLY HORIZONTALLY and retain its height when the phone gets into landscape orientation. I succeeded with just this:
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/main_header"
android:scaleType="fitXY"
/>
and, of course, with activity's attribute:
<activity android:configChanges="keyboardHidden|orientation">
Hope this helps. Thank you.
The fitCenter scaleType maintains the original aspect ratio. Have you tried the fitXY scaleType? Matrix.ScaleToFit Documentation
Did you try "fill_parent" as the android:layout_height and android:layout_width values for the ImageView you want stretched?
I guess that the "wrap_content" setting does not let the system know the bounds to which to resize the image. Please try that and let me know of the results.