nathanielw / android-lollipop-pencil-stencils

Pencil stencil collection for Android 5.0 (Lollipop) UI components

Android Lollipop Stencils for Pencil

---

⚠️ No longer actively developed

Other commitments and the fact I no longer use Pencil mean this repo is no longer being actively worked on. Pull-requests with new features/fixes are still welcome, as are new issues, but my responses might not be the speediest 🙂

---

Collection of common Android Lollipop UI elements for Pencil. All in vector format.

Check out my other stencil collections for Pencil at nathanielw.github.io/pencil-stencils

An example mockup using some of the included components

See #2 for a full list of included components - requests & contributions welcome!

Installation

1. Download the zip for the latest release. (Make sure you grab the android-lollipop-pencil-stencils-vx.x.x.zip file, not the source code zip).
2. In Pencil, install the .zip via Tools > Install new collection...
3. Make sure the Hide Heavy Elements option in the View menu is unchecked

Updating

Right-click on the collection in Pencil's sidebar and choose Uninstall this collection before repeating the installation steps.

Notes

Works best with the Roboto font installed.

To change between Roboto's various font weights, use the Font Weight option in the element right-click menu.

Check out my Material Icons for Pencil repo if you want to use Google's Material Design Icons in your mockups.

Want to showcase your awesome mockups? Dani Guardiola's Material export template goes well with this stencil collection.

License

Released under the MIT License - see LICENSE for full text.

A link back here is appreciated when sharing mockups/images created with this collection, but not required.

android-lollipop-pencil-stencils's Issues

Font weight resets after accessing shape properties

The collection has its default font set to have a weight of 500, which displays fine within Pencil.

However, after opening the properties for a shape and hitting "Apply" (even without changing anything) causes the font weight to reset. I assume this is because Pencil's UI doesn't let the weight be set to anything other than normal or bold.

Possible solution would be to force the font to be Roboto 500 and not let it be changed (better solution would be to just force the weight to be 500, but I'm not sure how possible that would be)

Implement UI components

From the Material Design guidelines:

• Bottom sheet
• Button
• Floating Action Button
• Card
• Dialog [TODO: Add default buttons]
• Divider
• Grids
• Lists
• List controls
• Menus
• Pickers
• Progress
• Sliders
• Snackbars
• Toasts
• Subheaders
• Switches
• Checkboxes
• Radio buttons
• Tabs
• Text fields
• Tooltips

Other:

• Progress/Loading spinner
• Text/label (this should probably allow choosing the font weight)
• Navigation drawer/Sidebar (described in the Material Design on Android Checklist. Would be very similar to the bottom sheet)
• Plain coloured rectangle
• Dropdown list
• Keyboard

No shadows on card/dialog

When I add one card or dialog, there is no shadow... I'm doing something wrong?

Shadows?

I am starting to use Pencil for mock ups. I am pretty useless at it!
Question: in the homepage, your mockup (the card) seems to have shadows. How do you do that?

Transparent element

Some elements are transparent permanently. They do not have any background nor do they react to any changes to the background color change. Other elements do have background colors and react to color change

Some of the elements that have transparent backgrounds

1. Buttons
2. Floating Action Buttons
3. Card
4. Dialog
5. Menu list

I am using Pencil 2.0.5 on Fedora 20 x64. I have tweaked almost all the options including opacity of individual element and collection, but neither helped.

Can't resize all elements

I can resize the floating action button, but not the phone or switch components. I'm on a 13-inch MacBook Air and the phone component doesn't fit on the canvas.

Not compatible with Pencil version 3.0

This stencils package is amazing, but it has some compatible errors. When I am using this package with Pencil version 3.0, all UI Icons are gone. There must be some errors after several times adding components. All kinds of the elements can not add again. Other additional packages run correctly.
Version: 3.0.0-rc.1

How to set socused text field colors?

How can I change text fields so that it can looks focused?

Its not issue. Can you please wiki for newer version of Pencil.

Several components don't display correctly (or at all) in the Pencil Firefox extension

Seems that svg elements with filters on them do not render in the Firefox extension version of Pencil.

thumbnails are not showing in menu

I have zipped every file in main directory (definition, readme, icons, misc), imported template , (install new collection) by selecting zipped definition.

I'm new to pencil, but I'haven't found similar issue on pencil's repo.

I'm on windows 8.1

icons no show in menu

when i install the package and list the icons it show this.

but when i drag and drop the icons, they appaer o.O

Shadows aren't working quite right

I've added this collection to pencil, and I've created several mockups of a screen I want to create. One thing I've noticed is that the Card image doesn't seem to have a shadow appropriate to the way it's displayed on an actual device (via the cardElevation property). Even if I check the 'Shadow' box in the properties of the object, I am left with flat looking cards in my mockup:

Resizing the Phone component

When I resize the Phone component, its top and bottom border are deformed:

(On left the default size, on right resized)

Is it possible to make it conserve the same ratio?

Hard time finding an alternative to Pencil

Hi @nathanielw, long-time user of your lollipop stencils here,

I understand this repo is no longer being maintained. However, I am curious as to what software you are using now instead of Pencil, which seems now kinda dead, for your Android mockups.

Thanks!

Non-opaque Text shape has text drawn in wrong place

When using a Text shape, setting the opacity of the text color to less than 100% results in the text being drawn outside of the box, in the upper-left corner of the canvas. Restoring opacity to 100% returns the text to its correct bounding box.

I am happy to submit a PR but I'm not even sure how to begin debugging this. Any hints are welcome.

Error Installing on Pencil 3.0.4

Hi,

I try to install this stencils to Pencil 3.0.4 an i got an error.

Is this stencils compatible with Pencil 3.0.4?

Thanks.

Install new collection

Hi there,

I'm having trouble with the installation and i don't know why. The message returned is: "Error isntalling collection".

I'm using Ubuntu 15.04, pencil 2.0.5. I tried to install some templates (here: http://pencil.evolus.vn/Stencils-Templates.html) and the importation finished with success.

Icons not showing

Icons are not visible at Shapes menu:

Installed via Manage collections...->Install From Repository...

Edit Text Padding

Hello, first of all Great Work Nathaniel!

I just want to let you know the text field padding between label and input should be 8px. Currently it seems to be 16px.
See: https://material.io/guidelines/components/text-fields.html#text-fields-layout

Best Regards