Wednesday, 10 October 2018

How to Create GalaryView


Need Java File


GalleryAdapter.java
DepthPageTransformer.java

ImageModel.java RecyclerItemClickListener.java DetailActivity.java GalleryActivity.java


Need XML File

activity_detail.xml
activity_gallery.xml
fragment_detail.xml
item_list.xml

compile 'com.github.bumptech.glide:glide:3.6.1'
Step 1:
activity_detail.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 
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:id="@+id/main_content"
    android:layout_width="match_parent"
    android:background="@android:color/black"
    android:layout_height="match_parent"
    tools:context=".DetailActivity">


    <android.support.v4.view.ViewPager
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


</android.support.design.widget.CoordinatorLayout>

Step 2:
fragment_detail.xml

<?xml version="1.0" encoding="utf-8"?>
<ImageView    
xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/detail_image"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:scaleType="fitCenter"
    tools:context="" />

Step 3:
fragment_gallery.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:gravity="center"
    android:orientation="vertical">
    <android.support.v7.widget.RecyclerView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</LinearLayout>

Step 4
list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/item_img"    android:layout_width="match_parent"
    android:layout_height="128dp"
    android:layout_margin="1dp"
    android:adjustViewBounds="true"
    android:scaleType="centerCrop" />

Step 5:

GalleryAdapter.java

public class GalleryAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

    Context context;
    List<ImageModel> data = new ArrayList<>();

    public GalleryAdapter(Context context, List<ImageModel> data) {
        this.context = context;
        this.data = data;
    }


    @Override    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        RecyclerView.ViewHolder viewHolder;
        View v;
        v = LayoutInflater.from(parent.getContext()).inflate(
                R.layout.item_list, parent, false);
        viewHolder = new MyItemHolder(v);

        return viewHolder;
    }

    @Override    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {

        Glide.with(context).load(data.get(position).getUrl())
                .thumbnail(0.5f)
                .override(200,200)
                .crossFade()
                .diskCacheStrategy(DiskCacheStrategy.ALL)
                .into(((MyItemHolder) holder).mImg);

    }

    @Override    public int getItemCount() {
        return data.size();
    }

    public static class MyItemHolder extends RecyclerView.ViewHolder {
        ImageView mImg;


        public MyItemHolder(View itemView) {
            super(itemView);

            mImg = (ImageView) itemView.findViewById(R.id.item_img);
        }

    }

}

Step 6:
DepthPageTransformer.java

public class DepthPageTransformer implements ViewPager.PageTransformer {
    private static final float MIN_SCALE = 0.75f;

    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();

        if (position < -1) { 
// [-Infinity,-1)          
  // This page is way off-screen to the left. 
           view.setAlpha(0);

        } else if (position <= 0) { 
// [-1,0]           
 // Use the default slide transition when moving to the left page 
           view.setAlpha(1);
            view.setTranslationX(0);
            view.setScaleX(1);
            view.setScaleY(1);

        } else if (position <= 1) { 
// (0,1]           
 // Fade the page out.      
      view.setAlpha(1 - position);

            // Counteract the default slide transition  
          view.setTranslationX(pageWidth * -position);

            // Scale the page down (between MIN_SCALE and 1)  
         float scaleFactor = MIN_SCALE  + (1 - MIN_SCALE) * (1 - Math.abs(position));
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);

        } else {
 // (1,+Infinity]   
         // This page is way off-screen to the right.  
          view.setAlpha(0);
        }
    }
}

Step 7:

ImageModel.java

public class ImageModel implements Parcelable {

    String name, url;

    public ImageModel() {

    }

    protected ImageModel(Parcel in) {
        name = in.readString();
        url = in.readString();
    }

    public static final Parcelable.Creator<ImageModel> CREATOR = new Creator<ImageModel>() {
        @Override    
    public ImageModel createFromParcel(Parcel in) {
            return new ImageModel(in);
        }

        @Override        public ImageModel[] newArray(int size) {
            return new ImageModel[size];
        }
    };

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }

    @Override    public int describeContents() {
        return 0;
    }

    @Override    public void writeToParcel(Parcel dest, int flags) {
        dest.writeString(name);
        dest.writeString(url);
    }
}

Step 8:

RecyclerItemClickListener.java

