Android l -- Material Design integrated application (Demo), androidmaterial

Android l -- Material Design integrated application (Demo), androidmaterial

Reprinted please indicate this article from the blog of the big glutinous rice (http://blog.csdn.net/a396901990). Thank you for your support!

Material Design:

Material Design is a brand new Design language launched by Google. It features flat objects.

Material Design is divided into the following four parts:

Themes and Layout--Android l-Material Design (subject and layout)

View and shadow-android l-Material Design (view and shadow)

UI control-android l-Material Design (UI control)

Animation-android l-Material Design (animation)

The following example shows a comprehensive application described above. You can directly look at the figure if you are not talking nonsense:

Demo introduction:

Figure on the left:

1. RecyclerView, CardView

First, two new controls, RecyclerView and CardView, are used for Material Desgin.

Knowledge Point reference:Android l -- RecyclerView, CardView import and use (Demo)

2. Floating Action Button &View shadow profile

What is different from the previous article is that I added a Floating Action Button to control the addition and deletion of CardView in RecyclerView.

In addition, the blue floating button is configured with a shadow profile (the black background is not very clear)

Knowledge Point reference:Android l-Material Design (view and shadow)

3. Reveal Effect

When you click the blue button, the Reveal effect animation is used.

Knowledge Point reference: android l-Material Design (animation)

Figure on the right:

1. Activity transitions

Clicking a single entry will jump to a new Acitivty and execute the Activity transitions animation during the jump. You will see that the view in the second Activity will have an Explode effect to the center)

2. Shared Elements Transition

When you jump from the first Activity to the second Activity, there will be an animation effect of the shared element so that the picture and floating button will move when the two activities jump (the distance between the controls is somewhat close to the effect is not particularly obvious)

3. Reveal effect and animation listening

You can use Reveal effect and animation monitoring to achieve a switching view effect similar to "blinking ".

1, 2, 3 knowledge point reference: android l -- Material Design (animation)

Code introduction:

Main Activity -- MyActivity:

