Mobillium Project Guidelines
Project & code-style guideline of Mobillium Android Development Team.
Table of Contents
Colors
CustomViews & CustomLayouts
Dimens
ID's in XML
Resources
Strings
Styles
Text Sizes
📃 Resources Naming Standarts
🔸 Colors
lowercase_underscore
| Rule | Definition | Example |
|---|---|---|
<widget/where>_<description> |
widget/where = widget name or where it's used | ◾<color name="image_logo_tint">@color/mobillium_blue</color> <color name="button_primary">@color/pistachio</color><color name="mobillium_blue">#4b7bec</color>◾ <color name="pistachio">#93c572</color> |
🔸 CustomViews and CustomLayouts
Class: PascalCase, Layout: lowercase_underscore
| Rule | Definition | Example |
|---|---|---|
CV<What><Type> |
What = Name for the custom view Type = Usually, what it extends |
CVPinTextViewCVNumPadLayout |
cv_<what>_<type> |
Layout file of custom view or layout | cv_pin_textview cv_numpad_layout |
🔸 Dimens
lowercase_underscore
| Rule | Definition | Example |
|---|---|---|
<where>_screen_<widget>_<description> or <where>_<widget>_<description> or <widget>_<description> or <attribute>_<description> |
where = where it's used(activity,fragment,dialog) widget = widget name(button, image etc) attribute = margin, padding |
<dimen name="user_detail_screen_cardview_radius">4dp</dimen> <dimen name="dialog_icon_height">16dp</dimen> <dimen name="image_width">120dp</dimen> <dimen name="margin_medium">16dp</dimen> |
🔸 ID's in XML
lowerCamelCase
| Rule | Definition | Example |
|---|---|---|
<view><What> |
view = Short name of the view Button - btn Spinner - spn EditText - et TextView - tv RecyclerView - rv ConstraintLayout - cl LinearLayout - ll |
btnLogin tvUserName clProductContainer |
🔸Resources
lowercase_underscore
| Resource | Rule | Definition | Example |
|---|---|---|---|
| Icons | ic_<what>_<description>? |
what = Name of the icon description = Description (optional) |
ic_arrow_right |
| Images | img_<what>_<description>? |
img_profile_placeholder |
|
| Custom Drawables | custom_<what>_<description>? |
custom_button_round |
|
| Partial Layouts | partial_<what>_<description>? |
Parts of other layouts that are <include>d |
partial_stats_container |
| Dialogs | dialog_<what>_<description>? |
Dialog layouts | dialog_change_theme |
| Item Views | item_<what>_<description>? |
Item views of List Adapters | ◾item_bank_account |
🔸 Strings.xml
lowercase_underscore
| Rule | Definition | Example |
|---|---|---|
<where>_screen_<description>_<type> or <where>_<description>_<type> or common_<description> |
where = DieticianDetailActivity + screen description = Credit card type type = Header |
<string name="dietician_detail_screen_credit_card_type_header"> Credit Card Type </string> <string name="common_loading">Loading...</string> |
🔸 Styles
PascalCase
| Rule | Definition | Example |
|---|---|---|
<Widget><Description>or <Where><Description> |
For header texts | <style name="TextHeader" parent="Widget.AppCompat.TextView"> |
<Widget><Description>.<Style> |
Extends all styles from TextHeader and adds new color style | <style name="TextHeader.Black"> |
🔸 Text Sizes
lowercase_underscore
| Rule | Definition | Example |
|---|---|---|
text_size_<description> |
description = caption, small, medium, normal, big, headline | <dimen name="text_size_caption "> 12sp </dimen> |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent