Skip to main content

Styling

For the styling theme there are night and light types.

Because the client is always concerned about styling, it must be paid more attention.

Colors​

There are 2 different type of .xml colors which is colors.xml and night/colors.xml.

Rules:

  • Give a name for the color as follows:

    [COLOR NAME]_[HEX]

    Example :

    <?xml version="1.0" encoding="utf-8"?>
    <resources>

    <color name="black_001133">#001133</color>

    </resources>

  • Only declare primary color on colors.xml

  • If the content have different color (light/night theme), don't forget to declare Color Content

    Example colors.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <resources>

    <color name="background">@color/grey_F5F6FA</color>

    </resources>

    Example night/colors.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <resources>

    <color name="background">@color/black_400</color>

    </resources>

Icon​

Rules:

  • You have use SVG instead of PNG. Step :

    1. Right click drawable folder -> New -> Vector Asset.

    2. Browse the SVG file -> Next.

      icon-svg

  • If the icon have different color (light/night theme), don't forget to make night type icon.

    Example :

    night/ic_arrow.xml

DP / SP​

Use library DP Sizer or SP Sizer to all size of layout content.

Example :

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="@dimen/_13sdp"
    android:layout_marginTop="@dimen/_30sdp"
    android:layout_marginRight="@dimen/_13sdp"
    android:text="@string/welcome_back"
    android:textColor="@color/text_title"
    android:textSize="@dimen/_18ssp"
    android:textStyle="bold" />

Button​

Rules:

  • Give a name for the button as follows:

    ripple_effect_button_[COLOR]_[CORNER/CORNER BORDER/BORDER].xml

    Example :

    ripple_effect_button_secondary_corner_border.xml

  • If the button have different color (light/night theme), don't forget to make night type xml.

    Example :

    night/ripple_effect_button_secondary_corner_border.xml

Strings​

Don't use inline string inside .xml. Declare string in strings.xml first before you used it.

Margin / Padding​

BE CAREFUL IN DECLARATION OF MARGIN / PADDING. MUST BE CONSISTENT.