Android tabs show new fragment on listview click

Question

I'm a total newbie and I'm trying to learn android development so sorry if this question is already asked

I just made a new app showing 2 tabs, a listview, and an options page, both are working fine but I want to show a new fragment (the item details) when the user selects an item from the listview

I know I have to add the code inside the onClickListener, but I don't know what I need to add... or anyone knows a tutorial I can read to accomplish this?

Thanks for your help

Here is my first fragment (hotelsFragment.java)

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ListAdapter;
import android.widget.ListView;

public class hotelsFragment extends Fragment {

    String[] hotels = {"Hotel 1", "Hotel 2", "Hotel 3", "Hotel 4", "Hotel 5", "Hotel 6"};

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.hoteles_fragment, container, false);
        ListView hotelsListView = (ListView) view.findViewById(R.id.hotelslist);

        ListAdapter hotelsListAdapter = new hotelsAdapter(getContext(), hotels);
        hotelsListView.setAdapter(hotelsListAdapter);

        hotelsListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int position, long id) {
                // I want to show a new fragment in here
            }
        });

        return view;
    }

}

Its xml:

<RelativeLayout 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="com.miempresaenlanube.hoteles360.MainActivity$PlaceholderFragment">


    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/hotelslist"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true" />

</RelativeLayout>

This is the class of the fragment i want to show:

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class hotelMainFragment extends Fragment {

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

        return view;
    }

}

and its XML

<?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"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">


    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/hotel"
        android:id="@+id/imageView2"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true"
        android:scaleType="centerCrop" />
</RelativeLayout>

Main Activity 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:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.miempresaenlanube.hoteles360.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/appbar_padding_top"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay">

        </android.support.v7.widget.Toolbar>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

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

    <android.support.v4.view.ViewPager
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="?attr/actionBarSize"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

Answer 1

hotelsListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> adapterView, View view, int position, long id) {
            FragmentTransaction fragmentTransaction = getChildFragmentManager().beginTransaction();
    fragmentTransaction.add(R.id.container, new hotelMainFragment()).commit();
                      -or-
    fragmentTransaction.add(new hotelMainFragment(), tag).commit();
        }
    });    

container = was frame layout of your activity where you want to push fragment

Answer 2

You can use Nested Fragments, i.e Use ItemsDetails as ChildFragment when you click an item of listview.

Example:

FragmentTransaction transaction = getChildFragmentManager().beginTransaction();
transaction.add(R.id.yourlayoutview, yourFragment).commit();

Link: https://developer.android.com/about/versions/android-4.2.html#NestedFragments