Repository files navigation

DashedView

The easiest way to create a dashed or striped background on Android

ktlintFeatured in Android Weekly

The DashedView library allows you to create views with a dashed (or striped) background. Below are some examples of views created with this library. You can click on any example to see its code.

Screen Shot 2021-05-21 at 11 42 53 PMScreen Shot 2021-05-21 at 11 42 18 PM
card1card2

There is also a demo app for this library which allows you to see the look and feel of the DashedView on your own device:

Get it on Google Play

Quick Start Guide

If you don't have this already, add it to your root build.gradle file:

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

Then you can add the dependency to your app build.gradle file:

dependencies {
...
implementation 'com.github.MackHartley:DashedView:1.0.0'
}

Once that's finished you can declare a DashedView via XML:

<com.mackhartley.dashedview.DashedView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:dvDashAngle="45"
app:dvDashColor="#777"
app:dvDashWidth="4dp"
app:dvSpaceBetweenDashes="4dp"
app:dvViewCornerRadius="0dp" />

Usage βš™οΈ

The table below explains the 5 XML attributes you can set on the DashedView class:

XML AttributeUse
dvDashAngleSets the angle of the dashes. The angle is measured from the X axis of the view.
dvDashColorSets the color of the dashes.
dvDashWidthSets the width of the dashes.
dvSpaceBetweenDashesSets the width of the space between each dash.
dvViewCornerRadiusSets the corner radius value for the DashedView. Useful when working with other views that have rounded corners.

The DashedView also has a public method that allows you to set custom coloring for individual dashes:

Public MethodUse
setDashColorGenerator(...)This method takes a DashColorGenerator instance as a parameter which gives you access to the index of the current dash being drawn. Using that information you can specify logic for how each dash should be colored.
interface DashColorGenerator {
@ColorInt fun getPaintColor(curIndex: Int, numDashes: Int): Int
}

To see an example of the DashColorGenerator click here.

More Examples πŸ–ΌοΈ

Click on any example to see it's code (You also need to look at MainActivity which sets custom dash coloring)

heropichero2Screen Shot 2021-05-21 at 11 44 19 PMScreen Shot 2021-05-23 at 3 48 04 PM
Screen Shot 2021-05-23 at 3 47 38 PM

Contributing 🀝

Feel free to open issues on this repo to report bugs or request features. Additionally if you'd like to contribute you can create a pull request (make sure to read contributing.mk).

Special thanks to all those who have supported this repo thus far!



License πŸ“„

Copyright 2021 Mack Hartley
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

About

Easily create views with a background of repeating dashes 🐝

Topics

Resources

Code of conduct

Contributing

Stars

71 stars

Watchers

1 watching

Forks

Releases

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

Repository files navigation

DashedView

The easiest way to create a dashed or striped background on Android

ktlintFeatured in Android Weekly

The DashedView library allows you to create views with a dashed (or striped) background. Below are some examples of views created with this library. You can click on any example to see its code.

Screen Shot 2021-05-21 at 11 42 53 PMScreen Shot 2021-05-21 at 11 42 18 PM
card1card2

There is also a demo app for this library which allows you to see the look and feel of the DashedView on your own device:

Get it on Google Play

Quick Start Guide

If you don't have this already, add it to your root build.gradle file:

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

Then you can add the dependency to your app build.gradle file:

dependencies {
...
implementation 'com.github.MackHartley:DashedView:1.0.0'
}

Once that's finished you can declare a DashedView via XML:

<com.mackhartley.dashedview.DashedView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:dvDashAngle="45"
app:dvDashColor="#777"
app:dvDashWidth="4dp"
app:dvSpaceBetweenDashes="4dp"
app:dvViewCornerRadius="0dp" />

Usage βš™οΈ

The table below explains the 5 XML attributes you can set on the DashedView class:

XML AttributeUse
dvDashAngleSets the angle of the dashes. The angle is measured from the X axis of the view.
dvDashColorSets the color of the dashes.
dvDashWidthSets the width of the dashes.
dvSpaceBetweenDashesSets the width of the space between each dash.
dvViewCornerRadiusSets the corner radius value for the DashedView. Useful when working with other views that have rounded corners.

The DashedView also has a public method that allows you to set custom coloring for individual dashes:

