Develop Reference

How can get the right size images when setting some resource to imageview?

I hope to put some item into a gridview like following :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/llBg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical"
android:paddingBottom="40dp" >
<ImageView
android:id="#+id/mudImg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:scaleType="fitCenter"
android:src="#drawable/icon_m0_r"
android:visibility="visible" />
<TextView
android:id="#+id/mudTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="8dp"
android:gravity="center"
android:text="fsafdsf"
android:textColor="#color/white"
android:textSize="16dp" />
</LinearLayout>
While the 'mudImg' part got something wrong with the image's size on a true android machine.Actually It never works util I set a indeed num to 'layout_width' and 'layout_height' like '50dp' or something like this.
What I want is show the origin size image and if necessary expended to the size what the parent view left to it.
Now my solution is that calculating the image size with app screen params(height width) and parent view's margins and gridview's numColumns and setting the result by code (since can not do it in xml)
any better idea?

Try this for your ImageView:
<ImageView
android:id="#+id/mudImg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/icon_m0_r"
android:visibility="visible" />
adjustViewBounds="true" tells the ImageView to set the height so that the image has the correct aspect ratio using the given width.

Aligning an image to the right of RelativeLayout without streatching

I have a relative layout that has a background image. I set the height and width to wrap_content. Everything works fine. I want to place an image at the topRight corner of the relative layout. So I use alignParentRight = true. The problem that the relative layout now stretches horizontally to fill the screen.
I have done so much reading and I came across this "circular dependency pitfall"
From the RelativeLayout doc:
Class Overview
A Layout where the positions of the children can be described in
relation to each other or to the parent.
Note that you cannot have a circular dependency between the size of
the RelativeLayout and the position of its children. For example, you
cannot have a RelativeLayout whose height is set to WRAP_CONTENT and a
child set to ALIGN_PARENT_BOTTOM
Here is my XML sample
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#drawable/popup_b"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageButton
android:id="#+id/ibCloseDialog"
android:background="#null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:alignParentRight="true"
android:src="#drawable/close" />
</RelativeLayout>
And that's exactly what I am facing. Is there any recommendation or a way to achieve what I want? I want the the Relativelayout to be as big as the background image and the image at the top right corner of that.
Thank you so much

Have you tried setting gravity to right?
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#drawable/popup_b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right" >
<ImageButton
android:id="#+id/ibCloseDialog"
android:background="#null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:alignParentRight="true"
android:src="#drawable/close" />
</RelativeLayout>

I have already faced these problem and i have been solved this way.
try this may help u.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/backGroundimage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/backGroundimage" >
</ImageView>
<ImageView
android:id="#+id/ibCloseDialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/backGroundimage"
android:background="#drawable/ibCloseDialog" >
</ImageView>
</RelativeLayout>

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#drawable/popup_b"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageButton
android:id="#+id/ibCloseDialog"
android:background="#null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:alignParentRight="true"
android:src="#drawable/close" />
Try using this code.
Here I height and width of RelativeLayout is set to fill_parent.

How can I evenly space my ImageViews in a RelativeLayout

I had a Android application built in which I had 3 ImageViews placed horizontally across a LinearLayout, they were placed with a android:layout_width="0dp" and android:layout_weight="1" such that they had an even spread in the layout.
Now I have to switch to use a RelativeLayout (because I want to overlap another image and that can't be done with a LinearLayout) so I want to start with replicating the same effect of having the 3 ImageViews evenly spread/scaled across the parent layout, but I'm not sure how to achieve this.
I feel like I need to make use of the android:scaleType... maybe center crop:
Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).
Which sounds good but I can't seem to get it to work right... Any thoughts on how I would achieve this even spread of ImageViews across my RelativeLayout?
Snippet of code right now:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="#+id/dragcircle"
android:layout_width="wrap_content"
android:tag="circle"
android:layout_alignParentLeft="true"
android:layout_height="wrap_content"
android:adjustViewBounds="false"
android:scaleType="centerCrop"
android:src="#drawable/circle" />
<ImageView
android:id="#+id/dragsquare"
android:layout_width="wrap_content"
android:tag="square"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/dragcircle"
android:adjustViewBounds="false"
android:src="#drawable/square" />
<ImageView
android:id="#+id/dragtriangle"
android:layout_width="wrap_content"
android:tag="triangle"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/dragsquare"
android:adjustViewBounds="false"
android:src="#drawable/triangle" />
Note: I can't find a question with the same constraints as this one on SO. There are a number of questions like:
Android: how evenly space components within RelativeLayout?
and
android RelativeLayout, equal spacing?
But if you check out the details you'll see that they are people who have not considered the LinearLayout as an option for equal spacing and switching layout types ends up being the solution. I have, I was using it, but it does not work for me because I need to overlap an image:
Note the example, I have 3 ImageViews with basic shapes, but I also have a 4th ImageView (it starts hidden) which is overlapping the middle one. This is why I must use a RelativeLayout

