Develop Reference

Android : imageview over imageview issue

I using following code in my layout , i want to show both image , (image over another image)
But i see just one image on screen
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/splash_bg_gradient"
android:id="#+id/splash_gradient"
tools:context="com.android.abc.activity.SplashActivity" >
<ImageView
android:id="#+id/splash_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_centerInParent="true"
android:contentDescription="#string/desc_splash_graphics"/>
<ImageView
android:id="#+id/splash_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType = "fitXY"
android:adjustViewBounds="true"
android:contentDescription="#string/desc_splash_graphics"/>
</RelativeLayout>
Please help , thanks

use FrameLayout instead of RelativeLayout. RelativeLayout should only be used for complex layouts, it's much heavier than FrameLayout also.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/splash_bg_gradient"
android:id="#+id/splash_gradient"
tools:context="com.android.abc.activity.SplashActivity" >
<ImageView
android:id="#+id/splash_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:contentDescription="#string/desc_splash_graphics"/>
<ImageView
android:id="#+id/splash_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType = "fitXY"
android:adjustViewBounds="true"
android:contentDescription="#string/desc_splash_graphics"/>
</FrameLayout>

You should do this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/splash_bg_gradient"
android:id="#+id/splash_gradient"
tools:context="com.android.abc.activity.SplashActivity" >
<ImageView
android:id="#+id/splash_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType = "fitXY"
android:adjustViewBounds="true"
android:contentDescription="#string/desc_splash_graphics"/>
<ImageView
android:id="#+id/splash_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:contentDescription="#string/desc_splash_graphics"/>
</RelativeLayout>
Elements in a RelativeLayout are displayed in order of their declaration.

how to overlap two images each other

how to add images above the image? this is my screen shot http://imgur.com/Yh4DqnJ which have only 1 image in background now i want to add two imagebutton like this image http://imgur.com/XrLXb0L below is my code which have only background image
below is my code which have background imeage onheader Linearlayout how i add two images on left and right side??
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/imagelogo2"
android:orientation="horizontal" >
</LinearLayout>
<LinearLayout
android:id="#+id/lytContent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/txtCopyright"
android:layout_marginTop="10dp"
android:background="#drawable/border2"
android:layout_below="#+id/lytTitlebar"
android:orientation="vertical" >
<ListView
android:id="#+id/listMainMenu"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:listSelector="#drawable/listview_selector"
android:dividerHeight="1dip"
android:fadeScrollbars="true" />
</LinearLayout>
</LinearLayout>

Best way to use overlap images is through frame layout
Try this code
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:src="#drawable/onlymobilepro"
android:scaleType="fitCenter"
android:layout_height="fill_parent"
android:layout_width="fill_parent"/>
<TextView
android:text="This is Frame Layout!!!"
android:textSize="24px"
android:textColor="#cc0000"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:gravity="top"/>
<TextView
android:text="Learn Android Development At onlyMobilePro.com"
android:textSize="24px"
android:textColor="#00dd00"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:gravity="center"/>
</FrameLayout>

For overlapping images you should probably use Framelayout,
For more info on Frame layout see this link,

Android how to overlap an ImageView on top of a LienearLayouy so that they have the same size?

Hi and thanks for any suggestion.
I need to put an ImageView to overlapp over a LinearLayout.
I have tried this:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/background"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<ImageView
android:id="#+id/backgroundimage"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/gradient_box"
android:layout_gravity="center"
/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:orientation="vertical"
android:layout_gravity="center">
But this is the result I get (the ImageView shrinks to a single line)
I have tried using RelativeLayout, this is the result I get.
CLOSE, but the ImageView now expands to fill all the available space and does not "wrap content" as I need to.
The desired result would be like this:
PS: I cannot use android:background="image" because i need to change it at runtime.

You can use a Relativ Layout that contains the LinearLayout and then align the ImageView with the LinearLayout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/background"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/linear"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:orientation="vertical"
android:layout_gravity="center">
<ImageView
android:id="#+id/backgroundimage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/gradient_box"
android:layout_alignLeft="#id/linear"
android:layout_alignRight="#id/linear"
android:layout_alignTop="#id/linear"
android:layout_alignBottom="#id/linear"
android:layout_gravity="center"
android:scaleType="fitCenter" />
If you just want to set the image as a background you can just set a background image for the linear layout:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/background"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/blue" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:orientation="vertical"
android:background="#drawable/gradient_box"
android:layout_gravity="center">