Public MethodUse
setDashColorGenerator(...)This method takes a DashColorGenerator instance as a parameter which gives you access to the index of the current dash being drawn. Using that information you can specify logic for how each dash should be colored.
interface DashColorGenerator {
@ColorInt fun getPaintColor(curIndex: Int, numDashes: Int): Int
}

To see an example of the DashColorGenerator click here.

More Examples πŸ–ΌοΈ

Click on any example to see it's code (You also need to look at MainActivity which sets custom dash coloring)

heropichero2Screen Shot 2021-05-21 at 11 44 19 PMScreen Shot 2021-05-23 at 3 48 04 PM
Screen Shot 2021-05-23 at 3 47 38 PM

Contributing 🀝

Feel free to open issues on this repo to report bugs or request features. Additionally if you'd like to contribute you can create a pull request (make sure to read contributing.mk).

Special thanks to all those who have supported this repo thus far!



License πŸ“„

Copyright 2021 Mack Hartley
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

About

Easily create views with a background of repeating dashes 🐝

Topics

Resources

Code of conduct

Contributing

Stars

71 stars

Watchers

1 watching

Forks

Releases

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

DashedView

The easiest way to create a dashed or striped background on Android

ktlintFeatured in Android Weekly

The DashedView library allows you to create views with a dashed (or striped) background. Below are some examples of views created with this library. You can click on any example to see its code.

Screen Shot 2021-05-21 at 11 42 53 PMScreen Shot 2021-05-21 at 11 42 18 PM
card1card2

There is also a demo app for this library which allows you to see the look and feel of the DashedView on your own device:

Get it on Google Play

Quick Start Guide

If you don't have this already, add it to your root build.gradle file:

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

Then you can add the dependency to your app build.gradle file:

dependencies {
...
implementation 'com.github.MackHartley:DashedView:1.0.0'
}

Once that's finished you can declare a DashedView via XML:

<com.mackhartley.dashedview.DashedView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:dvDashAngle="45"
app:dvDashColor="#777"
app:dvDashWidth="4dp"
app:dvSpaceBetweenDashes="4dp"
app:dvViewCornerRadius="0dp" />

Usage βš™οΈ

The table below explains the 5 XML attributes you can set on the DashedView class:

XML AttributeUse
dvDashAngleSets the angle of the dashes. The angle is measured from the X axis of the view.
dvDashColorSets the color of the dashes.
dvDashWidthSets the width of the dashes.
dvSpaceBetweenDashesSets the width of the space between each dash.
dvViewCornerRadiusSets the corner radius value for the DashedView. Useful when working with other views that have rounded corners.

The DashedView also has a public method that allows you to set custom coloring for individual dashes:

Public MethodUse
setDashColorGenerator(...)This method takes a DashColorGenerator instance as a parameter which gives you access to the index of the current dash being drawn. Using that information you can specify logic for how each dash should be colored.
interface DashColorGenerator {
@ColorInt fun getPaintColor(curIndex: Int, numDashes: Int): Int
}

To see an example of the DashColorGenerator click here.

More Examples πŸ–ΌοΈ

Click on any example to see it's code (You also need to look at MainActivity which sets custom dash coloring)

heropichero2Screen Shot 2021-05-21 at 11 44 19 PMScreen Shot 2021-05-23 at 3 48 04 PM
Screen Shot 2021-05-23 at 3 47 38 PM

Contributing 🀝

Feel free to open issues on this repo to report bugs or request features. Additionally if you'd like to contribute you can create a pull request (make sure to read contributing.mk).

Special thanks to all those who have supported this repo thus far!



License πŸ“„

Copyright 2021 Mack Hartley
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

About

Easily create views with a background of repeating dashes 🐝

Topics

Resources

Code of conduct

Contributing

Stars

71 stars

Watchers

1 watching

Forks

Releases

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

DashedView

The easiest way to create a dashed or striped background on Android

ktlintFeatured in Android Weekly

The DashedView library allows you to create views with a dashed (or striped) background. Below are some examples of views created with this library. You can click on any example to see its code.

Screen Shot 2021-05-21 at 11 42 53 PMScreen Shot 2021-05-21 at 11 42 18 PM
card1card2

There is also a demo app for this library which allows you to see the look and feel of the DashedView on your own device:

Get it on Google Play

Quick Start Guide

If you don't have this already, add it to your root build.gradle file:

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

