Kata06 Floating Action Button (FAB) and SnackBar - mitchwongho/GDS-Material-Kata GitHub Wiki
The Floating action buttons (FAB) is used for a special type of promoted action. They are distinguished by a circled icon floating above the UI and have special motion behaviours. Reference
Snackbars provide lightweight feedback about an operation. They show a brief message at the bottom of the screen on mobile and lower left on larger devices. Snackbars appear above all other elements on screen and only one can be displayed at a time. Reference
The goal of this kata is to apply a FAB that interacts with a Snackbar. [Source reference]
Begin by adding a android.support.design.widget.FloatingActionButton element to the main activity layout res/layout/activity_main.xml. It's important to note that the FAB is being defined in the CoordinatorLayout block:
...
<android.support.design.widget.CoordinatorLayout>
...
<!-- RecyclerView -->
...
<!-- FAB -->
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="@dimen/large_padding"
android:layout_marginRight="@dimen/large_padding"
android:layout_above="@+id/footer_toolbar"
android:layout_gravity="right|bottom"
android:tint="@android:color/white"
android:src="@android:drawable/ic_input_add"/>
</android.support.design.widget.CoordinatorLayout>
...
To trigger the Snackbar from the FABs onClick event, set a View.OnClickListener on the FAB in MainActivity:
...
protected void onCreate(Bundle savedInstanceState) {
...
// FAB
final FloatingActionButton fab = (FloatingActionButton)findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar.make(v, R.string.salutations, Snackbar.LENGTH_LONG).show();
}
});
}
...