PS: I cannot use android:background="image" because i need to change it at runtime.
Why not? Use setBackgroundResource.

Creating a layout for a skype-style text input bubble

In iPhone there is a method on UIImage called stretchableimagewithleftcapwidth which can be used to create a chat bubble to stretch for any size (keeping the corners natural size).
We don't seem to have this in Android so I've set out to make a layout that I can then use as a background image with a FrameLayout. The trouble I'm having at the moment is the top row which consists of 3 columns: the left top corner, the stretchable top, and the right top corner. How do I get the left and right top corners to remain fixed size (11dip) and tell the middle to fill any remaining space in the parent? This is what I have so far.
<?xml version="1.0" encoding="UTF-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/layout_bubble_container"
android:orientation="vertical">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="11dip"
android:id="#+id/layout_bubble_toprow"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/layout_top_leftCorner"
android:layout_width="11dip"
android:layout_height="fill_parent"
android:gravity="left|top">
<ImageView
android:id="#+id/bubble_top_leftcorner"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/bubble_lefttop" />
</LinearLayout>
<LinearLayout
android:id="#+id/layout_top"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="top|center" >
<ImageView
android:id="#+id/bubble_top"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:src="#drawable/bubble_top" />
</LinearLayout>
<LinearLayout
android:id="#+id/layout_top_rightCorner"
android:layout_width="11dip"
android:layout_height="fill_parent"
android:gravity="right|top" >
<ImageView
android:id="#+id/bubble_top_rightcorner"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/bubble_righttop" />
</LinearLayout>
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="11dip"
android:id="#+id/layout_bubble_middlerow"
android:orientation="horizontal"
android:background="#color/WHITE">
<LinearLayout
android:id="#+id/layout_left"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:gravity="left"
android:layout_weight="1">
<ImageView
android:id="#+id/bubble_left"
android:layout_width="11dip"
android:layout_height="fill_parent"
android:src="#drawable/bubble_left" />
</LinearLayout>
<LinearLayout
android:id="#+id/layout_right"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="right"
android:layout_weight="1">
<ImageView
android:id="#+id/bubble_right"
android:layout_width="11dip"
android:layout_height="fill_parent"
android:src="#drawable/bubble_right" />
</LinearLayout>
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="11dip"
android:id="#+id/layout_bubble_bottomrow"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/layout_bottom_leftCorner"
android:layout_width="11dip"
android:layout_height="fill_parent"
android:gravity="left|top">
<ImageView
android:id="#+id/bubble_bottom_leftcorner"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/bubble_leftbottom" />
</LinearLayout>
<LinearLayout
android:id="#+id/layout_bottom"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="top|center" >
<ImageView
android:id="#+id/bubble_bottom"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:src="#drawable/bubble_bottom" />
</LinearLayout>
<LinearLayout
android:id="#+id/layout_bottom_rightCorner"
android:layout_width="11dip"
android:layout_height="fill_parent"
android:gravity="right|top" >
<ImageView
android:id="#+id/bubble_bottom_rightcorner"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/bubble_rightbottom" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
Here is the layout tree in eclipse if this helps.
Here is what it looks like rendered in the layout editor in eclipse. Note the top and bottom rows not stretching appropriately.
Thanks in advance.

i also needed a chat bubble kind of view in my app so I used a 9 patch drawable as the background image and it is working fine.
check this question:
Why do 9-patch graphics size correctly in the emulator but not on a phone?
And also this link:
http://warting.se/2012/06/04/chat-bubbles-in-android/

Android Image above ListView?

I have a ListView whit two taps underneath it, but i cant seem to figure out how to put an Image above the ListView. I have tried just putting an ImageView on top, but it wont do it?
This is how it looks now.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#FFFFFF">
<ImageView
android:id="#drawable/frederiksberg"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_weight="1"/>
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"/>
</LinearLayout>

Try this code and run
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/add" android:layout_gravity="center_horizontal"/>
<ListView
android:id="#id/android:list"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
</ListView>
</LinearLayout>
It is working fine for me. Hope this helps you.

It is quite simple dude.
Take a Linear layout L1.
add one ImageView in L1 with Weight tag = 1
and add listview in L1 whose width and height must be fill parent.
make orientation of L1 as vertical..
let me know if any doubt.

here is solution make your parent layout as relative layout because it will provide you more flexiblity.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="122dp"
android:src="#drawable/ic_launcher" />
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView1" >
</ListView>
</RelativeLayout>
hope it will work for you.. it is complete xml file i am posting for you try it.