Membuat UI Activity Profile Seperti Instagram Part 2 (Grid dan Linear Recycler Fragments)

Update Terakhir pada

Halo semua kali ini kita kembali ke lanjutan dari artikel sebelumnya, masih membahas mengenai membuat UI Activity Profile Instagram, kali ini kita kana mempelajari bagaimana membuat fragment, dan recylerview secara grid dan linear agar mendapat hasil tampilan UI seperti dibawah ini

Lumayan keren bukan? Oke mari kita mulai dari pembuatan fragments.

Ada 2 fragments yang kita butuhkan dan akan kita namai

ProfileGridFragment.java dan ProfileLinearFragment.java

Mari kita mulai terlebih dahulu dari ProfileGridFragment.java

Berikut Source code dari ProfileGridFragment.java :

package com.quicktapgame.instagramlike;

import android.content.Context;
import android.net.Uri;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.quicktapgame.instagramlike.adapters.ProfileGridRecyclerViewAdapter;
import com.quicktapgame.instagramlike.adapters.ProfileLinearRecyclerViewAdapter;


/**
 * A simple {@link Fragment} subclass.
 * Activities that contain this fragment must implement the
 * {@link ProfileLinearFragment.OnFragmentInteractionListener} interface
 * to handle interaction events.
 * Use the {@link ProfileLinearFragment#newInstance} factory method to
 * create an instance of this fragment.
 */
public class ProfileLinearFragment extends Fragment {
// TODO: Rename parameter arguments, choose names that match
// the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
private static final String ARG_PARAM1 = "param1";
    private static final String ARG_PARAM2 = "param2";

// TODO: Rename and change types of parameters
private String mParam1;
    private String mParam2;


    int[] mPlaceList = new int[]{R.drawable.pp, R.drawable.pp,R.drawable.pp,
R.drawable.pp,R.drawable.pp,R.drawable.pp,R.drawable.pp,R.drawable.pp,
R.drawable.pp,R.drawable.pp,R.drawable.pp};


    private OnFragmentInteractionListener mListener;

    public ProfileLinearFragment() {
// Required empty public constructor
}

/**
     * Use this factory method to create a new instance of
     * this fragment using the provided parameters.
     *
     * @param param1 Parameter 1.
     * @param param2 Parameter 2.
     * @return A new instance of fragment ProfileLinearFragment.
     */
// TODO: Rename and change types and number of parameters
public static ProfileLinearFragment newInstance(String param1, String param2) {
        ProfileLinearFragment fragment = new ProfileLinearFragment();
Bundle args = new Bundle();
args.putString(ARG_PARAM1, param1);
args.putString(ARG_PARAM2, param2);
fragment.setArguments(args);
        return fragment;
}

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
        if (getArguments() != null) {
mParam1 = getArguments().getString(ARG_PARAM1);
mParam2 = getArguments().getString(ARG_PARAM2);
}
    }

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View view = inflater.inflate(R.layout.fragment_profile_linear, container, false);
//set recyclerview
RecyclerView mRecyclerView = view.findViewById(R.id.profile_linear_recycler_view);
LinearLayoutManager mLinearLayoutManager = new LinearLayoutManager(getContext());
mRecyclerView.setLayoutManager(mLinearLayoutManager);

ProfileLinearRecyclerViewAdapter myAdapter = new ProfileLinearRecyclerViewAdapter(getContext(),mPlaceList);
mRecyclerView.setAdapter(myAdapter);

        return view;
}

// TODO: Rename method, update argument and hook method into UI event
public void onButtonPressed(Uri uri) {
if (mListener != null) {
mListener.onFragmentInteraction(uri);
}
    }

@Override
public void onAttach(Context context) {
super.onAttach(context);
        if (context instanceof OnFragmentInteractionListener) {
mListener = (OnFragmentInteractionListener) context;
} else {
throw new RuntimeException(context.toString()
                    + " must implement OnFragmentInteractionListener");
}
    }

@Override
public void onDetach() {
super.onDetach();
mListener = null;
}

/**
     * This interface must be implemented by activities that contain this
     * fragment to allow an interaction in this fragment to be communicated
     * to the activity and potentially other fragments contained in that
     * activity.
     * <p>
* See the Android Training lesson <a href=
* "http://developer.android.com/training/basics/fragments/communicating.html"
     * >Communicating with Other Fragments</a>for more information.
     */