public class RecyclerItemClickListener implements RecyclerView.OnItemTouchListener {
    private OnItemClickListener mListener;

    public interface OnItemClickListener {
        public void onItemClick(View view, int position);
    }

    GestureDetector mGestureDetector;

    public RecyclerItemClickListener(Context context, OnItemClickListener listener) {
        mListener = listener;
        mGestureDetector = new GestureDetector(context, new GestureDetector.SimpleOnGestureListener() {
            @Override public boolean onSingleTapUp(MotionEvent e) {
                return true;
            }
        });
    }

    @Override public boolean onInterceptTouchEvent(RecyclerView view, MotionEvent e) {
        View childView = view.findChildViewUnder(e.getX(), e.getY());
        if (childView != null && mListener != null && mGestureDetector.onTouchEvent(e)) {
            mListener.onItemClick(childView, view.getChildPosition(childView));
            return true;
        }
        return false;
    }

    @Override public void onTouchEvent(RecyclerView view, MotionEvent motionEvent) { }

    @Override    public void onRequestDisallowInterceptTouchEvent(boolean disallowIntercept) {

    }
}

Step 9 :

DetailActivity.java

public class DetailActivity extends AppCompatActivity {

    private SectionsPagerAdapter mSectionsPagerAdapter;

    public ArrayList<ImageModel> data = new ArrayList<>();
    int pos;

    Toolbar toolbar;

    /**     * The {@link ViewPager} that will host the section contents.     */  
  private ViewPager mViewPager;

    @Override    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_detail);


        data = getIntent().getParcelableArrayListExtra("data");
        pos = getIntent().getIntExtra("pos", 0);

        setTitle(data.get(pos).getName());

        // Create the adapter that will return a fragment for each of the three   
     // primary sections of the activity.    
    mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager(), data);
        // Set up the ViewPager with the sections adapter.  
      mViewPager = (ViewPager) findViewById(R.id.container);
        mViewPager.setPageTransformer(true, new DepthPageTransformer());

        mViewPager.setAdapter(mSectionsPagerAdapter);
        mViewPager.setCurrentItem(pos);

        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override       
     public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override        
    public void onPageSelected(int position) {

                //noinspection ConstantConditions    
            setTitle(data.get(position).getName());

            }

            @Override         
   public void onPageScrollStateChanged(int state) {

            }
        });


    }


    @Override    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will       
 // automatically handle clicks on the Home/Up button, so long   
     // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement 
       if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }


    public class SectionsPagerAdapter extends FragmentPagerAdapter {
        public ArrayList<ImageModel> data = new ArrayList<>();

        public SectionsPagerAdapter(FragmentManager fm, ArrayList<ImageModel> data) {
            super(fm);
            this.data = data;
        }

        @Override        
public Fragment getItem(int position) {
            // getItem is called to instantiate the fragment for the given page.    

       // Return a PlaceholderFragment (defined as a static inner class below).    
        return PlaceholderFragment.newInstance(position, data.get(position).getName(), data.get(position).getUrl());
        }

        @Override       
 public int getCount() {
            // Show 3 total pages.    
        return data.size();
        }

        @Override      
  public CharSequence getPageTitle(int position) {
            return data.get(position).getName();
        }
    }

    /**     * A placeholder fragment containing a simple view.     */  
  public static class PlaceholderFragment extends Fragment {
        /**         * The fragment argument representing the section number for this         * fragment.         */
        String name, url;
        int pos;
        private static final String ARG_SECTION_NUMBER = "section_number";
        private static final String ARG_IMG_TITLE = "image_title";
        private static final String ARG_IMG_URL = "image_url";

        @Override        public void setArguments(Bundle args) {
            super.setArguments(args);
            this.pos = args.getInt(ARG_SECTION_NUMBER);
            this.name = args.getString(ARG_IMG_TITLE);
            this.url = args.getString(ARG_IMG_URL);
        }

        /**         * Returns a new instance of this fragment for the given section     
    * number.         */  
      public static PlaceholderFragment newInstance(int sectionNumber, String name, String url) {
            PlaceholderFragment fragment = new PlaceholderFragment();
            Bundle args = new Bundle();
            args.putInt(ARG_SECTION_NUMBER, sectionNumber);
            args.putString(ARG_IMG_TITLE, name);
            args.putString(ARG_IMG_URL, url);
            fragment.setArguments(args);
            return fragment;
        }

        public PlaceholderFragment() {
        }

        @Override      
  public void onStart() {
            super.onStart();

        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
            View rootView = inflater.inflate(R.layout.fragment_detail, container, false);

            final ImageView imageView = (ImageView) rootView.findViewById(R.id.detail_image);

            Glide.with(getActivity()).load(url).thumbnail(0.1f).into(imageView);

            return rootView;
        }

    }
}

