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 vertically align text in a TextView with Compound Drawable

This question is in a way a continuation of my last question.
My problem now is pretty much the same, except that instead of separating the image and text in differend views (namely ImageView and TextView) I learned I can use the attribute android:drawableLeft to set an image "for" my text (the suggestion was pointed to me by Eclipse with a warning icon on the LinearLayout line).
I thought the only difference would be that instead of setting the ImageView with setImageResource() method I would simply set the TextView's drawableLeft attributed with the setCompoundDrawablesWithIntrinsicBounds() method. Instead, when I made the change, I was taken back to my original issue: the text aligns with the top edge of the view rather than the center.
This is what my TextView looks like:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/account_login"
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/pm_gmail"
android:drawablePadding="8dp"
android:text="example#gmail.com"
android:paddingLeft="16dp"
android:layout_gravity="left|center_vertical" />
<View
android:layout_width="fill_parent"
android:layout_height="1dip"
android:layout_centerVertical="true"
android:layout_below="#id/account_login"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="5dp"
android:background="#DDDDDD" />
</RelativeLayout>
The second View is just a separator.
... and this is what the layout looks like after setting the above mentioned attributes:
(I don't have enough reputation to post images yet, so here's the link to it)
(Just to be clear, this is only a static example. My text and image are both set dynamically in the code at runtime).
Any help is greatly appreciated.

Change android:layout_gravity="left|center_vertical" to android:gravity="center_vertical".
layout_gravity is for positioning a View inside a container (layout), while gravity is referred to
the View contents (that is, in this case, the text inside the TextView).

Programmatically added LinearLayouts not equally spaced

I am having some spacing trouble when building part of my UI programmatically in Android 4.0. I am trying to add stylized buttons to a stylized LinearLayout. To space the buttons equally, each one is wrapped in a LinearLayout with a weight of 1. I started with a layout defined in XML (somewhat of a proof of concept,) which renders like I expect:
<LinearLayout android:id="#+id/dialog_footer"
android:layout_width="500dp"
android:layout_height="wrap_content"
android:background="#drawable/dialog_footer">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal"
android:gravity="center">
<Button android:id="#+id/cancel"
style="#style/Button"
android:layout_width="130dp"
android:layout_height="38dp"
android:text="Cancel" />
</LinearLayout>
<!-- Another LinearLayout with a nested Button like the one above -->
</LinearLayout>
To add buttons programmatically, I removed the inner LinearLayouts and put them in their own layout file that I can inflate and add to the outer LinearLayout in Java. It is nearly identical.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal"
android:gravity="center" >
<Button android:id="#+id/button"
style="#style/Button"
android:layout_width="130dp"
android:layout_height="38dp" />
</LinearLayout>
And this is roughly how I'm adding buttons in code:
LinearLayout dialogFooter = (LinearLayout)dialogView.findViewById(R.id.dialog_footer);
LinearLayout wrappedButton = (LinearLayout)getLayoutInflater().inflate(R.layout.dialog_button_wrapped, null);
Button button = (Button)wrappedButton.findViewById(R.id.button);
button.setText(R.string.button_one_text);
// button.setOnClickListener(...);
dialogFooter.addView(wrappedButton);
The buttons appear but now they are grouped together and shifted to the left. Is there something Android does when it parses a Layout that I would need to do myself if I'm adding to the dialog_footer? Since weights come into play here, I thought that calling setWeightSum() on the container I'm adding to (dialog_footer) might be necessary but that didn't help. Does anyone have any ideas what might be causing the difference between the XML and Java approaches?

I believe this is your problem:
LinearLayout wrappedButton = (LinearLayout)getLayoutInflater().inflate(R.layout.dialog_button_wrapped, null);
The null should be replaced with the parent view , so that it will get the layoutParams you want to set for it .
Another thing is about the weight you set - you should set the width/height to 0px so that the weight won't cause the layout process work in a weird/inefficient way .
BTW , you can remove the inner layout (that has the button) and use a single button instead. just set the layout_gravity there to center_horizontal .

LinearLayout should fill minimum space

I have this layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="left">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Some text" />
</LinearLayout>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"/>
</LinearLayout>
But if in first text view (that in LinearLayout) is a lot of text, second text view goes off the screen. This can be solved by setting android:layout_weigh="1" to linear layout. But in this case linear layout will fill all space, and I need that linear layout fill minimum space when in it short text, and not hiding second text view when in linear layout a lot of text.

If the first textview occupies too much horizontal space, the second textview is rendered outside the screen...
To avoid rendering the second textview outside the screen, you need to limit the horizontal size of the first textview. You could give the first textview an android:layout_width with a fixed numeric value. You could set android:singleLine to false. You could set android:maxWidth to an appropriate value. (I haven't tried these solutions, but they should work).
Alternatively, you may consider using a single textview instead of two in a row.

A solution is to put your first TextView in a ScrollView, and put your second TextView in a fixed footer which will never be hidden (this can be done with a RelativeLayout).
If you have too much text in your first TextView then you will be able to scroll it while still showing the second TextView.

Making a View occupy a fixed width in Android layout

I have this as part of my layout:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dip"
android:orientation="horizontal"
android:layout_weight="0.15">
<TextView
android:id="#+id/question_text"
android:layout_width="0dip"
android:layout_height="fill_parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="#string/score_label" />
<TextView
android:id="#+id/score_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right" />
</LinearLayout>
The first TextView is empty at the beginning of the application. Its content is changed dynamically. This makes it occupy zero space so that the second TextView is aligned to the left, even though its layout_gravity is set to right.
How can I make it occupy a fixed width, without taking the contents into account?
I thought about using layout_weight, but I know the recommendation is against using nested weights (the parent ViewGroup has a layout_weight attribute). Maybe I should use a RelativeLayout?
Thanks for any suggestions.

I solved a similar problem using the attribute android:ems="<some number>" on the TextView. An "ems" is the width of the character "M". This attribute makes the TextView exactly the given no. of ems wide.
http://developer.android.com/reference/android/widget/TextView.html

You have all of your TextViews width set to android:layout_width="wrap_content" which means that if there's nothing in there it will have no width. You need to set that to either "match_parent" which will make it the same width as it's parent container or set it to a fixed value, something like android:layout_width="100dp".