Zeeshan Shabbir Zeeshan Shabbir - 6 months ago 14
Android Question

How to make compoundView

I have a scenario where I have a

String
which has
HTML
tag in it. In
html
tag,there can be many or one
img
tag.Now I have to show images embedded in text. For that I was using textview and I followed this great answer. But it isn't giving me required result. So, then I searched on web & came across
CompoundView


Note Restricted to want to use webview.

I have looked into these tutorials.


  1. tutplus

  2. vogella

  3. Ryanharter's blog post



But I am not getting much from where to start and how to start with. Since I have no idea how many image tag would be there in string.

It would be very nice if anyone of you guide me how to do it. Some guidelines would be much appreciated.

Thanks in advance!

Answer

So after some hours of digging i found some solution here is the code with some details.

This answer may help someone. I used Jsoup to extract <Img/> tag out of the string then i show the image in ImageView and <p> in Textview. Results was according to what i needed. Also i used Universal Image Loader Libaray to load images in ImageView Then i added view programmatically to the layout in my case layout was the linearlayout so i made a helper class and passed content,html string and linear layout as the parameter.

add jsoup in your project.

compile 'org.jsoup:jsoup:1.9.2'

Here some snippet.

public class PostContentHandler {
Context context;
String content;
LinearLayout linearLayout;

public PostContentHandler(Context context, String content, LinearLayout linearLayout) {
    this.context = context;
    this.content = content;
    this.linearLayout = linearLayout;

}

public void setContentToView() {

    //custom font
    Typeface bitterBoldFont = Typeface.createFromAsset(context.getAssets(), "fonts/Bitter-Regular.otf");

    List<String> p = new ArrayList<>();
    List<String> src = new ArrayList<>();
    List<String> li = new ArrayList<>();
    Document doc = Jsoup.parse(content);

    Elements elements = doc.getAllElements();

    for (Element element : elements) {
        Tag tag = element.tag();
        if (tag.getName().matches("h[1-6]{1}")) {
            String heading = element.select(tag.getName().toString()).text();
            TextView textView = new TextView(context);
            textView.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT));
            LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) textView.getLayoutParams();
            int top = (int) context.getResources().getDimension(R.dimen.heading_margin_top);
            int start = (int) context.getResources().getDimension(R.dimen.content_margin);
            int end = (int) context.getResources().getDimension(R.dimen.content_margin);
            params.setMargins(start, top, end, 0);
            textView.setTextSize(20);
            textView.setTypeface(bitterBoldFont);
            textView.setText(heading);
            textView.setTextColor(context.getResources().getColor(R.color.black));
            linearLayout.addView(textView);
        }
 if (tag.getName().equalsIgnoreCase("p")) {
            element.select("img").remove();
            String body = element.html();
            TextView textView = new TextView(context);
            textView.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT));
            LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) textView.getLayoutParams();
            int top = (int) context.getResources().getDimension(R.dimen.heading_margin_top);
            int start = (int) context.getResources().getDimension(R.dimen.content_margin);
            int end = (int) context.getResources().getDimension(R.dimen.content_margin);
            params.setMargins(start, top, end, 0);
            textView.setTypeface(bitterBoldFont);
            textView.setLinksClickable(true);
            textView.setAutoLinkMask(Linkify.WEB_URLS);
            textView.setText(Html.fromHtml(body));
            textView.setTextColor(context.getResources().getColor(R.color.content_color));
            linearLayout.addView(textView);
            p.add(body);
        }
        if (tag.getName().equalsIgnoreCase("ol")) {
            String ol = element.select(tag.getName().toString()).outerHtml();
            TextView textView = new TextView(context);
            textView.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT));
            LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) textView.getLayoutParams();
            params.setMarginStart((int) context.getResources().getDimension(R.dimen.content_margin));
            int top = (int) context.getResources().getDimension(R.dimen.heading_margin_top);
            int start = (int) context.getResources().getDimension(R.dimen.content_margin);
            int end = (int) context.getResources().getDimension(R.dimen.content_margin);
            params.setMargins(start, top, end, 0);
            textView.setTypeface(bitterBoldFont);
            textView.setLinksClickable(true);
            textView.setAutoLinkMask(Linkify.WEB_URLS);
            textView.setTextColor(context.getResources().getColor(R.color.content_color));
            textView.setText(Html.fromHtml(ol, null, new MyTagHandler()));
            linearLayout.addView(textView);

        }
        if (tag.getName().equalsIgnoreCase("ul")) {
            String ul = element.select(tag.getName().toString()).outerHtml();
            TextView textView = new TextView(context);

            textView.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT));
            LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) textView.getLayoutParams();
            int top = (int) context.getResources().getDimension(R.dimen.heading_margin_top);
            int start = (int) context.getResources().getDimension(R.dimen.content_margin);
            int end = (int) context.getResources().getDimension(R.dimen.content_margin);
            params.setMargins(start, top, end, 0);
            textView.setTypeface(bitterBoldFont);
            textView.setLinksClickable(true);
            textView.setAutoLinkMask(Linkify.WEB_URLS);
            textView.setTextColor(context.getResources().getColor(R.color.content_color));
            textView.setText(Html.fromHtml(ul, null, new MyTagHandler()));
            linearLayout.addView(textView);
        }
        if (tag.getName().equalsIgnoreCase("img")) {
            String url = element.select("img").attr("src");
            final ImageView imageView = new ImageView(context);
            imageView.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT));
            final ProgressBar progressBar = new ProgressBar(context);
            linearLayout.addView(progressBar);
            progressBar.setVisibility(View.GONE);
            ImageLoader imageLoader = ImageLoader.getInstance();
            imageLoader.displayImage(url, imageView, new SimpleImageLoadingListener() {
                @Override
                public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
                    super.onLoadingComplete(imageUri, view, loadedImage);
                    progressBar.setVisibility(View.INVISIBLE);
                    int height = loadedImage.getHeight();
                    imageView.getLayoutParams().height = getScreenWidth();
                    imageView.setAdjustViewBounds(true);
                    imageView.requestLayout();
                }

                @Override
                public void onLoadingStarted(String imageUri, View view) {
                    super.onLoadingStarted(imageUri, view);
                    progressBar.setVisibility(View.VISIBLE);
                }
            });
            linearLayout.addView(imageView);
            src.add(url);
        }

    }
}

public static int getScreenWidth() {
    return Resources.getSystem().getDisplayMetrics().widthPixels;
}
}

I hope my answer will help someone.

Comments