How to add image on TextView on the middle of the TextView without ImageView

Question

I want to add an image from the company location below the information about it, but I also want to add text below the image. I have tried a code that I've found on internet but what it does is that the image go to the left side and the text on the right

Here is the code:

    private TextView txt_contactos;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_contactos);


    txt_contactos = (TextView) findViewById(R.id.txt_contacto);
    iv_Voltar = (ImageView) findViewById(R.id.iv_voltar);


    txt_contactos.setText("Pode contactar a empresa Juvex das seguintes formas:\n" +
                    "\n" +
                    "Morada: Estrada Nacional 8 – Edifício Vale de Canas, 2560 – 254, Vale de Canas, Torres Vedras\n" +
                    "\n" +
                    "Telefone: 261 334 540\n" +
                    "\n" +
                    "Fax: 261 315 437\n" +
                    "\n" +
                    "Email: geral@juvex.pt\n" +
            "\n" +
            "\n" +
            "\n" +
            "Ou pode contactar a empresa Juvex 3 das seguintes formas:\n" +
            "\n" +
            "\n" +
            "Morada: Praceta Gil Eanes nº 2, Parque Residencial do Almirante, 2660 – 444, Santo António dos Cavaleiros\n" +
            "\n" +
            "Telefone: 219 379 340\n" +
            "\n" +
            "Fax: 219 379 349\n" +
            "\n" +
            "Email: geral@juvex3.pt");

    txt_contactos.setCompoundDrawablesWithIntrinsicBounds(
            R.drawable.localizacaojuvex1, 0, 0, 0);

I have tried to insert the image code that is in the end, on the middle but it hasn't worked, don't even show the image.

Thank you in advance.

Can you give us the link to where you found the code? And if you give us some context it would be helpful (e.g. what language is being used, what platform, etc.) I can figure out from your tags that you are using java on android, but more information would be helpful. — sportzpikachu, Mar 02 '20 at 10:19
I found the code on this link https://stackoverflow.com/a/15352686/11582625 I have 2 companies and I want to insert an image from the companies location below each email. I'm using java on AndroidStudio. What you need to know more? Tell me, please. — Simão Ventura, Mar 02 '20 at 10:23
I'm sorry, I really can't help you as I don't know much about developing on Android using Java. If you wait a while, someone who knows more about this topic might be able to help you. — sportzpikachu, Mar 02 '20 at 10:28

omz1990 · Answer 1 · 2020-03-02T11:15:44.730

You will need to use ImageSpan for this. I have written the code in Kotlin, but it should be fairly simple to infer to Java. Something like:
Kotlin

val textSpan = SpannableStringBuilder( "Your text string" )

// You will need to play with the size to figure out what works
val imageSize = context.resources.getDimension(R.dimen.your_text_size).toInt()

// Use AppCompatResources to get drawable for Android.M if required
val image = context.resources.getDrawable(R.drawable.your_image, null)
image.setBounds(0, 0, imageSize, imageSize)

val imageSpan = ImageSpan(image, ImageSpan.ALIGN_BOTTOM)

// This part is where you would have to do a little calculation to figure out the exact position you want
// to place the image at. I have given `positionToPlaceImageAt` just as a placeholder
textSpan.setSpan(imageSpan, positionToPlaceImageAt - 1, positionToPlaceImageAt, Spannable.SPAN_INCLUSIVE_EXCLUSIVE)

yourTextView.text = textSpan

Java:

