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 put an image half over an android background?

i want to create something like that:
removed image
i have tried using relative layout, when I align the image and the background view to the top
and applying margin to the bg view:
<RelativeLayout
android:id="#+id/fieldLinearLayout"
android:layout_width="match_parent"
android:layout_height="80dp" >
<ImageView
android:id="#+id/mood"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/fieldLinearLayout1"
android:layout_alignParentTop="true"
android:layout_marginTop="20dp"
android:src="#drawable/signup_illu_verificationcode" />
<LinearLayout
android:id="#+id/fieldLinearLayout1"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentTop="true"
android:layout_marginTop="25dp"
android:background="#f9ffff"
android:orientation="vertical" >
but it didn't work, the bg covers the image.
how can I fix that?

Have you tried using a FrameLayout? With a FrameLayout, you can decide the z-index by the order of which you add the items. The first items will sit on the bottom and the last items will sit on the top.

You can try using negative margins to move the ImageView up.

Android xml layout (with picture)

I need some help with an Android Layout.
What I want to achive is a Layout where the views around the grey view are growing with the screensize and the view in the middle is always centered.
If the screen would be so small that in touches the grey views left and right should have the width of 0...
I have made an Imageviewer the grey area is the image and the outer areas all have a black background. the image should match the screen if the screen is small. but if it grows the image shall not scale, but the areas around it should grow...i hope you understand what i mean.
Maybe a vertical linear layout with a horizontal layout in it?
thank you!

Try this:
Use RelativeLayout
Use fixed size say 400dp x 400dp for the middle (grey) square
Use android:layout_centerInParent="true" for the grey square
Position top to be above and alignParentTop=true,
bottom to be below and alilgnParentBottom = true
left: toTheLeft of center and below top, above bottom
right: toTheRight of center, below top, above bottom
Here we go:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/center"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerInParent="true"
android:background="#343434" />
<LinearLayout
android:id="#+id/top"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/center"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#ababab" />
<LinearLayout
android:id="#+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/center"
android:layout_alignParentLeft="true"
android:layout_alignTop="#+id/center"
android:layout_toLeftOf="#+id/center"
android:background="#cfcfcf" />
<LinearLayout
android:id="#+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/left"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/left"
android:layout_toRightOf="#+id/center"
android:background="#cfcfcf" />
<LinearLayout
android:id="#+id/bottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/center"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:background="#ababab" />
</RelativeLayout>

If all that outside space is just going to be a black background like you said, then why not just have one RelativeLayout with an ImageView centered inside it with a fixed layout_width and layout_height that will stay the same on all devices. Set the RelativeLayout with a black background. This way would perform better, and really, if all you want is a black border around the image, you don't need to worry about having actual layouts everywhere else. As long as you set a fixed width and height and center it, it should perform just as you want.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerInParent="true"
android:src="#drawable/apache" />
</RelativeLayout>
Like that. Or use "100px" if you want to be really specific I suppose.. though that's not recommended.

You can handle big and small screens by setting up dimensions for various screen dimensions, so for example:
values/dimens.xml:
<resources>
<dimen name="margin"0dp</dimen>
</resources>
values-w480dp/dimens.xml:
<resources>
<dimen name="margin"3dp</dimen>
</resources>
values-w600dp/dimens.xml:
<resources>
<dimen name="margin"6dp</dimen>
</resources>
etc.
Now you can set your margin in your ImageView like this:
android:layout_marginRight/Left="#dimen/margin"
Don't forget to set your ImageView to
android:gravity="center"
If your layout just consists of only this ImageView then you can leave out the margin and just set the gravity to center.

Why nine-patch image in RelativeLayour hides all inner elements?

When I set 9.PNG image as RelativeLayout's background, all elements inside it gets shrunken to the middle. Here is the XML and the snapshot.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/bg"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Just a simple white text which does not show up"
android:textColor="#ffffff"
/>
</RelativeLayout>
If I change background to a color or a normal image, I get the text.
android:background="#drawable/bg2" //normal image
Can anyone explain why is this happening?

Did you define the content area of your nine-patch? Because it looks like the content area is the little pixel in the middle.
The content area is defined by the bottom and right sides of your nine patch. You can for example make it as big as your patch.

Aligning center relative to others

So it's possible to align the top, bottom, left, and right of one view with another so that their edges are flush with each other. However, I've been wondering if it's possible to align the centers of two views of different sizes. My situation occurs when I have an ImageView side by side with a TextView, like this: [ImageView] [TextView]. The ImageView is bit taller than the TextView and so what I do is add padding/margins to the bottom of TextView to get it align and look like the ImageView and TextView horizontal centers are aligned. Problem is, when this view is displayed on larger tablet screens, the padding and margins don't work out right and the TextView doesn't look aligned with the ImageView. I'm sure there is an easy fix to allow this to always work out, so could someone provide me with some insights? Thanks!

This is how I did for a listview row:
<?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:background="#FFFFFF"
android:padding="5dp"
android:gravity="center_vertical">
<TextView android:id="#+id/questionItemTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="20sp"
android:textColor="#000000"
android:gravity="center_vertical"/>
<ImageView android:id="#+id/questionViewed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/eye"
android:layout_marginLeft="5dp" />
<ImageView android:id="#+id/questionAnswered"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/check"
android:layout_marginLeft="5dp" />
</LinearLayout>

Use weightSum rather than padding in dips or pxs, that will make your layout look fine regardless of the size of the user's device.
or you could use gravity as well.
Or you can create a second xml file and insert that one into your res/xlarge file, the phone will pick which xml to read.