Public class MyActivity extends Activity {private RecyclerView mRecyclerView; private MyAdapter myAdapter; ImageButton button; Context context; public static List <Actor> actors = new ArrayList <Actor> (); private static String [] names = {"Zhu Yin", "Cecilia Cheung", "Zhang Min", "mo Wenwei", "Huang shengyi", "Zhao Wei", "Ru Hua "}; private static String [] pics = {"p1", "p2", "p3", "p4", "p5", "p6", "p7 "}; private static String [] works = {"westward journey", "XI Play King "," p3 "," p4 "," p5 "," p6 "," p7 "}; private static String [] role = {" Zixia fairy ", "Liu Piao", "p3", "p4", "p5", "p6", "p7 "}; private static String [] [] picGroups = {"p1", "p1_1", "p1_2", "p1_3" },{ "p2", "p2_1 ", "p2_2", "p2_3" },{ "p3" },{ "p4" },{ "p5" },{ "p6" },{ "p7 "}}; @ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); // set Explode enter transition animation for curr Ent activity getWindow (). requestFeature (Window. FEATURE_CONTENT_TRANSITIONS); getWindow (). setEnterTransition (new Explode (). setDuration (1000); setContentView (R. layout. main_layout); // init data this. context = this; actors. add (new Actor (names [0], pics [0], works [0], role [0], picGroups [0]); getActionBar (). setTitle ("star girls we chased in those years"); // init RecyclerView mRecyclerView = (RecyclerView) findViewById (R. id. li St); mRecyclerView. setLayoutManager (new LinearLayoutManager (this); mRecyclerView. setItemAnimator (new DefaultItemAnimator (); // set adapter myAdapter = new MyAdapter (this, actors); mRecyclerView. setAdapter (myAdapter); // set outline and listener for floating action button = (ImageButton) this. findViewById (R. id. add_button); button. setOutlineProvider (new ViewOutlineProvider () {@ Override pub Lic void getOutline (View view, Outline outline) {int shapeSize = (int) getResources (). getDimension (R. dimen. shape_size); outline. setRoundRect (0, 0, shapeSize/2) ;}}); button. setClipToOutline (true); button. setOnClickListener (new MyOnClickListener ();} public class MyOnClickListener implements View. onClickListener {boolean isAdd = true; @ Override public void onClick (View v) {// Start animation Animator animator = createAnimation (v); animator. start (); // add item if (myAdapter. getItemCount ()! = Names. length & isAdd) {actors. add (new Actor (names [myAdapter. getItemCount ()], pics [myAdapter. getItemCount ()], works [myAdapter. getItemCount ()], role [myAdapter. getItemCount ()], picGroups [myAdapter. getItemCount ()]); mRecyclerView. scrollToPosition (myAdapter. getItemCount ()-1); myAdapter. notifyDataSetChanged ();} // delete item else {actors. remove (myAdapter. getItemCount ()-1); mRecyclerView. scrollToPosition (myAdapter. getItemCount ()-1); myAdapter. notifyDataSetChanged ();} if (myAdapter. getItemCount () = 0) {button. setImageDrawable (getDrawable (android. r. drawable. ic_input_add); isAdd = true;} if (myAdapter. getItemCount () = names. length) {button. setImageDrawable (getDrawable (android. r. drawable. ic_delete); isAdd = false ;}}/ *** start detail activity */public void startActivity (final View v, final int position) {View pic = v. findViewById (R. id. pic); View add_btn = this. findViewById (R. id. add_button); // set share element transition animation for current activity Transition ts = new ChangeTransform (); ts. setDuration (3000); getWindow (). setExitTransition (ts); Bundle bundle = ActivityOptions. makeSceneTransitionAnimation (Activity) context, Pair. create (pic, position + "pic"), Pair. create (add_btn, "ShareBtn ")). toBundle (); // start activity with share element transition Intent intent = new Intent (context, DetailActivity. class); intent. putExtra ("pos", position); startActivity (intent, bundle);}/*** create CircularReveal animation */public Animator createAnimation (View v) {// create a CircularReveal animation Animator animator = ViewAnimationUtils. createCircularReveal (v, v. getWidth ()/2, v. getHeight ()/2, 0, v. getWidth (); animator. setInterpolator (new AccelerateDecelerateInterpolator (); animator. setDuration (500); return animator ;}}

The second Activity -- DetailActivity:

Public class DetailActivity extends Activity {ImageView pic; int position; int picIndex = 0; Actor actor; @ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); // set Explode enter transition animation for current activity getWindow (). requestFeature (Window. FEATURE_CONTENT_TRANSITIONS); getWindow (). setEnterTransition (new Explode (). setDuration (1000); get Window (). setExitTransition (null); setContentView (R. layout. detail_layout); position = getIntent (). getIntExtra ("pos", 0); actor = MyActivity. actors. get (position); pic = (ImageView) findViewById (R. id. detail_pic); TextView name = (TextView) findViewById (R. id. detail_name); TextView works = (TextView) findViewById (R. id. detail_works); TextView role = (TextView) findViewById (R. id. detail_role); ImageButton Btn = (ImageButton) findViewById (R. id. detail_btn); // set detail info pic. setTransitionName (position + "pic"); pic. setImageDrawable (getDrawable (actor. getImageResourceId (this); name. setText ("name:" + actor. name); works. setText ("masterpiece:" + actor. works); role. setText ("play:" + actor. role); // set action bar title getActionBar (). setTitle (MyActivity. actors. get (position ). name); // floating action button btn. SetImageDrawable (getDrawable (android. r. drawable. ic_menu_gallery); btn. setOnClickListener (new View. onClickListener () {@ Override public void onClick (View v) {// set first animation Animator animator = createAnimation (pic, true); animator. start (); animator. addListener (new Animator. animatorListener () {@ Override public void onAnimationStart (Animator animation) {}@ Override public void onAnimation End (Animator animation) {picIndex ++; if (actor. getPics ()! = Null) {if (picIndex> = actor. getPics (). length) {picIndex = 0 ;}// set second animation doSecondAnim () ;}@override public void onAnimationCancel (Animator animation) {}@ Override public void Merge (Animator animation) {}}) ;}}) ;}/ *** exec second animation for pic view */private void doSecondAnim () {pic. setImageDrawable (getDrawable (actor. getImageResourceId (this, actor. getPics () [picIndex]); Animator animator = createAnimation (pic, false); animator. start ();}/*** create CircularReveal animation with first and second sequence */public Animator createAnimation (View v, Boolean isFirst) {Animator animator; if (isFirst) {animator = ViewAnimationUtils. createCircularReveal (v, v. getWidth ()/2, v. getHeight ()/2, v. getWidth (), 0);} else {animator = ViewAnimationUtils. createCircularReveal (v, v. getWidth ()/2, v. getHeight ()/2, 0, v. getWidth ();} animator. setInterpolator (new DecelerateInterpolator (); animator. setDuration (500); return animator;} @ Override public void onBackPressed () {super. onBackPressed (); pic. setImageDrawable (getDrawable (actor. getImageResourceId (this, actor. picName); finishAfterTransition ();}}

