Develop Reference

Why my TextView under an ImageView is not showing

I am writing an Android game. In the level selection activity's layout file, I want to layout the levels' buttons (They are actually ImageViews) like this:
x x x
x x x
And each level button has a TextView, with that level's name as the text, below it (Let's call these two views together as a "level choice"). I used a lot of LinearLayouts to do this. Here is the code for a level choice:
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/angles"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/angles_level"
android:textSize="#dimen/level_text_size"/>
</LinearLayout>
As you can see, the two views' height and width are all wrap_content. But when I look at the designer, the text view doesn't show up.When I select the text view in the component tree, it shows where the text view is:
P.S. The picture isn't showing all six levels because I haven't made them yet.
As you can see, the text view is right at the bottom! When I select the ImageView, it shows that it is occupying all the space of its parent!
I don't know why this is happening, my image is certainly a square! Can you explain why this is happening and how do I fix it?
If you need my whole layout code, feel free to tell me in the comments.

For me, the best solution is to position and size it properly by code (where you have total control) instead of xml.
Anyway, i think your problem can be solved by setting ImageViews ScaleType
imageView1.setScaleType(ScaleType.FIT_START);
By XML:
android:scaleType="fit_start"
Hope this helps.

I use background color for textview when I'm studying the layout.
If you use wrap content in both dimension for TextView, that is invisible since you did not write any text inside it. wrap content means that the view take the minimum space. And no text means 0px; try to set ImageView and TextView with layout_weight 1 and layout_height 0dp. In this way both view take half of space of parent layout

Because right now, your LinearLayout doesn't know how to distribute the ratio of its children. And in fact, your imageview's wrap content already
consumes the whole space.
So, LinearLayout says "Sorry TextView, you have no space left".
Use layout_weight to both of the children.
I guess you want to have your picture twice the size of your text.
2:1
That is,
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight=2
android:src="#drawable/angles"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight=1
android:text="#string/angles_level"
android:textSize="#dimen/level_text_size"/>
</LinearLayout>

I just realized that I posted a question about ImageViews leaving out too much whitespace:
LinearLayout leaving out too much white space. Why?
I think this is the same as that problem. So I tried setting adjustViewBounds to true in the xml. And it works! Now the image view look like this:
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/parallel_lines"/>

You can use relative layout
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/angles"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/angles_level"
android:textSize="#dimen/level_text_size"/>
</RelativeLayout>
or simple you can set background of textview to that image by putting this
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/angles_level"
android:background="#drawable/angles"
android:textSize="#dimen/level_text_size"/>

How to resize an ImageView within a given Layout in Android?

I have a problem to make a proper layout for a special case. I experimented on that already for a while both in the designer and in code, but I couldn't find a solution, that's why I need your help.
I have to create a layout which should have a structure like pictured in the images below. It is mainly a combination of several linearLayouts. The problem I have is, that the picture can only be added within the code, because this layout is a detail view that displays information about items from a list.
On the top is the layout without an image place holder (no loaded picture - indicated in black), here the width of "linearLayout_BigLeft" is given by the width of the two buttons and the textView (which all have content) in the "linearLayout_BelowImage".
In the middle you see the layout after the picture has been loaded (image indictated in orange) in code. Depending on the aspect ratio of the android device the black colored gaps differ. I can't get the image to resize to the whole available height and adjusting its width accordingly. The "linearLayout_BelowImage" adjusts itself to the image size (the textView in it is getting wider).
On the bottom is the layout which shows the ideal state. The image always should use the whole available space in height and resize accordingly in width. The "linearLayout_BelowImage" adjusts itself to the image size (the textView in it is getting wider).
Question:
How can I get a layout (after the image is loaded in code) that looks like the bottom picture? The image, after loaded in code, has to resize itself, so it uses the whole available height and resizes its width accordingly. The "relativeLayout_Top" and the "linearLayout_BelowImage" have both fixed heights. The "scrollView_BigRight" adjusts itself based on the space that the "imageView_OrangeImage" doesn't need for itself.
I can deal with solutions that adjust the layout in code, after the image has been added, or solutions that makes the layout.xml itself flexilbe enough to deal with this situation.
Any help is highly appreciated. If you need any more information please let me know.
Below is the main content of my layout.xml, that is needed for this problem.
<?xml version="1.0" encoding="utf-8"?>
<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="#color/white">
<RelativeLayout
android:id="#+id/relativeLayout_Top"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#color/blue" >
</RelativeLayout>
<LinearLayout
android:id="#+id/linearLayout_Big"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#color/transparent" >
<LinearLayout
android:id="#+id/LinearLayout_BigLeft"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/transparent" >
<ImageView
android:id="#+id/imageView_OrangeImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/black" />
<LinearLayout
android:id="#+id/linearLayout_BelowImage"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/blue_white_blue" >
<Button
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#color/blue" />
<TextView
android:id="#+id/textView_BelowImageMiddle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#color/white" />
<Button
android:id="#+id/btn2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#color/blue" />
</LinearLayout>
</LinearLayout>
<ScrollView
android:id="#+id/scrollView_BigRight"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/grey" >
</ScrollView>
</LinearLayout>
</LinearLayout>

android:adjustViewBounds="true"
This one’s a manual fix for “optimized” code in scaleType="fitCenter". Basically when Android adds an image resource to the ImageView it tends to get the width & height from the resource instead of the layout. This can cause layouts to reposition around the full size of the image instead of the actual viewable size.
AdjustViewBounds forces Android to resize the ImageView to match the resized image prior to laying everything else out. There are times where this calculation won’t work, such as when the ImageView is set to layout_width="0dip". If it’s not working, wrap the ImageView in a RelativeLayout or FrameLayout which handles the 0dip flexible size instead
get it from this site
OR
Mode android:scaleType="centerCrop" uniformly stretches the image to fill the entire container and trims unnecessary.
You can change the way it default scales images using the android:scaleType parameter. By the way, the easiest way to discover how this works would simply have been to experiment a bit yourself!
get it here