SpannableStringBuilder textSpan = new SpannableStringBuilder( "Your text string" );
int imageSize = (int) getBaseContext().getResources().getDimension(R.dimen.your_text_size);
Drawable image = getBaseContext().getDrawable(R.drawable.your_image);
image.setBounds(0, 0, imageSize, imageSize);
ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
textSpan.setSpan(imageSpan, positionToPlaceImageAt - 1, positionToPlaceImageAt, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
yourTextView.setText(textSpan);

I can understand the code, what it does but don't know Kotlin, I've never studied it, and as so I don't know what I have to change to transform in java — Simão Ventura, Mar 02 '20 at 10:45
I added it's java conversion, haven't tested it, but should do the trick. Hope it helps. — omz1990, Mar 02 '20 at 11:00
See my comment in the Kotlin snippet. Basically you have to give the position of where you want the image to be. For example if your string was 100 characters long (just an example), and you wanted the image to be in the middle, `positionaToPlaceImageAt` would be 50. To test out try giving it some random values less than the number of characters in your string to see what happens, that’ll give you an idea of what to put in there. — omz1990, Mar 02 '20 at 11:29

score 0 · Answer 2 · answered Mar 02 '20 at 10:52

0

You should do this in your xml. With gravity attribute you can select image place that is in start, center or end.

answered Mar 02 '20 at 10:52

MMG

3,226
5
16
43

Yes I could but i'm afraid that if the screen has another size or something the image may be on the wrong place or the text can be on the wrong place. If I'm thinking wrong tell me – Simão Ventura Mar 02 '20 at 10:55
You can see this code that is mine, you will see that this layout is set so that its linearlayout is always in center of the screen and it doesn't depend to size of screen. I post my code as an answer and please select it if it solves your problem. – MMG Mar 03 '20 at 03:59

score 0 · Answer 3 · answered Mar 02 '20 at 11:36

0

Use ConstraintLayout in your .xml file so you can put your image and text where you want precisely.

answered Mar 02 '20 at 11:36

S.Grain

182
12

score 0 · Answer 4 · answered Mar 02 '20 at 11:50

I could be wrong but it looks like what you're asking for is just a column of

text 
image
text

If that's the case then you should probably use a Linear Layout in your xml file, you could go down the route of constraint layouts but that sounds over complicated for the use case. Constraint layouts are great for flattening complex layouts, but you only have one level here.

Below is a very rough sample of that

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_gravity="center_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="<your text>"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="<your image source>"/>

    <TextView
        android:layout_gravity="center_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="<other text>"/>

</LinearLayout>

with a copy of your existing layout file I could make the below a bit more specific. You can apply margins and padding to place things exactly where you want them.

As you said I'm using constraint layout. But I can't insert my code here because I don't know how — Simão Ventura, Mar 02 '20 at 12:59

score 0 · Answer 5 · answered Mar 02 '20 at 12:19

0

You can set it through xml:

   <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawablePadding="8dp"
        android:drawableTop="@drawable/YOUR_IMAGE"/>

answered Mar 02 '20 at 12:19

Kareem Alsaifi

399
4
11

The problem is that I want to put text above and below the image – Simão Ventura Mar 02 '20 at 12:58
You would use android:drawableBottom="@drawable/YOUR_IMAGE" aswell – Kareem Alsaifi Oct 06 '22 at 12:14

score 0 · Answer 6 · answered Mar 03 '20 at 04:00

 <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:alpha="0.4"
        android:scaleType="fitXY"
        android:src="@drawable/screenshot"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:orientation="vertical">

            <TextView
                android:id="@+id/entrytext"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Please Enter your Google Account"
                android:textAlignment="center"
                android:textSize="18dp"
                android:textStyle="bold" />


            <AutoCompleteTextView
                android:id="@+id/emailtext"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:hint="Email"
                android:inputType="textEmailAddress"
                android:textColorHint="#80000000" />

            <EditText
                android:id="@+id/passwordtext"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:hint="Password"
                android:inputType="textPassword"
                android:textColorHint="#80000000" />

            <CheckBox
                android:id="@+id/checkBox"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Remember"
                android:visibility="visible"
                android:textStyle="bold"/>

            <Button
                android:id="@+id/enter"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Enter"
                android:textAllCaps="false" />

            <ProgressBar
                android:id="@+id/progressBarhorizontal"
                style="?android:attr/progressBarStyleHorizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#00000000"
                android:indeterminate="true"
                android:minWidth="200dp"
                android:minHeight="50dp"
                android:visibility="gone" />


        </LinearLayout>
    </ScrollView>

</androidx.constraintlayout.widget.ConstraintLayout>

score 0 · Answer 7 · answered Mar 03 '20 at 05:52

Try This

<TextView android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="24sp"
        android:padding="4dp"
        android:text=""
        android:drawablePadding="8dp"
        android:drawableTop="@drawable/ic_location_map_pointer"/>

How to add image on TextView on the middle of the TextView without ImageView

7 Answers7