Develop Reference

Imageview shows border around photo that does not exist in the source image

I'm trying to display a simple image in an imageview and it seems to be adding a border around the photo that isn't there in the source image. I placed the imageview in the parent view and set the image to it, and in the editor you can see a small sliver of the border but when I run it on a device or emulator more of a border appears.
I tried removing a pixel off the size of the photo in case there was a border but that didn't fix it. Below are the photos of the emulator and the editor to show the difference.
Editor:
Emulator:
Any help would be greatly appreciated, thank you.
EDIT: added xml file
<?xml version="1.0" encoding="utf-8"?>
<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:id="#+id/activity_home_screen"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="frolicindustries.strandstudybible.HomeScreen"
android:weightSum="1"
android:background="#android:color/background_light"
android:orientation="vertical"
android:baselineAligned="false">
<!--android:scaleType="fitCenter"-->
<!--android:cropToPadding="false"-->
<!--android:layout_weight="0.01"-->
<Button
android:text="Button"
android:layout_width="wrap_content"
android:id="#+id/About"
android:background="#drawable/aboutgradient"
android:layout_alignParentBottom="true"
android:layout_height="65sp"
android:layout_marginBottom="1dip"
android:layout_marginTop="1dip"
android:layout_alignRight="#+id/Extras"
android:layout_alignEnd="#+id/Extras"
android:layout_alignLeft="#+id/Bible"
android:layout_alignStart="#+id/Bible" />
<Button
android:text="Button"
android:layout_width="wrap_content"
android:id="#+id/Extras"
android:background="#drawable/extragradient"
android:layout_height="65sp"
android:layout_above="#+id/About"
android:layout_marginTop="1dip"
android:layout_alignRight="#+id/WTFW"
android:layout_alignEnd="#+id/WTFW"
android:layout_alignLeft="#+id/Bible"
android:layout_alignStart="#+id/Bible" />
<Button
android:text="Button"
android:layout_width="wrap_content"
android:id="#+id/Bible"
android:background="#drawable/biblegradient"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:elevation="0dp"
android:layout_height="65sp"
android:layout_marginLeft="-5dip"
android:layout_marginRight="-5dip"
android:layout_above="#+id/WTFW" />
<Button
android:text="Button"
android:layout_width="wrap_content"
android:id="#+id/WTFW"
android:background="#drawable/wtfwgradient"
android:layout_height="65sp"
android:layout_above="#+id/Extras"
android:layout_marginTop="1dip"
android:layout_alignRight="#+id/Bible"
android:layout_alignEnd="#+id/Bible"
android:layout_alignLeft="#+id/Bible"
android:layout_alignStart="#+id/Bible" />
<ImageView
android:id="#+id/imageView2"
android:src="#drawable/logo"
android:background="#null"
tools:targetApi="lollipop"
android:layout_width="match_parent"
android:adjustViewBounds="false"
app:srcCompat="#drawable/logo"
android:layout_alignRight="#+id/Bible"
android:layout_alignEnd="#+id/Bible"
android:layout_height="155sp" />
<ImageView
android:layout_width="match_parent"
android:src="#drawable/title"
android:id="#+id/imageView3"
android:layout_weight="0.29"
android:layout_height="wrap_content"
android:layout_above="#+id/Bible"
android:layout_alignRight="#+id/imageView2"
android:layout_alignEnd="#+id/imageView2"
android:cropToPadding="false"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:layout_below="#+id/imageView2" />
</RelativeLayout>

Check this,
my xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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/content_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="#000"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.example.charu.its2017huree.MainActivity"
tools:showIn="#layout/app_bar_main"
android:orientation="vertical">
<ImageView
android:background="#FFF"
android:src="#drawable/amanda"
android:id="#+id/my_image_view"
android:layout_width="match_parent"
android:layout_height="300dp" />
</LinearLayout>
I have set an imageView and i found out it seems there is something wrong with it's left and right edges. I have given match_parent to my imageView already.So I add a background color to my imageView to find out what's going on.
But that's not enough for me i want to see the boundaries as well.It's there on your android mobile!
Settings >Developer Options >(scroll bit down) under category Drawing there is a option Show layout boundaries > Tick that option .. mm You get some kind of grids in your mobile.It's normal it will be gone when you untick that option.
Let's jump back to image view and see how it looks now!
Now i can clearly see a background color which i add in behind of the image
Also image view width boundary is fine,it's match_parent.You can see that from your layout boundaries.
MM sounds like image didn't fit properly then i try something with scaleType like android:scaleType="fitXY" and run and see how is it now .. all-right it seems she has taken the full space .. I mean in my imageView :D
This way you can clearly identify what'w wrong with your imageView

