Custom ArrayAdapter and Custom Layout

I am learning android programming online from udacity and this one lecture is very old and it is in Android Studio 1.0 and I am using ver 3.0.1 and that code is not working so i am trying to move with that code and have to change few thing but stuck.

Problem, I am facing is that I am trying to make custom ArrayAdapter and trying to get the custom xml layout in it but i can not find the name of my xml in the list. here are the codes so far.

Java files: CategoryAdapter.java, MainActivity.java, MainFragment.java

Layout files: activity_main.xml, fragment_main.xml, list_item_forecast.xml.

CategoryAdapter

package com.example.android.sunshine;

import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

/**
* Provides the appropriate {@link Fragment} for a view pager.
*/
public class CategoryAdapter extends FragmentPagerAdapter {

/**
 * Create a new {@link CategoryAdapter} object.
 *
 * @param mainActivity
 * @param fm is the fragment manager that will keep each fragment's state in the adapter
 */

    public CategoryAdapter(MainActivity mainActivity, FragmentManager fm) {
        super(fm);
    }

/**
 * Return the {@link Fragment} that should be displayed for the given page number.
 */

    @Override
    public Fragment getItem(int position) {
        return new MainFragment();
    }

/**
 * Return the total number of pages.
 */

    @Override
    public int getCount() {
        return 1;
    }
}

MainActivity

package com.example.android.sunshine;

import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

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

    // Set the content of the activity to use the activity_main.xml layout file
        setContentView(R.layout.activity_main);

    // Find the view pager that will allow the user to swipe between fragments
        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);

    // Create an adapter that knows which fragment should be shown on each page
        CategoryAdapter adapter = new CategoryAdapter(this, getSupportFragmentManager());

    // Set the adapter onto the view pager
        viewPager.setAdapter(adapter);
    }
}

MainFragment

package com.example.android.sunshine;

import android.content.Context;
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.ArrayAdapter;
import java.lang.reflect.Array;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import com.example.android.sunshine.R.layout;
import com.example.android.sunshine.MainFragment;

/**
* A simple {@link Fragment} subclass.
*/
public class MainFragment extends Fragment {

    ArrayAdapter<String> mForecastAdapter;

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

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    // Inflate the layout for this fragment
        String[] forecastArry = {
            "Today - Sunny - 88/63",
            "Tomorrow - Foggy - 70/40",
            "Wednesday - Cloudy - 72/63",
            "Thursday - Asteroids - 75/65",
            "Friday - Heavy Rain - 65/56",
            "Saturday - Help Trapped In WeatherStation - 60/51",
            "Sunday - Sunny - 80/68"
        };
        List<String> weekForecast = new ArrayList<String>(
            Arrays.asList(forecastArry));

        mForecastAdapter = new ArrayAdapter<String>(
            getContext(),
            R.layout.list_item_forecast,
            R.id.list_item_forecast_textview,
            weekForecast);

        return inflater.inflate(R.layout.fragment_main, container, false);
    }
}

this is where I am heaving problem mForecastAdapter = new ArrayAdapter(getContext(), R.layout.list_item_forecast, R.id.list_item_forecast_textview, weekForecast); I dont see list_item_forecast anywhere and it is in red. when i click on it it say create xml and when i say yes then it say already exists.

here are my xml layout codes

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
    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"
    tools:context="com.example.android.sunshine.MainActivity">

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

</android.support.constraint.ConstraintLayout>

fragment_main.xml

<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"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:paddingTop="16dp"
    android:paddingBottom="16dp"
    tools:context=".MainActivity">

    <ListView
        android:id="@+id/listview_forecast"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

 </FrameLayout>

list_item_forecast.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?android:attr/listPreferredItemHeight"
    android:gravity="center_vertical"
    android:id="@+id/list_item_forecast_textview" />

here you can see list_item_forecast root is TextView.