{"id":17442766,"url":"https://github.com/twang2218/material-design-toolkit","last_synced_at":"2025-10-04T04:56:21.989Z","repository":{"id":21271960,"uuid":"24587773","full_name":"twang2218/material-design-toolkit","owner":"twang2218","description":"Implementation of some building blocks for Material Design","archived":false,"fork":false,"pushed_at":"2015-04-22T12:17:24.000Z","size":1013,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-30T05:10:00.185Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/twang2218.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-09-29T09:23:47.000Z","updated_at":"2018-10-24T07:46:16.000Z","dependencies_parsed_at":"2022-08-17T21:11:02.311Z","dependency_job_id":null,"html_url":"https://github.com/twang2218/material-design-toolkit","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/twang2218/material-design-toolkit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twang2218%2Fmaterial-design-toolkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twang2218%2Fmaterial-design-toolkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twang2218%2Fmaterial-design-toolkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twang2218%2Fmaterial-design-toolkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/twang2218","download_url":"https://codeload.github.com/twang2218/material-design-toolkit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twang2218%2Fmaterial-design-toolkit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278266893,"owners_count":25958733,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-04T02:00:05.491Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-17T16:29:26.576Z","updated_at":"2025-10-04T04:56:21.975Z","avatar_url":"https://github.com/twang2218.png","language":"Java","funding_links":[],"categories":["\u003ca name=\"Ripple\"\u003eRipple\u003c/a\u003e"],"sub_categories":["Personal Blog"],"readme":"\nMaterial Design Toolkit\n========================\n\n[![Build Status](https://travis-ci.org/twang2218/material-design-toolkit.png?branch=master)](https://travis-ci.org/twang2218/material-design-toolkit)\n\nWelcome to Material Design Toolkit project. This is an implementation of some building blocks of Material Design.\n\nUsage\n------\n\n### Requirements\n\nShadow drawing will require the ```RenderScript```, so, these 2 lines should be added to your project ```build.gradle``` file:\n\n```groovy\nandroid {\n    ...\n    defaultConfig {\n        ...\n        renderscriptTargetApi 22\n        renderscriptSupportMode true\n    }\n}\n```\n\nAdd dependency of the Material Design Toolkit library.\n\n```groovy\ndependencies {\n    compile 'org.lab99:material-design-toolkit:0.1'\n}\n```\n\nPalette\n--------\n\nThe Material Design Toolkit library includes pre-defined material design color palette resource, which are defined by the [Material Design guideline \u003e Style \u003e Color](http://www.google.com/design/spec/style/color.html).\n\n![Color Palette](art/color_palette.png)\n\nThe name format of each color is ```@color/material_COLOR_VARIATION```, \n\nthe ```COLOR``` can be one of\n```Javascript\n{red, pink, purple, deep_purple, indigo, blue, light_blue, cyan, teal, green, light_green, lime, yellow, amber, orange, deep_orange, brown, grey, blue_grey}\n```\n\nthe ```VARIATION``` can be one of\n```Javascript\n{50, 100, 200, 300, 400, 500, 600, 700, 800, 900, a100, a200, a400, a700}\n```\n\nHowever, there is no ```{a100, a200, a400, a700}``` for color ```{brown, grey, blue_grey}```;\n\n![Color Palette](art/resource_color.png)\n\nTo help referencing the variation of each color, there is an array of color for each base color, such as, for Red,\n\n```xml\n    \u003carray name=\"material_red\"\u003e\n        \u003citem\u003e@color/material_red_50\u003c/item\u003e\n        \u003citem\u003e@color/material_red_100\u003c/item\u003e\n        \u003citem\u003e@color/material_red_200\u003c/item\u003e\n        \u003citem\u003e@color/material_red_300\u003c/item\u003e\n        \u003citem\u003e@color/material_red_400\u003c/item\u003e\n        \u003citem\u003e@color/material_red_500\u003c/item\u003e\n        \u003citem\u003e@color/material_red_600\u003c/item\u003e\n        \u003citem\u003e@color/material_red_700\u003c/item\u003e\n        \u003citem\u003e@color/material_red_800\u003c/item\u003e\n        \u003citem\u003e@color/material_red_900\u003c/item\u003e\n        \u003citem\u003e@color/material_red_a100\u003c/item\u003e\n        \u003citem\u003e@color/material_red_a200\u003c/item\u003e\n        \u003citem\u003e@color/material_red_a400\u003c/item\u003e\n        \u003citem\u003e@color/material_red_a700\u003c/item\u003e\n    \u003c/array\u003e\n```\n\nThere are also 3 base color array, one for all color, and one for color without accent color, one for the color with accent color. The ```Brown```, ```Grey```, and ```Blue Grey``` don't have accent color variations.\nAnd each item of the array is referenced to those color variation array.\n\n```xml\n    \u003carray name=\"material_color\"\u003e\n        \u003citem\u003e@array/material_red\u003c/item\u003e\n        \u003citem\u003e@array/material_pink\u003c/item\u003e\n        \u003citem\u003e@array/material_purple\u003c/item\u003e\n        \u003citem\u003e@array/material_deep_purple\u003c/item\u003e\n        \u003citem\u003e@array/material_indigo\u003c/item\u003e\n        \u003citem\u003e@array/material_blue\u003c/item\u003e\n        \u003citem\u003e@array/material_light_blue\u003c/item\u003e\n        \u003citem\u003e@array/material_cyan\u003c/item\u003e\n        \u003citem\u003e@array/material_teal\u003c/item\u003e\n        \u003citem\u003e@array/material_green\u003c/item\u003e\n        \u003citem\u003e@array/material_light_green\u003c/item\u003e\n        \u003citem\u003e@array/material_lime\u003c/item\u003e\n        \u003citem\u003e@array/material_yellow\u003c/item\u003e\n        \u003citem\u003e@array/material_amber\u003c/item\u003e\n        \u003citem\u003e@array/material_orange\u003c/item\u003e\n        \u003citem\u003e@array/material_deep_orange\u003c/item\u003e\n        \u003citem\u003e@array/material_brown\u003c/item\u003e\n        \u003citem\u003e@array/material_grey\u003c/item\u003e\n        \u003citem\u003e@array/material_blue_grey\u003c/item\u003e\n    \u003c/array\u003e\n\n    \u003carray name=\"material_color_with_accent\"\u003e\n        \u003citem\u003e@array/material_red\u003c/item\u003e\n        \u003citem\u003e@array/material_pink\u003c/item\u003e\n        \u003citem\u003e@array/material_purple\u003c/item\u003e\n        \u003citem\u003e@array/material_deep_purple\u003c/item\u003e\n        \u003citem\u003e@array/material_indigo\u003c/item\u003e\n        \u003citem\u003e@array/material_blue\u003c/item\u003e\n        \u003citem\u003e@array/material_light_blue\u003c/item\u003e\n        \u003citem\u003e@array/material_cyan\u003c/item\u003e\n        \u003citem\u003e@array/material_teal\u003c/item\u003e\n        \u003citem\u003e@array/material_green\u003c/item\u003e\n        \u003citem\u003e@array/material_light_green\u003c/item\u003e\n        \u003citem\u003e@array/material_lime\u003c/item\u003e\n        \u003citem\u003e@array/material_yellow\u003c/item\u003e\n        \u003citem\u003e@array/material_amber\u003c/item\u003e\n        \u003citem\u003e@array/material_orange\u003c/item\u003e\n        \u003citem\u003e@array/material_deep_orange\u003c/item\u003e\n    \u003c/array\u003e\n\n    \u003carray name=\"material_color_without_accent\"\u003e\n        \u003citem\u003e@array/material_brown\u003c/item\u003e\n        \u003citem\u003e@array/material_grey\u003c/item\u003e\n        \u003citem\u003e@array/material_blue_grey\u003c/item\u003e\n    \u003c/array\u003e\n```\n\n\nWidgets\n-------\n\n### Paper\n\nAs described in [Material Design guideline](http://www.google.com/design/spec/what-is-material/environment.html),\nmaterial design is inspired by paper and ink. Paper is the building block for any widgets, such as,\nButton, Floating Action Button, or Cards.\n\nTo create a paper widget, there are a few important features need to be mentioned.\n\n#### Shadow\n\nPaper is existed in a 3D space, paper should have a shadow beneath it, so viewer can get the sense\nof the depth between the paper and the background. And as the guideline said, the shadow are composited\nby kind of shadow.\n\n![Color Palette](art/shadow_composition.png)\n\nThe shadow of key light give the sense of the depth, and the shadow of ambient light define the shape\nof paper. During the elevation of the paper, the depth is changed, so the shadow of the key light.\nHowever, the shadow of the ambient light will keep the same.\n\nThe ```ShadowDrawable``` and ```ShadowRender``` are implemented with the above idea, and the shadow\nwill be drawn below the widget.\n\n#### Ripple\n\nTo response the user's action, the ripple effect will be triggered. That indicators where and what \nthe user has been triggered. ```RippleDrawable``` is created to implement the idea. And a ```TouchTracker```\nclass is created to help to track user's touch location.\n\n#### PaperDrawable\n\nTo implement shadow and ripple, an special wrapper drawable, ```PaperDrawable``` is created.\nThe ```PaperDrawable``` contains 3 layers. From top to bottom, they are:\n\n * Ripple layer\n * Background layer\n * Shadow layer\n \nThe ```PaperDrawable``` will be used as the background drawable of ```Paper```, any original background\ndrawable operations will be redirected to the inner background layer. So, user can specify any drawable\nas the background they want, and still get the shadow and ripple effect when they are enabled.\n\n#### Materialize stock widgets\n\nThere is a static method ```apply()``` which can be used to materialize the traditional widget, by\nwrapping the original background drawable with ```PaperDrawable```, so the widget will have shadow and\nripple.\n \n### Button\n\nA ```Button``` is a clickable ```Paper```, normally with a round-cornered background.\n\n### ActionButton\n\nAn ```ActionButton``` is a ```Button``` which has round background.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwang2218%2Fmaterial-design-toolkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftwang2218%2Fmaterial-design-toolkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwang2218%2Fmaterial-design-toolkit/lists"}