I think you're going to want to go back to your original LinearLayout to meet all of your needs here.
If the size of your fourth image must match one of your existing image then either you'd want to create a resource that is a composite of the two images to swap to when it needs to be overlaid or replace your center ImageView with a RelativeLayout or FrameLayout that contains the ImageView. When you need to add the fourth image, add it to that layout.
Something like:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/dragcircle"
android:layout_width="0dp"
android:layout_weight="1"
android:tag="circle"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="#drawable/circle" />
<FrameLayout
android:id="#+id/centerimagewrapper"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1" >
<ImageView
android:id="#+id/dragsquare"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:tag="square"
android:src="#drawable/square" />
<ImageView
android:id="#+id/arrow"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/arrow"
android:visibility="invisible" />
</FrameLayout>
<ImageView
android:id="#+id/dragtriangle"
android:layout_width="0dp"
android:layout_weight="1"
android:tag="triangle"
android:layout_height="wrap_content"
android:src="#drawable/triangle" />

You could hide the icon you want to place on existing images and keep your previous LinearLayout to achieve this. Each component of your LinearLayout would be a custom layout (inflated):
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
>
<ImageView
android:id="#+id/img"
android:layout_width="100dip"
android:layout_height="100dip"
android:layout_centerInParent="true"
android:scaleType="fitXY"
android:background="#android:color/transparent"
android:src="img1_src"
/>
<ImageView
android:id="#+id/imgOverlap"
android:layout_width="50dip"
android:layout_height="50dip"
android:layout_centerInParent="true"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:src="img2_src"
android:visibility="gone"
/>
</RelativeLayout>
It appears not possible to use "layout_weight" in a RelativeLayout.
You could also consider a GridView and set its number of columns; each item of the GridView would be the inflated layout above.

you could also do it programatically and tell them to be 33% of the screen width. Look at DisplayMetrics and the attributes of each ImageView if you want to achieve this.

Try 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="wrap_content" >
<ImageView
android:id="#+id/dragcircle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:scaleType="fitXY"
android:src="#drawable/circle"
android:tag="circle" />
<ImageView
android:id="#+id/dragtriangle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/triangle"
android:scaleType="fitXY"
android:tag="triangle" />
<ImageView
android:id="#+id/dragsquare"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/dragtriangle"
android:layout_toRightOf="#id/dragcircle"
android:src="#drawable/square"
android:scaleType="fitXY"
android:tag="square" />
</RelativeLayout>

centerHorizontal not working in relative layout, screen rotation is landscape

why android:layout_centerHorizontal="true" in top relative layout is not working but in child where it is in code, is working?
My outer layout is relative and other code is below.
Does screen orientation is a factor?
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="#dimen/twenty" >
<ImageView
android:id="#+id/wait_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#drawable/text_waitingforplayers" />
<ImageView
android:id="#+id/text_baught"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/wait_text"
android:background="#drawable/text_youhavebought" />
<TextView
android:id="#+id/used_bingo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/wait_text"
android:layout_toRightOf="#id/text_baught"
android:text="1333" />
<ImageView
android:id="#+id/bingo_cards"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/wait_text"
android:layout_toRightOf="#id/used_bingo"
android:background="#drawable/text_bingocards" />
<ImageView
android:id="#+id/ballas"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/bingo_cards"
android:background="#drawable/balls" />
<ImageView
android:id="#+id/login_claim"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/ballas"
android:background="#drawable/text_logintoclaim" />
</RelativeLayout>

It's all about hierarchy. When you set android:layout_centerHorizontal="true" on any view it means you are setting that view to center in the horizontal space acquired by its parent. if you want that you set android:layout_centerHorizontal="true" on parent view and all its child will be centered so you will have to make its height and width **wrap_content**. But for doing this you have to make an another parent view of that relative layout.

Try giving android:layout_centerHorizontal="true" for the inside relative layout also.
And also screen orientation is not a factor if we have designed correctly.

ScrollView Makes my background image bigger why?

I am trying to make a scroll view that has a nested relativeLayout view. The realative layout has a background image. When the realativeLayout is the only layout the background image is the size I want it to be.
When I add scroll view it makes the image bigger and I am not sure why and what properties I need to set to fix it.
<?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">
<RelativeLayout android:id="#+id/mainLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/background2"
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView android:id="#+id/txtApplicationTitle"
android:text="My Application"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_marginTop="5dp"
android:textSize="15dp"
android:layout_alignParentTop="true"
android:layout_alignLeft="#+id/txtAbout" />
<TextView android:id="#+id/txtPrivacyHeader"
android:layout_width="wrap_content"
android:text="#string/PrivacyHeader"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_marginLeft="21dp"
android:layout_marginTop="94dp" />
<TextView android:id="#+id/Privacy"
android:layout_width="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/Privacy"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/txtPrivacyHeader"
/>
</RelativeLayout>
</ScrollView>
// this is what I get (you can't tell but it is scrollable)
(source: gyazo.com)
// this how I want the SrcollView to look(this is the exact same code as above just without the ScrollView wrapping it)
(source: gyazo.com)
See how the top part has all of sudden grown so much.

Your ScrollView has its height set to wrap_content and your RelativeLayout has its height set to fill_parent. That means your ScrollView is going to expand to the entire view.