Step 10 :

GalleryActivity.java

public class GallaryFragment extends AppCompatActivity {
    GalleryAdapter mAdapter;
    RecyclerView mRecyclerView;

    ArrayList<ImageModel> data = new ArrayList<>();

    public static String IMGS[] = {
            "https://image3.mouthshut.com/images/imagesp/925004353s.jpg",
            "https://upload.wikimedia.org/wikipedia/commons/8/80/Ooty_Town.jpg",
            "https://i.pinimg.com/originals/9f/73/a9/9f73a9e5efa8f3ff7f02488db3ab953d.jpg",
            "https://i.ytimg.com/vi/H3uoIhoQlHM/maxresdefault.jpg",
            "http://futuretvnetwork.com/wp-content/uploads/2018/01/%D8%B5%D9%88%D8%B1-%D8%BA%D8%B2%D9%84%D8%A7%D9%8601.jpg",
            "https://i.ytimg.com/vi/SdZeeD_REK4/maxresdefault.jpg",
            "https://wallpapercave.com/wp/wp2337131.jpg",
            "https://wallpaperstudio10.com/static/wpdb/wallpapers/1920x1080/173775.jpg",
            "https://i.pinimg.com/originals/a3/92/f7/a392f7c9ada257b747e017e1cdb6aadb.jpg",
            "http://spectrumtour.com/wp-content/uploads/2014/01/096d6d90-eer_1.jpg",
            "http://www.wallpapersshock.com/uploads/large/ooty-wallpapers/ooty-wallpaper-hd.jpg",
            "https://vasantkamal.com/wp-content/uploads/2015/05/maysor.jpg",
            "https://abdur0084.files.wordpress.com/2014/02/srimangol-tea-garden.jpg",
            "https://farm5.staticflickr.com/4453/38082270942_2605288e14_b.jpg",
            "http://packages.cdnpath.com/HotelDealImages/636549673363944552_M.jpg",
            "https://i1.trekearth.com/photos/102315/100_7137.jpg",};


  @Override    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.fragment_detail);
for (int i = 0; i < IMGS.length; i++) { ImageModel imageModel = new ImageModel(); imageModel.setName("Image " + i); imageModel.setUrl(IMGS[i]); data.add(imageModel); } mRecyclerView = (RecyclerView)view.findViewById(R.id.list); mRecyclerView.setLayoutManager(new GridLayoutManager(getActivity(), 2)); mRecyclerView.setHasFixedSize(true); mAdapter = new GalleryAdapter(getActivity(), data); mRecyclerView.setAdapter(mAdapter); mRecyclerView.addOnItemTouchListener(new RecyclerItemClickListener(getActivity(), new RecyclerItemClickListener.OnItemClickListener() { @Override public void onItemClick(View view, int position) { Intent intent = new Intent(getActivity(), DetailActivity.class); intent.putParcelableArrayListExtra("data", data); intent.putExtra("pos", position); startActivity(intent); } })); return view; } }

Step 11 :

manifest

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"    package="com." >

    <uses-permission android:name="android.permission.INTERNET" />
    <application        android:allowBackup="true"        android:icon="@mipmap/ic_launcher"        android:label="@string/app_name"        android:roundIcon="@mipmap/ic_launcher_round"        android:supportsRtl="true"        android:theme="@style/AppTheme.NoActionBar" >
        <activity            android:name=".GalleryActivity"            android:label="@string/app_name"            android:theme="@style/AppTheme.NoActionBar" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".DetailActivity">
        </activity>
    </application>

</manifest>







No comments:

Post a Comment

HOW TO CREATE CIRCLE IMAGE VIEW

Step 1: implementation 'de.hdodenhof:circleimageview:3.0.0' Step 2: <de.hdodenhof.circleimageview.CircleImageView xmlns:ap...