aster.cloud aster.cloud
  • /
  • Platforms
    • Public Cloud
    • On-Premise
    • Hybrid Cloud
    • Data
  • Architecture
    • Design
    • Solutions
    • Enterprise
  • Engineering
    • Automation
    • Software Engineering
    • Project Management
    • DevOps
  • Programming
    • Learning
  • Tools
  • About
  • /
  • Platforms
    • Public Cloud
    • On-Premise
    • Hybrid Cloud
    • Data
  • Architecture
    • Design
    • Solutions
    • Enterprise
  • Engineering
    • Automation
    • Software Engineering
    • Project Management
    • DevOps
  • Programming
    • Learning
  • Tools
  • About
aster.cloud aster.cloud
  • /
  • Platforms
    • Public Cloud
    • On-Premise
    • Hybrid Cloud
    • Data
  • Architecture
    • Design
    • Solutions
    • Enterprise
  • Engineering
    • Automation
    • Software Engineering
    • Project Management
    • DevOps
  • Programming
    • Learning
  • Tools
  • About
  • Programming

Wear OS Tiles Material Library: Build Tiles, Fast.

  • aster.cloud
  • August 29, 2022
  • 3 minute read

We are excited to announce the launch of the Tiles Material library! Now, instead of building buttons, progress arcs and more from scratch, you can use our pre-built Material components and layouts to create tiles that embrace the latest Material design for Wear OS. You can use these together with the Tiles Design Kit to easily follow the Tiles Design Guidelines.

Tiles provide Wear OS users glanceable access to the information and actions they need in order to get things done quickly. They also are one of the most used surfaces on Wear OS. Just one swipe away from the watch face, users can quickly access the most important information or actions from an app, like starting a timer or getting the latest weather forecast.


Partner with aster.cloud
for your next big idea.
Let us know here.



From our partners:

CITI.IO :: Business. Institutions. Society. Global Political Economy.
CYBERPOGO.COM :: For the Arts, Sciences, and Technology.
DADAHACKS.COM :: Parenting For The Rest Of Us.
ZEDISTA.COM :: Entertainment. Sports. Culture. Escape.
TAKUMAKU.COM :: For The Hearth And Home.
ASTER.CLOUD :: From The Cloud And Beyond.
LIWAIWAI.COM :: Intelligence, Inside and Outside.
GLOBALCLOUDPLATFORMS.COM :: For The World's Computing Needs.
FIREGULAMAN.COM :: For The Fire In The Belly Of The Coder.
ASTERCASTER.COM :: Supra Astra. Beyond The Stars.
BARTDAY.COM :: Prosperity For Everyone.

Tiles carousel on Wear OS

We have built the following components for elements commonly used in tiles:
These components also make it faster to build tiles. For example, creating a button for your tile takes just a few lines of code:

val clickable: Clickable = generateClickable()

val button: Button = Button.Builder(this, clickable)
.setIconContent(“icon_exercise”)

.setContentDescription(“Start workout”)

.build()

We have also created some predefined layouts to kickstart your tiles development. These already follow our design guidelines on how your tile layout should be formatted.
For example, we can build this tile using a predefined layout:

val theme = Colors(

/*primary=*/ 0xFFD0BCFF.toInt(), /*onPrimary=*/ 0xFF381E72.toInt(),

/*surface=*/ 0xFF202124.toInt(), /*onSurface=*/ 0xFFFFFFFF.toInt()

)

val buttonColors = ButtonColors.secondaryButtonColors(theme)

val chipColors = ChipColors.primaryChipColors(theme)

val timeline = Timeline.fromLayoutElement(
PrimaryLayout.Builder(deviceParameters)

.setPrimaryLabelTextContent(

Text.Builder(this, “1 run this week”)

.setTypography(Typography.TYPOGRAPHY_CAPTION1)

.setColor(argb(theme.primary))

.build()

)

.setContent(

MultiButtonLayout.Builder()

.addButtonContent(

Button.Builder(this, clickable)

.setIconContent(“icon_run”)

.setButtonColors(buttonColors)

.setContentDescription(“Run”)

.build()

)

.addButtonContent(

Button.Builder(this, clickable)

.setIconContent(“icon_yoga”)

.setButtonColors(buttonColors)

.setContentDescription(“Yoga”)

.build()

)
.addButtonContent(

Button.Builder(this, clickable)

.setIconContent(“icon_cycle”)

.setButtonColors(buttonColors)

.setContentDescription(“Cycle”)

.build()

)

.build()

)

.setPrimaryChipContent(

CompactChip.Builder(this, “More”, clickable, deviceParameters)

.setChipColors(chipColors)

.build()

)

.build()

)

What’s in the library

This library contains components and layouts that are in-line with Material guidelines and easy to use. The included components are:

  • Button – clickable, circular-shaped object, with either icon, text or image with three predefined sizes.
  • Chip – clickable, stadium-shaped object that can contain an icon, primary and secondary labels, and has fixed height and customizable width.
  • CompactChip & TitleChip – two variations of the standard Chip that have smaller and larger heights, respectively, and can contain one line of text.
  • CircularProgressIndicator – colored arc around the edge of the screen with the given start and end angles, which can describe a full or partial circle with the full progress arc behind it.
  • Text – styled text which uses the recommended Wear Material typography styles.

