Objective:
Another interesting design library for the UI component is Snackbar, which acts like a toast, showing toast, but Snackbar's special is that the Snackbar display prompts can interact with the user to better obtain user feedback. At the same time, it shows the toast with animation effect, slowly unfold from the bottom of the screen display.
Referencing a component in the design library requires the introduction of the appropriate package:
dependencies { compile fileTree(dir: ‘libs‘, include: [‘*.jar‘]) compile ‘com.android.support:appcompat-v7:23.0.1‘ compile ‘com.android.support:design:23.0.1‘}
1. Simple Snackbar
? Snackbar use is simple, a simple snackbar is used as follows:
"I am Simple Snackbar", Snackbar.LENGTH_SHORT);snackbar.show();
2. Snackbar with Action Feedback
"点击右边的反馈按钮", Snackbar.LENGTH_SHORT); snackbar.setAction("UNDO"new View.OnClickListener() { @Override publicvoidonClick(View v) { Toast.makeText(SnackbarActivity.this"hello", Toast.LENGTH_SHORT).show(); } });snackbar.show();
Call Snackbar's Setaction () method, the first parameter is the click button to display the text, the second is of course Click event Listener.
3. Snackbar of custom display styles
? Snackbar is a UI component that provides a number of interfaces (methods) that let us customize the display style:
Snackbar Snackbar = Snackbar.make (Findviewbyid (Android. R.id.content),"Click on the Feedback button on the right.", Snackbar.length_short); Snackbar.setaction ("UNDO",NewView.onclicklistener () {@Override Public void OnClick(View v) {Toast.maketext (snackbaractivity). This,"Hello", Toast.length_short). Show (); } });//Change the right feedback button font ColorSnackbar.setactiontextcolor (Color.yellow);//Actually we see the cue message is a TextView (subclass)View Sbview = Snackbar.getview (); TextView TextView = (TextView) Sbview.findviewbyid (Android.support.design.r.id.snackbar_text); Textview.settextcolor (Color.Blue); Snackbar.show ();
3. Effect Demo
To demonstrate the snackbar of the three cases above, write a test layout file:
<?xml version="1.0"encoding="Utf-8"? ><linearlayout xmlns:android="Http://schemas.android.com/apk/res/android"android:orientation="Vertical"Android:layout_width="Match_parent"android:layout_height="Match_parent"> <button android:onclick="Showsimplesnackbar"Android:layout_width="Match_parent"android:text="Simple Sanckbar"android:layout_margin="20DP"android:layout_height="Wrap_content"> </Button> <button android:onclick="Showfeedbacksnackbar"Android:layout_width="Match_parent"android:text="With feedback Snackbar"android:layout_margin="20DP"android:layout_height="Wrap_content"> </Button> <button android:onclick="Showcustomstylesnackbar"Android:layout_width="Match_parent"android:text="Custom Style snackbar"android:layout_margin="20DP"android:layout_height="Wrap_content"> </Button></LinearLayout>
The code for this demo activity:
PackageCom.example.lt.meterialdesign;Importandroid.app.Activity;ImportAndroid.graphics.Color;ImportAndroid.os.Bundle;ImportAndroid.support.design.widget.Snackbar;ImportAndroid.view.View;ImportAndroid.widget.TextView;ImportAndroid.widget.Toast;/** * Created by Lt on 2016/3/17. * * Public class snackbaractivity extends Activity { @Override protected void onCreate(Bundle savedinstancestate) {Super. OnCreate (Savedinstancestate); Setcontentview (R.layout.activity_snackbar); } Public void Showsimplesnackbar(View view) {Snackbar Snackbar = Snackbar.make (Findviewbyid (Android. R.id.content),"I am Simple Snackbar", Snackbar.length_short); Snackbar.show (); } Public void Showfeedbacksnackbar(View view) {Snackbar Snackbar = Snackbar.make (Findviewbyid (Android. R.id.content),"Click on the Feedback button on the right.", Snackbar.length_short); Snackbar.setaction ("UNDO",NewView.onclicklistener () {@Override Public void OnClick(View v) {Toast.maketext (snackbaractivity). This,"Hello", Toast.length_short). Show (); } }); Snackbar.show (); } Public void Showcustomstylesnackbar(View view) {Snackbar Snackbar = Snackbar.make (Findviewbyid (Android. R.id.content),"Click on the Feedback button on the right.", Snackbar.length_short); Snackbar.setaction ("UNDO",NewView.onclicklistener () {@Override Public void OnClick(View v) {Toast.maketext (snackbaractivity). This,"Hello", Toast.length_short). Show (); } });//Change the right feedback button font ColorSnackbar.setactiontextcolor (Color.yellow);//Actually we see the cue message is a TextView (subclass)View Sbview = Snackbar.getview (); TextView TextView = (TextView) Sbview.findviewbyid (Android.support.design.r.id.snackbar_text); Textview.settextcolor (Color.Blue); Snackbar.show (); }}
Demo Picture effect:
4. Combine coordinatorlayout and Floatingactionbutton to show a different style
The coordinatorlayout in the design library is a container for better interaction between its sub-view, for example: When Snackbar appears, Floatingactionbutton floats in Snackbar, There is no overlap of controls.
Activity_snackbar.xml
<?xml version= "1.0" encoding= "Utf-8"?><android.support.design.widget.coordinatorlayout Span class= "Hljs-attribute" >xmlns:android = "http://schemas.android.com/apk/res/ Android " android:id =" @+id/coordinatorlayout " xmlns:app =" http://schemas.android.com/apk /res-auto " xmlns:tools =" HTTP +/ Schemas.android.com/tools " android:layout_width = "match_parent" android:layout_height = "match_parent" tools:context =; <relativelayout android: Layout_width = "match_parent" android: Background = "#00f" android:layout_height = "wrap_content" ; <TextViewandroid:layout_width= "wrap_content"android:text=" Snackbar "android:textsize=" 20sp "android:layout_margin=" 10DP " Android:textcolor="#fff"android:layout_height="wrap_content"/> </relativelayout> <linearlayout android: Layout_width = "fill_parent" android:layout_ Height = "wrap_content" android:orientation
= "vertical" android:paddingleft = "20DP" android:layout_margintop =" 60DP " android:paddingright =" 20DP "; <buttonandroid:onclick="Showsimplesnackbar"android:layout_width= "Match_parent" Android:text="Simple Sanckbar"android:layout_margin="20DP"android: Layout_height="Wrap_content"> </Button> <buttonandroid:onclick="Showfeedbacksnackbar"android:layout_width= "Match_parent" Android:text="With feedback snackbar"android:layout_margin="20DP" Android:layout_height="Wrap_content"> </Button> <buttonandroid:onclick="Showcustomstylesnackbar"android:layout_width ="Match_parent"android:text="Custom Style snackbar"android:layout_margin ="20DP"android:layout_height="Wrap_content"> </Button> </linearlayout> <Android.support.design.widget.FloatingActionButton Android:id="@+id/fab" Android:layout_width="Wrap_content" Android:layout_height="Wrap_content" Android:layout_marginbottom="20DP" Android:layout_marginright="20DP" android:src="@drawable/abc_ic_menu_cut_mtrl_alpha" app:fabsize="Normal" App:layout_anchor="@id/coordinatorlayout" app:layout_anchorgravity="Bottom|right|end"/></android.support.design.widget.CoordinatorLayout>
Some components in the design library use additional custom properties, so you need to introduce the appropriate named controls
Snackbaractivity.java
PackageCom.example.lt.meterialdesign;Importandroid.app.Activity;ImportAndroid.graphics.Color;ImportAndroid.os.Bundle;ImportAndroid.support.design.widget.CoordinatorLayout;ImportAndroid.support.design.widget.Snackbar;Importandroid.support.v7.app.AppCompatActivity;ImportAndroid.support.v7.widget.Toolbar;ImportAndroid.view.View;ImportAndroid.widget.TextView;ImportAndroid.widget.Toast;/** * Created by Lt on 2016/3/17. * * Public class snackbaractivity extends appcompatactivity { PrivateCoordinatorlayout mcoordinatorlayout;PrivateToolbar Mtoolbar;@Override protected void onCreate(Bundle savedinstancestate) {Super. OnCreate (Savedinstancestate); Setcontentview (R.layout.activity_snackbar); Mcoordinatorlayout = (coordinatorlayout) Findviewbyid (r.id.coordinatorlayout); } Public void Showsimplesnackbar(View view) {Snackbar Snackbar = Snackbar.make (Mcoordinatorlayout,"I am Simple Snackbar", Snackbar.length_short); Snackbar.show (); } Public void Showfeedbacksnackbar(View view) {Snackbar Snackbar = Snackbar.make (Mcoordinatorlayout,"Click on the Feedback button on the right.", Snackbar.length_short); Snackbar.setaction ("UNDO",NewView.onclicklistener () {@Override Public void OnClick(View v) {Toast.maketext (snackbaractivity). This,"Hello", Toast.length_short). Show (); } }); Snackbar.show (); } Public void Showcustomstylesnackbar(View view) {Snackbar Snackbar = Snackbar.make (Mcoordinatorlayout,"Click on the Feedback button on the right.", Snackbar.length_short); Snackbar.setaction ("UNDO",NewView.onclicklistener () {@Override Public void OnClick(View v) {Toast.maketext (snackbaractivity). This,"Hello", Toast.length_short). Show (); } });//Change the right feedback button font ColorSnackbar.setactiontextcolor (Color.yellow);//Actually we see the cue message is a TextView (subclass)View Sbview = Snackbar.getview (); TextView TextView = (TextView) Sbview.findviewbyid (Android.support.design.r.id.snackbar_text); Textview.settextcolor (Color.Blue); Snackbar.show (); }}
The other is basically the same as above, that is, a parameter of Snackbar.make () is replaced with an instance of the Coordinatorlayout object, so that coordinatorlayout can play its artistic interactive effect.
Run:
Reference article: http://www.androidhive.info/2015/09/android-material-design-snackbar-example/
Reference article: http://www.truiton.com/2015/06/android-snackbar-example/
Material Design (iii), use of Snackbar