5

How to build App Bar like in Gmail app?

That is when Navigation Drawer is
A/ collapsed
B/ expanded
"search icon" [belonging to fragment with emails list] is following right edge of fragment.

See below images for cases A and B.

Assume using AppBar stuff from Android 5, for example:

  • Toolbar
  • AppBarLayout
  • CoordinatorLayout

enter image description here

enter image description here

Tnx!

Grzegorz Dev
  • 3,073
  • 1
  • 18
  • 22

1 Answers1

0

Your app has several elements in it. I will guide you to the pages you need to search for to get the necessary answers to complete your project.

To implement the search function in the app bar, this answer will definitely help you. I have never done it myself, but I am sure you will find your answers in that post.

To implement the rest of the screen, I would choose a combination of a Master/Detail Flow activity, together with a Navigation drawer. So when creating the project I would choose a Master/Detail flow as the main activity (part of the Android Studio samples), and add the following code to it:

public class NavDrawerListAdapter extends BaseAdapter {

    private Context context;
    private ArrayList<NavDrawerItem> navDrawerItems;

    public NavDrawerListAdapter(Context context, ArrayList<NavDrawerItem> navDrawerItems){
        this.context = context;
        this.navDrawerItems = navDrawerItems;
    }

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

    @Override
    public Object getItem(int position) {       
        return navDrawerItems.get(position);
    }

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if (convertView == null) {
            LayoutInflater mInflater = (LayoutInflater)
                    context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
            convertView = mInflater.inflate(R.layout.drawer_list_item, null);
        }

        ImageView imgIcon = (ImageView) convertView.findViewById(R.id.icon);
        TextView txtTitle = (TextView) convertView.findViewById(R.id.title);
        TextView txtCount = (TextView) convertView.findViewById(R.id.counter);

        imgIcon.setImageResource(navDrawerItems.get(position).getIcon());        
        txtTitle.setText(navDrawerItems.get(position).getTitle());

        // displaying count
        // check whether it set visible or not
        if(navDrawerItems.get(position).getCounterVisibility()){
            txtCount.setText(navDrawerItems.get(position).getCount());
        }else{
            // hide the counter view
            txtCount.setVisibility(View.GONE);
        }

        return convertView;
    }

}

Hope this helps :)

Community
  • 1
  • 1
Michele La Ferla
  • 6,775
  • 11
  • 53
  • 79