Android - Lightning Design System

Use our Android integration to style your native Android applications to be consistent with the Salesforce Lightning Design System.

The Salesforce Lightning Design System Android Static Library includes:

Compiled Design Tokens
The Salesforce Sans Font
The Salesforce Lightning Design System Icons

Simple InstallManual Setup

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 LibraryPull 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 IconsImport Icons

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

import com.salesforce.designsystem.Icons;

Sample-AppSample Application

See Sample App for sample code.

UsageUsage

ExamplesExamples

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