Name: Anonymous 2019-06-11 4:15
https://news.ycombinator.com/item?id=20145344
If you haven't switched to a fork, its time.
If you haven't switched to a fork, its time.
https://groups.google.com/a/chromium.org/forum/m/?utm_medium=email&utm_source=footer#!msg/blink-dev/Gl7FIKM5IFw/tA70X9ZIBQAJ
Intent to Implement: Toast UI element
Jun 12Jack Steinberg
Contact emails
jackst...@chromium.org,domenic@chromium.org,fer...@chromium.org
Explainer
https://github.com/jackbsteinberg/std-toast
(No spec yet)
TAG review
https://github.com/w3ctag/design-reviews/issues/385
Summary
Introduces a standard, customizable toast notification HTML element, and a JavaScript API to provide easy use for common cases.
Motivation
Modern web applications have grown in the scale of what actions they can offer, to the point where clear feedback is an essential part of a complete, accessible web experience. Toast UI elements are a common way to provide this feedback, and a variety of libraries exist to provide toasts. Creating a built in toast would allow those libraries to layer their implementations on top, and allow web developers to use a simple, unopinionated toast without having to bring a new library into their project.
Risks
Interoperability and Compatibility
The interoperability risk comes from the potential that other browser vendors don't see the benefit of building this into the web platform. We hope that by implementing and iterating with web developer partners, we will be able to determine the value of this effort and make the benefit clearer.
Firefox: No public signals
Edge: No public signals
Safari: No public signals
Web developers: Positive (previously expressed privately; we've encouraged them to make their interest public on the WICG thread)
Will this feature be supported on all six Blink platforms (Windows, Mac, Linux,
Chrome OS, Android, and Android WebView)?
Yes
Is this feature fully tested by web-platform-tests?
Yes
Tentative tests are being added in the /std-toast folder of Web Platform tests, and will land alongside toast CLs in Chromium. (None have landed yet, but watch https://wpt.fyi/results/std-toast.)
Link to entry on the Chrome Platform Status
https://chromestatus.com/features/5674896879255552Toasts overview
Contents
The Basics
Positioning your Toast
Creating a Custom Toast View
A toast provides simple feedback about an operation in a small popup. It only fills the amount of space required for the message and the current activity remains visible and interactive. Toasts automatically disappear after a timeout.
For example, clicking Send on an email triggers a "Sending message..." toast, as shown in the following screen capture:
If user response to a status message is required, consider instead using a Notification.
The Basics
First, instantiate a Toast object with one of the makeText() methods. This method takes three parameters: the application Context, the text message, and the duration for the toast. It returns a properly initialized Toast object. You can display the toast notification with show(), as shown in the following example:
KOTLIN
JAVA
val text = "Hello toast!"
val duration = Toast.LENGTH_SHORT
val toast = Toast.makeText(applicationContext, text, duration)
toast.show()
This example demonstrates everything you need for most toast notifications. You should rarely need anything else. You may, however, want to position the toast differently or even use your own layout instead of a simple text message. The following sections describe how you can do these things.
You can also chain your methods and avoid holding on to the Toast object, like this:
KOTLIN
JAVA
Toast.makeText(context, text, duration).show()
Positioning your Toast
A standard toast notification appears near the bottom of the screen, centered horizontally. You can change this position with the setGravity(int, int, int) method. This accepts three parameters: a Gravity constant, an x-position offset, and a y-position offset.
For example, if you decide that the toast should appear in the top-left corner, you can set the gravity like this:
KOTLIN
JAVA
toast.setGravity(Gravity.TOP or Gravity.LEFT, 0, 0)
If you want to nudge the position to the right, increase the value of the second parameter. To nudge it down, increase the value of the last parameter.
Creating a Custom Toast View
If a simple text message isn't enough, you can create a customized layout for your toast notification. To create a custom layout, define a View layout, in XML or in your application code, and pass the root View object to the setView(View) method.
The following snippet contains a customized layout for a toast notification (saved as layout/custom_toast.xml):
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/custom_toast_container"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="8dp"
android:background="#DAAA"
>
<ImageView android:src="@drawable/droid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="8dp"
/>
<TextView android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFF"
/>
</LinearLayout>
Notice that the ID of the LinearLayout element is "custom_toast_container". You must use this ID and the ID of the XML layout file "custom_toast" to inflate the layout, as shown here:
KOTLIN
JAVA
val inflater = layoutInflater
val container: ViewGroup = findViewById(R.id.custom_toast_container)
val layout: ViewGroup = inflater.inflate(R.layout.custom_toast, container)
val text: TextView = layout.findViewById(R.id.text)
text.text = "This is a custom toast"
with (Toast(applicationContext)) {
setGravity(Gravity.CENTER_VERTICAL, 0, 0)
duration = Toast.LENGTH_LONG
view = layout
show()
}
First, retrieve the LayoutInflater with getLayoutInflater() (or getSystemService()), and then inflate the layout from XML using inflate(int, ViewGroup). The first parameter is the layout resource ID and the second is the root View. You can use this inflated layout to find more View objects in the layout, so now capture and define the content for the ImageView and TextView elements. Finally, create a new Toast with Toast(Context) and set some properties of the toast, such as the gravity and duration. Then call setView(View) and pass it the inflated layout. You can now display the toast with your custom layout by calling show().
Note: Do not use the public constructor for a Toast unless you are going to define the layout with setView(View). If you do not have a custom layout to use, you must use makeText(Context, int, int) to create the Toast.
Content and code samples on this page are subject to the licenses described in the Content License. Java is a registered trademark of Oracle and/or its affiliates.