Develop Reference

Android, fit an image and textview into the screen

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>

RelativeLayout with background image scales incorrectly

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"

How to resize image appropriately and set its height and width in android

I know this may strike out as a dumb question but i bet some of you had this problem before.From the screenshot,i am attempting to set an image in an activity.However my image brings up these spaces i dont know how to get rid of them.I mean is there a way,either in xml or to programmatically resize image to fit the height and width?In short,is there a way i can get rid of these spaces above and below?
My xml:
<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="com.snappy.stevekamau.cosmeticsapp.Categories.Lips">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="#+id/app_bar"
layout="#layout/app_bar"></include>
<ImageView
android:id="#+id/imageTop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/white_rectangle"
android:src="#drawable/img4" />
<TextView
android:text="#string/hello_world" android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>

to make the bitmap fill the width and height you can add android:scaleType="fitXY" to your ImageView. This way your bitmap will be scaled in x and y independently, making your bitmap fill entirely the ImageView

Yes, it can be done by a single line of code. Here's the trick :)
android:adjustViewBounds="true"
Add this in ImageView.
<ImageView
android:id="#+id/imageTop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:background="#drawable/white_rectangle"
android:src="#drawable/img4" />

How to set imageview fit to sreen?

I have use the android studio and set the image view fit to screen using relative background image i give layout top margin and i set image view fit to screen below part
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:background="#drawable/backgroud">
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="500dp"
android:background="#drawable/blacksquare"
android:alpha=".33"
/>

Write the Following ImageView Tag in your Parent Layout.
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:background="#drawable/blacksquare"
/>
and you can also remove the Paddings from your parent Layout Tag to get fit the Image View in screen without padding..

Use following code for set image in full screen.
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/blacksquare"
android:alpha=".33"
android:layout_marginTop="10dp"
ScaleType="fitXY"
/>

Centering an ImageView in FullScreen mode

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>