Develop Reference

Scrolling an image wider than screen

I am trying to create a sort of progress bar for my Android app, however, I would like it to be an image moving from right to left. The image itself needs to preserve its original size.
Basically, what I am looking for is this (don't have enough rep to post image):
http://postimg.org/image/5e7w5vd7h/
The problem is that the image, which is 2000px wide, will not load when run on my device (Sony Xperia S). If I use an image with width <= device width, it works.
I have tried using HorizontalScrollView and ScrollView inside a RelativeLayout, as well as setting scaleType to center, centerCrop, fitXY and all the others, adjustViewBounds true/false etc., basically every combination there is.
First and foremost, I would just like the image to appear on my device - the animation in itself is not prioritized right now, but I am thinking of a solution where I increment the ImageView's paddingRight regularly.
Below is a snippet of my XML thus far:
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<HorizontalScrollView
android:layout_width="200dp"
android:layout_height="wrap_content"
android:id="#+id/horizontalScrollView"
android:layout_marginLeft="12.5dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:src="#drawable/rolling_bar"
android:scaleType="center" />
</HorizontalScrollView>
<TextView
android:id="#+id/countdown_time_text"
android:text="01:22:58"
android:textColor="#color/countdown_color"
android:layout_marginTop="3dp"
android:textStyle="bold"
android:textSize="28sp"
android:typeface="normal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:layout_marginLeft="10dp" />
I apologize for any syntactical / semantic errors, I am quite new to Android. Thanks in advance!

What is a correct way to place image over ImageView?

I'm novice in android development and still can't understand fully how sizing works with different layouts. I want to place a preview of the book into this template:
I've tried to implement it using FrameLayout. The idea is that the center of preview image will be exactly where the center of the png background is. Here is the code:
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".5" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/book_frame" />
<ImageView
android:id="#+id/previewImage"
android:layout_width="83dp"
android:layout_height="83dp"
android:layout_gravity="center_vertical|center_horizontal"
android:src="#drawable/abs__ab_bottom_solid_dark_holo" />
</FrameLayout>
The result in layout builder look exactly like I want it to be:
On real phone it is different:
I think on other resolutions it will also differ from both variants. So my question is how to synchronize these images so after any resizing and distortions the preview will fit the cover correctly?
Possible solution would be to remove border from image and place it on previewImage instead. But there are several similar usecases in application where the border can't be removed, so I'd like to find out a universal solution for all of them.

You have your answer in your question.
What happening in your case image size matter for different screen resolution.
Hard-coded things always gives weird result in your case
android:layout_width="83dp"
android:layout_height="83dp" this piece of code.
Check this link this will guide you to manage drawables for different screens.
and here is another link

So the suitable solution for me was to separate border of inner image into its own ImageView, insert it into layout over the photo and add 1dp padding to the photo.
The layout become like this:
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".5" >
<ImageView
android:id="#+id/bookFrame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:src="#drawable/book_frame" />
<ImageView
android:id="#+id/previewImage"
android:layout_width="83dp"
android:layout_height="83dp"
android:layout_gravity="center_vertical|center_horizontal"
android:padding="1dp"
android:scaleType="centerCrop"
android:src="#drawable/abs__ab_bottom_solid_dark_holo" />
<ImageView
android:id="#+id/previewBorder"
android:layout_width="83dp"
android:layout_height="83dp"
android:layout_gravity="center_vertical|center_horizontal"
android:src="#drawable/preview_border" />
</FrameLayout>

the picture is stretched in imageview android

i want to make animation with two pictures, but they are steretched. When i open this image like src in imageView- all is ok(image 1) , but when i run animation - it steretced(image 2).
<ImageView
android:id="#+id/iv_exercise_info"
android:layout_width="fill_parent"
android:layout_height="238dp"
android:layout_gravity="center" />
I try to set scaleType fitXY, but it does not help me. Sory for my english.

I think layout defined for imageview is where the issue is. Try this.
<ImageView
android:id="#+id/iv_exercise_info"
android:layout_width="wrap_content"
android:layout_height="238dp"
android:layout_gravity="center" />
Hope this solves your issue

Use following :-
android:id="#+id/iv_exercise_info"
android:layout_width="fill_parent"
android:layout_height="238dp"
android:ScaleType="CENTER"

ImageViews in a ListView not aligned vertically [Mono for Android]

I'm very new to developing apps to android, so bear with me.
Having said that, I'm trying to make a list with a image to the left and a title and description to the right of the image.
The image is downloaded from the web in the background and then set in the UI as they complete. This all works. However, the images are not aligned properly and I simply cannot understand why. I'm thinking it has something to do with the layout defined in the xml file? I tried using android:layout_alignParentLeft="true" and android:layout_gravity="left" but that got me nowhere.
Then I didn't know how to proceed, even after googling every way I could think of. I'm sorry if this is very basic, but I would really appreciate some help here.
Here's a pic of the situation:
And here's my layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/widget28"
android:layout_width="fill_parent"
android:layout_height="80px"
>
<ImageView
android:id="#+id/imageItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_alignParentLeft="true"
>
</ImageView>
<LinearLayout
android:id="#+id/linearText"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_marginLeft="10px"
android:layout_marginTop="10px"
>
<TextView
android:id="#+id/textTop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
>
</TextView>
<TextView
android:id="#+id/textBottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
>
</TextView>
</LinearLayout>
</LinearLayout>
I appreciate any help you can offer.

There're two ways to achieve what you desire:
1.Fix the ImageView width and height and use android:scaleType="fitXY". This sounds bad, but actually almost gallery apps I know use it in the thumbnail preview mode.
2.Set android:scaleType="fitStart". No promise this will work, depends on the ratio of width and height of the image source. But if all your image source are landscape style (width > height), this way should work.

Can't support multiple screen resolution

I'm struggling to finish my Android app, but I'm having some problems with the UI. My problem is very basic, I've developed the UI using the default AVD when using AVD manager in Eclipse (HVGA, with a density of 160 dpi), and when I execute the app I see it as I designed, but if I change the target device (i.e. WVGA or QVGA) all the components in the layout are in a different position than the original. As far as I saw in the recommendations for support multiple screens, I should not use AbsoluteLayouts, in fact I'm using RelativeLayouts, I'm not using "px" for the dimensions (or positions), just "wrap_content" or "fill_parent", and in case I need an specific position I'm using "dp" (tested too with "sp"), also I've scaled the images for ldpi (0.75x), and still have the issue (not a particular screen, the hole app) ...so, my question is, is there any other UI tip that I'm missing?.
I'm putting a sample code and the results that I observe when testing it with a HVGA AVD (bigger image) and with a QVGA AVD. As you can see, the position of the yellow/green squares is different, as well as the size of the last row of images.
PS: I'm using a TabLayout also, so the background is loaded through code (tabHost.setBackgroundDrawable(getResources().getDrawable(R.drawable.background1)))
Any help will be appreciated.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/row1"
android:layout_centerHorizontal="true"
android:layout_marginTop="140dp"
>
<ImageView
android:id="#+id/btn1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:clickable="true"
android:onClick="method1"
android:src="#drawable/button1"
/>
<ImageView
android:id="#+id/btn2"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:clickable="true"
android:onClick="method1"
android:src="#drawable/button2"
/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_below="#id/row1"
android:layout_centerHorizontal="true"
>
<ImageView
android:id="#+id/btn3"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:clickable="true"
android:onClick="method1"
android:src="#drawable/button3"
/>
<ImageView
android:id="#+id/btn4"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:clickable="true"
android:onClick="method1"
android:src="#drawable/button4"
/>
</LinearLayout>
</RelativeLayout>

Your layout looks fine to me, except for having that white box title on the background as it will make more difficult to put things in their position. Also, RelativeLayout does not have orientation but that is ignored.
In the bigger screenshot it looks like there is more space between the white box and the top of the screen. What it does not make sense to me is the different size in the second row. Are you 100% sure you are loading the correct images in the smaller screenshot?

You need to create different layout for diff. resolution i.e for large screen use layout-large folder..
I hope this link help to you.

Did you follow the steps given on the developer site to make ur app to support multiple screens?