Layout for tablets using two fragments

Question

I am doing a sample project as an excercise and want to display two fragments in the same activity when dealing with tablets(7' and 10').

So what I have so far is this.

As you can see I can display the data of my recyclerview in the left (static) fragment. However the right fragment is empty.

So I have two questions.

1) How to display by default in the right fragment the data of the first row of recyclerview?(ie image and article)

2) How to implement the click listener and update the right fragment?

Here is my code:

MainActivity

public class MainActivity extends AppCompatActivity {
private boolean mTwoPane;
private static final String DETAIL_FRAGMENT_TAG = "DFTAG";

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

    if(findViewById(R.id.detailed_match_reports)!=null) {
        mTwoPane = true;

        if (savedInstanceState == null) {
            getSupportFragmentManager()
                    .beginTransaction()
                    .replace(R.id.detailed_match_reports, new DetailedActivityFragment(),DETAIL_FRAGMENT_TAG)
                    .commit();
        }else{
            mTwoPane = false;
        }
     }
  }

}

layout/activity_main.xml

<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/match_reports"
android:name="theo.testing.androidservices.fragments.MainActivityFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
tools:context="theo.testing.androidservices.activities.MainActivity"
tools:layout="@android:layout/list_content" />

layout-sw600dp/activity_main

<LinearLayout 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"
android:baselineAligned="false"
android:divider="?android:attr/dividerHorizontal"
android:orientation="horizontal"
tools:context="theo.testing.androidservices.activities.MainActivity">

<fragment
    android:id="@+id/match_reports"
    android:name="theo.testing.androidservices.fragments.MainActivityFragment"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="2"
    tools:layout="@android:layout/list_content" />

<FrameLayout
    android:id="@+id/detailed_match_reports"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="4" />


</LinearLayout>

MainActivityFragment

public class MainActivityFragment extends Fragment {
public static final String TAG = "AelApp";
public static ArrayList<MyModel> listItemsList;
RecyclerView myList;
public static MatchReportsAdapter adapter;

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

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    updateMatchReport();
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    // Inflate the layout for this fragment
    getActivity().setTitle("Match Report");

    View rootView = inflater.inflate(R.layout.fragment_main_activity, container, false);
    listItemsList = new ArrayList<>();

    myList = (RecyclerView)rootView.findViewById(R.id.listview_match_reports);
    final LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getActivity());
    myList.setHasFixedSize(true);
    myList.setLayoutManager(linearLayoutManager);
    adapter = new MatchReportsAdapter(getActivity(), listItemsList);
    myList.setAdapter(adapter);

    return rootView;
}

public void updateMatchReport(){
    Intent i = new Intent(getActivity(), MatchReport.class);
    getActivity().startService(i);
 }

}

Answer 1

First let me answer the second question. To show a fragment on the right side of the screen add something like this (note how I'm using that id of the frame layout to replace the fragment):

Fragment fragment = new MyRightSideFragment();
FragmentManager fm = getFragmentManager();
fm.beginTransaction().replace(R.id.detailed_match_reports, fragment).commit();

Now, for the first question, you need to implement click listener, you can find an example here.

public class ReactiveAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {

    @Override 
    public void onBindViewHolder(final ViewHolder holder, int position) {
        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
               int position = (Integer)v.getTag();
               showDetail(position);
            }
        });
    }
}

Notice that I'm using the tag of the view to identify the position (so somwhere in your onBindViewHolder code you must set this tag).

public function showDetail(int position) {
    ... show fragment por position
}

and finally, when your in your OnCreateView or somewhere in your setup code, call showDetail(0).