|
[![2007-06_flag_greatbritain](https://gitlab.com/xphnx/twelf_cm12_theme/uploads/5bc7272a0caa9b1a1b8680a3ab949c8a/2007-06_flag_greatbritain.jpg)](home) [![60px-Bandera_España_civil](https://gitlab.com/xphnx/twelf_cm12_theme/uploads/6dc551cb2a748a3176e1027568df5906/60px-Bandera_España_civil.png)](home-es_off)
|
|
[![2007-06_flag_greatbritain](https://gitlab.com/xphnx/twelf_cm12_theme/uploads/5bc7272a0caa9b1a1b8680a3ab949c8a/2007-06_flag_greatbritain.jpg)](home) [![60px-Bandera_España_civil](https://gitlab.com/xphnx/twelf_cm12_theme/uploads/6dc551cb2a748a3176e1027568df5906/60px-Bandera_España_civil.png)](home-es_off)
|
|
|
|
|
|
# How to add an icon #
|
|
# How to add an icon
|
|
**In one sentence**: Draw a white icon on its layer of the [**SVG template**](https://gitlab.com/xphnx/twelf_cm12_theme/tree/master/tools/svg_templates_twelf), put the svg on [**SVG icons folder**](https://gitlab.com/xphnx/twelf_cm12_theme/tree/vectorial/svg-icons), add the activity of the app to appfilter.xml and add the icon's license to the LICENSE file.
|
|
**In one sentence**: Draw a white icon on its layer of the [**SVG template**](https://gitlab.com/xphnx/twelf_cm12_theme/tree/master/tools/svg_templates_twelf), put the svg on [**SVG icons folder**](https://gitlab.com/xphnx/twelf_cm12_theme/tree/vectorial/svg-icons), add the activity of the app to appfilter.xml and add the icon's license to the LICENSE file.
|
|
|
|
|
|
**Breaf instructions**: A template file contains three layers (to see them, select Layer - Layers from the menu; to toggle layer visibility, use the eye-like icons near the layer names). The bottom layer contains the background of the icon. It has proper color, shadow, shade and tint. Do not modify those.
|
|
**Breaf instructions**: A template file contains three layers (to see them, select Layer - Layers from the menu; to toggle layer visibility, use the eye-like icons near the layer names). The bottom layer contains the background of the icon. It has proper color, shadow, shade and tint. Do not modify those.
|
... | @@ -9,7 +9,7 @@ The middle layer (Hints) shows the keyline shapes - the regions that define the |
... | @@ -9,7 +9,7 @@ The middle layer (Hints) shows the keyline shapes - the regions that define the |
|
|
|
|
|
The icon layer is the most interesting one. This is the layer you should draw your icon on. It already contains an indication, please delete it and draw the desired logo in white instead of it.
|
|
The icon layer is the most interesting one. This is the layer you should draw your icon on. It already contains an indication, please delete it and draw the desired logo in white instead of it.
|
|
|
|
|
|
## Add Activities to appfilter.xml
|
|
### Add Activities to appfilter.xml
|
|
|
|
|
|
All the information needed is in AndroidManifest on the source code of the app.
|
|
All the information needed is in AndroidManifest on the source code of the app.
|
|
|
|
|
... | @@ -38,14 +38,14 @@ Where |
... | @@ -38,14 +38,14 @@ Where |
|
* **.IdenticonsSettings** is the AndroidActity for the launcher
|
|
* **.IdenticonsSettings** is the AndroidActity for the launcher
|
|
* **identiconizer** is the name of the file .png (icon file) hosted on assets/icons/res for this app
|
|
* **identiconizer** is the name of the file .png (icon file) hosted on assets/icons/res for this app
|
|
|
|
|
|
# Advanced
|
|
### Advanced
|
|
|
|
|
|
## Proportions
|
|
##### Proportions
|
|
|
|
|
|
![style_logos_product_grid_shapes_vert_rectangle](https://gitlab.com/xphnx/twelf_cm12_theme/uploads/04e86f2f60dd3b29b9c013af40465b8a/style_logos_product_grid_shapes_vert_rectangle.png)![style_logos_product_grid_shapes_hori_rectangle](https://gitlab.com/xphnx/twelf_cm12_theme/uploads/0755668fec705d1446ee30e82b02db36/style_logos_product_grid_shapes_hori_rectangle.png)![style_logos_product_grid_shapes_square](https://gitlab.com/xphnx/twelf_cm12_theme/uploads/8f763839988c14c083d336841ab13d34/style_logos_product_grid_shapes_square.png)![style_logos_product_grid_shapes_circle](https://gitlab.com/xphnx/twelf_cm12_theme/uploads/f4acad231a240b1122684f127c87584f/style_logos_product_grid_shapes_circle.png)
|
|
![style_logos_product_grid_shapes_vert_rectangle](https://gitlab.com/xphnx/twelf_cm12_theme/uploads/04e86f2f60dd3b29b9c013af40465b8a/style_logos_product_grid_shapes_vert_rectangle.png)![style_logos_product_grid_shapes_hori_rectangle](https://gitlab.com/xphnx/twelf_cm12_theme/uploads/0755668fec705d1446ee30e82b02db36/style_logos_product_grid_shapes_hori_rectangle.png)![style_logos_product_grid_shapes_square](https://gitlab.com/xphnx/twelf_cm12_theme/uploads/8f763839988c14c083d336841ab13d34/style_logos_product_grid_shapes_square.png)![style_logos_product_grid_shapes_circle](https://gitlab.com/xphnx/twelf_cm12_theme/uploads/f4acad231a240b1122684f127c87584f/style_logos_product_grid_shapes_circle.png)
|
|
|
|
|
|
|
|
|
|
## The parts of the icon itself are:
|
|
##### The parts of the icon itself are:
|
|
|
|
|
|
* Material foreground (see [Material color palette](http://www.google.com/design/spec/style/color.html#color-color-palette))
|
|
* Material foreground (see [Material color palette](http://www.google.com/design/spec/style/color.html#color-color-palette))
|
|
* Central logo/image
|
|
* Central logo/image
|
... | @@ -53,7 +53,7 @@ Where |
... | @@ -53,7 +53,7 @@ Where |
|
* Shaded edge ![shadow2](https://gitlab.com/xphnx/twelf_cm12_theme/uploads/46c409f5fa3395d5ad0ecb9cd8c7bd92/shadow2.png)
|
|
* Shaded edge ![shadow2](https://gitlab.com/xphnx/twelf_cm12_theme/uploads/46c409f5fa3395d5ad0ecb9cd8c7bd92/shadow2.png)
|
|
* Drop shadow ![shadow1](https://gitlab.com/xphnx/twelf_cm12_theme/uploads/a65da00d154218539f88a00e16dd08f4/shadow1.png)
|
|
* Drop shadow ![shadow1](https://gitlab.com/xphnx/twelf_cm12_theme/uploads/a65da00d154218539f88a00e16dd08f4/shadow1.png)
|
|
|
|
|
|
## Colors (if you use the templates you dont have to worry about this)
|
|
##### Colors (if you use the templates you dont have to worry about this)
|
|
|
|
|
|
* Material foregroud - One of the '500' colors of the material palette (differs across templates)
|
|
* Material foregroud - One of the '500' colors of the material palette (differs across templates)
|
|
* Central logo - White #FFFFFF
|
|
* Central logo - White #FFFFFF
|
... | @@ -61,7 +61,7 @@ Where |
... | @@ -61,7 +61,7 @@ Where |
|
* Shaded edge - Derived from the first color: Refer to Tint, shade and shadow values
|
|
* Shaded edge - Derived from the first color: Refer to Tint, shade and shadow values
|
|
* Drop shadow - Derived from the first color: Refer to Tint, shade and shadow values
|
|
* Drop shadow - Derived from the first color: Refer to Tint, shade and shadow values
|
|
|
|
|
|
#### Tint, shade and shadow values
|
|
###### Tint, shade and shadow values
|
|
|
|
|
|
![style_logos_product_lighting_values_cool](https://gitlab.com/xphnx/twelf_cm12_theme/uploads/1f0220305db147e65bcff4b97fc75754/style_logos_product_lighting_values_cool.png)
|
|
![style_logos_product_lighting_values_cool](https://gitlab.com/xphnx/twelf_cm12_theme/uploads/1f0220305db147e65bcff4b97fc75754/style_logos_product_lighting_values_cool.png)
|
|
|
|
|
... | @@ -73,7 +73,7 @@ Where |
... | @@ -73,7 +73,7 @@ Where |
|
|
|
|
|
![style_logos_product_lighting_values_neutral](https://gitlab.com/xphnx/twelf_cm12_theme/uploads/3d6ff2a76773dd262b51608ca892b594/style_logos_product_lighting_values_neutral.png)
|
|
![style_logos_product_lighting_values_neutral](https://gitlab.com/xphnx/twelf_cm12_theme/uploads/3d6ff2a76773dd262b51608ca892b594/style_logos_product_lighting_values_neutral.png)
|
|
|
|
|
|
## Resolutions
|
|
##### Resolutions
|
|
|
|
|
|
|RESOLUTION| PX | DPI |
|
|
|RESOLUTION| PX | DPI |
|
|
| :-----: |:-------:| :---:|
|
|
| :-----: |:-------:| :---:|
|
... | @@ -83,14 +83,18 @@ Where |
... | @@ -83,14 +83,18 @@ Where |
|
| XXHDPI | 144x144 | 480 |
|
|
| XXHDPI | 144x144 | 480 |
|
|
| XXXHDPI | 192x192 | 640 |
|
|
| XXXHDPI | 192x192 | 640 |
|
|
|
|
|
|
**More info: Please read this carefully for a deeper understanding**
|
|
##### More info
|
|
|
|
Please read this carefully for a deeper understanding:
|
|
|
|
|
|
[Colors material design](http://www.google.com/design/spec/style/color.html)
|
|
* [Colors material design](http://www.google.com/design/spec/style/color.html)
|
|
|
|
|
|
[Material Design Product Icons](http://www.google.com/design/spec/style/icons.html#icons-product-icons)
|
|
* [Material Design Product Icons](http://www.google.com/design/spec/style/icons.html#icons-product-icons)
|
|
|
|
|
|
[Material Design System Icons](http://www.google.com/design/spec/style/icons.html#icons-system-icons)
|
|
* [Material Design System Icons](http://www.google.com/design/spec/style/icons.html#icons-system-icons)
|
|
|
|
|
|
**Add Material Color Palette to Inkscape:**
|
|
##### Add Material Color Palette to Inkscape
|
|
|
|
|
|
[Material Design Color Palette for Inkscape] (https://github.com/MaTriXy/Material-Design-Color-Palette-for-Inkscape |
|
[Material Design Color Palette for Inkscape] (https://github.com/MaTriXy/Material-Design-Color-Palette-for-Inkscape
|
|
\ No newline at end of file |
|
|
|
|
|
# Creating a Boot Animation
|
|
|
|
[See this link](https://github.com/cyngn/android_packages_themes_Template#special-creating-a-boot-animation) |
|
|
|
\ No newline at end of file |