public interface OnFragmentInteractionListener {
// TODO: Update argument type and name
void onFragmentInteraction(Uri uri);
}
}

Kita juga perlu membuat file xml untuk layout fragment ini yaitu

Fragment_profile_grid.xml berikut source codenya :

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ProfileGridFragment">

<android.support.v7.widget.RecyclerView
android:id="@+id/profile_grid_rescycler_view"
android:scrollbars="none"
android:nestedScrollingEnabled="false"
android:layout_width="match_parent"
android:layout_height="wrap_content"></android.support.v7.widget.RecyclerView>

</FrameLayout>

Selanjutnya bisa kita lihat karena kita menggunakan RecyclerView dalam Fragment ini kita perlu membuat Adapter, adapter adalah class yang kita gunakan untuk membuat sebuah recyclerview

Oke langsung saja membuat sebuah file adapter bernama ProfileGridRecyclerViewAdapter.java

Berikut source codenya :

package com.quicktapgame.instagramlike.adapters;

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import com.quicktapgame.instagramlike.R;

public class ProfileGridRecyclerViewAdapter extends RecyclerView.Adapter<ProfileGridRecyclerViewAdapter.PostViewHolder>{

private Context mContext;
    private int[] mPlaceList;

    public ProfileGridRecyclerViewAdapter(Context mContext, int[] mPlaceList) {
this.mContext = mContext;
        this.mPlaceList = mPlaceList;
}

@Override
public PostViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.profile_grid_recyclerview_item,
parent, false);
        return new PostViewHolder(view);
}

@Override
public void onBindViewHolder(final PostViewHolder holder, int position) {
        holder.mPlace.setImageResource(mPlaceList[position]);
}

@Override
public int getItemCount() {
return mPlaceList.length;
}


class PostViewHolder extends RecyclerView.ViewHolder{

        ImageView mPlace;

        public PostViewHolder(View itemView) {
super(itemView);
mPlace = itemView.findViewById(R.id.field_grid_item_pic);
}
    }



}

Dalam proses pembuatan recyclerview kita perlu membuat sebuah layout XML yang mewakili setiap item pada recyclerview tersebut, file xml ini akan kita namakan profile_grid_recyclerview_item.xml

berikut source codenya :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:padding="0.5dp">
<ImageView
android:id="@+id/field_grid_item_pic"
android:src="@drawable/pp"
android:scaleType="centerCrop"
android:layout_width="match_parent"
android:layout_height="100dp" />
</RelativeLayout>

Oke dengan begitu salah satu fragment kita sudah selesai, yaitu Fragment untuk Grid View tapi Fragment untuk linear view kita belum selesai, nah prosesnya sama dengan sebelumnya cuman codingan akan sedikit berbeda kit tetap memerlukan 4 file seperti sebelumya dengan nama-nama :

ProfileLinearFragment.java,fragment_profile_linear.xml, profile_linear_recyclerview_item.xml, ProfileLinearRecyclerViewAdapter.java

Langsung saja untuk source code

ProfileLinearFragment.java

package com.quicktapgame.instagramlike;

import android.content.Context;
import android.net.Uri;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.quicktapgame.instagramlike.adapters.ProfileGridRecyclerViewAdapter;
import com.quicktapgame.instagramlike.adapters.ProfileLinearRecyclerViewAdapter;


/**
 * A simple {@link Fragment} subclass.
 * Activities that contain this fragment must implement the
 * {@link ProfileLinearFragment.OnFragmentInteractionListener} interface
 * to handle interaction events.
 * Use the {@link ProfileLinearFragment#newInstance} factory method to
 * create an instance of this fragment.
 */
public class ProfileLinearFragment extends Fragment {
// TODO: Rename parameter arguments, choose names that match
// the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
private static final String ARG_PARAM1 = "param1";
    private static final String ARG_PARAM2 = "param2";

// TODO: Rename and change types of parameters
private String mParam1;
    private String mParam2;


    int[] mPlaceList = new int[]{R.drawable.pp, R.drawable.pp,R.drawable.pp,
R.drawable.pp,R.drawable.pp,R.drawable.pp,R.drawable.pp,R.drawable.pp,
R.drawable.pp,R.drawable.pp,R.drawable.pp};


    private OnFragmentInteractionListener mListener;

