CircleImageView and Cardview, circleimageview

CircleImageView and Cardview, circleimageview

Effect:

 

 

 

Circular portraits are common in our daily apps, because they are more beautiful.

Using a circular image, we may crop the image into a circular image and then use it in the app,

The custom View is used to automatically crop any image we set to a circle.

CircleImageView on github is used here

Github: https://github.com/hdodenhof/CircleImageView

 

As the name suggests, CardView is a card-type View,

CardView inherits FrameLayout, so pay attention to it when placing internal controls.

You can set shadows, rounded corners, and so on.

 

The CircleImageView can also be used to set the stroke for the Avatar.

Create a new project and select Navigation Drawer Activity to automatically generate the initial layout.

 

Modify nav_header_main and add the rounded corner avatar.

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"              android:layout_width="match_parent"              android:layout_height="@dimen/nav_header_height"              android:background="@drawable/side_nav_bar"              android:gravity="bottom"              android:orientation="vertical"              android:paddingBottom="@dimen/activity_vertical_margin"              android:paddingLeft="@dimen/activity_horizontal_margin"              android:paddingRight="@dimen/activity_horizontal_margin"              android:paddingTop="@dimen/activity_vertical_margin"              android:theme="@style/ThemeOverlay.AppCompat.Dark">    <de.hdodenhof.circleimageview.CircleImageView        xmlns:app="http://schemas.android.com/apk/res-auto"        android:id="@+id/profile_image"        android:layout_width="96dp"        android:layout_height="96dp"        android:src="@drawable/darth_vader"        app:civ_border_width="2dp"        /></LinearLayout>

 

Modify content_main, add RecyclerView, and remember to export the package.

<?xml version="1.0" encoding="utf-8"?><RelativeLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    app:layout_behavior="@string/appbar_scrolling_view_behavior"    tools:context="com.example.xw.design2.MainActivity"    tools:showIn="@layout/app_bar_main">  <android.support.v7.widget.RecyclerView      android:id="@+id/rv"      android:layout_width="match_parent"      android:layout_height="match_parent"></android.support.v7.widget.RecyclerView></RelativeLayout>

 

 

Add the item layout, CardView, and remember to export the package

<?xml version="1.0" encoding="utf-8"?><android.support.v7.widget.CardView    android:layout_height="wrap_content"    android:layout_width="match_parent"    xmlns:card_view="http://schemas.android.com/apk/res-auto"    card_view:contentPadding="10dp"    card_view:cardBackgroundColor="#303069"    card_view:cardCornerRadius="10dp"    card_view:cardPreventCornerOverlap="true"    card_view:cardUseCompatPadding="true"    xmlns:android="http://schemas.android.com/apk/res/android"><TextView    android:id="@+id/tv"    android:textColor="#fff"    android:layout_width="wrap_content"    android:layout_height="wrap_content"/></android.support.v7.widget.CardView>

 

Next, add code in MainActivity and use our CardView

1. Add member variables and data sources

Private RecyclerView mRecyclerView; private String [] data = {"in 2014, Google launched the brand new Design language Material Design and ushered in a new Android support library v7, this includes the implementation of the Card concept in the Material Design language-CardView. "," After a long period of time, I believe that many Android Developers have applied this control. It may be a bit late to write this article, however, developers who have been using it for a while and others who have been using it for a while but are not doing well should be able to help. "," Google introduced the shadow (Elevation) and Z-axis displacement in the Material Design in Android Lollipop, which aims to highlight the hierarchical relationship between different elements in the interface ", "next summer, the free player breke Griffin may return to Oklahoma and join Russell Westbrook. If so, can the thunder team actually threaten the warriors? "};

 

2. Create ViewHolder

 class MyHolder extends RecyclerView.ViewHolder{        private TextView mTextView;        public MyHolder(View itemView) {            super(itemView);            mTextView= (TextView) itemView.findViewById(R.id.tv);        }    }

 

3. Create an Adapter

 class MyAdapter extends  RecyclerView.Adapter<MyHolder>{        @Override        public MyHolder onCreateViewHolder(ViewGroup parent, int viewType) {            LayoutInflater layoutInflater=LayoutInflater.from(getApplicationContext());            View v=layoutInflater.inflate(R.layout.item,parent,false);            MyHolder holder=new MyHolder(v);            return holder;        }        @Override        public void onBindViewHolder(MyHolder holder, int position) {                holder.mTextView.setText(data[position]);        }        @Override        public int getItemCount() {            return data.length;        }    }

4. Set the Adapter in the oncreate () method

 mRecyclerView= (RecyclerView) findViewById(R.id.rv);        mRecyclerView.setLayoutManager(new LinearLayoutManager(this));        mRecyclerView.setAdapter(new MyAdapter());