Develop Reference

Imageview left and right white space issue

I'm trying to set 1080*1920 image in imageview but it showing white space left and right side. It showing same in all device having resolution of 480*800,720*1280,768*1280,1080*1920,1440*2560. Please check attached image Also, i tried to set android:adjustViewBounds="true" but it didn't work if i set android:scaleType="fitXY" image is streched. Please help me with some solution as i'm trying all possible way but not worked till now.
This is xml layout 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/img_gallery1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/atest"
android:scaleType="fitXY" --> iF i use fitXY then image is streched
android:visibility="visible" />
</RelativeLayout>

Try:
android:layout_width="wrap_content"
or:
android:layout_width="match_parent"
also make sure whichever container you have the imageview inside is able to fill the full screen.

The resolution you mentioned i.e 1920x1080 is ideally a landscape resolution.
So if you intend to put the image in portrait mode, then try changing the resolution of image to 1080x1920.
Also, as Philip said, make sure the imageview's container is able to fill the screen.

ImageButton resizes automatically in gridlayout

I'm asking this (propably) pretty easy question since I can't figure it out by myself and googling in for more then an Hour doesn't give me proper results.
So the question is: How can I make my items(generally those are only 16 image buttons) so they can stay in scale (comparing to gridlayout) when my picture is really large (So in short way: I load 16xImages as src on buttonImages, each Image is 640x640, and I want to have those 16 buttons in grid layout scaled comparing to grid layout width/height and column/row count). I hope this is possible to write in XML since I don't want to refactor my java code :/
Ps. I'm newbie to Android programmig
Ps2.Here is my GridLayout with button example , but it's completly wrong :/
<GridLayout
android:id="#+id/GridLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="4"
android:rowCount="4"
tools:context=".GridXMLActivity"
android:layout_below="#+id/Tx1"
android:layout_above="#+id/restart"
android:layout_marginBottom="50sp"
android:layout_marginTop="50sp"
>
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:src="#drawable/clear"
android:id="#+id/But1"
android:scaleType="fitXY"
android:onClick="but1"
/>
[EDIT]
I've even made such layout , but there are some problems. 1st is that my grid layout doesn't scale at all!(So when I take screen with lower or higher resolution it won't fit). That's why I wanted to make this button some kind of resizeable (in this screen each button has width and height at 60sp which I know it shouldn't)
Another problem is that I'm working on button backgrounds and I wanted to make it src.
Genereally I want to achive same thing like on the screen , but making it other/more flexible way (So the resolution and orientation won't affect my gui and sizes of it's element). If you need whole XML file I'll post it here but it's a bit mess since I've copy-paste 16 times Image Button

If you want something to scale, keeping aspect ratio and you have one dimension set to match_parent, the other must be wrap_content.
So, presuming you want the button to always fit the width but stay at the correct aspect:
<ImageButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
... />
To make all items fit in grid rather than all items fit their images, you should use weight. Weight with grid layout requires the support library before API21
<GridLayout ...
android:columnCount="2">
<ImageButton
app:layout_gravity="fill"
app:layout_columnWeight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
... />
...

Exact view position on top of ImageView - android

I'm trying to make an interactable imageView by setting some invisible image buttons on top of it, the user can then click different parts of the image and do things with it, the problem is that i need this image buttons to be in very exact positions in relation to the image view, if the phone size varies even a little, the image buttons will get off the positon i want them to be.
The xml where the image view is:
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".fragments.Offroad18nitro4wdbuggy_frontFragment">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="OffRoad 1/8 nitro 4WD buggy front" /> <!-- Here just to show the programmer which fragment is showing -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_centerHorizontal="true">
<ImageView
android:id="#+id/ivLosi4_offroad18nitro4wdbuggy_front"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter"
android:src="#drawable/losi4_18scale_front"/>
<ImageButton
android:id="#+id/ibTest"
android:layout_width="50dp"
android:layout_height="41dp"
android:alpha="0"
android:background="#color/colorGreen"
android:layout_alignParentEnd="true"
android:layout_marginEnd="40dp"
android:layout_marginTop="5dp"/>
</RelativeLayout>
As you can see in the second screenshot, the image button is out of place, my phone is the Samsung Galaxy S6.
Screenshot of the image button in the exact position i want it to be
Screenshot of the app being emulated to my phone

I've dealt with this exact problem before. The workaround that I managed to accomplish is to divide the screen up into several sub-layouts so it looks like a grid of layouts. First divide the screen in half at the center point, then place an empty textview with no dimensions in the center of the top and bottom layouts, which will allow you to divide those layouts into four. Then do the same thing for those four to create sixteen if you have to. Then place your image buttons along the sides or the attached to the center point of whichever of these layouts contains your desired area.
The point is to create a grid that is fixed relative to the center of the screen. That way, if the screen size changes, the grid and the buttons attached to it will adjust accordingly. Its not a perfect solution but it worked for my purposes. Here is a link to a sample xml file from the project that I used this strategy in:
https://github.com/ribalding/AdventureAdventure/blob/master/app/src/main/res/layout/activity_kitchen.xml

Creating a Bookshelf view in Android

I have seen many e-book readers with the Bookshelf design where books are placed like iBooks for Apple or iReader for Android. I am trying to build a similar bookshelf UI in Android. I have prepared the graphics for the layout namely shelf_left (34*180), shelf_right (34*180) and shelf_center (652*180). Currently I am targetting 720*1280 pixel density devices, so I have kept the total width as 720px. I am using dp as my length unit.
I am using RelativeLayout as my root layout. When I am putting all my images in the layout, the images are not getting aligned properly. The shelf_center gets extra top and bottom padding and the side images looks too big.
I am not able to figure out how to control this behavior. Below is the code for my main.xml layout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/shelf_left"
android:layout_width="34dp"
android:layout_height="180dp"
android:adjustViewBounds="true"
android:contentDescription="#string/button"
android:src="#drawable/shelf_left" />
<ImageView
android:id="#+id/shelf_center"
android:layout_width="652dp"
android:layout_height="180dp"
android:layout_toLeftOf="#+id/shelf_right"
android:layout_toRightOf="#+id/shelf_left"
android:adjustViewBounds="true"
android:contentDescription="#string/button"
android:src="#drawable/shelf_center" />
<ImageView
android:id="#+id/shelf_right"
android:layout_width="34dp"
android:layout_height="180dp"
android:layout_alignParentRight="true"
android:adjustViewBounds="true"
android:contentDescription="#string/button"
android:src="#drawable/shelf_right" />
</RelativeLayout>
This is how it looks:
http://img210.imageshack.us/img210/2885/shelf.png
Please help me figure out what am I doing wrong here.

Seems like the center image is too wide to fit the view and is scaled down. Note that the vertical wooden sides in the side views don't match to the image of the bottom view. Have you tried using android:scaleType so that the images don't get scaled?
Also, double check that the measurements in pixels (you mention the images' sizes in pixels) match the values in dp set in the XML.

Handling clickable areas in imageview

I have some image like this
and I want to make the red areas clickable areas.
I want to make this areas clickable meaning when user touches the screen at some red sot I want to be notified a.i I want to register a listener.
The problem is with that the image is different size for different screen, some screens have a size of 240x320 some 400x800 for the image view I use fill_parent so the image will fill the whole screen in every screen. and this clickable areas sometimes will be 50dip from the left border sometimes will be 150dip. Sometimes it is 10dip from the top sometimes it is 500dip... everything depends on the screen size
how to handle this kind of scenario ?

The best way is to cut your image for separate pieces, and put them inside RelativeLayout.
Then set click listener for those images where you need.
Another way you could handle this is determine screen size and calculate touch areas:
final Display display = ((WindowManager) getApplicationContext().getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay();
final int width = display.getWidth();
final int height = display.getHeight();

I found a very good tutorial on this site here: http://blahti.wordpress.com/2012/06/26/images-with-clickable-areas/
The way you do it:
- You have 2 images.
- 1 is the background and the other is on top of it and is an invisible mask.
- The mask gets an OnTouchListener.
- The mask has different colored areas(your touch areas).
- If you touch the image, the mask checks for the color and do an action.
The nice thing is: If you scale the image, the touch areas also scale, so you will always have your touch areas on the right position.
It is pretty straight forward. Hope i could help, even if your question is older than a year.

Here is another example (last). You just put on top of your image transparent buttons and handle click.
<?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="fill_parent" >
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#android:drawable/edit_text" />
<Button
android:id="#+id/bottomLeft"
android:layout_width="100dip"
android:layout_height="100dip"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="#android:color/transparent" />
<Button
android:id="#+id/center"
android:layout_width="100dip"
android:layout_height="100dip"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="#android:color/transparent" />
<Button
android:id="#+id/bottomRight"
android:layout_width="100dip"
android:layout_height="100dip"
android:layout_centerInParent="true"
android:background="#android:color/transparent" />
</RelativeLayout>