what is your image saved as? i would suggest .png extension. I would get the border when my images are jpg or anything else.

How to calculate image size for different devices dpi

I have a listview layout with images
It looks like this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="240dp"
android:adjustViewBounds="true"
android:id="#+id/listview_item_imageView"
android:layout_gravity="center_horizontal|top" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FAC308"
android:id="#+id/listview_item_title"
android:text="TITLE"
android:textSize="20sp"
android:paddingBottom="40dp"
android:layout_centerInParent="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:id="#+id/listview_item_subtitle"
android:paddingTop="40dp"
android:text="SUBTITLE"
android:textSize="20sp"
android:layout_centerInParent="true" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/orangeSeparator"
android:src="#drawable/orangeseparator"
android:layout_centerInParent="true" />
If I run it on device with 720x1280 240dpi it looks like this
If I run it on device with 720x1280 320dpi it looks like this
I get images from the internet, so I cant prepare different versions.
How to make it look similar across all the devices ?

You can use fitXY Android Developer,
android:scaleType="fitXY"
or you can also create different drawable resources from the original one, with Photoshop or any similar program

in your container you have
android:layout_height="match_parent"
and in the image:
android:layout_height="240dp"
you have to have the same height or 'wrap_content' for your container not to have those gaps.
you can also add to the imageview:
android:scaleType="centerCrop"
another thing is that you can use specific library to handle loading of network images.

You can look this article . Make your app supporting different dpi variations and different screen types: Supporting Different Screens

App stops working when adding image to imageButton

