Icon with text inside - how to identify in the layout?

Question

I want to have a TextView (to show a number) hovering over an icon in an ActionBar. What I did was RelativeLayout , set the background for it, and then put this TextView in this layout and screw it with a note until it fits, but it is broken as soon as the length of the text changes. Setting the background on the TextView is small because I cannot put the text in relation to the icon.

Here is my XML:

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:layout_gravity="fill_horizontal" > <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:background="@drawable/cart" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="0" android:layout_marginTop="5dp" android:layout_marginLeft="43dp" android:textAppearance="?android:attr/textAppearanceMedium" /> </RelativeLayout> </RelativeLayout> 

and here is a screenshot to show you what I mean:

Is there a stress-free way, perhaps a library that allows me to set a TextView on top of Drawable so that the TextView is always centered / positioned?

Answer 1

The background setting in TextView is small because I can’t put the text in relation to the icon.

In fact, you can put your text relative to your icon. You need to separate the basket icon and the icon of the number icon as separate images and lay them out separately. I had to do it myself not so long ago, and I did it using RelativeLayout with ImageView basket icon and TextView for numbers with 9-patch icon badge as background.

The trick is to align your TextView number to the left and bottom of the ImageView Recycle Bin icon, and then use strong> and bottom left to put your icon icon on the top and right of the Recycle Bin. Thus, the number icon is always snapped based on the basket icon.

Also, set the gravity your TextView to center , as the numbers grow wider, the relative position of the text is about the same. Finally, use padding on your TextView to control how much difference there is between the edge of the number and the edge of the 9-patch “badge”.

Here is a snippet of my implementation (I partially edited):

  <RelativeLayout android:id="@+id/cartButton" android:layout_width="wrap_content" android:layout_height="fill_parent" > <ImageView android:id="@+id/cartIconImageView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:src="@drawable/ic_menu_cart" /> <TextView android:id="@+id/cartBadge" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBottom="@+id/cartIconImageView" android:layout_alignLeft="@+id/cartIconImageView" android:layout_marginBottom="10dp" android:layout_marginLeft="9dp" android:background="@drawable/state_list_cart_badge" android:gravity="center" android:includeFontPadding="false" android:lines="1" android:paddingLeft="8dp" android:paddingRight="8dp" android:text="7" /> </RelativeLayout> 

And here is what it looks like:

Answer 2

Use FrameLayout. It has always been called useless, but if you ask me that it is ideal to lay one species on top of another.

Quote :

Child modes are drawn on the stack, with the last child added on top. The FrameLayout size is the size of its largest child (plus padding), visible or not (if the FrameLayout parent is enabled). GONE views are used for calibration only if setConsiderGoneChildrenWhenMeasuring () is set to true.

Answer 3

I would just use TextView and set 9 patches as background:

You may have to play with it (I just whipped it in a minute or two), but something like the lowest right image is what you want. This will be much more consistent than looking at two views.