Shulou(Shulou.com)05/31 Report--

This article focuses on "how to build a Material Design application in Android". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn how to build a Material Design application in Android.

1.Toolbar

1. Basic Toolbar

The Toolbar control is provided by the appcompat-v7 library, and dependencies need to be added to use:

Compile 'com.android.support:appcompat-v7:25.3.1'

We use Toolbar instead of ActionBar, so we need to specify a theme without ActionBar, usually with Theme.AppCompat.NoActionBar (dark) theme or Theme.AppCompat.Light.NoActionBar (light) theme.

Theme:

@ color/colorPrimary @ color/colorPrimaryDark @ color/colorAccent

Layout:

AppBarLayout is a vertical LinearLayout, which encapsulates a lot of scrolling events internally, and applies some design concepts of Material Design. AppBarLayout solves the problem that Toolbar is occluded in FrameLayout.

Activity:

Toolbar toolbar = (Toolbar) findViewById (R.id.toolbar); setSupportActionBar (toolbar)

2.RecyclerView scrolls up to hide Toolbar

Add a line of code app:layout_scrollFlags= "scroll | enterAlways | snap" to Toolbar.

Layout:

The app:layout_behavior= "@ string/appbar_scrolling_view_behavior" attribute ensures that RecyclerView obscures the Toolbar problem.

two。 Floating buttons and interactive prompts

1.FloatingActionButton

FloatingActionButton is provided by the design support library, and dependencies need to be added to use:

Compile 'com.android.support:design:25.3.1'

Layout:

2.Snackbar

Snackbar is provided by the design support library. The first parameter of Snackbar needs to pass a View, which can be any View of the current interface layout, and then use this View to automatically find the outermost layout to display the Snackbar.

Activity:

Snackbar.make (view, "This is Snackbar.", Snackbar.LENGTH_SHORT) / / set the action .setAction ("ok", new View.OnClickListener () {@ Override public void onClick (View view) {Toast.makeText (context, "onClick", Toast.LENGTH_SHORT);}}) .show ()

However, when a bug,Snackbar and a hover button are used at the same time and the hover button is in the lower right corner of the interface, the pop-up Snackbar will cover the hover button, which is an unfriendly user experience and can be easily solved with the help of CoordinatorLayout.

3.CoordinatorLayout

Snackbar is provided by the design support library, CoordinatorLayout can be said to be an enhanced version of FrameLayout,CoordinatorLayout that can listen to all kinds of events of its child controls, and then automatically help us make the most reasonable response, such as the bug of Snackbar just mentioned, with the help of CoordinatorLayout, you can make the Snackbar offset upward, so as to ensure that it will not be obscured by Snackbar.

Layout:

In addition, since CoordinatorLayout itself is an enhanced version of FrameLayout, replacing FrameLayout will not have any side effects.

3. Card layout

1.CardView

The CardView control is provided by the cardview-v7 library to implement a three-dimensional card, providing effects such as rounded corners, shadows, and so on. You need to add dependencies to use:

Compile 'com.android.support:cardview-v7:25.3.1'

Layout:

The results after running are as follows:

4. Fully transparent status bar

Android 5.0 or above is required.

Public class MainActivity extends AppCompatActivity {@ Override protected void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); if (Build.VERSION.SDK_INT > = Build.VERSION_CODES.LOLLIPOP) {Window window = getWindow (); window.clearFlags (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION) Window.getDecorView () .setSystemUiVisibility (View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_LAYOUT_STABLE); window.addFlags (WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); window.setStatusBarColor (Color.TRANSPARENT); window.setNavigationBarColor (Color.TRANSPARENT);} setContentView (R.layout.activity_main);}}

5.Material effect Dialog

1.AlertDialog

Style effects are backward compatible with Android 2.1

New android.support.v7.app.AlertDialog.Builder (context) .setTitle ("AlertDialog") .setMessage ("Something important.") .setCancelable (false) / sets the interface other than clicking Dialog does not disappear, and pressing the return key does not work. SetPositiveButton ("OK", new android.content.DialogInterface.OnClickListener () {@ Override public void onClick (android.content.DialogInterface dialogInterface, int I) {}) .setNegativeButton ("Cancel", null) .show ()

2.ProgressDialog

Style effects are backward compatible with Android 5. 0

ProgressDialog progressDialog = new ProgressDialog (context); progressDialog.setTitle ("ProgressDialog"); progressDialog.setMessage ("Loading.."); progressDialog.setCancelable (true); progressDialog.show ()

3.ripple_drawable resources

Android5.0 's "water ripple" effect:

At this point, I believe you have a deeper understanding of "how to build a Material Design application in Android". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.