Then you can add the dependency to your app build.gradle file:

dependencies {
...
implementation 'com.github.MackHartley:DashedView:1.0.0'
}

Once that's finished you can declare a DashedView via XML:

<com.mackhartley.dashedview.DashedView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:dvDashAngle="45"
app:dvDashColor="#777"
app:dvDashWidth="4dp"
app:dvSpaceBetweenDashes="4dp"
app:dvViewCornerRadius="0dp" />

Usage βš™οΈ

The table below explains the 5 XML attributes you can set on the DashedView class:

XML AttributeUse
dvDashAngleSets the angle of the dashes. The angle is measured from the X axis of the view.
dvDashColorSets the color of the dashes.
dvDashWidthSets the width of the dashes.
dvSpaceBetweenDashesSets the width of the space between each dash.
dvViewCornerRadiusSets the corner radius value for the DashedView. Useful when working with other views that have rounded corners.

The DashedView also has a public method that allows you to set custom coloring for individual dashes:

Public MethodUse
setDashColorGenerator(...)This method takes a DashColorGenerator instance as a parameter which gives you access to the index of the current dash being drawn. Using that information you can specify logic for how each dash should be colored.
interface DashColorGenerator {
@ColorInt fun getPaintColor(curIndex: Int, numDashes: Int): Int
}

To see an example of the DashColorGenerator click here.

More Examples πŸ–ΌοΈ

Click on any example to see it's code (You also need to look at MainActivity which sets custom dash coloring)

heropichero2Screen Shot 2021-05-21 at 11 44 19 PMScreen Shot 2021-05-23 at 3 48 04 PM
Screen Shot 2021-05-23 at 3 47 38 PM

Contributing 🀝

Feel free to open issues on this repo to report bugs or request features. Additionally if you'd like to contribute you can create a pull request (make sure to read contributing.mk).

Special thanks to all those who have supported this repo thus far!



License πŸ“„

Copyright 2021 Mack Hartley
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

About

Easily create views with a background of repeating dashes 🐝

Topics

Resources

Code of conduct

Contributing

Stars

71 stars

Watchers

1 watching

Forks

Releases

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

Repository files navigation

DashedView

The easiest way to create a dashed or striped background on Android

ktlintFeatured in Android Weekly

The DashedView library allows you to create views with a dashed (or striped) background. Below are some examples of views created with this library. You can click on any example to see its code.

Screen Shot 2021-05-21 at 11 42 53 PMScreen Shot 2021-05-21 at 11 42 18 PM
card1card2

There is also a demo app for this library which allows you to see the look and feel of the DashedView on your own device:

Get it on Google Play

Quick Start Guide

If you don't have this already, add it to your root build.gradle file:

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

Then you can add the dependency to your app build.gradle file:

dependencies {
...
implementation 'com.github.MackHartley:DashedView:1.0.0'
}

Once that's finished you can declare a DashedView via XML:

<com.mackhartley.dashedview.DashedView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:dvDashAngle="45"
app:dvDashColor="#777"
app:dvDashWidth="4dp"
app:dvSpaceBetweenDashes="4dp"
app:dvViewCornerRadius="0dp" />

Usage βš™οΈ

The table below explains the 5 XML attributes you can set on the DashedView class:

XML AttributeUse
dvDashAngleSets the angle of the dashes. The angle is measured from the X axis of the view.
dvDashColorSets the color of the dashes.
dvDashWidthSets the width of the dashes.
dvSpaceBetweenDashesSets the width of the space between each dash.
dvViewCornerRadiusSets the corner radius value for the DashedView. Useful when working with other views that have rounded corners.

The DashedView also has a public method that allows you to set custom coloring for individual dashes:

Public MethodUse
setDashColorGenerator(...)This method takes a DashColorGenerator instance as a parameter which gives you access to the index of the current dash being drawn. Using that information you can specify logic for how each dash should be colored.
interface DashColorGenerator {
@ColorInt fun getPaintColor(curIndex: Int, numDashes: Int): Int
}

To see an example of the DashColorGenerator click here.

More Examples πŸ–ΌοΈ

Click on any example to see it's code (You also need to look at MainActivity which sets custom dash coloring)

heropichero2Screen Shot 2021-05-21 at 11 44 19 PMScreen Shot 2021-05-23 at 3 48 04 PM
Screen Shot 2021-05-23 at 3 47 38 PM

