I am simply trying to center an ImageView in a FullScreen app. I've read several posts on this site on people asking what seems like same question, and I've tried everything I've read, but I can't seem to get it to center.
Here is my code for the layout. I realize there might be some overkill here to get the centering, as a result of trying various other posts. This code puts the image on the top left part of the screen.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:background="#000000"
android:orientation="vertical" >
<ImageView
android:id="#+id/image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="false"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:adjustViewBounds="true"
android:background="#android:color/black"
android:contentDescription="#string/descImage"
android:cropToPadding="false"
android:gravity="center"
android:src="#drawable/placeholder" />
Here is my full screen code in AndroidManifest.xml.
android:screenOrientation="landscape"
android:theme="#style/Theme.FullScreen">
Theme.FullScreen is defined as
<style name="Theme.FullScreen" parent="#android:style/Theme.Holo">
<item name="android:windowNoTitle">false</item>
<item name="android:windowFullscreen">true</item>
</style>
Thanks.
Try this. It works find on my galaxy nexus w/ 4.2 (I just changed width & height of image view as wrap_content and remove unnecessary & meaningless attributes.)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#000000">
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:background="#android:color/black"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
and for theme...
<style name="Theme.FullScreen" parent="android:Theme.Holo.NoActionBar.Fullscreen"/>
That seems very excessive for what you're trying to do. Try this?
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:contentDescription="#string/descImage"
android:src="#drawable/placeholder" />
</FrameLayout>
If you use fill_parent for the size, the entire view will not be centered in the parent, because it is the size of the parent.
If you change the size to wrap_content, the bounding box of the view will change, and that will be centered inside of the parent.
You could also use the android:scaleType property for the imageView specifying how the image resource itself should be layed out inside of the view.
The default scaleType will cause the resource image to appear in the top left corner of the ImageView, if the bouding box is larger then the actual image itself.
You can also use the android:adjustViewBounds property to have the OS automatically resize the bounding box for you, based on the image resource.
Use scaleType="fitCenter" on the ImageView.
fill_parent has been replaced with match_parent in later Android versions and I've using an SVG drawable resource, so I had to modify the answers above slightly.
This is what worked for me:
<?xml version="1.0" encoding="utf-8"?>
<android.widget.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"
tools:context="com.example.MyActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter"
app:srcCompat="#drawable/my_drawable" />
</android.widget.RelativeLayout>
Related
I added a fragment with an ImageView, which is a PNG image, and a TextView just below it.
The fragment is showing fine but when I rotate the screen the image will take most of the screen and the TextView is partially cut.
Here's the 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">
<ImageView
android:id="#+id/shopping_cart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/shopping_cart" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_below="#id/shopping_cart"
android:text="#string/no_data"
android:gravity="center"/>
</RelativeLayout>
I'm trying to find a way to resize the image in order to show both image and text in the screen
try using a scroll-view as the root element if u want to retain the same image size rather than resizing the image. Here's a small snippet -
<ScrollView
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:fillViewport="true">
<RelativeLayout
android:id="#+id/container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
(all your view elements)
</RelativeLayout>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/text_image_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
(Enter view here)
</LinearLayout>
Alright, so firstly ensure that you have the image for the ImageView in all densities. I would suggest that you use this attribute in your ImageView code:
https://developer.android.com/reference/android/widget/ImageView.ScaleType.html
The scale type defines how your image should scale according to the view. I faced a similar issue once, and i was able to solve it using this. Having said that, i have not seen the image you are using, so i cannot be very sure of it. But, i would say that you use:
android:scaleType="centerCrop"
you can find the definition of the attribute on the link provided above. Also, i do not know what devices you are targeting for your app, but its always good to keep views inside a scroll view so that they are visible even on a smaller screen.
Give it a try, if not by centerCrop, then maybe by some other attribute.
Cheers!!
Here is the 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:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/shopping_text"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="#string/no_data"/>
<ImageView
android:id="#+id/shopping_cart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/shopping_text"
android:src="#drawable/shopping_cart"/>
</RelativeLayout>
I am trying to achieve the following screenshot in android.
To get Round Image I have Round Image Library from here:
https://github.com/vinc3m1/RoundedImageView
So I tried the following code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/marker"
android:orientation="horizontal" >
<com.ylg.RoundImageView
android:id="#+id/profilePhoto"
android:layout_width="80dp"
android:layout_height="80dp"
android:gravity="center_horizontal"
android:src="#drawable/profilepic" />
but I ended up getting error:
NOTE: This project contains Java compilation errors, which can cause rendering failures for custom views. Fix compilation problems first.
Exception raised during rendering: Index: 0, Size: 0
I need 9 patch to my marker image: Which I did below:
What could be wrong here. How do I achieve the abouve screenshot in my layout xml?
just play with margin to fit it exactly:
<LinearLayout 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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:orientation="vertical"
>
<RelativeLayout
android:layout_width="130dip"
android:layout_height="130dip"
android:background="#drawable/bg" >
<com.example.mmlooloo.RoundedImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/imageView1"
android:layout_width="90dip"
android:layout_height="90dip"
android:layout_centerHorizontal="true"
android:layout_marginBottom="15dip"
android:layout_marginTop="10dip"
android:scaleType="centerCrop"
android:src="#drawable/profile"
app:border_color="#0000FF"
app:border_width="2dip"
app:corner_radius="80dip"
app:oval="true" />
</RelativeLayout>
</LinearLayout>
and:
<resources>
<!-- Default screen margins, per the Android Design guidelines. -->
<dimen name="activity_horizontal_margin">16dp</dimen>
<dimen name="activity_vertical_margin">16dp</dimen>
</resources>
result:
Can't you use FrameLayout like this?
<FrameLayout 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="com.example.testproject.MainActivity" >
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/bg" >
</ImageView>
<ImageView
android:id="#+id/overlay"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ic_launcher"/>
</FrameLayout>
I used your border image as #drawable/bg and I am getting this output:
In your case, image of user will be smaller than border image, so that should fit.
Hope this helps.
Try setting the background of ImageView to a drawable(xml) resource containing the background image and set the ImageView src to your desired picture. This should solve your problem.
EDIT
Try this code
<ImageView
android:id="#+id/img_chatUserImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:background="#drawable/bb"
android:paddingBottom="40.0dip"
android:paddingTop="10.0dip"
android:paddingRight="10.0dip"
android:paddingLeft="10.0dip"
android:src="#drawable/ic_smiley"/>
where 'bb' is the backgournd white image and src contains the actual image tat is displayed over it.
I have adjusted my padding accordingly.If the image size varies then wrap the imageview in another LinearLayout and set the background and padding to it and position the image view inside it and fix the size so it always remains inside the white border
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...
I have this simple layout XML, and a green_square.png file which is 30X30 pixels
<?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" >
<ImageView
android:background="#color/red"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:scaleType="fitStart"
android:src="#drawable/green_square"/>
</LinearLayout>
What I'm trying to achieve is scaling the image to fill the parent width, keeping it's aspect ratio with no extra space of the ImageView.
I've added a red background to the ImageView just for reference of the extra space I want to avoid.
Here is my goal
<ImageView
android:id="#+id/game"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:src="#drawable/ic_game"
/>
this works for me. Full width of parent and center crop to keep aspect ratio
It's so simple. Just make the width fill_parent and height wrap_content. Here is the I figured it out.
<ImageView
android:id="#+id/game"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:src="#drawable/ic_game"
/>
In my view, this ImageView extra layout is a bug. I had the same thing happen. As a result, text that I wanted to follow the green_square followed the extra layout. So what I did was specify the text relative to the bottom of the screen. That way, the text would go over the extra layout. I admit, it wasn't the best solution, but it looks much better than having a huge space between the green_square and the text.
There lots of great answers here which actually works. I just what to share the way I do this now with a more modern XML syntax, the constraint view. Trust me constraint view rooks!
<android.support.constraint.ConstraintLayout 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"
android:background="#394BAB"
tools:context="com.appdomain.app.apppro.ActivityName">
<ImageView
android:id="#+id/nice_img"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="0dp"
android:src="#drawable/green_square"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
of course the
tools:context="com.collectsavings.collect.collectpro.LoginAndRegisterPrompt"
and
android:src="#drawable/green_square"
Should all match your app activity context and drawabl resources respectively.
Use scale type "fitCenter" or "fitxy"
Try 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" >
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/red"
android:scaleType="centerCrop"
android:src="#drawable/green_square" />
</LinearLayout>
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.