Develop Reference

Different size of ImageView on different devices

I have a little problem with ImageView on differents screens with different dpi like this:
On second screen there are original dimensions of imageviews. But on first screen images are bigger and moved out. How i can set proportional dimensions and margins to ImageView.
Here is my code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/textLayoutIntro">
<ImageView
android:id="#+id/first_slide_second_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#mipmap/first_slide_second_image"
android:layout_alignParentStart="true"
android:layout_alignStart="#+id/firstSlideTelephone"
android:layout_marginTop="100dp"
android:layout_marginStart="20dp"/>
<ImageView
android:id="#+id/first_slide_third_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/first_slide_third_image"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
android:layout_alignParentEnd="true"
android:layout_alignEnd="#+id/firstSlideTelephone"
android:layout_marginEnd="30dp"
android:layout_marginTop="100dp"/>
<ImageView
android:id="#+id/firstSlideTelephone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/first_slide_telephone"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:scaleType="centerInside"/>
<ImageView
android:id="#+id/first_slide_first_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#mipmap/first_slide_first_image"
android:layout_marginStart="-30dp"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true"
android:maxWidth="138dp"
android:maxHeight="138dp"/>
<ImageView
android:id="#+id/first_slide_fourth_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#mipmap/first_slide_fourth_image"
android:layout_alignParentBottom="true"
android:layout_marginBottom="100dp"/>
</RelativeLayout>
Thanks in advance)

Instead of RelativeLayout, use constraintlayout with vertical and horizontal guidelines. That way, the content sizes up or down to whatever device screen size. Like the sample below.
<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:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorAccent"
android:clickable="true"
tools:context="com.example.example.Fragments.ExampleFragment">
<android.support.constraint.Guideline
android:id="#+id/fragment_guideline_v_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.1" />
<android.support.constraint.Guideline
android:id="#+id/fragment_guideline_v_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.9" />
<android.support.constraint.Guideline
android:id="#+id/fragment_guideline_h_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.1" />
<android.support.constraint.Guideline
android:id="#+id/fragment_guideline_h_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.9" />
<ImageView
android:id="#+id/imageview"
android:layout_width="0dp"
android:layout_height="0dp"
android:contentDescription="#string/none"
app:layout_constraintStart_toEndOf="#+id/fragment_guideline_h_1"
app:layout_constraintEnd_toStartOf="#+id/fragment_guideline_h_2"
app:layout_constraintTop_toBottomOf="#+id/fragment_guideline_v_1"
app:layout_constraintBottom_toTopOf="#+id/fragment_guideline_v_2"
app:srcCompat="#drawable/forgot_password_arrow_back" />
</android.support.constraint.ConstraintLayout>

I've had same problem but I've found this: https://github.com/intuit/sdp
It's a library with dimensions represented by sdp. It just library with dp but scaled for different screen sizes.

You can use percentage for ImageView width and height. For example, use ConstraintLayout and for ImageView:
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_constraintWidth_percent="0.7" />

It's possible to solve many ways. The above bros already said possible to solve by Constraint layout.
It's also possible to solve by Linear layout. Just use weight_sum. Add 2 View add the top and bottom and at the middle add your image. Weight perfectly work dynamically (may you know).
But if I was in this situation, I would be solved it using sdp & ssp library. The library most of the time works perfectly.
only for font/text size: ssp. &
For any others except font: sdp

How to Scale images to imageview perfectly with fixed width and height without distorting the image in Android