Contributing 🀝

Feel free to open issues on this repo to report bugs or request features. Additionally if you'd like to contribute you can create a pull request (make sure to read contributing.mk).

Special thanks to all those who have supported this repo thus far!



License πŸ“„

Copyright 2021 Mack Hartley
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

About

Easily create views with a background of repeating dashes 🐝

Topics

Resources

Code of conduct

Contributing

Stars

71 stars

Watchers

1 watching

Forks

Releases

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

DashedView

The easiest way to create a dashed or striped background on Android

ktlintFeatured in Android Weekly

The DashedView library allows you to create views with a dashed (or striped) background. Below are some examples of views created with this library. You can click on any example to see its code.

Screen Shot 2021-05-21 at 11 42 53 PMScreen Shot 2021-05-21 at 11 42 18 PM
card1card2

There is also a demo app for this library which allows you to see the look and feel of the DashedView on your own device:

Get it on Google Play

Quick Start Guide

If you don't have this already, add it to your root build.gradle file:

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

Then you can add the dependency to your app build.gradle file:

dependencies {
...
implementation 'com.github.MackHartley:DashedView:1.0.0'
}

Once that's finished you can declare a DashedView via XML:

<com.mackhartley.dashedview.DashedView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:dvDashAngle="45"
app:dvDashColor="#777"
app:dvDashWidth="4dp"
app:dvSpaceBetweenDashes="4dp"
app:dvViewCornerRadius="0dp" />

Usage βš™οΈ

The table below explains the 5 XML attributes you can set on the DashedView class:

XML AttributeUse
dvDashAngleSets the angle of the dashes. The angle is measured from the X axis of the view.
dvDashColorSets the color of the dashes.
dvDashWidthSets the width of the dashes.
dvSpaceBetweenDashesSets the width of the space between each dash.
dvViewCornerRadiusSets the corner radius value for the DashedView. Useful when working with other views that have rounded corners.

The DashedView also has a public method that allows you to set custom coloring for individual dashes:

Public MethodUse
setDashColorGenerator(...)This method takes a DashColorGenerator instance as a parameter which gives you access to the index of the current dash being drawn. Using that information you can specify logic for how each dash should be colored.
interface DashColorGenerator {
@ColorInt fun getPaintColor(curIndex: Int, numDashes: Int): Int
}

To see an example of the DashColorGenerator click here.

More Examples πŸ–ΌοΈ

Click on any example to see it's code (You also need to look at MainActivity which sets custom dash coloring)

heropichero2Screen Shot 2021-05-21 at 11 44 19 PMScreen Shot 2021-05-23 at 3 48 04 PM
Screen Shot 2021-05-23 at 3 47 38 PM

Contributing 🀝

Feel free to open issues on this repo to report bugs or request features. Additionally if you'd like to contribute you can create a pull request (make sure to read contributing.mk).

Special thanks to all those who have supported this repo thus far!



License πŸ“„

Copyright 2021 Mack Hartley
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

About

Easily create views with a background of repeating dashes 🐝

Topics

Resources

Code of conduct

Contributing

Stars

71 stars

Watchers

1 watching

Forks

Releases

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

DashedView

The easiest way to create a dashed or striped background on Android

ktlintFeatured in Android Weekly

The DashedView library allows you to create views with a dashed (or striped) background. Below are some examples of views created with this library. You can click on any example to see its code.

Screen Shot 2021-05-21 at 11 42 53 PMScreen Shot 2021-05-21 at 11 42 18 PM
card1card2

There is also a demo app for this library which allows you to see the look and feel of the DashedView on your own device:

Get it on Google Play

Quick Start Guide

If you don't have this already, add it to your root build.gradle file:

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

Then you can add the dependency to your app build.gradle file:

dependencies {
...
implementation 'com.github.MackHartley:DashedView:1.0.0'
}

Once that's finished you can declare a DashedView via XML:

<com.mackhartley.dashedview.DashedView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:dvDashAngle="45"
app:dvDashColor="#777"
app:dvDashWidth="4dp"
app:dvSpaceBetweenDashes="4dp"
app:dvViewCornerRadius="0dp" />

Usage βš™οΈ

The table below explains the 5 XML attributes you can set on the DashedView class:

