Widget background color picker, Custom CSS injection

app/build.gradle

@@ -36,6 +36,7 @@ android {
     packagingOptions {
         resources.excludes.add("META-INF/*")
     }
+    namespace 'ch.tiim.markdown_widget'
 }
 
 android.applicationVariants.all { variant ->
@@ -52,6 +53,7 @@ dependencies {
     implementation 'androidx.constraintlayout:constraintlayout:2.1.3'
 
     implementation 'com.vladsch.flexmark:flexmark-all:0.64.0'
+    implementation 'com.github.Dhaval2404:ColorPicker:2.3'
 
 
     testImplementation 'junit:junit:4.13.2'

app/src/main/AndroidManifest.xml

@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    package="ch.tiim.markdown_widget">
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
 
     <application
         android:allowBackup="true"

app/src/main/java/ch/tiim/markdown_widget/MainActivity.kt

@@ -5,7 +5,6 @@ import android.net.Uri
 import android.os.Bundle
 import android.view.View
 import android.widget.Button
-import android.widget.ImageView
 import android.widget.LinearLayout
 import androidx.appcompat.app.AppCompatActivity
 

app/src/main/java/ch/tiim/markdown_widget/MarkdownFileWidget.kt

@@ -10,6 +10,7 @@ import android.content.Intent
 import android.content.res.Configuration.ORIENTATION_PORTRAIT
 import android.content.res.Resources
 import android.database.Cursor
+import android.graphics.Color
 import android.net.Uri
 import android.os.Bundle
 import android.os.Handler
@@ -85,6 +86,8 @@ class MarkdownFileWidget : AppWidgetProvider() {
 
         val tapBehavior = loadPref(context, appWidgetId, PREF_BEHAVIOUR, TAP_BEHAVIOUR_DEFAULT_APP)
         val fileUri = Uri.parse(loadPref(context, appWidgetId, PREF_FILE, ""))
+        var bgColor = loadPref(context, appWidgetId, PREF_BGCOLOR, Color.WHITE.toString()).toInt()
+        var customCSS = loadPref(context, appWidgetId, PREF_CSS, "")
 
         val s = loadMarkdown(context, fileUri)
 
@@ -94,7 +97,7 @@ class MarkdownFileWidget : AppWidgetProvider() {
                 s
             )
         ) {
-            cachedMarkdown.put(appWidgetId, MarkdownRenderer(context, width, height, s))
+            cachedMarkdown.put(appWidgetId, MarkdownRenderer(context, width, height, s, bgColor, customCSS))
         }
         val md = cachedMarkdown[appWidgetId]
 

app/src/main/java/ch/tiim/markdown_widget/MarkdownFileWidgetConfigureActivity.kt

@@ -7,16 +7,21 @@ import android.content.ContentResolver
 import android.content.Context
 import android.content.Intent
 import android.content.pm.PackageManager
+import android.graphics.Color
 import android.net.Uri
 import android.os.Bundle
 import android.view.View
 import android.webkit.MimeTypeMap
 import android.widget.EditText
 import android.widget.RadioGroup
 import android.widget.RemoteViews
+import android.widget.TextView
 import androidx.core.app.ActivityCompat
 import androidx.core.content.ContextCompat
 import ch.tiim.markdown_widget.databinding.MarkdownFileWidgetConfigureBinding
+import com.github.dhaval2404.colorpicker.ColorPickerDialog
+import com.github.dhaval2404.colorpicker.model.ColorShape
+import com.github.dhaval2404.colorpicker.model.ColorSwatch
 
 /**
  * The configuration screen for the [MarkdownFileWidget] AppWidget.
@@ -29,11 +34,16 @@ private const val ACTIVITY_RESULT_BROWSE = 1
 
 internal const val PREF_FILE = "filepath"
 internal const val PREF_BEHAVIOUR = "behaviour"
+internal const val PREF_BGCOLOR = "bgcolor"
+internal const val PREF_CSS = "customcss"
 
 class MarkdownFileWidgetConfigureActivity : Activity() {
     private var appWidgetId = AppWidgetManager.INVALID_APPWIDGET_ID
     private lateinit var inputFilePath: EditText
     private lateinit var radioGroup: RadioGroup
+    private lateinit var selectedColor: TextView
+    private lateinit var customCSS: EditText
+
     private val onBrowse = View.OnClickListener {
         // Workaround for https://github.com/Tiim/Android-Markdown-Widget/issues/14:
         // Check if MIME-Type "text/markdown" is known. Otherwise fall back to
@@ -66,13 +76,30 @@ class MarkdownFileWidgetConfigureActivity : Activity() {
         }
     }
 
+    private val onPickColor = View.OnClickListener{
+        val context = this@MarkdownFileWidgetConfigureActivity
+        ColorPickerDialog
+            .Builder(this)
+            .setTitle("Pick Background Color")
+            .setColorShape(ColorShape.SQAURE)
+            .setDefaultColor(R.color.white)
+            .setColorListener { color, _ ->
+                savePref(context, appWidgetId, "bgcolor", color.toString())
+                selectedColor.setBackgroundColor(color)
+            }
+            .show()
+    }
+
     private val onAddWidget = View.OnClickListener {
         val context = this@MarkdownFileWidgetConfigureActivity
 
         // When the button is clicked, store the string locally
         val widgetText = inputFilePath.text.toString()
         savePref(context, appWidgetId, "filepath" , widgetText)
 
+        val customCssText = customCSS.text.toString()
+        savePref(context, appWidgetId, "customcss" , customCssText)
+
         val rID = radioGroup.checkedRadioButtonId
         val tapBehaviour = when (rID) {
             R.id.radio_noop -> {
@@ -87,7 +114,6 @@ class MarkdownFileWidgetConfigureActivity : Activity() {
         }
         savePref(context, appWidgetId, "behaviour", tapBehaviour)
 
-
         // It is the responsibility of the configuration activity to update the app widget
         val appWidgetManager = AppWidgetManager.getInstance(context)
 
@@ -114,10 +140,14 @@ class MarkdownFileWidgetConfigureActivity : Activity() {
 
         inputFilePath = binding.inputFile
         radioGroup = binding.radiogroup
+        binding.bgcolorButton.setOnClickListener(onPickColor)
         binding.addButton.setOnClickListener(onAddWidget)
         binding.btnBrowse.setOnClickListener(onBrowse)
         binding.radioDefaultApp.isSelected = true
-
+        selectedColor = binding.selectedColor
+        selectedColor.setBackgroundColor(Color.WHITE)
+        selectedColor.setOnClickListener(onPickColor)
+        customCSS = binding.customCSS
 
         // Find the widget id from the intent.
         val intent = intent

app/src/main/java/ch/tiim/markdown_widget/MarkdownParser.kt

@@ -49,12 +49,12 @@ class MarkdownParser(private val theme:String) {
             <!DOCTYPE html>
             <html>
                 <head>
-                    <styles>
-                        ${theme}
-                    </styles>
+                    <style>
+                        $theme
+                    </style>
                 </head>
                 <body>
-                    ${html}
+                    $html
                 </body>
             </html>"""
     }

app/src/main/java/ch/tiim/markdown_widget/MarkdownRenderer.kt

@@ -15,21 +15,22 @@ import kotlin.math.max
 
 
 private const val TAG = "MarkdownRenderer"
-class MarkdownRenderer(private val context: Context, private val width: Int, private val height: Int, private val data: String, private val onReady: ((Bitmap) -> Unit) = {}) {
+class MarkdownRenderer(private val context: Context, private val width: Int, private val height: Int, private val data: String, private val bgColor: Int = Color.WHITE, private val customCSS: String = "", private val onReady: ((Bitmap) -> Unit) = {}) {
 
-    private val mdParser = MarkdownParser("")
+    private val mdParser = MarkdownParser(customCSS)
     val webView = WebView(context);
     private val bitmap = Bitmap.createBitmap(max(width, 100), max(height, 100), Bitmap.Config.ARGB_8888)
     private val canvas = Canvas(bitmap)
     private var ready = false
 
     init {
         val html = getHtml(data);
-        prepareWebView(html)
+        prepareWebView(html, bgColor)
     }
 
     private fun prepareWebView(
-        html: String
+        html: String,
+        bgColor: Int = Color.WHITE
     ) {
         webView.webViewClient = object: WebViewClient() {
             override fun onPageFinished(view: WebView?, url: String?) {
@@ -47,12 +48,13 @@ class MarkdownRenderer(private val context: Context, private val width: Int, pri
             }
         }
         webView.layout(0, 0, width, height)
-        webView.setBackgroundColor(Color.WHITE)
+
+        webView.setBackgroundColor(bgColor)
         //webView.setBackgroundColor(Color.MAGENTA)
         val encodedHtml = Base64.encodeToString(html.toByteArray(), Base64.DEFAULT)
         webView.loadData(encodedHtml, "text/html", "base64")
-        webView.isDrawingCacheEnabled = true
-        webView.buildDrawingCache()
+        // webView.isDrawingCacheEnabled = true
+        // webView.buildDrawingCache()
     }
 
     fun isReady():Boolean {

app/src/main/res/drawable/textborder.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
+    <stroke android:width="1dip" android:color="@color/colorAccent"/>
+</shape>

app/src/main/res/layout/markdown_file_widget_configure.xml

@@ -47,6 +47,7 @@
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintTop_toTopOf="parent" />
+
     </androidx.constraintlayout.widget.ConstraintLayout>
 
     <RadioGroup
@@ -80,6 +81,52 @@
             android:text="Do not open" />
     </RadioGroup>
 
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:id="@+id/colorselect"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content">
+
+        <Button
+            android:id="@+id/bgcolor_button"
+            android:layout_width="203dp"
+            android:layout_height="wrap_content"
+            android:layout_marginEnd="20dp"
+            android:text="Background Color"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toStartOf="@+id/selectedColor"
+            app:layout_constraintHorizontal_bias="1.0"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent" />
+
+        <TextView
+            android:id="@+id/selectedColor"
+            android:layout_width="50dp"
+            android:layout_height="50dp"
+            android:layout_marginStart="20dp"
+            android:background="@drawable/textborder"
+            android:outlineProvider="paddedBounds"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toEndOf="@+id/bgcolor_button"
+            app:layout_constraintTop_toTopOf="parent" />
+    </androidx.constraintlayout.widget.ConstraintLayout>
+
+    <TextView
+        android:id="@+id/customCSSLabel"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:labelFor="@id/customCSS"
+        android:text="Custom CSS:" />
+
+    <EditText
+        android:id="@+id/customCSS"
+        android:layout_width="match_parent"
+        android:layout_height="153dp"
+        android:ems="10"
+        android:gravity="start|top"
+        android:hint="/** e.g. body { color: #fff; } **/"
+        android:inputType="textMultiLine" />
+
     <Button
         android:id="@+id/add_button"
         android:layout_width="match_parent"

build.gradle

@@ -1,8 +1,8 @@
 // Top-level build file where you can add configuration options common to all sub-projects/modules.
 plugins {
-    id 'com.android.application' version '7.1.2' apply false
-    id 'com.android.library' version '7.1.2' apply false
-    id 'org.jetbrains.kotlin.android' version '1.5.30' apply false
+    id 'com.android.application' version '7.4.2' apply false
+    id 'com.android.library' version '7.4.2' apply false
+    id 'org.jetbrains.kotlin.android' version '1.6.21' apply false
 }
 
 task clean(type: Delete) {

gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 #Sat Mar 26 21:28:57 CET 2022
 distributionBase=GRADLE_USER_HOME
-distributionUrl=https\://services.gradle.org/distributions/gradle-7.2-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.5-bin.zip
 distributionPath=wrapper/dists
 zipStorePath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME

settings.gradle

@@ -3,14 +3,15 @@ pluginManagement {
         gradlePluginPortal()
         google()
         mavenCentral()
+        maven { url 'https://jitpack.io' }
     }
 }
 dependencyResolutionManagement {
     repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
     repositories {
         mavenCentral()
         google()
-        //maven { url "https://jitpack.io" }
+        maven { url "https://jitpack.io" }
     }
 }
 rootProject.name = "Markdown-Widget"