Iam creating an app to access images from gallery or camera. For this i have an imageview with 280/280dp dimension. How to Scale images from camera/gallery(which are bigger images) to below imageview perfectly having fixed width and height without distorting the image in Android:
<ImageView
android:layout_width="280dp"
android:layout_height="280dp"
android:id="#+id/mainImage"
android:background="#drawable/profile_settings_main_image"
android:layout_marginTop="19dp"
android:layout_below="#+id/container_toolbar"
android:layout_centerHorizontal="true"
android:focusable="false"
android:adjustViewBounds="true"
/>
activity_main.xml(Full 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"
tools:context="in.ABC.activity.ProfileSettings"
android:background="#93BFB6">
<LinearLayout
android:id="#+id/container_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
</LinearLayout>
<TextView android:layout_width="230dp"
android:layout_height="50dp"
android:textSize="22sp"
android:background="#drawable/profile_settings_name"
android:id="#+id/nameView"
android:textColor="#000000"
android:layout_marginTop="20dp"
android:layout_below="#+id/mainImage"
android:layout_alignLeft="#+id/mainImage"
android:layout_alignStart="#+id/mainImage"
android:layout_marginRight="1dp"
android:gravity="center"/>
<ImageView
android:layout_width="280dp"
android:layout_height="280dp"
android:id="#+id/mainImage"
android:background="#drawable/profile_settings_main_image"
android:layout_marginTop="19dp"
android:layout_below="#+id/container_toolbar"
android:layout_centerHorizontal="true"
android:focusable="false"
android:adjustViewBounds="true"
/>
<ImageButton
android:layout_width="50dp"
android:layout_height="100dp"
android:id="#+id/editName"
android:background="#drawable/profile_settings_image"
android:layout_alignTop="#+id/nameView"
android:layout_toRightOf="#+id/nameView"
android:layout_toEndOf="#+id/nameView"
android:layout_alignBottom="#+id/nameView" />
<ImageButton
android:layout_width="50dp"
android:layout_height="50dp"
android:id="#+id/editImage"
android:background="#drawable/profile_settings_image_2"
android:layout_alignBottom="#+id/mainImage"
android:layout_alignRight="#+id/mainImage"
android:layout_alignEnd="#+id/mainImage"
android:focusable="true" />
</RelativeLayout>

If the image's scale factor doesn't match the ImageView's scale factor, then you cannot match the height/width without sacrificing the clarity. You'll have to compromise and decide if you want to have some of the image cut off, or have the entire image fit inside but acknowledge that there will be some left over space.
See here for more information regarding android:scaleType http://www.techrepublic.com/article/clear-up-ambiguity-about-android-image-view-scale-types-with-this-guide/

You can try Android ImageView.ScaleType:
<ImageView
android:layout_width="280dp"
android:layout_height="280dp"
android:id="#+id/mainImage"
android:background="#drawable/profile_settings_main_image"
android:layout_marginTop="19dp"
android:layout_below="#+id/container_toolbar"
android:layout_centerHorizontal="true"
android:focusable="false"
android:adjustViewBounds="true"
android:scaleType="fitXY"
/>
Result of the code:
Result of the code
The original image:
Original Picture

Android: ImageView display fail with big size

I have a problem with ImageView as below:
I have an image with big size (bigger than its part in screen), when I set src for imageView as:
<ImageView
android:id="#+id/splash_second_iv_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:src="#drawable/phone_white"
android:layout_toLeftOf="#id/middle"
android:visibility="visible"
android:padding="0dp"
android:layout_marginBottom="0dp"/>
then I put it into a RelativeLayout, problem is the content of image is displayed as wrap in the ImageView but size of ImageView is very big (seems as it auto create padding in the image view in four sides of ImageView, since my calculation for layout fails (can not align property position of child)).
Anybody can tell me what's the problem in here and how do I resolve this problem?
Please have a look at the image to have a better understanding. Also I added attribute:
android:adjustViewBounds="true"
android:scaleType="fitEnd"
I can align the content as I want but size of ImageView still very big.
The xml file:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:id="#+id/splash_slide_forth">
<TextView
android:id="#+id/splash_forth_tv_title"
android:paddingLeft="60dp"
android:paddingRight="60dp"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal"
android:text="#string/splash_4th_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:textColor="#2b333b"
android:layout_marginTop="40dp"
android:textSize="28sp"
/>
<TextView
android:gravity="center_horizontal"
android:layout_below="#id/splash_forth_tv_title"
android:id="#+id/splash_forth_tv_desc"
android:paddingLeft="60dp"
android:paddingRight="60dp"
android:layout_centerHorizontal="true"
android:text="#string/splash_4th_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#2b333b"
android:layout_marginTop="10dp"
android:textSize="15sp"
/>
<ImageView
android:layout_below="#id/splash_forth_tv_desc"
android:id="#+id/splash_forth_iv_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/phone_vertical"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:scaleType="fitEnd"
android:adjustViewBounds="true"
android:visibility="gone"
/>
<ImageView
android:layout_below="#id/splash_forth_tv_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/splash_forth_iv_horizontal"
android:src="#drawable/horizontal_phone"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:adjustViewBounds="true"
android:scaleType="fitEnd"
android:visibility="visible"
/>

Please set image as background,
<ImageView
android:id="#+id/splash_forth_iv_horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_below="#id/splash_forth_tv_desc"
android:layout_centerHorizontal="true"
android:adjustViewBounds="true"
android:scaleType="fitEnd"
android:background="#drawable/demo_image"
android:visibility="visible" />
I really wish it works for you,otherwise we will do something else.

how to set images inside a layout on screen?

I need to put two images one below the other in the center of the screen. They need to be in the center. the images will keep changing depending on the code so how do i get the images to work on all screens without moving or the size increasing or decreasing?
I tried using grid view but it seems too much code for two images. it works but is there anything more efficient?

For this type of design i always create a center point on screen,check below code -
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/image1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:layout_centerHorizontal="true"
android:layout_above="#+id/center_point" />
<View
android:id="#+id/center_point"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_centerInParent="true"/>
<ImageView
android:id="#+id/image2"
android:src="#drawable/ic_launcher"
android:layout_below="#+id/center_point"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true" />
it will surely works.
All the best

If u have always only 2 images, you can set it in xml file like that:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/image1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
<ImageView
android:id="#+id/image2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true" />
</RelativeLayout>
First image centers in parent and the second one centers horizontal and also aligns bottom of the screen.
Good luck.

Here this code may help you.You must create one LinearLayout and set him vertical orientation and layout_gravity = center horizontal.After that create two image views which are automatic position in center of the screen one below other.I hope this will help you.Happy coding :)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center_horizontal">
<ImageView
android:id="#+id/image_view_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
/>
<ImageView
android:id="#+id/image_view_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>

