Center ImageView inside another ImageView in Android - android

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"

Related

displaying images at top center of the screen

I wanted to display image at the top center of the screen in andriod ,please let me know how to achieve this do i need to do any customization ?
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/ic_launcher" />
Thanks
use
android:layout_centerHorizontal="true"
you can do it if your parent layout is RelativeLayout like
<RelativeLayout android:layout_height="fill_parent"
android:layout_width="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/piopular"
android:id="#+id/userDp"/>
</RelativeLayout>
and
In LinearLayout, use: android:layout_gravity="center".
add these attributes
android:layout_width="match_parent" this will make the image width the size of the screen
android:layout_height="wrap_content" and the height scaled sized of the image's height
android:layout_alignParentTop="true" now this attribute only works in relative layout
make sure the image view is in a relative layout tag

Android - Place image in relativeLayout with proper size

I am working on a android card view. Here is the code that I have now:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="10dip"
android:orientation="vertical"
android:background="#drawable/drawable_card_bg">
<ImageView
android:id="#+id/photo"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/test_img" />
....
and the UI looks like:
However this is not what I am looking for. I want the image to be placed on top of the card, with the top, right, left margins to be 10dip from the background card boarder.
Meanwhile, I want to keep the ratio of the image, so don't want to hard-code the width/height of the image view. I want the image width to fit the width of the background card, and the height should be adjusted according to the width.
How should I change the layout parameters to achieve this?
Thank you
Add android:adjustViewBounds="true" to your ImageView in xml in order to let the ImageView adjust its bounds.
It's very easy......... please do this thing. Replace your imageview code using this one
<ImageView
android:id="#+id/photo"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:src="#drawable/test_img" />
If my answer will help you then support this.
Thanks!!!

RelativeLayout ignores second ImageView?

I have the following XML layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical">
<ImageView
android:id="#+id/IVLEFT"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:background="#ff0000"
android:padding="1dp"
/>
<ImageView
android:id="#+id/IVRIGHT"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_toRightOf="#+id/IVLEFT"
android:layout_alignParentRight="true"
android:layout_alignBottom="#+id/IVLEFT"
android:layout_alignTop="#+id/IVLEFT"
android:src="#drawable/shadow_pages"
android:background="#00ff00"
android:padding="1dp" />
</RelativeLayout>
I would expect my layout to have 2 ImageViews - one to the left, one to the right.
But what actually happens is:
During runtime I set IVLEFT's image to a large image (say 1024X768) - and it covers all of my layout, abandoning IVRIGHT (I cant even see it)
Any ideas?
It is because your RelativeLayout is wrap_content in width. it takes all the space it needs even if it is outside the screen.
Use fill_parent instead.
Its because you have given first ImageView width and height to fill_parent. So it will acquire the whole layout. Then also, your layout depends on your first image, because if you give a large image to the first Imageview, it will take the whole layout.
If you want to show 2 images side by side, try using linearlayout with layout_weights to two imageViews.
Also give your RelativeLayout width and height to fill_parent
Change the RelativeLayout width to fill_parent
There is no ImageView with the id = "#+id/magazineImageView" in your xml, if you mean "#+id/IVLEFT", then the 1st image itself is occupying the whole Screen width, hence you cannot see the 2nd image.
If you want to see the 2nd image make both the ImageView width as wrap_content or some hard coded value
More importantly when you are using any View id as a reference dont use + sign in the id. + sign is used to define an id for a view, for the first time
use:
android:layout_toRightOf="#id/magazineImageView"
Try this::
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical">
<ImageView
android:id="#+id/IVLEFT"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:background="#ff0000"
android:padding="1dp"
android:src="#drawable/ic_launcher"/>
<ImageView
android:id="#+id/IVRIGHT"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/IVLEFT"
android:layout_alignParentRight="true"
android:layout_alignBottom="#+id/IVLEFT"
android:layout_alignTop="#+id/IVLEFT"
android:src="#drawable/ic_launcher"
android:background="#00ff00"
android:padding="1dp" />
</RelativeLayout>

android, imageviews inside linear layout don't fit the screen size

I was wondering how to make the four images inside my LinearLayout look as big as possible depending on the screen. When I install the widget in my phone, it always fits only 50% of the screen.
Here comes the xml.
Any hints?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="center_vertical|clip_horizontal"
android:orientation="horizontal" >
<ImageView
android:id="#+id/hora1_current"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/neutro_on" />
<ImageView
android:id="#+id/hora2_current"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/neutro_on" />
<ImageView
android:id="#+id/minuto1_current"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/neutro_on" />
<ImageView
android:id="#+id/minuto2_current"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/neutro_on" />
Add android:weightSum="1" to your parent linear layout.
The linear layout should have android:orientation="horizontal"
Now to each of your image views , add android:layout_weight = 0.25.
Hope this works.
hope you read enough about orientation vertical and horizontal .
you should clear here that by filling screen whether you mean altogether all 4 fills the screen such that each takes 25% or every one should take 100% width and added up vertically .
for first case add android:layout_weight=1 for every imageView .
for second case replace android:orientation="horizontal" by android:orientation="vertical" in root LinerLayout
Don't use wrap content, instead use the actual dimensions of the image or fill parent.

Android layouts and automatic image resizing

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.

Categories

Resources