|
|
[![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)
|
|
|
[![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 contribute #
|
|
|
* [Providing AndroidActivities](activities-en)
|
|
|
* [Providing Icons](icons-en)
|
|
|
* [Report bugs](https://gitlab.com/xphnx/twelf_cm12_theme/issues)
|
|
|
* [Improve the code](https://gitlab.com/xphnx/twelf_cm12_theme/merge_requests)
|
|
|
# How to add an icon #
|
|
|
**In one sentence**: Draw a white icon on its layer of the SVG template (see tools), put the svg on svg-temp, add the activity of the app to appfilter.xml and add the icon's license to the LICENSE file.
|
|
|
|
|
|
# How to request an icon #
|
|
|
To request incorporating an icon, please use the [issue tracker](https://gitlab.com/xphnx/twelf_cm12_theme/issues) |
|
|
\ No newline at end of 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.
|
|
|
|
|
|
The middle layer (Hints) shows the keyline shapes - the regions that define the size of your icon. In short, a mostly square icon must fit into a square one, a horizontal rectangle - in the horizontal rectangle, a vertical rectangle icon - into the vertical rectangle and the mostly round one should mostly fit in the larger squre-without-the-corners that they form. most part of your icon should fit into one or several of those rectangles. Note that small items can extend beyond this area. For more information on this, please refer to the section "Proportions" below and to the [Google's guide](http://www.google.com/design/spec/style/icons.html#icons-system-icons).
|
|
|
|
|
|
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
|
|
|
|
|
|
All the information needed is in AndroidManifest on the source code of the app.
|
|
|
|
|
|
Fist we need the android package name, in the example: ```com.germainz.identiconizer```
|
|
|
|
|
|
![packagename](https://gitlab.com/xphnx/twelf_cm12_theme/uploads/873e1f099bdadaf9481b20cec746a555/packagename.JPG)
|
|
|
|
|
|
|
|
|
Then we need the AndroidActity used for the launcher. Search for "LAUNCHER". Then center your attention on the tags <activity> where is "LAUNCHER" located. The information we need is ```<activity android:name="**THISNAME**"...</activity>```
|
|
|
In this example the activity name is ```com.germainz.identiconizer.IdenticonsSettings``` but usually the activityname will appear only as ```.IdenticonsSettings``` on other apps.
|
|
|
|
|
|
![activity](https://gitlab.com/xphnx/twelf_cm12_theme/uploads/64a135ba04fb0024b7ab77f537cff42d/activity.JPG)
|
|
|
|
|
|
So for this example we need to add to Appfilter.xml the line below:
|
|
|
``` <item component="ComponentInfo{package_id/package_id.activity_name}" drawable="iconname" />```
|
|
|
|
|
|
or simply
|
|
|
|
|
|
```<item component="ComponentInfo{package_id/.activity_name}" drawable="iconname" />```
|
|
|
|
|
|
in the example
|
|
|
|
|
|
```<item component="ComponentInfo{com.germainz.identiconizer/com.germainz.identiconizer.IdenticonsSettings}" drawable="identiconizer" />```
|
|
|
Where
|
|
|
* **com.germainz.identiconizer** is the package name
|
|
|
* **.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
|
|
|
|
|
|
# Advanced
|
|
|
|
|
|
## 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)
|
|
|
|
|
|
|
|
|
## 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))
|
|
|
* Central logo/image
|
|
|
* Tint edge ![shadow3](https://gitlab.com/xphnx/twelf_cm12_theme/uploads/e70030e52b7387210bbcb552895990c0/shadow3.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)
|
|
|
|
|
|
## 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)
|
|
|
* Central logo - White #FFFFFF
|
|
|
* Tint edge - White 20% opacity
|
|
|
* 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
|
|
|
|
|
|
#### 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_fresh](https://gitlab.com/xphnx/twelf_cm12_theme/uploads/4b0aa1fb9b09631ef406b828c5702c34/style_logos_product_lighting_values_fresh.png)
|
|
|
|
|
|
![style_logos_product_lighting_values_warm](https://gitlab.com/xphnx/twelf_cm12_theme/uploads/069b4e48b98ac27240d2815d466d176f/style_logos_product_lighting_values_warm.png)
|
|
|
|
|
|
![style_logos_product_lighting_values_hot](https://gitlab.com/xphnx/twelf_cm12_theme/uploads/9ce6aea9de09153dadd6e325d947972c/style_logos_product_lighting_values_hot.png)
|
|
|
|
|
|
![style_logos_product_lighting_values_neutral](https://gitlab.com/xphnx/twelf_cm12_theme/uploads/3d6ff2a76773dd262b51608ca892b594/style_logos_product_lighting_values_neutral.png)
|
|
|
|
|
|
## Resolutions
|
|
|
|
|
|
|RESOLUTION| PX | DPI |
|
|
|
| :-----: |:-------:| :---:|
|
|
|
| MDPI | 48x48 | 120 |
|
|
|
| HDPI | 72x72 | 240 |
|
|
|
| XHDPI | 96x96 | 320 |
|
|
|
| XXHDPI | 144x144 | 480 |
|
|
|
| XXXHDPI | 192x192 | 640 |
|
|
|
|
|
|
**More info: Please read this carefully for a deeper understanding**
|
|
|
|
|
|
[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 System Icons](http://www.google.com/design/spec/style/icons.html#icons-system-icons)
|
|
|
|
|
|
**Add Material Color Palette to Inkscape:**
|
|
|
|
|
|
[Material Design Color Palette for Inkscape] (https://github.com/MaTriXy/Material-Design-Color-Palette-for-Inkscape |
|
|
\ No newline at end of file |