Summary of some key points for layout compatibility of Material designs for Android applications

  • 2021-06-29 12:07:34
  • OfStack

Define Alternative Styles Defines Alternate Styles
Let your app, using Material Design's theme, run on devices that support it, and on earlier versions of devices, run earlier themes:
1. Define a theme in res/values/styles.xml to inherit an earlier theme
2. In res/values-v21/styles.xml, define a theme with the same name that inherits from the Material theme
3. Themes defined in manifest
Note: If your app uses the Material theme instead of providing an earlier theme, it will not run on earlier versions of the device

Provide Alternative Layouts provides alternative layouts
If you design an layout that does not reference any of the xml properties in 5.0, you can run on earlier versions of the Android device.Otherwise, you can provide an alternative layout.
Alternative layouts are built on res/layout-v21/
To avoid duplicate code, you can define your styles in res/values/Define your styles, the new style in res/values-21/Define an baseStyle in res/values and inherit it in res/values-21 using the inheritance of style.

Use the Support Library uses the support library
v7 support library includes the following features:

After applying an Theme.AppCompat theme, some components of the system have an Material Design style In the Theme.AppCompat theme, there is a color theme RecyclerView Component Display Dataset CardView Component Create Card Colour extraction from images

System widgets System Components

The Material Design-style components provided in the Theme.AppCompat theme are:

EditText Spinner CheckBox Radiobutton SwitchCompat CheckedTextView

Color Palette

Using the v7 support library, get the Material Design style definition color palette, and apply an Theme.AppCompat theme:


<!-- extend one of the Theme.AppCompat themes -->
<style name="Theme.MyTheme" parent="Theme.AppCompat.Light">
  <!-- customize the color palette -->
  <item name="colorPrimary">@color/material_blue_500</item>
  <item name="colorPrimaryDark">@color/material_blue_700</item>
  <item name="colorAccent">@color/material_green_A200</item>
</style>

Lists and Cards

With the v7 support library, it can also be run on earlier versions of Android.

Dependencies

gradle depends on:


dependencies {
  compile 'com.android.support:appcompat-v7:21.0.+'
  compile 'com.android.support:cardview-v7:21.0.+'
  compile 'com.android.support:recyclerview-v7:21.0.+'
}

Check the System Version Check System Version

The following features can only be used in Android 5.0 (API level 21) and above:

Activity transitions Activity Conversion Touch feedback Touch Feedback Reveal animations Display Animation Path-based animations Path-based Animation Vector drawables Vector Picture Drawable tinting Picture Staining

Check code:


// Check if we're running on Android 5.0 or higher
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  // Call some material design APIs here
} else {
  // Implement this feature without material design
}

Note: For app to support 5.0, Android:targetSdkVersion=21 in manifest is required.

PS:RecyclerView
An example of RecyclerView is attached:


import android.app.Activity; 
import android.os.Bundle; 
import android.support.v7.widget.GridLayoutManager; 
import android.support.v7.widget.RecyclerView; 
import android.support.v7.widget.RecyclerView.LayoutParams; 
import android.view.LayoutInflater; 
import android.view.ViewGroup; 
import android.widget.TextView; 
 
public class RecyclerViewActivity extends Activity { 
  /* 
   * recyclerview Provide these built-in layout managers:  
   * linearlayoutmanager        Displays a vertical scrolling list or horizontal items.  
   * gridlayoutmanager         Show in 1 Grid items.  
   * staggeredgridlayoutmanager     Show items in staggered grid.  
   *  Custom Layout Manager, inherited recyclerview.layoutmanager Class.  
   * 
   * add/remove items The animation is enabled by default.  
   *  Customizing these animations requires inheritance RecyclerView.ItemAnimator And implement RecyclerView.setItemAnimator() 
   */ 
   private RecyclerView mRecyclerView; 
   private RecyclerView.Adapter mAdapter; 
   private RecyclerView.LayoutManager mLayoutManager; 
   private String[] myDataset; 
 
  @Override 
  protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
     
    setContentView(R.layout.recycler_view); 
    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 manager 
//    mLayoutManager = new LinearLayoutManager(this); 
     
//    mLayoutManager = new GridLayoutManager(this, 3, GridLayoutManager.VERTICAL, true); 
    //true  Indicates that the layout Content reversal  
    mLayoutManager = new GridLayoutManager(this, 3, GridLayoutManager.VERTICAL, false); 
    //HORIZONTAL  Horizontal scroll display   VERTICAL portrait  
//    mLayoutManager = new GridLayoutManager(this, 3, GridLayoutManager.HORIZONTAL, false); 
     
    // Direction also indicates the direction of the scroll, and the data at the beginning of the horizon is staggered in the example 1 Points,   Vertical No Interlacing  
//    mLayoutManager = new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.HORIZONTAL); 
//    mLayoutManager = new StaggeredGridLayoutManager(4, StaggeredGridLayoutManager.VERTICAL); 
     
    mRecyclerView.setLayoutManager(mLayoutManager); 
//    mRecyclerView.setLayoutManager(new MyLayoutMnager()); // The data does not show, and there may be something else to rewrite.  
 
    // specify an adapter (see also next example) 
    
    setDatas(); 
    mAdapter = new MyAdapter(myDataset); 
    mRecyclerView.setAdapter(mAdapter); 
  } 
   
  private void setDatas() { 
    int len = 200; 
    myDataset = new String[len]; 
    for (int i = 0; i < len; i++) { 
      switch (i%3) { 
      case 0: 
        myDataset[i] = " China " + i; 
        break; 
      case 1: 
        myDataset[i] = " U.S.A " + i; 
        break; 
      case 2: 
        myDataset[i] = " Australia " + i; 
        break; 
      } 
    } 
  } 
   
  class MyLayoutMnager extends RecyclerView.LayoutManager { 
 
    @Override 
    public LayoutParams generateDefaultLayoutParams() { 
      LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); 
      params.topMargin = 5; 
      return params; 
    } 
  } 
   
  class MyAdapter extends RecyclerView.Adapter<ViewHolder> { 
    private String[] mDataset; 
 
    // Provide a reference to the views for each data item 
    // Complex data items may need more than one view per item, and 
    // you provide access to all the views for a data item in a view holder 
 
    // Provide a suitable constructor (depends on the kind of dataset) 
    public MyAdapter(String[] myDataset) { 
      mDataset = myDataset; 
    } 
 
    // Create new views (invoked by the layout manager) 
    @Override 
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { 
      // create a new view 
      TextView tv = (TextView) LayoutInflater.from(parent.getContext()) 
          .inflate(R.layout.my_text_view, parent, false); 
      // set the view's size, margins, paddings and layout parameters 
      //... 
      ViewHolder vh = new ViewHolder(tv); // structure 1 individual ViewHolder 
      return vh; 
    } 
 
    // Replace the contents of a view (invoked by the layout manager) 
    @Override 
    public void onBindViewHolder(ViewHolder holder, int position) { 
      // - get element from your dataset at this position 
      // - replace the contents of the view with that element 
      holder.mTextView.setText(mDataset[position]); 
 
    } 
 
    // Return the size of your dataset (invoked by the layout manager) 
    @Override 
    public int getItemCount() { 
      return mDataset.length; 
    } 
  } 
   
  static class ViewHolder extends RecyclerView.ViewHolder { 
    // each data item is just a string in this case 
    public TextView mTextView; 
    public ViewHolder(TextView v) { 
      super(v); 
      mTextView = v; 
    } 
  } 
} 


Related articles: