Develop Reference

How to put a TextView in the center of a ImageButton?

Say I have an ImageButton. I want a textview on top of the imagebutton, and centered on it. How would I do this?

you could do it by wrapping both widgets in a FrameLayout
for example:
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/image" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text"
android:layout_gravity="center" />
</FrameLayout>

Use a regular Button, which extends TextView anyway. Then set the background to your image and use setText() to set your text. You can even add icons above, below and/or left & right of the text with the drawableLeft,drawableTop,etc attributes.

You Are overcomplicating your layout. Just add text to the button.
myImageButton.setText("text");
If you really do want to layer these views, you should use a RelativeLayout:
<RealtiveLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/img"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name"
android:layout_centerInParent="true"/>
</RelativeLayout>
Make a special note of the attribute layout_centerInParent . this is how the TextView is correctly centered.

Allign view in relativelayout to borders

Is there a way to layout a view inside a relativelayout next to a border.
I have the following layout(Reduced test case) and I would like to have the image moved as far to the right as possible, so it aligns with the right border. Is there any layout way to do that?
<RelativeLayout android:background="#ff0000"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<EditText android:layout_width='200dp'
android:layout_height='wrap_content'
android:text='First line'
android:id='#+id/first' />
<ImageView android:src='#drawable/test_grid16x16'
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_toRightOf ='#id/first'/>
</RelativeLayout>

In a RelativeLayout, childen can set these attributes to true to be aligned to their container's borders: alignParentTop, alignParentBottom, alignParentLeft, and alignParentRight; and can be combined.
In your case: add alignParentRight="true" to your ImageView.
I'd also move this:
android:layout_toRightOf ="#id/first"
to
android:layout_toLeftOf ="#id/myImage"
in you EditText instead of in your ImageView.
Because now your ImageView rules the scene, and the EditText must be placed accordingly (also, you have to declare the EditText AFTER the ImageView, or the ImageView's id still isn't assigned).
Let's say that now it is the EditText that has to be placed "near to" (toLeftOf) the ImageView, after the ImageView has been created and placed.
In other words, this is what you want:
<RelativeLayout
android:background="#ff0000"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:src="#drawable/test_grid16x16"
android:id="#+id/myImage"
android:layout_width="16dp"
android:layout_height="16dp"
android:alignParentRight="true"
/>
<EditText
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_toLeftOf ="#id/myImage"
android:text="First line"
android:id="#+id/first"
/>
</RelativeLayout>
Note that, here and there, you put a single quotation mark ('), instead of a doble quotation mark (").

Try this code-
<RelativeLayout android:background="#ff0000"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<EditText android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/myimg"
android:text="First line"
android:id="#+id/first" />
<ImageView android:id="#+id/myimg"
android:src="#drawable/test_grid16x16"
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
Hope this works.
Or In your code add- android:layout_alignParentRight="true" in ImageView.
And android:layout_alignParentLeft="true" in EditText.
Use " in android attributes instead of '

How to use transparent text on image in android

Recently I have seen an apps, which has an image with text.
Whether the app used ImageView and TextView? How does the text overlay the image? How has it been done?
I have attached the screenshot.

Set the attribute android:background="#00000000" on your TextView in the layout. XML file.
<FrameLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
>
<ImageView
android:src="#drawable/your_image"
android:layout_height="match_parent"
android:layout_width="match_parent"
/>
<TextView
android:height="match_parent"
android:width="match_parent"
android:background="#00000000"
android:gravity="bottom"
/>
</FrameLayout>

you can either use FrameLayout to put TextView on ImageView or
You can take a text view with the background resouce as your image , something like this
Example:
<TextView
android:layout_gravity="center"
android:background="#drawable/custom_buttonclick"
android:gravity="center"
android:textSize="12dp"
android:textStyle="bold" />

By using Relative Layout, ImageView and TextView you can achieve this put background color of textView to transperent.

when i want to put a small image to the right of a text, it doesn't work

<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/white"
>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:id="#+id/summary"
android:text="Summary "
android:textSize="25px"
android:textColor="#color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<ImageView
android:id="#+id/summary_btn"
android:src="#drawable/next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/summary"
android:layout_toRightOf="#id/summary"
android:layout_alignBaseline="#id/summary"
/>
</RelativeLayout>
<FrameLayout>
I don't want to make this image a button .
But i don't see the error.

Don't use an ImageView, use the TextView's android:drawableRight attribute.

I don't know what's special about the id "summary", but if you change your ids so that the TextView is, say, "#+id/s" and the ImageView is, say, "#+id/s_btn" (and change the references in the ImageView to "#id/s" of course) then it seems to work.

Or use alignParentEnd="true" which is more accurate and for the job. this will move the image all the way to the end of wherever its sitting in (the relativeLayout parent).
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<com.cura.classes.TypefacedEditText
android:id="#+id/passwordprompt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<ImageView
android:layout_alignParentEnd="true"
android:layout_width="30dp"
android:layout_height="30dp"
android:src="#drawable/showpassword_eye" />
</RelativeLayout>
Result:
And if you want the textField to stop at where the image begins, set its marginRight attr to the width of the image

android layout: This tag and its children can be replaced by one <TextView/> and a compound drawable

When I run layout on a specific XML file, I get this:
This tag and its children can be replaced by one <TextView/>
and a compound drawable
What change should be done for the following xml code:
<LinearLayout android:id="#+id/name_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:background="#drawable/grouplist_single_left_grey_area" >
<ImageView android:id="#+id/photo_image"
android:layout_width="#dimen/thumbnail_width"
android:layout_height="#dimen/thumbnail_height"
android:paddingBottom="5dip"
android:paddingTop="5dip"
android:paddingRight="5dip"
android:paddingLeft="5dip"
android:layout_marginRight="5dip"
android:clickable="true"
android:focusable="true"
android:scaleType="fitCenter"
android:src="#*android:drawable/nopicture_thumbnail"
android:background="#drawable/photo_highlight" />
<TextView android:id="#+id/name"
android:paddingLeft="5dip"
android:layout_weight="1"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
This is how it looks like on the screen:
The camera icon is the default. Clicking on that will give the user an option to choose another image.

To expand on Romain Guy's answer, here is an example.
Before:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:padding="5dp" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="My Compound Button" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/my_drawable" />
</LinearLayout>
After:
<TextView
android:layout_marginTop="10dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="My Compound Button"
android:drawableRight="#drawable/my_drawable" android:padding="5dp" />

Merge the TextView and the ImageView into one, by using TextView's setCompoundDrawable*() methods, or using android:drawableLeft.

Thought I would try to get some extra puntos for this as well: you can add padding between the image and the text using android:drawablePadding. https://stackoverflow.com/a/6671544/1224741

Add tools:ignore="UseCompoundDrawables" to <LinearLayout>.

Sometimes it is possible to replace ImageView (or multiple) and TextView with one TextView with compound drawable(s). There are NOT many parameters which can be applied to compound drawable using native API and this TextViewRichDrawable library, but if you can manage one TextView instead of using LinearLayout you should definitely use it.
The list of attributes and parameters which can be applied to compound drawables:
Size: (YES, really):
<com.tolstykh.textviewrichdrawable.TextViewRichDrawable
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Some text"
app:compoundDrawableHeight="24dp"
app:compoundDrawableWidth="24dp"/>
Even set vector resource as drawable:
<com.tolstykh.textviewrichdrawable.TextViewRichDrawable
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Some text"
app:drawableTopVector="#drawable/some_vector_drawble"
app:drawableEndVector="#drawable/another_vector_drawable" />
Drawable's Padding using native API android:drawablePadding -> link
Here is an example:

A LinearLayout which contains an ImageView and a TextView can
be more efficiently handled as a compound drawable (a single
TextView, using the drawableTop, drawableLeft, drawableRight
and/or drawableBottom attributes to draw one or more images
adjacent to the text).
If the two widgets are offset from each other with margins, this
can be replaced with a drawablePadding attribute.
There's a lint quickfix to perform this conversion in the Eclipse
plugin.
From: Android Official API docs!

When I followed the code above, text inside the TextView doesn't set properly.
You need to set its gravity to center|start to achieve what shown in the asked question.
The textview looks like this:
<TextView
android:id="#+id/export_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:drawableLeft="#drawable/up_arrow"
android:drawableStart="#drawable/up_arrow"
android:gravity="center|start"
android:text="....."
android:textSize="#dimen/font_size15" >
</TextView>

the latest correct way at time of writing to add a compound drawable is using app:drawableStartCompat rather than android:drawableLeft.
<TextView
android:layout_marginTop="10dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="My Compound Button"
android:drawablePadding="5dp"
app:drawableStartCompat="#drawable/my_drawable" />

You can refer this code for example
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/myName"
android:textAlignment="center"
android:textColor="#color/myColor"
app:drawableTopCompat="#drawable/image_name" />

If you don't want to change the ImageView and TextView, you can change the version in the AndroidManifest.xml as:
<uses-sdk`
android:minSdkVersion="8"
android:targetSdkVersion="18"
/>
If your version is android:targetSdkVersion="17" change it s "18".
Hope this will rectify. I did it and got it right

I don't know if this is an efficient solution. But using <androidx.appcompat.widget.LinearLayoutCompat> to wrap the imageView and TextView instead of <LinearLayout> will fix this error. Also by using LinearLayoutCompat, you will be able to adjust the image's width and height which you can't when using a drawableRight, drawableLeft, drawableTop or drawableBottom inside a TextView.

This warning is rather misleading. You can use a compound drawable using a TextView as others have suggested but it doesn't necessarily give you the desired result. You have very littler control over how you want your button to look like using a compound drawable, so it is better to just add tools:ignore="UseCompoundDrawables" and ignore this warning.

Another approach is embed the ViewImage into another LinearLayout (allow handle it with alone id):
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/blue_3"
android:layout_gravity="center_horizontal"
android:paddingTop="16dp" />
</LinearLayout>
<TextView
android:id="#+id/tvPrompt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:paddingTop="16dp"
android:text="#string/xy" />

This tag and its children can be replaced by one <TextView/> and a compound drawable
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="false"
android:contentDescription="."
android:padding="3dp"
android:src="#drawable/tab_home_btn">
</ImageView>
<TextView
android:id="#+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="首页"
android:textSize="10sp"
android:textColor="#ffffff">
</TextView>
</LinearLayout>