Navigation Drawer with Animated Rows

Question

I wanted to design navigation drawer like this one in Android. So, I tried following.

I have ListView with rows containing ImageView and TextView for my Navigation Drawer. Now, I want to animate texts in navigation drawer. So, I tried using Handler in My Adapter:

DrawerModel.java :

public class DrawerModel {

    private int icon;
    private String title;

    public DrawerModel(){
        icon = R.drawable.ic_settings_white_24dp;
        title = "";
    }

    public int getIcon() {
        return icon;
    }

    public void setIcon(int icon) {
        this.icon = icon;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

DrawerAdapter.java :

public class DrawerAdapter extends BaseAdapter{
    private Context mContext;
    private List<DrawerModel> mListDrawerModels;
    private static Handler mHandler;

    public DrawerAdapter(Context context,List<DrawerModel> listDrawerModels){
        mContext = context;
        mListDrawerModels = listDrawerModels;
        mHandler = new Handler();
    }

    @Override
    public int getCount() {
        return mListDrawerModels.size();
    }

    @Override
    public DrawerModel getItem(int position) {
        return mListDrawerModels.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View row;
        ViewHolder holder;

        if(convertView==null){
            LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            row = inflater.inflate(R.layout.row_listview_drawer, parent, false);

            holder = new ViewHolder(mContext,row);
            row.setTag(holder);
        }
        else{
            row = convertView;
            holder = (ViewHolder) row.getTag();
        }

        if(mListDrawerModels !=null && !mListDrawerModels.isEmpty()) {
            DrawerModel model = mListDrawerModels.get(position);
            if (model != null) {
                holder.ivDrawerRow.setImageResource(model.getIcon());
                DrawerAdapter.setTextAsync(position, holder, model);
            }
        }
        return row;
    }

    private static void setTextAsync(int position, final ViewHolder holder, final DrawerModel model) {
        mHandler.postDelayed(new Runnable() {
            @Override
            public void run() {
                holder.tvDrawerRow.setText(model.getTitle());
            }
        },position*1000);
    }

    private static class ViewHolder{
        private ImageView ivDrawerRow;
        private TextView tvDrawerRow;

        public ViewHolder(Context context,View row){
            this.ivDrawerRow = (ImageView) row.findViewById(R.id.iv_row_drawer);
            this.tvDrawerRow = (TextView) row.findViewById(R.id.tv_row_drawer);
            this.tvDrawerRow.setTypeface(FontCache.getInstance(context).getTypeFace());
        }
    }
}

Here, Inside my adapter, in setTextAsync method; I tried to multiply delay with position, this works fine but texts aren't animated. They just appear one by one after some seconds. Also, this works only for first time.

What should I do for this? Can anyone guide me?

Answer 1

To give textView animation there is a better way

https://github.com/daimajia/AndroidViewAnimations