Today, I’m talking about animated toolbar. For realisation this toolbar we will use Android design support library.

toolbar_animation_demo
Android Toolbar Animation

STEP 1: ADD LIBRARIES TO THE PROJECT
Firstly need to add libraries to gradle file for a project.
[xml]
dependencies {
compile fileTree(dir: ‘libs’, include: [‘*.jar’])
compile ‘com.android.support:appcompat-v7:22.2.0’
compile ‘com.android.support:design:22.2.0’
compile ‘com.android.support:recyclerview-v7:22.2.0’
compile ‘com.android.support:palette-v7:22.2.0’
}
[/xml]
STEP 2: ADD STRINGS AND ARRAY TO THE PROJECT
Next step update strings.xml file in folder /res/values/. Need to add some strings and an array.
[xml]

ToolbarAnimation
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Eleven
Twelve
Numbers


@string/one
@string/two
@string/three
@string/four
@string/five
@string/six
@string/seven
@string/eight
@string/nine
@string/ten
@string/eleven
@string/twelve


[/xml]

STEP 4: UPDATE LAYOUT FOR MAIN ACTIVITY
After it need to update layout for main activity in the project.
[xml]









[/xml]
In this source code we using CoordinatorLayout, AppBarLayout, CollapsingToolbarLayout. These may be new layout for some of us.

CoordinatorLayout
CoordinatorLayout is a super-powered FrameLayout.

AppBarLayout
AppBarLayout is a vertical LinearLayout which implements many of the features of material designs app bar concept, namely scrolling gestures.

CollapsingToolbarLayout
CollapsingToolbarLayout is a wrapper for Toolbar which implements a collapsing app bar. It is designed to be used as a direct child of a AppBarLayout.

STEP 5: UPDATE MAIN ACTIVITY
[java]
public class MainActivity extends AppCompatActivity {

private Toolbar mToolbar;
private CollapsingToolbarLayout mCollapsingToolbar;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

mToolbar = (Toolbar) findViewById(R.id.anim_toolbar);
setSupportActionBar(mToolbar);
mCollapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
mCollapsingToolbar.setTitle(getString(R.string.numbers));

Bitmap bitmap = BitmapFactory.decodeResource(getResources(),
R.drawable.header);
Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
@Override
public void onGenerated(Palette palette) {
int mutedColor = palette.getLightMutedColor(R.attr.colorPrimary);
mCollapsingToolbar.setContentScrimColor(mutedColor);
}
});
}
}
[/java]

STEP 6: UPDATE STYLE FOR THIS PROJECT
Firstly need to add a primaryColorDark for colors.xml in folder /res/values/.
[xml]


#1976D2

[/xml]
After it need to update style for whole application, for it need to update styles.xml file in folder /res/values/.
[xml]

[/xml]

Android Toolbar Animation
Android Toolbar Animation

STEP 7: ADD LAYOUT FOR ITEM OF RECYCLERVIEW
For using recylcerView need to use Adapter with items. Firstly need to add layout for item of recycler view. For it need to add layout for item to folder /res/layout/. In my case this file called “item.xml“, source code for this file is next:
[xml]




[/xml]
STEP 8: ADD ADAPTER FOR RECYLCER VIEW
Next step is create adapter for recycler view. For it need to create java class. In my case this file called “RecyclerViewAdapter.java“.
[java]
public class RecyclerViewAdapter extends RecyclerView.Adapter {
private String[] mList;

public RecyclerViewAdapter(String[] list) {
this.mList = list;
}

@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
LayoutInflater inflater = LayoutInflater.from(parent.getContext());
View itemView = inflater.inflate(R.layout.item, parent, false);
return new ViewHolder(itemView);
}

@Override
public void onBindViewHolder(ViewHolder holder, int position) {
holder.titleTextView.setText(mList[position]);
}

@Override
public int getItemCount() {
return mList.length;
}

public static class ViewHolder extends RecyclerView.ViewHolder {
private TextView titleTextView;
public ViewHolder(View itemView) {
super(itemView);
titleTextView = (TextView)itemView.findViewById(R.id.textView);
itemView.setTag(itemView);
}
}
}
[/java]
STEP 9: UPDATE MAIN ACTIVITY
Last step is update activity for work with recycler view and display some information.
[java]
mRecyclerView = (RecyclerView) findViewById(R.id.recyclerView);
mGridLayoutManager = new StaggeredGridLayoutManager(1, StaggeredGridLayoutManager.VERTICAL);
mRecyclerView.setItemAnimator(new DefaultItemAnimator());
mRecyclerView.setLayoutManager(mGridLayoutManager);
mAdapter = new RecyclerViewAdapter(getResources().getStringArray(R.array.numbers));
mRecyclerView.setAdapter(mAdapter);
[/java]

Full source code of main activity is next:
[java]
public class MainActivity extends AppCompatActivity {

private Toolbar mToolbar;
private RecyclerView mRecyclerView;
private RecyclerViewAdapter mAdapter;
private CollapsingToolbarLayout mCollapsingToolbar;
private StaggeredGridLayoutManager mGridLayoutManager;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

mToolbar = (Toolbar) findViewById(R.id.anim_toolbar);
setSupportActionBar(mToolbar);
mCollapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
mCollapsingToolbar.setTitle(getString(R.string.numbers));

mRecyclerView = (RecyclerView) findViewById(R.id.recyclerView);
mGridLayoutManager = new StaggeredGridLayoutManager(1, StaggeredGridLayoutManager.VERTICAL);
mRecyclerView.setItemAnimator(new DefaultItemAnimator());
mRecyclerView.setLayoutManager(mGridLayoutManager);
mAdapter = new RecyclerViewAdapter(getResources().getStringArray(R.array.numbers));
mRecyclerView.setAdapter(mAdapter);

Bitmap bitmap = BitmapFactory.decodeResource(getResources(),
R.drawable.header);
Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
@Override
public void onGenerated(Palette palette) {
int mutedColor = palette.getLightMutedColor(R.attr.colorPrimary);
mCollapsingToolbar.setContentScrimColor(mutedColor);
}
});
}
}
[/java]
After it you can run this application.

toolbar_animation_demo
Android Toolbar Animation

1 CommentClose Comments

1 Comment

  • Rosemary
    Posted August 14, 2020 at 3:05 am 0Likes

    I’d lіke to thаnk you for tһe efforts you
    have put in writing this blog. I’m hoping to see the same hіgh-grade blog posts bʏ yоu
    in tһe future as welⅼ. Ιn faⅽt, your creative writing abilities һaѕ motivated mе to get my own website
    now 😉

Leave a comment

Newsletter Subscribe

Get the Latest Posts & Articles in Your Email

We Promise Not to Send Spam:)