All these components have their own colors object that can be built with the main Colors class to easily apply the same theme over all components. In addition to colors, there is a Typography class to easily get FontStyle objects using the typography name.

In addition to components, there are recommended tile layouts:

  • PrimaryLayout – a layout which can be customized by adding primary or secondary labels, content in the middle, and a primary chip at the bottom. The main content within this layout could be added as a MultiSlotLayout or MultiButtonLayout object.
  • EdgeContentLayout – a layout for hosting CircularProgressIndicator around the edge with main content inside and primary or secondary label around it.
  • MultiButtonLayout – a layout that can contain between 1 – 7 buttons, arranged in line with the Material guidelines depending on their number.
  • MultiSlotLayout – a row-like style layout with horizontally aligned and spaced slots (for icons or other small content).

All layouts have recommended padding and styles applied that are within Material guidelines.

Tools for tiles

Android Studio Dolphin includes the Direct Surface Launch feature. This lets developers install and launch a tile directly from Android Studio, instead of having to manually add it from the tile selector on the target device. Get started with Direct Surface Launch by creating a new Run Configuration and selecting Wear OS Tile, then choosing the module and TileService class.

Horologist Tiles is also recommended to save time during tile development. This library gives you the ability to preview a tile UI straight from Android Studio, making the write-test loop a lot shorter. Horologist Tiles also includes Kotlin friendly abstractions, like CoroutinesTileService so you can use what you’re already familiar with.

Get started with Tiles Material

For a quick start, take a look at the new Tiles codelab, the code sample and the docs.

Please share your feedback on the issue tracker and let us know what you think of Tiles Material!

 

By Anna Bernbaum, Product Manager, Ataul Munim, Developer Relations Engineer
Source Android

Read More  Compose For Wear OS 1.1 Is Now Stable: Check Out New Features!

For enquiries, product placements, sponsorships, and collaborations, connect with us at [email protected]. We'd love to hear from you!

Our humans need coffee too! Your support is highly appreciated, thank you!

aster.cloud

Related Topics
  • Android
  • Tiles Material
  • Wear OS
You May Also Like
View Post
  • Architecture
  • Data
  • Engineering
  • People
  • Programming
  • Software Engineering
  • Technology
  • Work & Jobs

Predictions: Top 25 Careers Likely In High Demand In The Future

  • June 6, 2023
View Post
  • Programming
  • Software Engineering
  • Technology

Build a Python App to Alert You When Asteroids Are Close to Earth

  • May 22, 2023
View Post
  • Programming

Illuminating Interactions: Visual State In Jetpack Compose

  • May 20, 2023
View Post
  • Computing
  • Data
  • Programming
  • Software
  • Software Engineering

The Top 10 Data Interchange Or Data Exchange Format Used Today

  • May 11, 2023
View Post
  • Architecture
  • Programming
  • Public Cloud

From Receipts To Riches: Save Money W/ Google Cloud & Supermarket Bills – Part 1

  • May 8, 2023
View Post
  • Programming
  • Public Cloud

3 New Ways To Authorize Users To Your Private Workloads On Cloud Run

  • May 4, 2023
View Post
  • Programming
  • Public Cloud

Buffer HTTP Requests With Cloud Tasks

  • May 4, 2023
View Post
  • Programming
  • Public Cloud
  • Software
  • Software Engineering

Learn About Google Cloud’s Updated Renderer For The Maps SDK For Android

  • May 4, 2023

Stay Connected!
LATEST
  • 1
    Just make it scale: An Aurora DSQL story
    • May 29, 2025
  • 2
    Reliance on US tech providers is making IT leaders skittish
    • May 28, 2025
  • Examine the 4 types of edge computing, with examples
    • May 28, 2025
  • AI and private cloud: 2 lessons from Dell Tech World 2025
    • May 28, 2025
  • 5
    TD Synnex named as UK distributor for Cohesity
    • May 28, 2025
  • Weigh these 6 enterprise advantages of storage as a service
    • May 28, 2025
  • 7
    Broadcom’s ‘harsh’ VMware contracts are costing customers up to 1,500% more
    • May 28, 2025
  • 8
    Pulsant targets partner diversity with new IaaS solution
    • May 23, 2025
  • 9
    Growing AI workloads are causing hybrid cloud headaches
    • May 23, 2025
  • Gemma 3n 10
    Announcing Gemma 3n preview: powerful, efficient, mobile-first AI
    • May 22, 2025
about
Hello World!

We are aster.cloud. We’re created by programmers for programmers.

Our site aims to provide guides, programming tips, reviews, and interesting materials for tech people and those who want to learn in general.

We would like to hear from you.

If you have any feedback, enquiries, or sponsorship request, kindly reach out to us at:

[email protected]
Most Popular
  • Understand how Windows Server 2025 PAYG licensing works
    • May 20, 2025
  • By the numbers: How upskilling fills the IT skills gap
    • May 21, 2025
  • 3
    Cloud adoption isn’t all it’s cut out to be as enterprises report growing dissatisfaction
    • May 15, 2025
  • 4
    Hybrid cloud is complicated – Red Hat’s new AI assistant wants to solve that
    • May 20, 2025
  • 5
    Google is getting serious on cloud sovereignty
    • May 22, 2025
  • /
  • Technology
  • Tools
  • About
  • Contact Us

Input your search keywords and press Enter.