Adapter of RecyclerView:

public class MyAdapter    extends RecyclerView.Adapter<MyAdapter.ViewHolder>{    private List<Actor> actors;    private Context mContext;    public MyAdapter( Context context , List<Actor> actors)    {        this.mContext = context;        this.actors = actors;    }    @Override    public ViewHolder onCreateViewHolder( ViewGroup viewGroup, int i )    {        View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.card_view, viewGroup, false);        return new ViewHolder(v);    }    @Override    public void onBindViewHolder( ViewHolder viewHolder, int i )    {        Actor p = actors.get(i);        viewHolder.mContext = mContext;        viewHolder.mTextView.setText(p.name);        viewHolder.mImageView.setImageDrawable(mContext.getDrawable(p.getImageResourceId(mContext)));    }    @Override    public int getItemCount()    {        return actors == null ? 0 : actors.size();    }    public static class ViewHolder        extends RecyclerView.ViewHolder    {        public TextView mTextView;        public ImageView mImageView;        public Context mContext;        public ViewHolder( View v )        {            super(v);            mTextView = (TextView) v.findViewById(R.id.name);            mImageView = (ImageView) v.findViewById(R.id.pic);            v.setOnClickListener(new View.OnClickListener() {                @Override                public void onClick(View v) {                ((MyActivity)mContext).startActivity(v, getPosition());                }            });        }    }}

The remaining Layout files and some bad things can be found through the Github link below.

Github:Https://github.com/a396901990/AndroidDemo (AndroidL_MaterialDesgin_Demo)

Conclusion:

Code writing is a bit tricky, just to quickly complete the function, and many non-standard users ignore it.

In addition, there are only some simple annotations in the code, which are not explained in detail, because I think there is nothing to talk about, and the content is the application of the example in my previous article.

You can compare the aboveDemo IntroductionFind the relevant detailed information in the corresponding article.

I am an Android beginner. What does Android l mean for beginners?

It doesn't mean anything. Beginners need to learn the latest. The major changes of Android L are mainly reflected in the UI and functions. Google proposed the Design concept of Material Design. I think the code structure of this version is basically no different from that of the previous Android version, so most documents can still be used. We recommend that you download an Android L development document from Google to see if there are any changes in the Code. Because you are a beginner, it is recommended that you give priority to card layout and Fragment during design, and do not use methods and classes discarded after Android 2.3. I am also an Android developer and have made some small applications. If you have any questions, please feel free to ask. I hope this will help you.

Compare iOS with Android 50 (Android L). The advantages and disadvantages of these two systems are as follows:

Personally, if you want to have a considerate and high-quality experience, choose iOS. If you want to pursue personalization, freedom, and no security requirements, choose android.