Card View

 

What is CardView?

  • A FrameLayout with a rounded corner background and shadow.
  • It Used to display the information inside the card
  • It can have shadows or rounded corner.

Screenshot_20171101-184547.png

Attributes Of CardView?

1.CardView Elevation
It is used to set the elevation of Cardview.It will show the shadow of cardview.
Java: setCardElevation(float)
XML: cardView:cardElevation

2.CardView Content Padding:
It is used to set the padding for Cardview.
Advantage of this property is that we don’t need to set margin or padding for each view inside the CardView individually to make it look good.
Java: setContentPadding(int, int, int, int)
XML: cardView:contentPadding

Example can be found here.

https://github.com/kavidriod/CardView

Advertisements

Recycler View

Why Recycler View?

1.Consider a music app might need to display information about thousands of albums, but only a dozen of those albums might be on-screen at a time. If the app created UI widgets for each of those albums, the app would end up using a lot of memory and storage
2.On the other hand, if the app created UI widgets each time a new album scrolled onto the screen and destroyed the widgets when it scrolled off, that would also cause the app to run slowly.
To handle this situation Android introduced Recycler View.

How Recycler View Works?

1.When the view is first populated, it creates and binds some view holders on either side of the list.
3.For example, if the view is displaying albums 0 through 9, the RecyclerView creates and binds those view holders, and might also create and bind the view holder for position 10. That way, if the user scrolls the list, the next element is ready to display.
3.As the user scrolls the list, the RecyclerView creates new view holders as necessary. It also saves the view holders which have scrolled off-screen, so they can be reused.
4.If the user switches the direction they were scrolling, the view holders which were scrolled off the screen can be brought right back.
5.If the user keeps scrolling in the same direction, the view holders which have been off-screen the longest can be rebound to new data.
6.The view holder does not need to be created or have its view inflated; instead, the app just updates the view’s contents to match the new item it was bound to.
7.When the displayed items change, the app notifies the adapter by calling an appropriate RecyclerView.Adapter.notifyItemChanged() method.

How to create Recycler View?

1.The onCreate() method creates the RecyclerView specified by activity’s layout.
myRecyclerView = (RecyclerView) findViewById(R.id.myrecyclerview);

2.The onCreate() method creates an adapter; the adapter class is specified by the app, extending the Android Support Library’s RecyclerView.Adapter class
myAdapter = new CustomAdapter(myDataSet);

The adapter’s constructor does any necessary initialization. For example, it might create an inflater to use for inflating the layouts of its view holders.

3.The onCreate() method attaches the adapter to the RecyclerView.
myRecyclerView.setAdapter(myAdapter);

4.The adapter class’s definition specifies which class it uses as its view holder:
public class CustomAdapter extends RecyclerView.Adapter

5. onCreateViewHolder() :
This method needs to construct the view holder and set the view it uses to display its contents. Typically, it would set the view by inflating an XML layout file.

// Inflate the view for this view holder
View thisItemsView = myInflater.inflate(R.layout.list_item_layout,
        parent, false);
// Call the view holder's constructor, and pass the view to it;
// return that new view holder
return new CustomViewHolder(thisItemsView);

6.onBindViewHolder():
It will pass the view holder’s position in the RecyclerView.
This method needs to fetch the appropriate data, and use it to fill in the view holder’s layout.

@Override
public void onBindViewHolder(CustomViewHolder holder, int position) {
  // Find out the data, based on this view holder's position
   String thisItemsName = myNameList.get(position);
   holder.nameTextView.setText(thisItemsName);
}

Customizing RecyclerView

The RecyclerView uses a layout manager app to arrange the individual data items on the screen. The Android Support Library includes three standard layout managers.

1.LinearLayoutManager arranges the items in a one-dimensional list. Using a RecyclerView with LinearLayoutManager provides functionality like the older ListView layout.

2.GridLayoutManager arranges the items in a two-dimensional grid, like the squares on a checkerboard. Using a RecyclerView with GridLayoutManager provides functionality like the older GridView layout.

3.StaggeredGridLayoutManager arranges the items in a two-dimensional grid, with each column slightly offset from the one before, like the stars in an American flag.

*you can create your own by extending the RecyclerView.LayoutManager abstract class.

Item animations

1.Whenever an item changes, the RecyclerView uses an animator to change its appearance.
2.This animator is an object that extends the abstract RecyclerView.ItemAnimator class.
3.By default, the RecyclerView uses DefaultItemAnimator to provide the animation.
4.If you want to provide custom animations, you can define your own animator object by extending RecyclerView.ItemAnimator.

Example code is added here,
https://github.com/kavidriod/RecyclerView

ConstraintLayout

Android constrain layout is used to define a layout by assigning constrains for every child view relative to other view.
A ConstraintLayout is similar to a RelativeLayout, but with more power.
The aim of ConstraintLayout is to improve the performance of the applications.
A view inside the ConstraintLayout has handles(or anchor points) on each side which are used to assign the constraints.

 

Coordinator Layout

Super powered Frame Layout.
Top-level app decor/chrome layout.
Container for specific interaction with child views.

It will give below features.
Swipe-to-dismiss feature is activated for Snack bar.
Automatic moving of widgets like fab.

If you add multiple children to a FrameLayout, they would overlap each other.
A FrameLayout should be used most often to hold a single child view.
The main purpose of the CoordinatorLayout is its ability to coordinate the animations and transitions of the views within it.

Find example in this link
https://github.com/kavidriod/CoordinatorLayout

Floating Action Button

Circled Icon floating above UI.
It should be placed 16dp minimum from the edge in mobile.
Should be placed 24dp minimum from the edge in tablet/desktop.
It supports two sizes “mini”,”normal”.
You can define size using app:fabSize attribute.
f.PNG
Don’t use badges as FAB.
You can position the floating button by using layout_gravity attribute.
By default,FAB takes colorAccent as background color.If you want to change the background of fab,use app:backgroundTint attribute to define your own background color.

ff.PNG

Sample Code is added here.

https://github.com/kavidriod/FloatingActionButton

Snack Bar

 

Snack Bar

Brief message that is displayed on bottom of the Screen in mobile or lower left in Large devices.
Advanced Version of Toast.
Disappear after a timeout.
Can be swiped off the screen.
It may contain an action.
Normally passing CoordinatorLayout as view param is the best option as it allows Snackbar to enable some features like swipe-to-dismiss and automatically moving of widgets like FloatingActionButton.
The duration should be LENGTH_SHORT, LENGTH_LONG or LENGTH_INDEFINITE.
When LENGTH_INDEFINITE is used, the snackbar will be displayed indefinite time and can be dismissed with swipe off.

Types Of Snack Bar

Simple Snack Bar

s1.PNG

Custom Color Snack Bar

s2.PNG

Snack Bar with Option

s3.PNG

Find Example code in this link
https://github.com/kavidriod/SnackBar