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>

Image Button appears in different location on Emulator than on Graphical Layout

I'm using an image button for an an app that im creating and the trouble is the graphical layout shows the button in a different place than when running on the emulator. I've posted my code below plz help. I have provided a dropbox link of the Graphical Layout vs whats displayed on the Emulator. The image button is the red play button and on the pic on the left it appears out of bounds while on the emulator it's perfectly placed on the Red Play button. Note: Im placing a button over an image of the same button. Here is the link : https://dl.dropboxusercontent.com/u/8104708/Comparison.png
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/title_screen" >
<ImageButton
android:id="#+id/ibPlay"
android:layout_width="400dp"
android:layout_height="400dp"
android:layout_marginLeft="100dp"
android:layout_marginTop="310dp"
android:background="#drawable/box_side_red"
android:onClick="#drawable/box_side_red_pressed_shadow" />
</LinearLayout>

Try this code may be it works fine
<?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"
android:background="#drawable/mango"
android:orientation="vertical" >
<ImageButton
android:id="#+id/ibPlay"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="#drawable/apple" />
</RelativeLayout>

photo collage : how to achieve multiple grid type views in android

I want to create a photo collage app in android. I don't know where to start. If anyone can help me the way i can achieve this. I think it uses three views in a single layout but i don't understand how to achieve photo collage. I created an app where i used a single zoom view whole screen and which has pan zoom too.
<com.simpleapps.sceneryphotoframes.zoom.ImageZoomView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/zoomview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
But that was for one view. I want to know how to do that for multiple photos.Thanks in advance.

It Was Simple, for any one wondering..
I just Added multiple custom views.
<LinearLayout
android:id="#+id/parentviewLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<com.simpleapps.photocollage.PanZoomView
android:id="#+id/zoomview1"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
<com.simpleapps.photocollage.PanZoomView1
android:id="#+id/zoomview2"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
<com.simpleapps.photocollage.PanZoomView2
android:id="#+id/zoomview3"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
</LinearLayout>

Gallery view with circular effect to both edges

I am working on application in which gallery require as bellow image :
I searched over internet but it gives result similar to Image Gallery. But I want to create the gallery which will move in circular fashion, means it just bend the first and last member of gallery. Is it possible? or Is the horizontal ScrollView better approach to do this?
Any better approach will be appreciated.. Thanks in advance.

I have found a solution and it achieved using Custom Gallery. I used following layout file for that
main.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linear_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/gal_bg"
android:orientation="vertical" >
<Gallery
android:id="#+id/horizontallistview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="40dp"
android:layout_marginRight="40dp" />
<!-- android:background="#drawable/gal_overlay" -->
<ImageView
android:layout_width="fill_parent"
android:layout_height="120dp"
android:background="#drawable/gal_overlay" />
</FrameLayout>
And it uses the some images as background to FrameLayout and ImageView. You will find the complete source code of project on GitHub.
Happy Coding..

Android issue with a centered bitmap displaying weirdly

I have an issue with an image in my application.
I would like to have a header image that would take all the width of my application.
To do that, I created an extremely wide picture with the main object in the center,
then center that bitmap in my layout.
Using that code:
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/header"
android:gravity="center_horizontal|bottom" />
and that layout definition:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:background="#ffffff"
android:layout_gravity="center_horizontal" >
<LinearLayout
android:id="#+id/accueil_layout"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff"
android:layout_gravity="center_horizontal" >
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="150dip"
android:background="#drawable/bitmap_header"
android:layout_weight="1">
<TextView
android:id="#+id/allure"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/txt_allure"
/>
</FrameLayout>
<TextView
android:id="#+id/slogan"
android:text="#string/txt_slogan"
/>
that code this is well working at the first execution.
as you can see here : http://imagebin.org/index.php?mode=image&id=169619
if I call an other Intent and then go back to that one, it's still displayed normally.
But if I call another Intent to the same activity,
the second instance of this activity is displayed weirdly.
as here : http://imagebin.org/index.php?mode=image&id=169620
As anyone an idea, on how I could resolve this?

I think that has to do something with TextView under FrameLayout, because it is not displayed on second picutre. Maybe change FrameLayout to RelativeLayout or LinearLayout and see what happens.