I am trying to make a ScrollView with some ImageButtons.
If I create it with blank buttons it works great.
My xml is:
<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" android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainScreen">
<HorizontalScrollView
android:id="#+id/filtersScroll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<LinearLayout
android:id="#+id/filtersLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/filtro1"
android:layout_width="64dp"
android:layout_height="64dp"/>
<ImageButton
android:id="#+id/filtro2"
android:layout_width="64dp"
android:layout_height="64dp" />
<ImageButton
android:id="#+id/filtro3"
android:layout_width="64dp"
android:layout_height="64dp"/>
<ImageButton
android:id="#+id/filtro4"
android:layout_width="64dp"
android:layout_height="64dp"/>
<ImageButton
android:id="#+id/filtro5"
android:layout_width="64dp"
android:layout_height="64dp"/>
<ImageButton
android:id="#+id/filtro6"
android:layout_width="64dp"
android:layout_height="64dp"/>
<ImageButton
android:id="#+id/filtro7"
android:layout_width="64dp"
android:layout_height="64dp"/>
<ImageButton
android:id="#+id/filtro8"
android:layout_width="64dp"
android:layout_height="64dp"/>
</LinearLayout>
</HorizontalScrollView>
And what I get is:
But when I add a picture to the drawable folder(don't know if it matters but the picture is 2000x2000) and add it to one of the ImageButtons like so:
<ImageButton
android:id="#+id/filtro1"
android:layout_width="64dp"
android:layout_height="64dp"
android:scaleType="centerInside"
android:src="#drawable/smiley" />
Not only can I not make the image resize to the size of the button, but the app also stops working as soon as i try to run it.
This is how the preview looks like:
What am I missing?
Has it something to do with the size of the source picture?
I mean, I just want it to resize to the size of the button and work.
Also, what happened to the other folders that used to be in drawable/? Now you don't have to separate the images according to their size?

Has it something to do with the size of the source picture
Yes. You are using a very high resolution image, and surely it will create problem on different devices (especially on low-end device). You should either use scaled down image, or try scaling through code.
Now you don't have to separate the images according to their size
No, place images in different drawable folders according to their density (not size)
See below links:
Loading Large Bitmaps Efficiently
Displaying Bitmaps Efficiently
High resolution Image - OutOfMemoryError

Android ImageView - Annoying Whitespace on the Right Side

So I'm trying to get used to Android and intending to create an app for the NASA's "Image of the Day" RSS feed, which essentially needs an image- and a couple of text views.
This is my current attempt at the layout (compiling for Android 4.3, if that should matter):
<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:orientation="vertical"
tools:context="com.headfirst.nasaiodt.Feed" >
<ImageView
android:id="#+id/imgView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:adjustViewBounds="true"
android:contentDescription="#string/testImgDescription"
android:src="#drawable/test_img" />
<TextView
android:id="#+id/titleView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/testTitle" />
<TextView
android:id="#+id/dateView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/testDate" />
<TextView
android:id="#+id/descriptionView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/testContent" />
</LinearLayout>
You'd think that's simple enough for its purposes, however, I just can't seem to get rid of a very resistant white bar on the right side of the picture:
Wasn't
android:layout_width="match_parent"
in the ImageView supposed to take care of that?
(And no, it's not an eclipse glitch, it also shows up in the emulator.)
I'd appreciate your help. What am I doing wrong?

Try using scale type to fit X and Y coordinates. This will solve if its not a glitch.
<ImageView
android:id="#+id/imgView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:contentDescription="#string/testImgDescription"
android:src="#drawable/test_img" />

How to achieve this kind of layout in Android

I'm new to Android development and I'm trying to achieve a layout for my app that is capable of handling different screen resolutions/ratios.
I've been reading a lot of the documentation and questions on this site to try to understand the basics and concepts.
First I went through:
developer.android.com/guide/practices/screens_support.html
And questions like:
stackoverflow.com/questions/6403619/how-to-support-all-the-different-resolutions-of-android-products
I've got a pretty basic idea on how to handle things out. But still, its pretty difficult for a starter to get going, and I found myself stucked trying to achieve the solution I came up with.
I designed my app to a target resolution of 480x800, and set it up to always show in portrait mode.
This is how it looks like and how I understand it should work (I used Waldo for the sake of example haha):
(sorry for the link, I need 10 rep to post images)
http://i.imgur.com/KXTAXir.jpg
My root Layout is a LinearLayout, wich contains 3 other Layouts being A and C set up to a weight of 0.8 while B is at 8.4. This is all fine, but the contents of B are set up to DP units at the moment just to be able to test.
B consists of a frame Layout who has 3 other Layouts inside, where 2 of them are working fine, and shown only when needed. The problem is that I need B to be able to adapt based on the contents of it first child: a LinearLayout wich contains 2 ImageView and 1 ProgressBar. I need that those ImageView always keep their ratio.
Here is an example of how it should work:
http://i.imgur.com/cH7fUze.jpg
Imagine those 4 are real screens, wich vary in ratio and size. So my app should only adapt B (from my first image) to keep the images original ratio.
Here is the layout code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/darkgray"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:background="#666666" >
<TextView
android:id="#+id/level_text_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="LEVEL"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/level_text_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="SCORE"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/level_text_clock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="01:59"
android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="8.4" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="200dp"
android:adjustViewBounds="true" />
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="1000"
android:progress="0" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="200dp"
android:adjustViewBounds="true" />
</LinearLayout>
<RelativeLayout
android:id="#+id/pauseMask"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:visibility="gone" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/gameoverMask"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:visibility="gone" >
</RelativeLayout>
</FrameLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:background="#666666" >
<TextView
android:id="#+id/level_text_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="0/0"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="Button"
android:onClick="useHint" />
<Button
android:id="#+id/button2"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/button1"
android:layout_centerVertical="true"
android:text="Button"
android:onClick="toggleSound" />
<Button
android:id="#+id/button3"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/button2"
android:layout_centerVertical="true"
android:text="Button"
android:onClick="togglePause" />
</RelativeLayout>
The last thing that stays unclear to me is how to handle the text and button sizes. Should I set them in DPs? How do I get them to scale accordingly like it can be seen on the bottom of my second picture.
Thank you for your help, I also want this to serve as an example to others that are having trouble to understand how to handle this kind of scenarios.

I'm not sure, if I got your question right.
However, you can specify different layouts for different screen sizes and orientations, as described here: http://developer.android.com/guide/practices/screens_support.html
Just give the respective suffix in the name of your layout XML file.

I ended up creating a custom View for my images. The view calculates the space thats left on its parent, scales the images manually and then resizes itself to the same size of the resulting image.
To resize the progress bar to have the same width as the images, I used a custom listener that gets triggered when my custom views get resized. Then I resize the progressbar to match their width.
With this I achieved what I wanted, a layout that will work perfectly in all screen sizes.