Monday, June 22, 2015

How to align TextView around an ImageView




We can achieve this by using the android.text.style.LeadingMarginSpan.LeadingMarginSpan2 interface which is available in API 8.

An extended version of LeadingMarginSpan, which allows the implementor to specify the number of lines of the paragraph to which this object is attached that the "first line of paragraph" margin width will be applied to.

There should only be one LeadingMarginSpan2 per paragraph. The leading margin line count affects all LeadingMarginSpans in the paragraph, adjusting the number of lines to which the first line margin is applied.

As with LeadingMarginSpans, LeadingMarginSpan2s should be attached from the beginning to the end of a paragraph.


Reference :: 
http://developer.android.com/reference/android/text/style/LeadingMarginSpan.LeadingMarginSpan2.html



Create Custom Leading Margin
class CustomLeadingMargin implements LeadingMarginSpan2 {
        
        private int marginSpace;
        private int numberOfLines;

        CustomLeadingMargin(int numberOfLines, int marginSpace) {
            this.numberOfLines = numberOfLines;
  this.marginSpace = marginSpace;
        }

        @Override
        public int getLeadingMargin(boolean firstLineFlag) {
        return firstLineFlag ? marginSpace : 0;
        }

        @Override
        public int getLeadingMarginLineCount() {
            return numberOfLines;
        }

        @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) {}
}


Apply in the TextView

//Get the string from the String File
String descText = getString(R.string.description);

Drawable dIcon = getResources().getDrawable(R.drawable.icon);
int leftMargin = dIcon.getIntrinsicWidth() + 5;

ImageView icon = (ImageView) findViewById(R.id.startImage);
icon.setBackgroundDrawable(dIcon);

SpannableString mSpannableString = new SpannableString(descText);
ss.setSpan(new CustomLeadingMargin(3, leftMargin), 0, mSpannableString.length(), 0);

((TextView) findViewById(R.id.message_view)).setText(mSpannableString);


Full Implementation

public class LeadingMarginSampleActivity extends Activity {

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

        //Get the string from the String File        String descText = "An extended version of LeadingMarginSpan, which allows the implementor to specify the number of lines of the paragraph to which this object is attached that the \"first line of paragraph\" margin width will be applied to.";

        Drawable dIcon = getResources().getDrawable(R.drawable.ic_launcher);
        int leftMargin = dIcon.getIntrinsicWidth() + 5;

        ImageView icon = (ImageView) findViewById(R.id.startImage);
        icon.setBackgroundDrawable(dIcon);

        SpannableString mSpannableString = new SpannableString(descText);
        mSpannableString.setSpan(new CustomLeadingMargin(3, leftMargin), 0, mSpannableString.length(), 0);

        ((TextView) findViewById(R.id.description)).setText(mSpannableString);

    }

    class CustomLeadingMargin implements LeadingMarginSpan.LeadingMarginSpan2 {

        private int numberOfLines;
        private int marginSpace;

        CustomLeadingMargin(int numberOfLines, int marginSpace) {
            this.numberOfLines = numberOfLines;
            this.marginSpace = marginSpace;
        }

        @Override        public int getLeadingMargin(boolean firstLineFlag) {
            return firstLineFlag ? marginSpace : 0;
        }

        @Override        public int getLeadingMarginLineCount() {
            return numberOfLines;
        }

        @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) {
        }
    }

}

activity_leading_margin_sample.xml

<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:id="@+id/description"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="@string/descText" />

    <ImageView        android:id="@+id/startImage"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:src="@drawable/ic_launcher" />
</RelativeLayout>

Output



5 comments:

  1. Replies
    1. Stackable USB Drive With Virtually Unlimited Memory
      It would seem like flash drives are old news by now. You put more and more memory into them and increase the price, and that’s about it, right?
      http://geekonjava.blogspot.com/2016/01/stackable-usb-drive-with-virtually.html

      Delete
  2. Also, might I suggest using the RelativeLayout inside a ScrollView, such that it can accommodate large amounts of text inside the TextView.
    Android app development company

    ReplyDelete
  3. Hi,

    Thank you so much for taking effort to share such a useful information. I will definitely share my online portal Android App Development .

    Android App Development
    Aapthi Technologies
    Web Development Company

    ReplyDelete
  4. Excellent Post! Thanks for sharing the information. Very informative blog post.
    Mobile App Development Company

    ReplyDelete