Monday 2 December 2013

How to make Text flow around images in TextView(api8) like webpage?

Hello Friends,

Today i am going to show you how the Text in TextView flow around the Image in Android.
This example will help you use the space under the picture, which is usually empty.
Starting from api 8 (Android 2.2) has a new interface LeadingMarginSpan2, which lets you create text indent for the first N rows. The picture created indented 50 pixels for the first 3 rows.

First of create an application in android and create the layout as below:

main.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="wrap_content"  
  android:padding="5dp">  
  <TextView  
  android:textSize="18.0sp"  
  android:id="@+id/message_view"  
  android:layout_width="match_parent"  
  android:layout_height="wrap_content"  
  android:text="@string/text" />  
  <ImageView  
  android:layout_width="wrap_content"  
  android:layout_height="wrap_content"  
  android:id="@+id/icon" />  
 </RelativeLayout>  

After creating the layout in your MainActivity.java file create a class MyLeadingMarginSpan2 which extends a LeadingMarginSpan2 interface as below:
 class MyLeadingMarginSpan2 implements LeadingMarginSpan2 {  
     private int margin;  
     private int lines;  
     MyLeadingMarginSpan2(int lines, int margin) {  
       this.margin = margin;  
       this.lines = lines;  
     }  
    /*Returns the value to which must be added indentation*/  
     @Override  
     public int getLeadingMargin(boolean first) {  
       if (first) {  
        / *This * indentation is applied to the number of          rows returned * getLeadingMarginLineCount ()*/   
       return margin;  
       }  
      else  
      {  
     //Offset for all other Layout layout ) { }  
     /*Returns * the number of rows which should be applied *     indent returned by getLeadingMargin (true)   
     * Note:* Indent only applies to N lines of the first paragraph.*/   
       return 0;  
       }  
     }  
     @Override  
     public void drawLeadingMargin(Canvas c, Paint p, int x, int dir,  
         int top, int baseline, int bottom, CharSequence text,   
         int start, int end, boolean first, Layout layout) {}  
   @Override  
     public int getLeadingMarginLineCount() {  
       return lines;  
     }  
   };  

In OnCreate, create an object SpannableString and apply a new style.
 @Override  
 Public void onCreate ( Bundle savedInstanceState )   
 {  
     super . onCreate ( savedInstanceState ) ;  
     setContentView ( R. layout . main ) ;   
   String text = getString ( R. string . text ) ;   
   // Get the icon and its width  
   Drawable DICON = getResources ( ).getDrawable(R.drawable.icon);   
   int = leftMargin DICON. getIntrinsicWidth ( ) + 10 ;   
   //Set the icon in R.id.icon   
    ImageView icon =(ImageView)findViewById(R.ID.icon ) ;  
    icon.setBackgroundDrawable (DICON) ;  
   SpannableString SS = New SpannableString (text);   
   //Expose the indent for the first three rows  
    SS.setSpan(New MyLeadingMarginSpan2(3,leftMargin),0,SS.length(),0);  
    TextView MessageView = ( TextView ) findViewById ( R. ID . message_view ) ;  
     MessageView. setText ( SS ) ;   
 }  

Output:





No comments:

Post a Comment