Develop Reference

Center ImageView inside another ImageView in Android

Well I have to fit one ImageView inside another one. It is smaller and has to be exactly at the center. I have both images scaled for different screen resolutions but I can test only on one phone and I am wondering if I set the second image's height and width with dpi to fit my screen resolution will it be perfectly matched on all screens or is there any property in Android aside from setting the height and width that will automatically center one ImageView inside of other ImageView?
Edit: It's in RelativeLayout and the ImageViews are at the top left so I haven't added anything specific to the because they by default are there.
Edit2: Well changing the first ImageView to be RelativeLayout helps center the second image inside of it but then the RelativeLayout grows too big and enlarges the image that is background. Is there a way to make the RelativeLayout be as big as its background?

try this
<?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:orientation="vertical" >
<RelativeLayout
android:layout_width="250dp"
android:layout_height="250dp" >
<ImageView
android:id="#+id/base"
android:layout_height="250dp"
android:layout_width="250dp"
android:src="#drawable/home"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
<ImageView
android:id="#+id/center"
android:layout_height="150dp"
android:layout_width="150dp"
android:src="#drawable/home"
android:layout_centerInParent="true"
android:layout_centerVertical="true" />
</RelativeLayout>
</RelativeLayout>

You cannot put an imageView inside another. Hope the following code will be helpful for you.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background_image"
android:gravity="center" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/image_on_center" />
</LinearLayout>

Use RelativeLayout and then use android:layout_centerInParent="true" remember the order you add the ImageViews will decide what is on top :)

Try this:
android:layout_gravity="center"

ImageView increases and decreases dynamically after the size of a textfield

I have a layout like this one:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tabBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#272727"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/BtnSlide"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#null"
android:src="#drawable/lin" />
<TextView
android:id="#+id/textView1"
android:layout_width="275dp"
android:layout_height="50dp"
android:gravity="center"
android:paddingLeft="20dp"
android:paddingRight="100dp"
android:text="HEADER"
android:textAppearance="?android:attr/textAppearanceMedium" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="2.2dp"
android:src="#drawable/logo" />
The ImageView is placed to the right of the screen. But I'm facing an issue, the ImageView increases and decreases in height and width depending on the length of the TextView, how can I make this work properly, without the ImageView changing size?

The problem here is that your ImageView matches the size of your parent, that is your LinearLayout (with id tabBar).
That LinearLayout wraps the content on his height, so, it sums all "heights" of his contents. The LinearLayout will take the height of TextView + the height of the ImageButton. Then, the ImageView will match that height.
A solution depends on what you are trying to do, but you can try to:
Set a predefined height in your ImageView
Use a RelativeLayout instead of a LinearLayout and align all your views depending on each other

My suggestion is to set layout_weight to all the components so that their size is fixed regardless of their contents:) See here for more details

How to lay image over another image where the middle of the image should align with the bottom of the image underneath

I have a banner that I am displaying on an Android Layout. On this banner, I have two avatars that I would like to display next to each other, and most importantly, I would like to have them displayed where the midway point of these two avatars on the y-axis is aligned with the bottom of the banner that these avatars sit on top of.
How would you do this?
Edit:
In other words, I'm asking how you could use an parameter like android:layout_below, but instead of it aligning the top of the imageview with the botton of the specified layout, to align the center.

Unfortunately, there is no direct layout parameter to align a center point with another edge. If the height of your avatars is fixed, you could add some padding that is half the height so they all line up; i.e.
<?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="wrap_content">
<ImageView
android:id="#+id/banner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="25dp"
android:src="#drawable/banner" />
<ImageView
android:id="#+id/avatar1"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_alignBottom="#id/banner"
android:src="#drawable/horse" />
<ImageView
android:id="#+id/avatar2"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_alignBottom="#id/banner"
android:layout_toRightOf="#id/avatar1"
android:src="#drawable/horse" />
</RelativeLayout>
If the heights of those items, however, is dynamic, then you will need to create a custom ViewGroup container so you can measure the avatar heights (in onMeasure()) and apply the padding (or other offset value) at runtime.

Put them in a linear layout, and then give them a width to fill the parent. Then you can use the weight property to disperse the widths equally.
<?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="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/clock" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/clock" />
</LinearLayout>

android, imageviews inside linear layout don't fit the screen size

I was wondering how to make the four images inside my LinearLayout look as big as possible depending on the screen. When I install the widget in my phone, it always fits only 50% of the screen.
Here comes the xml.
Any hints?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="center_vertical|clip_horizontal"
android:orientation="horizontal" >
<ImageView
android:id="#+id/hora1_current"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/neutro_on" />
<ImageView
android:id="#+id/hora2_current"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/neutro_on" />
<ImageView
android:id="#+id/minuto1_current"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/neutro_on" />
<ImageView
android:id="#+id/minuto2_current"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/neutro_on" />

Add android:weightSum="1" to your parent linear layout.
The linear layout should have android:orientation="horizontal"
Now to each of your image views , add android:layout_weight = 0.25.
Hope this works.

hope you read enough about orientation vertical and horizontal .
you should clear here that by filling screen whether you mean altogether all 4 fills the screen such that each takes 25% or every one should take 100% width and added up vertically .
for first case add android:layout_weight=1 for every imageView .
for second case replace android:orientation="horizontal" by android:orientation="vertical" in root LinerLayout

Don't use wrap content, instead use the actual dimensions of the image or fill parent.

android layout scale along with content imageView's

I have a relative layout and in that I have 4 imageViews stacked one on the top of another.
I have a set of layout like this, where I have a Linear Layout and a Relative layout on one on top of another.
<LinearLayout android:layout_width="fill_parent" android:layout_height="0dip" android:layout_weight="1.0" android:background="#5500FF00"
android:orientation="vertical" android:gravity="center_horizontal|bottom" android:paddingBottom="3dip">
<include layout="#layout/app_tax_coin_subsection"/>
</LinearLayout>
In the linear layout I am including another relative layout from another xml file which has a number of boxes on top of one another..
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="#+id/app_income_coin_id"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="#drawable/box_red"
android:id="#+id/box1" android:layout_centerHorizontal="true" android:layout_alignParentBottom="true" android:visibility="visible"/>
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="#drawable/box_red"
android:layout_above="#id/box1" android:layout_centerHorizontal="true" android:id="#+id/box2" android:visibility="visible"/>
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="#drawable/box_red"
android:layout_above="#id/box2" android:layout_centerHorizontal="true" android:id="#+id/box3" android:visibility="visible"/>
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="#drawable/box_red"
android:layout_above="#id/box3" android:layout_centerHorizontal="true" android:id="#+id/box4" android:visibility="visible"/>
</RelativeLayout>
The above code working correctly and I am getting 4 lovely red boxes one on top of another. Now I want to reduce the size and width of the relative layout and I want these boxes to reduce size as well. In short what can I do to make the content imageView to resize(even to a size smaller than the original image size) along with its parent layout?

The layout height and width of the RelativeLayout are FILL_PARENT so they will take up the full screen. You can start by setting an absolute height/width in dps, the ImageViews will scale down to fit the parent.