Giter VIP home page Giter VIP logo

htmlrecycler's Introduction

This library has been under development for over 2 years, I don't think I will ever complete since the project we were working on got cancelled and I don't think I have enough time to finish it, PR are always welcome.

HtmlRecycler

Converts a simple html page into A RecyclerView of native android widgets powered by Jsoup library and inspired by Medium Textview.

Note

This library was design and developed by ME and we use this in our application which depends on a Content Management system and was never intended to replace browsers or act as one. this library simply gave us more control over html page than WebView

Add it to your project

dependencies {
    implementation 'com.github.m7mdra:HtmlRecycler:0.1.11'
}

This project is distributed using jitpack. Make sure you add it as a maven repository to your build.gradle

allprojects {
    repositories {
        maven { 
            url 'https://jitpack.io' 
        }
    }
}

Demo

enter image description here enter image description here
  • APK
  • Or simply git clone the repository and build the app module.

Currently supported html elements

  • Paragraph
  • H1...H6
  • Image
  • Video
  • Audio
  • Ordered List
  • Unordered List
  • Description List
  • Anchor Link
  • IFrame
  • Table
  • DIV

Implementation

val networkSource = NetworkSource("https://gist.githubusercontent.com/m7mdra/f22c62bc6941e08064b4fbceb4832a90/raw/ea8574d986635cf214541f1f5702ef37cc731aaf/article.html")  
  
HtmlRecycler.Builder(this@MainActivity)  
    .setSource(networkSource)  
    .setAdapter(DefaultElementsAdapter(this@MainActivity) { element, i, view ->  
    }})
    .setRecyclerView(recyclerView)  
    .setLoadingCallback(object : HtmlRecycler.LoadCallback {  
        override fun onLoadingStart() {  
            progressBar.visibility = View.VISIBLE  
        }  
        override fun onLoaded(document: Document?) {  
            progressBar.visibility = View.GONE
  	}  
    })  
    .build()

The above code uses the existing implementation of DefaultElementsAdapter which extends ElementsAdapter class which inherently is a RecylcerView Adpater the DefaultElementsAdapter uses a layout resources files defined by me but they not styled probably and are very buggy (especially the video, audio and iframe ones).

Want to create your own adapter? just simply extend ElementsAdapter and override methods:

class BetterImplementationThanTheAuthorsAdapter : ElementsAdapter() {    
    override fun onCreateElement(parent: ViewGroup, elementType: ElementType): RecyclerView.ViewHolder {  
        when (elementType) {  
            ElementType.Paragraph -> {  
                return ParagraphViewHolder(LayoutInflater.from(parent.context).inflate(R.layout.row_paragarph, parent, false))  
            }
	    // Define other elements here
        }  
    }  
  
    override fun onBindElement(holder: RecyclerView.ViewHolder, position: Int) {  
        val element = elements[position] //current element  
	    if (holder is ParagraphViewHolder){  
                val paragraphElement = element as ParagraphElement  
            	holder.paragraphText.text= paragraphElement.text  
	    }  
	}  
    }
}

Then replace the default adapter with your adapter:

HtmlRecycler.Builder(this)  
    .setSource(StringSource(Data.data))  
    .setAdapter(BetterImplementationThanTheAuthorsAdapter()) // this is a custom adapter  
    .setRecyclerView(recyclerView)  
    .build()

How to add Data

Data can come from different sources, the library support the following:

  • Assets
  • File
  • String
  • Network (runs on UI thread by default so you have to run it on different thread or write your own Source Implementation )

Write your own source

Simply implement the Source interface which will return a Document of the parsed Source:

class FileSource(val file: File) : Source {  
    override fun get(): Document {  
        return Jsoup.parse(file, "UTF-8")  
    }  
}

Attach Click listeners on elements

In DefaultElemetsAdapter class at line #27 l i defined a higher-order-function in the constructor method (which dose the same as defining an interface) and on line #75 we envoke the method passing our element and the position of the clicked view.

What about Unimplemented elements ?

the library will mark any unimplemented element as UnknownElement and will delegate it to the android.text.Html#fromHtml class to convert it Spans and will be displayed on TextView

TODO list:

  • Define a standard Layout styling.
  • allow NetworkSource to run on UI thread without crashing.
  • Support the following elements:
    • Table
    • Div
    • Section
    • Superscript and Subscrpit
  • Test Element Extractors for different data sets.
  • add more control over paragraph element. paragraph element will be rendered using the android.text.Html class rather than handled by the library
  • other thing that i come up with...

Dependencies:

PR are welcome just use crtl+alt+L or (command + alt+L for mac ... idk if right) after every time your finish write code to format it.

projects using this library:

if you are using this library in your project let me by sending an email at [email protected] know and i will post it here.

  • be the first on the list.

htmlrecycler's People

Contributors

m7mdra avatar quinnjn avatar freszu avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.