FadhliS FadhliS - 1 year ago 60
Android Question

Need help parsing html code, sorting views in order

I have a html code, put into a string that i would like to parse, and then converting it into different views and showing each views in order in Android..

HTML Example:

String htmlText = "
<div class = "quote">
<br>
<br>
Hello how are you today.
<p>
I am fine thank you.
<br>
<br>
<img src="http://testing.jpg"/>
<br>
<br>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<br>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
<br>
<img src="http://testing2.jpg"/>
</div>";


For this case, i would like to show the respective imageviews and textviews in android. But all of it must be in ascending order. This is important because the content will be dynamic everytime, the image can come before/after text etc..

I am able to convert the content into respective views, like setting the text into the textview, so that is not a problem. My problem is how can i parse the HTML code in a way where the content will be showed accordingly in order?

The only way i can think of is to split the html into lines and then check it if it is an image URL or just a text. Then i would parse using Jsoup and put into respective views.

String[] parts = htmlText.split(System.getProperty("line.separator"));

for(int i = 0; i<parts.length;i++){

if(parts[i].contains("<img src=\"")){
Document doc = Jsoup.parse(parts[i]);
String imgSrc = doc.getElementsByTag("img").attr("src");

//function to convert imageUrl to imageView
converttoImageView(imgSrc);
}
else{

Document doc2 = Jsoup.parse(parts[i]);
converttoTextView(doc2.text());
}

}

private void converttoTextView(String text){


View messageView = LayoutInflater.from(((PostViewHolder) holder).message_row.getContext()).inflate(R.layout.reply_message, ((PostViewHolder) holder).message_row, false);

TextView message_textview = (TextView) messageView.findViewById(R.id.reply_message);
message_textview.setText(text);


((PostViewHolder) holder).message_row.addView(messageView);

}


The problem with this is, each text is separated line by line and the textview is dynamically created once the function is called. I would like to make the textview selectable, so users can copy and paste. But i am not able to select the whole text. I can only select textview per textview.

Output that I Get

<TextView> Hello how are you today</TextView>
<TextView> I am fine thank you </TextView>
<ImageView>testing.jpg</ImageView>
<TextView>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</TextView>
<TextView>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</TextView>
<ImageView>testing2.jpg</ImageView>


Expected output

<TextView> Hello how are you today \n\n I am fine thank you </TextView>
<ImageView>testing.jpg</ImageView>
<TextView>Lorem Ipsum is simply dummy text of the printing and typesetting industry.\nLorem Ipsum has been the industry's standard dummy text ever since the 1500s.</TextView>
<ImageView>testing2.jpg</ImageView>

Answer Source

I think you can edit the for loop, your can record the text, and convert it to TextView when find <img>

Such like:

StringBuilder text = new StringBuilder();
for(int i = 0; i<parts.length;i++){
    if(parts[i].contains("<img src=\"")){
        if (!text.toString().equals("")) {
            //when find img, judge the text equals empty, if not, convert to TextView
            converttoTextView(text.toString());
            //clean the text after convert
            text.delete(0, text.length());
        }

        Document doc = Jsoup.parse(parts[i]);
        String imgSrc = doc.getElementsByTag("img").attr("src");

        //function to convert imageUrl to imageView
        converttoImageView(imgSrc);
    } else {
        Document doc2 = Jsoup.parse(parts[i]);
        //converttoTextView(doc2.text());

        //append the doc2 to text, but not execute convert method, just record
        text.append(doc2+"/n");
    }

}

if (!text.toString().equals("")) {
    //when find img, judge the text equals empty, if not, convert to TextView
    converttoTextView(text.toString());
    //clean the text after convert
    text.delete(0, text.length());
}

Hope it will help you, it just a easy way on the basis on your code.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download