Updated Material Design Guidelines and Resources

When we first published the Material Design guidelines back in June, we set out to create a living document that would grow with feedback from the community. In that time, we’ve seen some great work from the community in augmenting the guidelines with things like Sketch templates, icon downloads and screens upon screens of inspiring visual and motion design ideas. We’ve also received a lot of feedback around what resources we can provide to make using Material Design in your projects easier.

So today, in addition to publishing the final Android 5.0 SDK for developers, we’re publishing our first significant update to the Material Design guidelines, with additional resources including:

• Updated sticker sheets in PSD, AI and Sketch formats
• A new icon library ZIP download
• Updated color swatch downloads
• Updated whiteframe downloads, including better baseline grid text alignment and other miscellaneous fixes

The sticker sheets have been updated to reflect the latest refinements to the components and integrated into a single, comprehensive sticker sheet that should be easier to use. An aggregated sticker sheet is also newly available for Adobe Photoshop and Sketch—two hugely popular requests. In the sticker sheet, you can find various elements that make up layouts, including light and dark symbols for the status bar, app bar, bottom toolbar, cards, dropdowns, search fields, dividers, navigation drawers, dialogs, the floating action button, and other components. The sticker sheets now also include explanatory text for elements.

Note that the images in the Components section of the guidelines havent yet been updated (that’s coming soon!), so you can consider the sticker sheets to be the most up-to-date version of the components.

Also, the new system icons sticker sheet contains icons commonly used in Android across different apps, such as icons used for media playback, communication, content editing, connectivity, and so on.

Stay tuned for more enhancements as we incorporate more of your feedback—remember to share your suggestions on Google+! We’re excited to continue evolving this living document with you!

For more on Material Design, check out these videos and the new getting started guide for Android developers.

Posted by Roman Nurik, Design Advocate

Read More..

Colors Arrays and Dimensions Resources

Android provides three other types of resources that can be defined as XML files in the res/values folder. These resources can be Colors, Arrays and Dimensions.

Color Resources:
You can define XML files that contain definitions for colors that can be used in your application.


Colors in Android are hexadecimal RGB values, also optionally specifying an alpha channel (transparency).

You have your choice of single-character hex values or double-character hex values, leaving

you with four styles:

• #RGB (Red: #F00).
• #ARGB (Red with Alpha 5: #5F00).
• #RRGGBB (Red : #FF0000).
• #AARRGGBB (Red with Alpha 50: 50FF0000 #).

You define colors in the xml file as follows:

<color name="Red">#FF0000</color>

You can use it from code behind as this:

TextView txtColor=(TextView)findViewById(R.id.txtColor);
txtColor.setTextColor(this.getResources().getColor(R.color.Red));

or from the layout as this:

Dimensions Resources:
You can define Dimension resources to use them with your widgets to define padding, width or height.


The dimension resources can be defined in the following units:

• Pixels: (px).
• Inches: (in).
• Millimeters: (mm).
• Points: (pt).
• Density: (dp) density-independent pixels based on 160 dpi (dot per inch).
•  Scale: (sp) Scale-independent pixels (dimensions that allow for user sizing; helpful for use in
  fonts).

To define dimension resources in xml files you can write it like this:

<dimen name="PixelDim">10px</dimen>
<dimen name="PointsDim">10pt</dimen>
<dimen name="InchesDim">0.2in</dimen>
<dimen name="MilliDim">5mm</dimen>
<dimen name="DensityDim">20dp</dimen>
<dimen name="ScaleDim">20sp</dimen>

And you can use them from the xml layout definition like this

or from code like this:

TextView txtdp=(TextView)findViewById(R.id.txtdp);
txtdp.setTextSize(this.getResources().getDimension(R.dimen.DensityDim));

Array Resources:
Array resources allow you to define custom string arrays that hold values you can use in your application such as a countries list or a list of names.


An Array resource is defined using string-array element while items are defined using item element.

<string-array name="countries">
<item>USA</item>
<item>UK</item>
<item>Canada</item>
</string-array>

and you can use them from code like this:

String [] Countries=this.getResources().getStringArray(R.array.countries);

you can define more than one string-array in the same file

that was all about color, dimensions and arrays in android

Download sample application from here

Read More..

Understanding Resources

Resources in Android are files stored under the res directory of your project. Resources can be physical files (Audio, video, images, text, etc…) or xml files that declare some values to use in your application.

Why use Resources:

1. The resources are bound to the application in a way that you can change them without needing to change the source code or recompile the application.
2. The Android Generates an ID for each resource file so you can access them directly and easily. All the resources IDs are added to the R.Java file.
3. When you use XML resource files, Android pareses these files automatically so you can reference values defined in them directly with no extra effort.
4. Using resources is very useful in Localization and Internationalization of the application in case you develop multilingual applications. This includes not just the labels but it can include alignment, directions images or any kind of files.

Types of resources:

• Strings, colors, arrays, dimensions. Defined in res/values/ directory. Using them is very useful in Localization and Internationalization.
• Images put in res/drawable directory. You can put all the images or icons you need in your application.
• Animations, defined in res/anime/ directory. You can define animations that for example correspond to a button click.
• XML, defined in res/xml/ directory for xml files containing your custom data.
• Layout resources, defined in res/layout/ for declaring the views that construct the user interface of the activities.

Read More..

Understanding String Resources

Android offers three types of string resources: Plain Strings, string formats and styled texts

Plain string resources can be declared in res/values/strings.xml

If you create an Android application [for example call it HelloAndroid] and just before adding anything, browse to res/values/strings.xml it will be like this:

 Hello World, HelloAndroid!
 HelloAndroid

This is a pretty example of Plain text resources. The resource with name=”app_name” is the name of the application that appears when you deploy the application to the phone, it’s referenced in the AndroidManifest.xml file in the application tab. You can change it as you want.
Now let’s add two entries in the file to see how can we use plain text resources within the application

This is referenced from the res/layout/main.xml
This is referenced from the code

The first string will be the text of a text view defined in res/layout/main.xml file

See that to reference the first string we use the @string/[Resource Name] convention.
The second resource will be referenced from the code file of the activity like this

TextView txtHeader2=(TextView)findViewById(R.id.txtHeader2);
txtHeader2.setText(getString(R.string.plainResource2));

if you open R.java file of your project you will find that Android has generated a class called string with members referencing to your string resources:

public static final class string {
 public static final int app_name=0x7f040001;
 public static final int hello=0x7f040000;
 public static final int plainResource1=0x7f040002;
 public static final int plainResource2=0x7f040003;
 }

Also notice the way you access the string resources in Android, you don’t open the strings.xml file and parse it t extract the values you want to reference- instead you access them through the R.string class defined in R.Java and Android does the rest for you.

Also another interesting feature is that you can define your own resources file, go to res/values/ directory, right click>New>File and call the file for example CustomStrings
You will see something like this:

You can define resources manually by choosing the CustomStrings.xml tab or by using clicking Add button and adding the name and the value of the resource.
I will add a resource with the name CustomString and value this is a custom string and reference them from the layout like this

Or from the code like this:

TextView txtHeader3=(TextView)findViewById(R.id.txtHeader3);
txtHeader3.setText(getString(R.string.CustomString));

String format Resources:

the dalvik vm offers string formats whih provide placeholders representing data to be replaced at runtime by variables
an example of a string format resource is:

This is resource for %1$s

the %1$s is the place holder that would be replaced by a variable string.
and from your code you can use it like this:

//String format resource
 TextView txtHeader4=(TextView)findViewById(R.id.txtHeader4);
 String strFormat=getString(R.string.StringFormat);
 String header=String.format(strFormat, "Giving an example of string format resource");
 txtHeader4.setText(header);

and the text view will have a text equal to This is resource for Giving an example of string format resource.

Styled text Resources:
You can use string resources styled with these three HTML tags:

<b>,<u> and <i>

You can define the a string as follows:

This is an <u>example</u> of <i>Styled</i> <b>Resources</b> 

And use it from the code as this:

TextView txtHeader5=(TextView)findViewById(R.id.txtHeader5);
txtHeader5.setText(R.string.StyledResource);

notice that we use setText() method by calling the string resource directly.
if we use the getString() method it will display the string without styling
we can use the HTML styled text also by using spanned.

Spanned textSpan = android.text.Html.fromHtml(htmlTaggedString);
//Set it in a text view
textView.setText(textSpan);

Summary
Android provides three types of string resources: Plain strings, String formats which provide place holders to be replaced by variables in runtime and Styled text resources which provide styling with three standard HTML tags
Download a demo application here

Read More..

Image Resources

Android provides us with the ability to use image resources in our applications. We can put image files in res/drawable directory and access them from the xml layout or by the generated ID from R.java class file.

You can use image files of the following formats:

• PNG
• JPEG
• GIF

Notice that there are two restrictions:

• If you use two files with the same base name you will receive an error. You cannot use two files like Hello.jpeg and Hello.png.
• If you create any subdirectory under res/drawable directory any image files in it will be ignored.

Now let’s demonstrate how can we use image resources


We will place an image called android.jpeg in res/drawable directory

We can use it from xml layout as this

<imageview android_layout_height="wrap_content" android_layout_width="wrap_content" android_src="@drawable/android" /%gt;

Or from code as this

ImageView img=(ImageView)findViewById(R.id.img);
img.setImageResource(R.drawable.android);

or like this to get the image as a drawable object

ImageView img2=(ImageView)findViewById(R.id.img2);
Drawable drawable=this.getResources().getDrawable(R.drawable.android);
img2.setBackgroundDrawable(drawable);

Color drawable Resources:
You can define XML files that contain definitions for color drawable resources which are color rectangles that can be used as backgrounds

You can define the color drawable resources in values/strings.xml file or by creating a custom xml file to hold these resources

You define color drawable resources like this:

<drawable name="redBox">#f00</drawable>

You can use it from xml layout like this

Or from code like this:

TextView txt=(TextView)findViewById(R.id.txt);
txt.setBackgroundResource(R.drawable.redBox);

or like this:

ColorDrawable drawable2=(ColorDrawable)this.getResources().getDrawable(R.drawable.redBox);
txt.setBackgroundDrawable(drawable2);

or this

txt.setBackgroundResource(R.drawable.redBox);

notice that if the textview does not have text the background color will not appear.

Download a demo application from here

Read More..