As for Snackbar
,it acts like a Toast
but is different with a Toast
. Snackbars are shown on the bottom of the screen and contain text with an optional single action. They automatically time out after the given time length by animating off the screen. In addition, users can swipe them away before the timeout which is considerably more powerful than toasts, another lightweight feedback mechanism.
You can use it programmatically like this:
Snackbar snackbar = Snackbar
.make(parentLayout, R.string.snackbar_text, Snackbar.LENGTH_LONG)
.setAction(R.string.snackbar_action, myOnClickListener);
snackbar.setActionTextColor(Color.CYAN);
View snackbarView = snackbar.getView();
snackbarView.setBackgroundColor(Color.YELLOW);//change Snackbar's background color;
TextView textView = (TextView)snackbarView .findViewById(android.support.design.R.id.snackbar_text);
textView.setTextColor(Color.BLUE);//change Snackbar's text color;
snackbar.show(); // Don’t forget to show!
Note the use of a View in the method of make()
- Snackbar
will attempt to find it ensure that it is anchored to its bottom.
What's more, Android Design Support Library is used for Android 2.1+ (API 7+), which features navigation drawer view, floating labels for editing text, floating action button, snackbar, tabs and something like that.
Navigation View
The navigation drawer can be an important focal point for identity and navigation within your app and consistency in the design here can make a considerable difference in how easy your app is to navigate, particularly for first time users. NavigationView
makes this easier by providing the framework you need for the navigation drawer as well as the ability to inflate your navigation items through a menu resource.
You can use it like this:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!-- your content layout -->
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/drawer_header"
app:menu="@menu/drawer"/>
</android.support.v4.widget.DrawerLayout>
As for the drawer menu, it could be:
<group android:checkableBehavior="single">
<item
android:id="@+id/navigation_item_1"
android:checked="true"
android:icon="@drawable/ic_android"
android:title="@string/navigation_item_1"/>
<item
android:id="@+id/navigation_item_2"
android:icon="@drawable/ic_android"
android:title="@string/navigation_item_2"/>
</group>
or:
<item
android:id="@+id/navigation_subheader"
android:title="@string/navigation_subheader">
<menu>
<item
android:id="@+id/navigation_sub_item_1"
android:icon="@drawable/ic_android"
android:title="@string/navigation_sub_item_1"/>
<item
android:id="@+id/navigation_sub_item_2"
android:icon="@drawable/ic_android"
android:title="@string/navigation_sub_item_2"/>
</menu>
</item>
You’ll get callbacks on selected items by setting a OnNavigationItemSelectedListener using setNavigationItemSelectedListener(). This provides you with the MenuItem that was clicked, allowing you to handle selection events, changed the checked status, load new content, programmatically close the drawer, or any other actions you may want.
Floating labels for editing text
Even the humble EditText
has room to improve in material design. While an EditText
alone will hide the hint text after the first character is typed, you can now wrap it in a TextInputLayout
, causing the hint text to become a floating label above the EditText
, ensuring that users never lose context in what they are entering. In addition to showing hints, you can also display an error message below the EditText
by calling setError()
.
Floating Action Button
A floating action button is a round button denoting a primary action on your interface. The Design library’s FloatingActionButton
gives you a single consistent implementation, by default colored using the colorAccent
from your theme.
As FloatingActionButton
extends ImageView
, you’ll use android:src
or any of the methods such as setImageDrawable()
to control the icon shown within the FloatingActionButton
.
Tabs
top level navigation pattern is commonly used for organizing different groupings of content. The Design library’s TabLayout
implements both fixed tabs, where the view’s width is divided equally between all of the tabs, as well as scrollable tabs, where the tabs are not a uniform size and can scroll horizontally.
Tabs can be added programmatically:
TabLayout tabLayout = ...;
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
If you want to use ViewPager
for horizontal paging between tabs, you can create tabs directly from your PagerAdapter’s
getPageTitle()
and then connect the two together using setupWithViewPager()
. This ensures that tab selection events update the ViewPager
and page changes update the selected tab.
CoordinatorLayout and the app bar
the Design library introduces CoordinatorLayout
, a layout which provides an additional level of control over touch events between child views, something which many of the components in the Design library take advantage of. If you try using an AppBarLayout allows your Toolbar
and other views (such as tabs provided by TabLayout
) to react to scroll events in a sibling view marked with a ScrollingViewBehavior. Therefore you can create a layout such as:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<! -- Your Scrollable View -->
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
...
app:layout_scrollFlags="scroll|enterAlways">
<android.support.design.widget.TabLayout
...
app:layout_scrollFlags="scroll|enterAlways">
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
Now, as the user scrolls the RecyclerView
, the AppBarLayout
can respond to those events by using the children’s scroll flags to control how they enter (scroll on screen) and exit (scroll off screen).
The Design library, AppCompat, and all of the Android Support Library are important tools in providing the building blocks needed to build a modern, great looking Android app without building everything from scratch.
Snackbar
fromandroid design support library
. theandroid.support.design.widget.Snackbar
Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG).setAction("Action", null).show();
. Don't be so mean. man.