How to Layout Text to Flow Around an Image

text wrapping around image in android

Older post, but since there is no accepted answer and I have just found solution for same problem in my app, I will post a solution.

I have discovered that text without any line break works well.
Text with a line break that splits the text into 2 parts in a way that the part before line break ends to the right of the image, and the part after line break starts already on next line bellow the image, this also works well.

So what I do is I set left margin of the wrapping TextView's LayoutParams to the desired indent, and I set the text into TextView. Then I add OnGlobalLayoutListener, and inside onGlobalLayout callback, I count the position of the last character on the last line to the right of the image

//lines - number of lines to be affected by the leadingMargin    
int charCount = textView.getLayout().getLineEnd(Math.min(lines - 1, textView.getLayout().getLineCount() - 1));

If the text does not have more lines than the number of lines that should have the left margin (or if the last character is already line break), I just set the LeadingMarginSpan2 on the whole length of the text.

// s - original Spannable containing the whole text
if (charCount >= s.length() || charCount <= 0 || s.charAt(charCount - 1) == '\n') {
                    s.setSpan(new MyLeadingMarginSpan(lines, w), 0, charCount, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
                    textView.setText(s);
}

If the text is longer, I split it into 2 parts (first one ending at the charCount position), insert line break between them, merge them and set the LeadingMarginSpan2 only on the first part.

else {
    Spannable s1 = new SpannableStringBuilder(s, 0, charCount);
    s1.setSpan(new MyLeadingMarginSpan(lines, w), 0, charCount, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    Spannable s2 = new SpannableStringBuilder(System.getProperty("line.separator"));
    Spannable s3 = new SpannableStringBuilder(s, charCount, s.length());
    textView.setText(TextUtils.concat(s1, s2, s3));
}

At the end, do not forget to remove the left margin of the TextView's LayoutParams.

Wrapping text around an image in a grid

I achieved your goal without using grid. If you never mind removing grid, this snippet will help you. Otherwise just discard my answer.

<!DOCTYPE html>
<html>
<head>
    <title>
        Wrapping an Image with the text
    </title>
    <style>
        /* This div design part is
            used as an Image */
        .upper-right-cell {
            width: 400px;
            height: 100px;
            float: right;
        }
    </style>
</head>

<body>
    <div class="upper-right-cell">
        <img width="400" height="100" src="https://www.w3schools.com/Css/pineapple.jpg">
    </div>
    <div class="upper-left-cell">
        <span class="button">Button</span><br /><span class="text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
        </span>
      </div>
</body>
</html>

How to wrap text around an image placed at the END of a block of text?

In short, you cannot accomplish that exact appearance you are seeking without some markup changes, either with a left or right float.

The reason that the left float works on the first image is that a floated element will have the block level content following it "flow" around it. If you started with a right float on that first image the same effect would be achieved. So when you put an image at the very end of your block-level content (paragraphs), there is nothing to flow around it.

You can achieve a similar look by outputting the last image while there is still some content remaining. For example:

https://codepen.io/andrewborem/pen/PjyNyY

Relevant Code:

div {  max-width: 750px;  margin: 0 auto;  font-size: 1.125em;}
img.left {  float: left;  margin: 0 0.5em 0.5em 0;  line-height: 0;}
img.right {  float: right;  margin: 0.5em 0 0.5em 0.5em;  line-height: 0;}

<div>  <img class="left" src="https://placehold.it/400x300" />  <p>Bacon ipsum dolor amet tenderloin sirloin pork belly alcatra, flank cow pig. Chicken rump andouille bacon, turkey strip steak pastrami salami chuck shank flank ball tip. Pork belly doner salami alcatra tail strip steak. Tongue boudin leberkas brisket    burgdoggen capicola tri-tip corned beef filet mignon pancetta strip steak short ribs. Biltong drumstick jerky, filet mignon bresaola t-bone sirloin tail pig. Meatball sirloin burgdoggen tail t-bone.</p>  <p>Ham jerky bacon ground round, pork tongue fatback landjaeger short loin flank brisket ribeye cow. Jowl capicola flank shoulder strip steak spare ribs pig boudin. Burgdoggen beef ribs kevin meatball frankfurter turkey pork loin ground round capicola    shoulder ribeye t-bone cow prosciutto boudin. Porchetta rump bacon swine, hamburger ham hock beef ribs picanha turkey leberkas. Venison pork ham, biltong bacon prosciutto spare ribs pig picanha capicola. Pastrami pancetta bresaola chuck biltong venison.    Leberkas chicken pastrami shoulder, turducken drumstick spare ribs picanha capicola pancetta rump salami tail t-bone.</p>  <p>Picanha doner burgdoggen sausage. Corned beef pork belly alcatra, ground round beef ribs tenderloin ball tip pork loin pig hamburger pork chop tri-tip brisket. Jowl doner tail shankle venison frankfurter. Spare ribs pig chicken t-bone. Beef sirloin    tongue picanha pork capicola fatback, meatball boudin porchetta shank tri-tip pork belly.</p>  <img class="right" src="https://placehold.it/400x300" />  <p>Leberkas chicken short loin kevin tri-tip kielbasa ham hock meatball, ball tip ground round tongue filet mignon. Venison tongue pork belly pig. Kielbasa short ribs sirloin venison alcatra hamburger bacon boudin. Pork ball tip brisket strip steak pig,    pork loin turkey jowl kevin spare ribs tenderloin. Landjaeger sirloin spare ribs ribeye ball tip, venison shank bresaola chicken pork loin doner shoulder jowl shankle pastrami. Shoulder tri-tip pork loin swine, leberkas salami ground round bresaola    pastrami kielbasa chuck chicken.</p>
  <p>Pancetta tail sirloin corned beef frankfurter burgdoggen kielbasa leberkas chicken chuck meatball pork belly flank venison. Porchetta shankle capicola, strip steak biltong alcatra pastrami. Frankfurter shankle drumstick tail, pancetta pork belly andouille.    Ball tip pancetta strip steak venison pork loin hamburger. Drumstick landjaeger cupim, ham hock boudin beef kielbasa pancetta pig.</p>
</div>

Trying to wrap text around an image in Bootstrap 4

Are you looking for something like this -

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>

<section id="ourStory">
  <div class="container-fluid">
      <div>
        <div class="col-md-6 m-3">
          <img src="https://www.w3schools.com/css/img_mountains.jpg" class="img-fluid float-left mr-4" alt="stray dog lying down">
        </div>

        <!--column-->
        <div class="col-md-12">
          <h1>Our Story</h1>
          <p>Eget mi proin sed libero enim. Sit amet volutpat consequat mauris nunc congue nisi. Mattis ullamcorper velit sed ullamcorper. Tempor nec feugiat nisl pretium fusce id velit ut. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin
            libero. Diam donec adipiscing tristique risus nec. Gravida in fermentum et sollicitudin. Laoreet suspendisse interdum consectetur libero. Pellentesque massa placerat duis ultricies.<br><br> Bibendum neque egestas congue quisque egestas. Enim
            blandit volutpat maecenas volutpat. Urna porttitor rhoncus dolor purus. Ac turpis egestas sed tempus urna. Pellentesque id nibh tortor id aliquet lectus proin. Sit amet massa vitae tortor condimentum lacinia quis. Adipiscing elit ut aliquam
            purus sit amet luctus. Pellentesque dignissim enim sit amet venenatis urna cursus eget. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Ultrices neque ornare aenean euismod elementum nisi quis eleifend. Quis lectus
            nulla at volutpat diam ut venenatis. Sed risus ultricies tristique nulla aliquet.<br><br> Tempor nec feugiat nisl pretium fusce id velit ut. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Diam donec adipiscing
            tristique risus nec. Gravida in fermentum et sollicitudin. Laoreet suspendisse interdum consectetur libero.<br><br> Tempor nec feugiat nisl pretium fusce id velit ut. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero.
            Diam donec adipiscing tristique risus nec. Gravida in fermentum et sollicitudin. Laoreet suspendisse interdum consectetur libero.
          </p>
        </div>
        <!--column-->
      </div>
      <!--row-->
    </div>
  <!--container-->
</section>

How to wrap text around image with CSS?

If it's only about one line and the width of the image is known you can consider the below trick with negative margin and pseudo element:

p:before {  content:"";  display:inline-block;  margin-right:-100px; /* Same as width */}img { float:left; margin-top:1.2em; margin-right:5px;}
/*Clear float*/p:after {  content:"";  display:table;  clear:both;}

<p style="font-size:25px;"><img src="https://picsum.photos/id/0/100/100">lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem</p>
<p style="font-size:20px;"><img src="https://picsum.photos/id/0/100/100">lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem</p>