XML AttributeUse
dvDashAngleSets the angle of the dashes. The angle is measured from the X axis of the view.
dvDashColorSets the color of the dashes.
dvDashWidthSets the width of the dashes.
dvSpaceBetweenDashesSets the width of the space between each dash.
dvViewCornerRadiusSets the corner radius value for the DashedView. Useful when working with other views that have rounded corners.

The DashedView also has a public method that allows you to set custom coloring for individual dashes:

Public MethodUse
setDashColorGenerator(...)This method takes a DashColorGenerator instance as a parameter which gives you access to the index of the current dash being drawn. Using that information you can specify logic for how each dash should be colored.
interface DashColorGenerator {
@ColorInt fun getPaintColor(curIndex: Int, numDashes: Int): Int
}

To see an example of the DashColorGenerator click here.

More Examples πŸ–ΌοΈ

Click on any example to see it's code (You also need to look at MainActivity which sets custom dash coloring)

heropichero2Screen Shot 2021-05-21 at 11 44 19 PMScreen Shot 2021-05-23 at 3 48 04 PM
Screen Shot 2021-05-23 at 3 47 38 PM

Contributing 🀝

Feel free to open issues on this repo to report bugs or request features. Additionally if you'd like to contribute you can create a pull request (make sure to read contributing.mk).

Special thanks to all those who have supported this repo thus far!



License πŸ“„

Copyright 2021 Mack Hartley
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

About

Easily create views with a background of repeating dashes 🐝

Topics

Resources

Code of conduct

Contributing

Stars

71 stars

Watchers

1 watching

Forks

Releases

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

Repository files navigation

DashedView

The easiest way to create a dashed or striped background on Android

ktlintFeatured in Android Weekly

The DashedView library allows you to create views with a dashed (or striped) background. Below are some examples of views created with this library. You can click on any example to see its code.

Screen Shot 2021-05-21 at 11 42 53 PMScreen Shot 2021-05-21 at 11 42 18 PM
card1card2

There is also a demo app for this library which allows you to see the look and feel of the DashedView on your own device:

Get it on Google Play

Quick Start Guide

If you don't have this already, add it to your root build.gradle file:

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

Then you can add the dependency to your app build.gradle file:

dependencies {
...
implementation 'com.github.MackHartley:DashedView:1.0.0'
}

Once that's finished you can declare a DashedView via XML:

<com.mackhartley.dashedview.DashedView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:dvDashAngle="45"
app:dvDashColor="#777"
app:dvDashWidth="4dp"
app:dvSpaceBetweenDashes="4dp"
app:dvViewCornerRadius="0dp" />

Usage βš™οΈ

The table below explains the 5 XML attributes you can set on the DashedView class:

XML AttributeUse
dvDashAngleSets the angle of the dashes. The angle is measured from the X axis of the view.
dvDashColorSets the color of the dashes.
dvDashWidthSets the width of the dashes.
dvSpaceBetweenDashesSets the width of the space between each dash.
dvViewCornerRadiusSets the corner radius value for the DashedView. Useful when working with other views that have rounded corners.

The DashedView also has a public method that allows you to set custom coloring for individual dashes:

Public MethodUse
setDashColorGenerator(...)This method takes a DashColorGenerator instance as a parameter which gives you access to the index of the current dash being drawn. Using that information you can specify logic for how each dash should be colored.
interface DashColorGenerator {
@ColorInt fun getPaintColor(curIndex: Int, numDashes: Int): Int
}

To see an example of the DashColorGenerator click here.

More Examples πŸ–ΌοΈ

Click on any example to see it's code (You also need to look at MainActivity which sets custom dash coloring)

heropichero2Screen Shot 2021-05-21 at 11 44 19 PMScreen Shot 2021-05-23 at 3 48 04 PM
Screen Shot 2021-05-23 at 3 47 38 PM

Contributing 🀝

Feel free to open issues on this repo to report bugs or request features. Additionally if you'd like to contribute you can create a pull request (make sure to read contributing.mk).

Special thanks to all those who have supported this repo thus far!



License πŸ“„

Copyright 2021 Mack Hartley
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

About

Easily create views with a background of repeating dashes 🐝

Topics

Resources

Code of conduct

Contributing

Stars

71 stars

Watchers

1 watching

Forks

Releases

Used by

Contributors

Languages