    public ProfileLinearFragment() {
// Required empty public constructor
}

/**
     * Use this factory method to create a new instance of
     * this fragment using the provided parameters.
     *
     * @param param1 Parameter 1.
     * @param param2 Parameter 2.
     * @return A new instance of fragment ProfileLinearFragment.
     */
// TODO: Rename and change types and number of parameters
public static ProfileLinearFragment newInstance(String param1, String param2) {
        ProfileLinearFragment fragment = new ProfileLinearFragment();
Bundle args = new Bundle();
args.putString(ARG_PARAM1, param1);
args.putString(ARG_PARAM2, param2);
fragment.setArguments(args);
        return fragment;
}

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
        if (getArguments() != null) {
mParam1 = getArguments().getString(ARG_PARAM1);
mParam2 = getArguments().getString(ARG_PARAM2);
}
    }

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View view = inflater.inflate(R.layout.fragment_profile_linear, container, false);
//set recyclerview
RecyclerView mRecyclerView = view.findViewById(R.id.profile_linear_recycler_view);
LinearLayoutManager mLinearLayoutManager = new LinearLayoutManager(getContext());
mRecyclerView.setLayoutManager(mLinearLayoutManager);

ProfileLinearRecyclerViewAdapter myAdapter = new ProfileLinearRecyclerViewAdapter(getContext(),mPlaceList);
mRecyclerView.setAdapter(myAdapter);

        return view;
}

// TODO: Rename method, update argument and hook method into UI event
public void onButtonPressed(Uri uri) {
if (mListener != null) {
mListener.onFragmentInteraction(uri);
}
    }

@Override
public void onAttach(Context context) {
super.onAttach(context);
        if (context instanceof OnFragmentInteractionListener) {
mListener = (OnFragmentInteractionListener) context;
} else {
throw new RuntimeException(context.toString()
                    + " must implement OnFragmentInteractionListener");
}
    }

@Override
public void onDetach() {
super.onDetach();
mListener = null;
}

/**
     * This interface must be implemented by activities that contain this
     * fragment to allow an interaction in this fragment to be communicated
     * to the activity and potentially other fragments contained in that
     * activity.
     * <p>
* See the Android Training lesson <a href=
* "http://developer.android.com/training/basics/fragments/communicating.html"
     * >Communicating with Other Fragments</a>for more information.
     */
public interface OnFragmentInteractionListener {
// TODO: Update argument type and name
void onFragmentInteraction(Uri uri);
}
}

fragment_profile_linear.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ProfileLinearFragment">


<android.support.v7.widget.RecyclerView
android:id="@+id/profile_linear_recycler_view"
android:scrollbars="none"
android:nestedScrollingEnabled="false"
android:layout_width="match_parent"
android:layout_height="wrap_content"></android.support.v7.widget.RecyclerView>


</FrameLayout>

profile_linear_recyclerview_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/field_linear_item_pic"
android:src="@drawable/pp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</RelativeLayout>

ProfileLinearRecyclerViewAdapter.java

package com.quicktapgame.instagramlike.adapters;


import android.content.Context;
        import android.support.v7.widget.RecyclerView;
        import android.view.LayoutInflater;
        import android.view.View;
        import android.view.ViewGroup;
        import android.widget.ImageView;

        import com.quicktapgame.instagramlike.R;

public class ProfileLinearRecyclerViewAdapter extends RecyclerView.Adapter<ProfileLinearRecyclerViewAdapter.PostViewHolder> {

private Context mContext;
    private int[] mPlaceList;

    public ProfileLinearRecyclerViewAdapter(Context mContext, int[] mPlaceList) {
this.mContext = mContext;
        this.mPlaceList = mPlaceList;
}

@Override
public PostViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.profile_linear_recyclerview_item,
parent, false);
        return new PostViewHolder(view);
}

@Override
public void onBindViewHolder(final PostViewHolder holder, int position) {
        holder.mPlace.setImageResource(mPlaceList[position]);
}

@Override
public int getItemCount() {
return mPlaceList.length;
}


class PostViewHolder extends RecyclerView.ViewHolder {

        ImageView mPlace;

        public PostViewHolder(View itemView) {
super(itemView);
mPlace = itemView.findViewById(R.id.field_linear_item_pic);
}
    }
}

Baik dengan begitu usai sudah semua tampilan untuk series artikel Profile Instagram ini, selamat mencoba semoga bermanfaat 😊