Skip to content

salesforce-ux/design-system-android

Lightning Design System tokens, icons and fonts for Android

XML configuration and java files for Salesforce Lightning Design System Tokens.

Current release: Spring ’17

Simple Install

The library is offered as a Bintray repository that can be pulled into any project easily via the Gradle build. See the Bintray here.

Pull in the Library

Add the following to build.gradle (Module) in the Gradle Scripts:

repositories {
    jcenter()
}

Under depenecies in the same script add:

compile 'com.salesforce.ux:SalesforceDesignSystem:3.0.0'

Replace 3.0.0 with the latest design-system-android build version.

Sync the Gradle Scripts, and perform a Gradle build. The Design System is now ready for use in your project.

Import Icons

Add the following import statement to any file which requires the use of Design System icons:

import com.salesforce.designsystem.Icons;

Sample Application

See Demo App

Examples

Colors

android:background="@color/slds_color_brand_dark"

Fonts and text sizes

TextView textView = (TextView)findViewById(R.id.textView);

Typeface custom_font = Typeface.createFromAsset(getAssets(),  "SalesforceSans-bold.ttf");
textView.setTypeface(custom_font);

Icons

Action Icons
Icons.getDrawable(context,
                  Icons.ActionIcons.ActionNewTask,
                  resources.getDimensionPixelSize(R.dimen.slds_square_icon_medium),
                  resources.getColor(R.color.slds_color_text_link));        
Custom Icons
Icons.getDrawable(context,
                  Icons.CustomIcons.Custom1,
                  resources.getDimensionPixelSize(R.dimen.slds_square_icon_medium),
                  resources.getColor(R.color.slds_color_text_link));  
Standard Icons
Icons.getDrawable(context,
                  Icons.StandardIcons.Account,
                  resources.getDimensionPixelSize(R.dimen.slds_square_icon_medium),
                  resources.getColor(R.color.slds_color_text_link));
Utility Icons
Icons.getDrawable(context,
                  Icons.Utility.AddContact,
                  resources.getDimensionPixelSize(R.dimen.slds_square_icon_medium),
                  resources.getColor(R.color.slds_color_text_link));

Library Build (not required)

$ npm install
$ gulp

Licenses