Android Material Design (support v7 compatible with systems earlier than 5.0)

Android Material Design (support v7 compatible with systems earlier than 5.0)

Material Design is a brand new Design language launched by Google at the I/O conference in 2014. Material Design is based on Android 5.0 (API level 21). When compatible with devices earlier than 5.0, you must use appcpmpat in the support v7 package with version v21.0.0 or later, unfortunately, the support package only supports some features of Material Design. When using eclipse or Android Studio for development, upgrade Extras-> Android Support Library to the latest version in Android SDK Manager. The latest version is:

 

com.android.support:appcompat-v7:21.0.3

The example program in this article uses minSdkVersion = 14, which is in the Material Design style using the support package.

Steps for using Material Design:

 

I. Use Material themes

1. Create an Android app with Theme. AppCompat (or its subthemes, such as Theme. AppCompat. Light. DarkActionBar)

2. Some attributes of the topic used by the custom program, for example:

 

3. All activities that need to use ActionBar must inherit from ActionBarActivity, because even if Theme. AppCompat. Light. DarkActionBar is used, the system will not automatically add ActionBar.
:

 

Changes relative to normal ActionBar:

(1) the style of the three dots on the right has changed. (This doesn't matter ...)

(2) When you click the three dots (more) on the right, the drop-down menu does not start from below the ActionBar, but starts directly above the ActionBar! Maybe there is a way to change it to the old style, but after reading the official documentation, Google explained that the menu is a component temporarily displayed to the user, so it should be suspended. That is to say, the new design rule recommends this default style.

Ii. Use RecyclerView

RecyclerView is a brand new component provided by Google in the support v7 package. This component is an enhanced version of ListView. New features:

1. Improved performance;

2. Automatic item reuse in the adapter, that is to say, the previous tedious writing method does not need:

 

if (convertView == null) {            convertView = LayoutInflater.from(context).inflate(R.layout.friends_item, parent, false);            holder = new ViewHolder();            holder.nameTV = (TextView) convertView.findViewById(R.id.friends_item_name);            holder.phoneTV = (TextView) convertView.findViewById(R.id.friends_item_phone);            convertView.setTag(holder);        } else {            holder = (ViewHolder) convertView.getTag();        }

3. preset animations for item addition, deletion, movement, and modification. You can also customize the animations when you modify them.

:

Sample Code:

 

(1) On the home page, obtain the RecyclerView and set the adapter.

 

RecyclerView mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view); // use this setting to improve performance if you know that changes // in content do not change the layout size of the RecyclerView  mRecyclerView.setHasFixedSize(true); // use a linear layout managermRecyclerView.setLayoutManager(new LinearLayoutManager(this));//data List
 
   myDataset = new ArrayList
  
   ();        for (int i = 0; i < 50; i++) {            CityInfoBean city = new CityInfoBean();            city.setCityName(Tianjin- + i);            city.setCityPhone(022- + i);            city.setLocation(Asia_ + i);            myDataset.add(city);        }        RecyclerViewAdapter mAdapter = new RecyclerViewAdapter(this, myDataset);        mRecyclerView.setAdapter(mAdapter);//RecyclerView doesn't has a 'OnItemClickListener' or 'OnItemLongClickListener' like ListView, // so you should add the callback in adapter 
  
 

(2) adapter, RecyclerViewAdapter. java:

public class RecyclerViewAdapter extends RecyclerView.Adapter
 
   {    private Context context;    private List
  
    mDataset;    public RecyclerViewAdapter(Context context, List
   
     myDataset) {        this.context = context;        mDataset = myDataset;    }    // Create new views (invoked by the layout manager)    @Override    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.recycler_list_item, parent, false);        // set the view's size, margins, paddings and layout parameters        final ViewHolder vh = new ViewHolder(v);        v.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                int position = vh.getPosition();                Toast.makeText(v.getContext(), Item click. Position: +                        position, Toast.LENGTH_SHORT).show();            }        });        v.setOnLongClickListener(new View.OnLongClickListener() {            @Override            public boolean onLongClick(View v) {                int position = vh.getPosition();//                Toast.makeText(v.getContext(), Item long click. Position: +//                        position, Toast.LENGTH_SHORT).show();                showDialog(position);                return true;            }        });        return vh;    }    // Replace the contents of a view (invoked by the layout manager)    @Override    public void onBindViewHolder(ViewHolder holder, int position) {        holder.cityNameTV.setText(mDataset.get(position).getCityName());        holder.phoneTV.setText(mDataset.get(position).getCityPhone());        holder.addrTV.setText(mDataset.get(position).getLocation());    }    @Override    public int getItemCount() {        return mDataset.size();    }    private void showDialog(final int position) {        AlertDialog.Builder builder = new AlertDialog.Builder(context);        builder.setTitle(Choose operation);        String[] dialogItems = new String[]{                context.getString(R.string.delete_one_item),                context.getString(R.string.add_one_item),                context.getString(R.string.move_one_item),                context.getString(R.string.change_one_item),                context.getString(R.string.add_many_items),        };        builder.setItems(dialogItems, new DialogInterface.OnClickListener() {            @Override            public void onClick(DialogInterface dialog, int which) {                switch (which) {                    case 0:                        //delete this item                        mDataset.remove(position);                        notifyItemRemoved(position);                        break;                    case 1:                        //add one item                        mDataset.add(position, new CityInfoBean(New City, 010, Asia));                        notifyItemInserted(position);                        break;                    case 2:                        //TODO remember to change the data set...                        //move one item to another position                        notifyItemMoved(position, position + 2);                        //May cause IndexOutOfBoundsException. This is just a demo!                        break;                    case 3:                        //change one item                        mDataset.get(position).setCityName(City name changed);                        notifyItemChanged(position);                        break;                    case 4:                        //add many items                        List
    
      insertList = new ArrayList
     
      ();                        insertList.add(new CityInfoBean(New City 01, 010, Asia));                        insertList.add(new CityInfoBean(New City 02, 020, America));                        mDataset.addAll(position, insertList);                        notifyItemRangeInserted(position, insertList.size());                        break;                    default:                        break;                }            }        });        builder.create().show();    }    public static class ViewHolder extends RecyclerView.ViewHolder {        public TextView cityNameTV, phoneTV, addrTV;        public ViewHolder(View v) {            super(v);            cityNameTV = (TextView) v.findViewById(R.id.city_name);            phoneTV = (TextView) v.findViewById(R.id.city_phone);            addrTV = (TextView) v.findViewById(R.id.city_addr);        }    }}
     
    
   
  
 

(3) homepage layout file:

 

Recycler_layout.xml:

 

Ii. Use CardView

CardView is another brand-new component provided by Google in the support v7 package, which can easily implement "card layout" (with three-dimensional effect of projection/rounded corners ). CardView inherits from FrameLayout. Therefore, if you need to place multiple components without overlap, you may need to nest a LinearLayout or RelativeLayout.

:

Layout file:

 

Attribute explanation:

 

CardCornerRadius: the rounded corner size;

CardElevation: the projection depth;

CardBackgroundColor: the background color of the card.