Make a vertical Linear-layout that contains both of your ImageViews and then set an equal layout_weight for both of them. Set the layout_centerInParent true for your Linear_layout
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/lock_layout_keypad"
android:orientation="vertical"
android:layout_centerInParent="true"
android:layout_marginBottom="4dp">
<ImageView
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:src="#drawable/ic_launcher"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<ImageView
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView2"
android:src="#drawable/ic_launcher"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
</LinearLayout>
You can remove android:layout_weight.

ScaleToFit Layout Quandry

I'm try learn to more about the Android layout system; this is a learning experience for me. I'm currently trying to create a layout which basically amounts to two linear layouts: A fill_parent vertical, with an inner fill_width horizontal, so that I have an ImageView banner [in the outer], then seven ImageButton columns filling the width of the view [in the inner].
My issue comes, as I need the ImageButton's content to proportionally fill the entire button view [the columns], but respect the ImageButton boundaries, so that if either a small or big image is the source, it will be centered in the ImageButton, filling both it's vertical and horizontal dimensions, and be centered. -I have no control over the source images.
I thought that CenterCrop would do it, but nada for me...
ImageView.ScaleType CENTER_CROP Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).
Any related thoughts on what I have; ignore the outer outer layout please:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout android:id="#+id/linearLayout2"
android:layout_height="fill_parent" android:orientation="vertical"
android:layout_width="fill_parent" android:background="#color/special_grey"
android:layout_margin="0dp">
<ImageView android:id="#+id/imageView1"
android:layout_height="wrap_content" android:layout_gravity="center"
android:layout_width="wrap_content" android:layout_margin="10dp"
android:src="#drawable/banner_logo" />
<LinearLayout android:id="#+id/linearLayout1"
android:layout_margin="5dp" android:layout_gravity="center"
android:layout_width="fill_parent" android:layout_height="250dp" android:baselineAligned="true">
<ImageButton android:minWidth="20dp"
android:adjustViewBounds="true" android:layout_margin="0dp"
android:src="#drawable/sample_0" android:maxWidth="100dp"
android:id="#+id/imageButton1" android:layout_weight="1"
android:scaleType="centerCrop" android:cropToPadding="true"
android:layout_gravity="center" android:layout_width="0dp"
android:padding="0dp" android:layout_height="250dp" />
<ImageButton android:minWidth="20dp"
android:adjustViewBounds="true" android:layout_margin="0dp"
android:src="#drawable/sample_1" android:maxWidth="100dp"
android:id="#+id/imageButton2" android:layout_weight="1"
android:cropToPadding="true"
android:layout_width="0dp"
android:padding="0dp" android:layout_height="250dp" android:scaleType="centerCrop" android:scrollbarAlwaysDrawHorizontalTrack="false" android:scrollbarAlwaysDrawVerticalTrack="false" android:layout_gravity="fill"/>
<ImageButton android:minWidth="20dp"
android:adjustViewBounds="true" android:layout_margin="0dp"
android:src="#drawable/sample_2" android:maxWidth="100dp"
android:id="#+id/imageButton3" android:layout_weight="1"
android:cropToPadding="true" android:layout_gravity="center"
android:layout_width="0dp" android:padding="0dp"
android:layout_height="250dp" />
<ImageButton android:minWidth="20dp"
android:adjustViewBounds="true" android:layout_margin="0dp"
android:src="#drawable/sample_3" android:maxWidth="100dp"
android:id="#+id/imageButton4" android:layout_weight="1"
android:cropToPadding="true" android:layout_gravity="center"
android:layout_width="0dp" android:padding="0dp"
android:layout_height="250dp" />
<ImageButton android:minWidth="20dp"
android:adjustViewBounds="true" android:layout_margin="0dp"
android:src="#drawable/sample_4" android:maxWidth="100dp"
android:id="#+id/imageButton5" android:layout_weight="1"
android:cropToPadding="true" android:layout_gravity="center"
android:layout_width="0dp" android:padding="0dp"
android:layout_height="250dp" />
<ImageButton android:minWidth="20dp"
android:adjustViewBounds="true" android:layout_margin="0dp"
android:src="#drawable/sample_5" android:maxWidth="100dp"
android:id="#+id/imageButton6" android:layout_weight="1"
android:cropToPadding="true" android:layout_gravity="center"
android:layout_width="0dp" android:padding="0dp"
android:layout_height="250dp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

My comments are only small suggestions as I'm not really sure what you want to achieve with this layout or how it should look like eventually, maybe you could elaborate a little bit or add a small image for a better understanding.
I think your linearLayout1 is missing an orientation, but this shouldn't be critical as it should default to vertical (I think).
Couldn't you put the Image of your ImageView as a backgroundImage for your linearLayout2? Then you could skip the ImageView.
Then I would put most of the ImageButton attributes into a styles-definition. This allows you to change settings much easier and cleans up your code ([Android Developers: Applying Styles and Themes])1
As I have said before, maybe you could elaborate a little bit more about how it should look like, then it will be easier to help.