Setting a controls height to "match_parent" makes its parent bigger?

I am attempting to make a card view with some text and an image inside it.
I want the card view to be just big enough for the textviews which each can wrap to multiple lines so I want the card to scale based on the text, I also want the image to fill the height of the card whatever it may be.
So I set the card view and the linear layout containing the textviews height to wrap_content, and the image views height to match_parent.
However setting the images to match_parent makes the whole card bigger meaning its much bigger than needed for the text?
Is there any way around this or some alternative method to achieve the same effect?
EXTRA INFORMATION:
I think I know why this is happening, Its because the image views desired size based on the size of the image is bigger than the card so if the cards height is match_parent it will get as big as its parent allows until it reaches the size of the original image. Because the height of its parent is wrap_content it lets the image view get that big. I'm still no wiser on how to stop this happening though other than scaling down the image but this would mean it gets pixelated?

So what ended up working for this was to have both items in a relative layout and then align the image view to the top and bottom of the linear layout containing the text kinda like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="80dp"
android:layout_height="match_parent"
android:layout_alignTop="#id/text"
android:layout_alignBottom="#id/text"/>
<LinearLayout
android:id="#+id/text"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:orientation="vertical">
<TextView
android:layout_height="wrap_content"
android:layout_width="match_parent"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="match_parent"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="match_parent"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="match_parent"/>
</LinearLayout>
</RelativeLayout>

I don’t fully understand your problem but maybe you can do something like this
<LinearLayout
android:id="#+id/layout_Parent"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/layout_ImageView"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_width="match_parent"
android:orientation="vertical">
</LinearLayout>
<LinearLayout
android:id="#+id/layout_Text"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
This way the ImageView will only take the space left for it depending of the text.

Scaling ImageViews with LinearLayout weights yields anomalies..?

Alright so I'm trying to have an image set up such that:
the base of the image is lined up with the centre of the layout
the image scales with the layout to fit in background image
What I've done to achieve that is the following:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:weightSum="2"
android:orientation="vertical">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.9"/>
<ImageView
android:id="#+id/widget_icon"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:layout_weight="0.1"
android:src="#drawable/widget_icon"/>
</LinearLayout>
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
So I would expect the image to take up 10% of the space in the top half of the window no matter what the window height/width is set to but what I've come to realize is that it's not the case.. seems like the image doesn't scale down past its "real" size? I'm not entirely sure but I'm getting some really wonky and seemingly not linear scaling happening when it comes to widget_icon. Is this a known issue or am I doing something wrong here?

You should look into the ImageView ScaleTypes
It looks like you might also not understand how weight works
typically you would set width or height to 0dp and then set the weight. if you have 2 items and you set the weights to 1 they would both take up half of the respective width or height.. if you set one to 1 and the other to 2, then the one set to 2 would take up 2/3 of the layout's width or height and the one set to 1 would be 1/3
hope that helps

Why do I get white space on top and on the bottom of my ImageView in my RelativeLayout?

I am using a relativelayout to overlay to images. On all screen sizes so far that I have tested (from 2.7 to 10.1 inch) I always get white space on top of my image. In my IDE I always see that my relativelayout is causing the extra space on top and on the bottom of my image.
Why is that? I have set all height attributes to wrap_content and even added the adjustViewBounds attribute.
Note: You should know that my image is a lot bigger in size, meaning that there will be some sort of scaling.
Thanks for your tips!
Here is the code:
<?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="wrap_content"
android:background="#FFFFFF"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation="vertical"
android:focusable="true"
android:focusableInTouchMode="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="#string/bgf"
android:textColor="#000000"
android:textSize="25sp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:paddingRight="5dp"
android:paddingLeft="5dp"
android:paddingBottom="5dp"
android:layout_gravity="center_horizontal"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:src="#drawable/cde"
android:contentDescription="#string/cde" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:layout_gravity="center_horizontal"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:src="#drawable/fgh"
android:contentDescription="#string/abc" />
</RelativeLayout>
</LinearLayout>
</ScrollView>

I had the exact problem. After struggling for quite some time, I solved it by following this
and add the following to my program
android:adjustViewBounds="true"
It works perfectly

This is occuring as the image is scaled down to fit the area available without losing the image's aspect ratio. You are getting white space because the image first occupied the available width and according to the aspect ratio of the original image the height of the was brought down.
To get a clearer understanding, I suggest you to do the following :
Set the background color of the relative layout to some color
Now you can understand the space between the imageView and the relativelayout.
Once you have checked that on your device, Do the following change and try again
Set the attribute scaleType = "fitXY" in your imageView.
This will make the image to scale and occupy the complete area available to the imageView. (The aspect ratio of the original image will be lost in this case). Now you will come to know the amount of area the imageView occupied.
I suppose once you do this you can conclude that :
In the first run if you had set the background of relativeLayout as black, it won't be visible since the imageView occupies the entire area without leaving any gap.
In the second run the image will cover the entire height and width, although the aspect ratio was lost. Hence this ascertains that imageView does cover the width and height and no space is left, its the image's aspect ratio ie the problem
In case you arrive at a different result altogether please do inform, we can work it out
EDIT :
Please do remove the paddings you have given for imageView too