I am struggling to debug a weird UI glitch for listviews in my android app. 99% of the time everything looks and works like it should, but every now and then my listviews behave strangely. When you restart the app the listview looks normal again.
Does anyone know if this is a known android bug?
The fact that it only happens at random (I have tried to figure out a pattern and cant) scares me. I havent been able to find anything online regarding similar issues. Hopefully I've just been googling the wrong search-terms.
Any advice/help would be much appreciated.
Thanks in advance.
What the Listview usually looks like:
What the listview looks like every now and then:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="#dimen/tile_height_padded"
android:descendantFocusability="blocksDescendants"
android:layout_margin="0dp"
android:padding="#dimen/padding_list">
<!--This is the clickable background of the item-->
<ImageView
android:id="#+id/imageview_poi_tile_detail_button_detail"
android:background="#color/ca"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="0dp"
android:layout_toLeftOf="#+id/imageview_poi_tile_map_button"/>
<!--This is the Grey vertical line next to the icon on the left-->
<ImageView
android:id="#+id/delimiter_poi_tile"
android:layout_width="#dimen/delimiter_size"
android:layout_height="#dimen/tile_description_height"
android:layout_marginTop="#dimen/margin_list_vertical"
android:layout_marginBottom="#dimen/margin_list_vertical"
android:background="#color/git"
android:layout_toRightOf="#id/imageview_poi_tile_icon"/>
<!--This is the red map button on the right-->
<ImageView
android:id="#id/imageview_poi_tile_map_button"
android:background="#color/lr"
android:src="#drawable/map"
android:scaleType="fitCenter"
android:padding="#dimen/image_button_padding"
android:layout_width="#dimen/button_size"
android:layout_height="match_parent"
android:layout_alignParentRight="true"/>
<!--This is the marker Icon on the left-->
<ImageView
android:id="#+id/imageview_poi_tile_icon"
android:src="#drawable/poidefaultgit"
android:scaleType="fitStart"
android:padding="#dimen/image_button_padding"
android:background="#color/ca"
android:layout_width="#dimen/button_size"
android:layout_height="#dimen/tile_description_height"
android:layout_margin="0dp"/>
<!--This is the bold title text, eg. BARONS-->
<TextView
android:id="#+id/textview_poi_tile_type"
android:background="#color/ca"
android:paddingLeft="#dimen/padding_list"
android:layout_margin="0dp"
android:gravity="left|top"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textStyle="bold"
android:text="Poi Type"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#color/git"
android:layout_width="match_parent"
android:layout_height="#dimen/tile_title_height"
android:layout_toRightOf="#id/delimiter_poi_tile"
android:layout_toLeftOf="#+id/textview_poi_tile_distance"/>
<!--This is the address that is shown, eg 3 ADDERLEY ST, CAPE TOWN,-->
<TextView
android:id="#+id/textview_poi_tile_description"
android:background="#color/ca"
android:paddingLeft="#dimen/padding_list"
android:layout_margin="0dp"
android:gravity="left|top"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Address"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#color/git"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/textview_poi_tile_type"
android:layout_toRightOf="#id/delimiter_poi_tile"
android:layout_toLeftOf="#id/imageview_poi_tile_map_button"/>
<!--This will display a string when the gps is on, not shown in image as gps was off in screenshot-->
<TextView
android:id="#id/textview_poi_tile_distance"
android:background="#color/ca"
android:textColor="#color/lr"
android:text=""
android:paddingRight="#dimen/padding_list"
android:layout_margin="0dp"
android:gravity="left|top"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/imageview_poi_tile_map_button"/>
#Override
public View getView(int position, View convertView, ViewGroup parent)
{
TextView description;
TextView type;
TextView distance;
ImageView imageView;
ImageView mapIcon;
ImageView clickableArea;
if(convertView == null)
{
convertView = LayoutInflater.from(context).inflate(R.layout.listitem_poi, parent, false);
description = (TextView) convertView.findViewById(R.id.textview_poi_tile_description);
type = (TextView) convertView.findViewById(R.id.textview_poi_tile_type);
distance = (TextView) convertView.findViewById(R.id.textview_poi_tile_distance);
imageView = (ImageView) convertView.findViewById(R.id.imageview_poi_tile_icon);
mapIcon = (ImageView) convertView.findViewById(R.id.imageview_poi_tile_map_button);
clickableArea = (ImageView) convertView.findViewById(R.id.imageview_poi_tile_detail_button_detail);
convertView.setTag(new ViewHolder(description, type, distance, imageView, mapIcon, clickableArea));
}
else
{
ViewHolder viewHolder = (ViewHolder) convertView.getTag();
description = viewHolder.description;
type = viewHolder.type;
distance = viewHolder.distance;
imageView = viewHolder.imageView;
mapIcon = viewHolder.mapIcon;
clickableArea = viewHolder.clickableArea;
}
final int finalIndex = position;
final PointOfInterest poi = getItem(position);
description.setText(poi.getDescription());
type.setText(poi.getName());
imageView.setImageResource(R.drawable.poidefaultgit);
distance.setText(poi.getDistance());
return convertView;
}
I think there are several things that are causing this. From experience, I've noticed RelativeLayout will sometimes not appropriately size it's children based on available space. It'll sooner let something get clipped if one of the sides of a child is not properly bounded somewhere. Also, I think some of the sizes for the TextViews just aren't enough to display the text. I did the following off the top of my head here so it may need some tweaking, however it should paint the picture of the layout to try. Unfortunately its not as flat as your current XML but it should hopefully fix your problem. Sorry not at a computer to test this currently.
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--This is the marker Icon on the left-->
<!--Use margin if you need more space to divider-->
<ImageView
android:id="#+id/imageview_poi_tile_icon"
android:src="#drawable/poidefaultgit"
android:scaleType="fitStart"
android:padding="#dimen/image_button_padding"
android:background="#color/ca"
android:layout_width="#dimen/button_size"
android:layout_height="match_parent"/>
<!--This is the Grey vertical line next to the icon on the left-->
<!--Use margin to determine how close the line is to the top/bottom of item-->
<ImageView
android:id="#+id/delimiter_poi_tile"
android:layout_width="#dimen/delimiter_size"
android:layout_height="match_parent"
android:layout_marginTop="#dimen/margin_list_vertical"
android:layout_marginBottom="#dimen/margin_list_vertical"
android:src="#color/git"
android:background="#color/ca"/>
<RelativeLayout
android:gravity="center_vertical"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="#color/ca">
<!--This is the bold title text, eg. BARONS-->
<TextView
android:id="#+id/textview_poi_tile_type"
android:paddingLeft="#dimen/padding_list"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textStyle="bold"
android:text="Poi Type"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#color/git"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<!--This is the address that is shown, eg 3 ADDERLEY ST, CAPE TOWN,-->
<TextView
android:id="#+id/textview_poi_tile_description"
android:paddingLeft="#dimen/padding_list"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Address"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#color/git"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textview_poi_tile_type"/>
<!--This will display a string when the gps is on, not shown in image as gps was off in screenshot-->
<TextView
android:id="#id/textview_poi_tile_distance"
android:textColor="#color/lr"
android:text=""
android:paddingRight="#dimen/padding_list"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/textview_poi_tile_type"/>
</RelativeLayout>
<!--This is the red map button on the right-->
<ImageButton
android:id="#id/imageview_poi_tile_map_button"
android:background="#color/lr"
android:src="#drawable/map"
android:scaleType="fitCenter"
android:padding="#dimen/image_button_padding"
android:layout_width="#dimen/button_size"
android:layout_height="match_parent"/>
</LinearLayout>
The idea here is to have the entire item in a LinearLayout that wraps to the size of the contents. Rely on it for getting everything horizontally in place. Then only wrap the TextViews in a Relativelayout. Just have the TextViews align beneath and to the side of each other. Have the RelativeLayout worry about actually centering them accordingly. It's weighted to ensure it stretches to fill any remaining space horizontally.
Also, your map button can be an ImageButton. You don't need a view solely to take the item click event. The root layout itself can do it as is. You probably ran into an issue with this setup. Check out this post which tells you how to properly get a row to click when an ImageButton is embedded.
Try inflating a new view every time instead of re-using them. I know it isn't the best thing to do, but at some point i had similar problems and this was the only thing that worked.
Thanks for the help. I managed to clean up the layout file a lot.
The reason that the UI glitch was happening is due to the wrong style file being loaded. It only happened when I loaded another element before that used that style. To solve it I created a new style specifically for the listviews and assigned it to the listview elements.
Related
I have a list view with each list item being designed in a RelativeLayout. Within each relative layout I have three buttons and two text views. Everything should be in one row. The first text view is supposed to be left aligned, while the buttons are in one horizontal row aligned to the end of the parent, with the second text view being directly before them. My problem is, that very long text in the primary text view overlaps with the buttons and the second text view. The text does break into a second line if long enough, but I'd like it to break.
For now I have achieved the list to look like this. Sadly the text does not break before the buttons/associated text, but only at the end of the parent.
Previously I had a layout_marginEnd of 160dp, which worked fine on my personal phone, but since then I have received bug reports from users with other phones that own another brand.
My code looks as follows:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/nameTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginStart="10dp"
android:layout_marginTop="12dp"
android:layout_marginBottom="12dp"
android:textIsSelectable="false"
android:textSize="#dimen/listItemTextSize"
tools:ignore="UnusedIds" />
<LinearLayout
android:id="#+id/buttonLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
tools:ignore="RelativeOverlap,UnusedIds">
<TextView
android:id="#+id/amountTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginEnd="8dp"
android:textIsSelectable="false"
android:textSize="#dimen/listItemTextSize" />
<ImageButton
android:id="#+id/subtractButton"
style="#style/Theme.ShoppingList.ImageButton"
android:background="#drawable/ic_minus"
android:contentDescription="#string/mainSubtractButtonDescription" />
<ImageButton
android:id="#+id/addButton"
style="#style/Theme.ShoppingList.ImageButton"
android:background="#drawable/ic_plus"
android:contentDescription="#string/mainAddButtonDescription" />
<ImageButton
android:id="#+id/deleteButton"
style="#style/Theme.ShoppingList.ImageButton"
android:background="#drawable/ic_trash"
android:contentDescription="#string/mainDeleteButtonDescription" />
</LinearLayout>
</RelativeLayout>
Thank you in advance for your help!
Add android:layout_alignParentStart="true" and android:layout_toStartOf="#id/buttonLayout" to the nameTextLayout.
This will break nameTextView before LinearLayout and keep nameTextView's text left aligned.
Add android:layout_toStartOf="#id/buttonLayout" to the nameTextLayout. This will make it stop before that linear layout and break there.
I'm trying to create a listview item that consists of a textview and a button horizontally.
I want the textview to be on the left and the button to be on the right.
The button always has the same size so I want to let the textview take up the rest of the space.
My problem is that the textview (if it contains a text wider then the screen) pushes the button out of the screen.
I want the textview to not push the button out of the screen - I want the button to always stick to the right side of the screen regardless of how long the text in the textview is.
If the text is too long to be displayed, I just want to display as much as possible (like overflow:hidden in HTML) without pushing the button out to the right.
Is it possible to configure my view to handle this or do I need to do al sorts of measuring of screen width and text length etc. etc.?
Here is my listview item xaml:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="0">
<TableRow>
<TextView
android:id="#+id/tv_item_text"
android:text="(123456) Item Name"
android:paddingLeft="10dip"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
android:gravity="fill_vertical"
/>
<Button
android:id="#+id/btn_go"
android:layout_width="wrap_content"
android:text="Go"
android:textColor="#android:color/holo_blue_dark"
android:layout_gravity="fill_vertical"
android:gravity="center"
android:visibility="visible" />
</TableRow>
I'm pretty new to Xamarin so if anyone could help me out it would be much appreciated.
/Aidal
I really don't understand why people think using a TableLayout and nest a TableRow inside of it is a good practice for ListView/RecyclerView items...
Why are you not using a RelativeLayout which tells the button to be on the right and make the text view fill the rest of the space?
Should look something like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp">
<Button
android:id="#+id/btn_go"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Go"
android:textColor="#android:color/holo_blue_dark"
android:layout_alignParentRight="true" />
<TextView
android:id="#+id/tv_item_left"
android:layout_width="match_match"
android:layout_height="match_parent"
android:layout_toLeftOf="#id/btn_go"
android:layout_alignParentLeft="true" />
</RelativeLayout>
so I'm currently working on an app on Android, and I got stuck on a specific problem regarding the RelativeLayout, which I can't find a way to solve.
I have in the layout three views as follows: TextView, Textview and ImageView (laid horizontally), here is a screenshot of the ios counterpart:
the Textview at the middle should stick to the first one, until he gets to the Imageview, when he does, he keeps his minimum size (wrap content), while the first Textview truncate.
On IOS I setted priorities to the constraint to accomplish this, but I can't figure out how to solve this on Android.
Here what I tried:
<android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#drawable/daily_movie_title_box">
<TextView
android:id="#+id/daily_header_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="15dp"
android:text="New Text aawi oa ioawfwi"
android:textSize="16sp"
android:textStyle="bold"
android:textColor="#color/white"
android:lines="1"
android:singleLine="true"
android:layout_alignParentStart="true"
/>
<TextView
android:id="#+id/duration_text"
android:text="138 mins"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:textSize="13sp"
android:textColor="#color/white"
android:lines="1"
android:layout_alignBaseline="#id/daily_header_textview"
android:layout_toStartOf="#+id/certification_icon"
android:layout_toEndOf="#id/daily_header_textview"
/>
<ImageView
android:id="#id/certification_icon"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:src="#drawable/uk12a"
android:layout_alignBottom="#id/daily_header_textview"
app:layout_aspectRatio="100%"/>
</android.support.percent.PercentRelativeLayout>
Which resulted in this (which is what I want):
But when I increase the first Textview text it's not behaving as I desire...
Is it possible to achieve the behaviour I want in Android (keep the middle Textview wrap content, and truncate the first one if needed)?
I will post an update if I find a solution eventually, just wanted to see if anyone can find an easy way to achieve this behaviour, as I suspect there is.
Thanks.
From my understanding, you want the first TextView to be as large as possible, without adding space after the text if the text is too small. The second TextView should only wrap_content, but it should fill the rest of the parent layout when the row doesn't. The ImageView is set to wrap_content.
I tested it with this layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:shrinkColumns="0"
android:stretchColumns="1">
<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="Shrinking text dddddddddddddddddddddd"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Midle column"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"/>
</TableRow>
</TableLayout>
</LinearLayout>
The only problem is that if the second column has a incredibly large text, it will push the other views out of the parent. But in your case, I don't think that will be a problem. Otherwise, I think it does the job.
These are some suggested solutions:
You can use LinearLayout with horizontal orientation and weight for each component (TextViews and ImageView).
You can set the minimum and maximum text length for the second TextView.
But i prefer to apply the first solution. You can assign a weight for each component ( amount of space on the screen ) using:
android:layout_height
I am probably just misusing the XML, but I'm trying to create a layout for a list view row, but I seem to be failing miserably.
I have this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="vertical"
android:paddingLeft="20dp"
android:paddingRight="20dp" >
<TextView android:id="#+id/titleTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/detailsTextView"
android:textSize="16sp"/>
<TextView android:id="#id/detailsTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"/>
</RelativeLayout>
In hopes that I will be able to add a layout that is 100dp in height to my ListView and have two TextViews inside of it. However, when I try to set it up like so:
public View getView(int position, View currentView, ViewGroup parent)
{
View rowContents = LayoutInflater.from(mContext).inflate(R.layout.list_view_cell, null);
TextView titleView = (TextView)rowContents.findViewById(R.id.titleTextView);
titleView.setText(titles[position]);
TextView detailsView = (TextView)rowContents.findViewById(R.id.detailsTextView);
detailsView.setText(details[position]);
return rowContents;
}
It's giving me a row with only my detailsView TextViewwith a wrap_content height, it seems. The titleView is nowhere to be seen and I would assume the rowContents isn't being set either, otherwise the height would be 100dp, right?
I know I should be reusing the old view and setting its contents, but I just made this up quickly as a test.
What is going wrong here?
Try setting the lower TextView with layout_below instead:
<TextView android:id="#+id/titleTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"/>
<TextView android:id="#+id/detailsTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/titleTextView"
android:textSize="12sp"/>
(Otherwise you could "lock" titleTextView into the upper lefthand corner, which might force detailsTextView to move down.)
But you should watch this Google Talk by one of Android's lead programmers, it gives great detail on how to make an efficient adapter.
Below is how I have designed my xml. Now what I am trying to fit a textview inside the white box shown below. But am being restricted by FrameLayout (at least I think so) that I need to hard code values to make the text view fit in the middle or some where inside the white box. I cannot use Relative or other layouts for this purpose as I have understood by my trials as this whole is a single image.
Here is my layout,
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:visibility="visible" android:layout_marginTop="60dip"
android:layout_gravity="center" android:id="#+id/xxx">
<ImageView android:id="#+id/calloutquizImage"
android:background="#drawable/callout" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:scaleType="fitCenter" />
<ImageView android:id="#+id/triviaImage"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignTop="#+id/calloutquizImage" android:layout_gravity="left"
android:src="#drawable/trivia" android:background="#drawable/trivia"
android:layout_marginTop="50dip" android:layout_marginLeft="85dip"></ImageView>
<TextView android:text="TextView" android:id="#+id/triviAnswerText"
android:layout_marginTop="125dip" android:layout_marginLeft="85dip"
android:layout_gravity="left" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:textColor="#000000"
android:typeface="sans"></TextView>
<ImageButton android:id="#+id/triviaanswercloseButton"
android:src="#drawable/closebtn" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:background="#drawable/closebtn"
android:layout_marginRight="8dip" android:layout_marginTop="43dip"
android:layout_gravity="right" android:onClick="triviaanswerClose"></ImageButton>
<ImageView android:id="#+id/buttontoclose"
android:layout_gravity="left"
android:visibility="visible" android:onClick="triviaanswerClose"
android:layout_marginTop="50dip" android:layout_marginLeft="75dip"
android:layout_width="230dip" android:layout_height="170dip"></ImageView>
</FrameLayout>
Because of this the text view looks in different positions in various handsets.
Any guesses what can be done for this instead?
Below is my image :
I think you are not doing the right thing. If you want a text to appear inside a white box (or even resize it, if there is to many text to fit to it) - you can still avoid any layouts ad do it with only one TextView.
Please have a look what is NinePatch image in Android:
http://developer.android.com/reference/android/graphics/NinePatch.html
http://developer.android.com/tools/help/draw9patch.html - drawing tools
So basically you will need only 1 textView and your image, properly converted to 9-patch with 2nd link. (Basically - just add a few black pixels on image border).
No just set this 9-patch as a background of textView. It will place text right where you need, and will shrink white box if you'll define so in 9-patch.
UPD:
Please find the resulting screenshot:
As you can see, textView not handles
WhiteBox" itself, filling it with text and resizing the box if necessary.
Here is how to make it work:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/first"
android:background="#drawable/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Manymanymany text
Manymanymany text
Manymanymany text
Manymanymany text
Manymanymany text
Manymanymany text" />
<TextView
android:layout_below="#+id/first"
android:background="#drawable/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Not so many text" />
</RelativeLayout>
And here is your image, converted to 9patch. Just place it to "drawable/" folder. Note: it MUST have "back.9.png" name.
For details of how 9patch works you can check links above. The main idea: by making black dots on left and top border - you specify which part of the image will be stretched when image must be upscaled. By making dots on right/bottom side you tell the View where to place the content. In our case content is a text of the TextView.
Hope it helps, good luck
I think you can use a RelativeLayout within the FrameLayout for the ImageView and the TextView, and by using the parameters, you can navigate the TextView to the white box. Refer to the LayoutParams documentation for details.
for eg. you can add the ImageView block first and then the TextView, so that the TextView will lay over the ImageView, and by using align bottom, and specifying top margin with a negative value, you can make the TextView go over the image. Or rather, if you are using eclipse, you can directly move the text view in the graphic layout.
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/tools"
android:id="#+id/xxx"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="0dp"
android:visibility="visible" >
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margintop="0dp" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/user2" />
<TextView
android:id="#+id/Textviewtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world"
android:layout_below="#+id/imageView1"
android:layout_marginTop="-10dp"
app:context=".TestActivity" />
</RelativeLayout>
</FrameLayout>
Similar to above, you can specify margin left and right to properly position your TextView as you want. Check with graphic layout for feedback to know the correct position.
Please reply if this helped.
Use your images and values for the height and width. I just tried for testing.