Загрузите ViewPager внутри TabLayout в DialogFragment

Question

Я создал диалоговое окно, в котором мне нужно выбрать цвета из разных категорий. Я создал TabLayout, чтобы я мог отображать категории и пользовательский ListView для отображения списка цветов.

После ознакомления с документацией я сделал диалог, но все, кроме ViewPager, видно. Нет ошибок, и вкладки тоже создаются.

Вот код:

DrawActivity. java:

FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
Fragment prev = getSupportFragmentManager().findFragmentByTag("select-color");
if (prev != null) {
   ft.remove(prev);
}
ft.addToBackStack(null);

DialogFragment colorSelect = new ColorSelectDialogFragment();
colorSelect.show(ft, "select-color");

ColorSelectDialogFragment. java:

public class ColorSelectDialogFragment extends DialogFragment {
    private HashMap<String, HashMap<String, String>> colorDb;
    private DrawActivity context;

    public ColorSelectDialogFragment() {
    }

    @Override
    public void onAttach(Context context) {
        super.onAttach(context);

        this.context = (DrawActivity) context;
        this.colorDb = this.context.colorDb;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        ViewGroup dialog = (ViewGroup) inflater.inflate(R.layout.fragment_color_select_dialog, container, true);

        TabLayout tabLayout = dialog.findViewById(R.id.tab_layout);

        final ViewPager viewPager = dialog.findViewById(R.id.view_pager);
        viewPager.setBackgroundColor(Color.GREEN);

        ColorFragmentPagerAdapter colViewPagerAdapter = new ColorFragmentPagerAdapter(context, colorDb);
        viewPager.setAdapter(colViewPagerAdapter);
        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                viewPager.setCurrentItem(tab.getPosition());
                System.out.println("tab changed");
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
        tabLayout.setupWithViewPager(viewPager);
        return dialog;
    }
}

frag_color_select_dialog. xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="wrap_content"

    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".ColorSelectDialogFragment">


    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="scrollable"

        app:tabTextColor="@color/light_grey"
        android:background="@color/toolbar_grey"
        app:tabSelectedTextColor="@color/white"
        app:tabIndicatorColor="@color/back_grey"
        >
    </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="400dp"

        >

    </android.support.v4.view.ViewPager>

</LinearLayout>

ColorFragmentPagerAdapter. java :

public class ColorFragmentPagerAdapter extends PagerAdapter {
    DrawActivity context;
    HashMap<String, HashMap<String, String>> colorDb;
    public ColorFragmentPagerAdapter(DrawActivity context, HashMap<String, HashMap<String, String>> colorDb) {
//        super(fm);
        this.context = context;
        this.colorDb = colorDb;
        System.out.println("ColorFragmentPagerAdapter initialized");
    }


    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        System.out.println("ColorFragmentPagerAdapter getItem position : " + position);
        switch(position){
            case 0:
                return createView(container, "Landscape");
            case 1:
                return createView(container, "Animals");
            case 2:
                return createView(container, "Outdoor Objects");
            case 3:
                return createView(container, "Vehicles");
            case 4:
                return createView(container, "Indoor Objects");
            case 5:
                return createView(container, "Ornaments");
            case 6:
                return createView(container, "Eatables");
            case 7:
                return createView(container, "Misc.");
            default:
                return null;
        }
    }

    private View createView(ViewGroup container, String category){
        View tabLayout = context.getLayoutInflater().inflate(R.layout.color_list, container, true);
        ListView colorListView = tabLayout.findViewById(R.id.colorListView);
        colorListView.setAdapter(new ColorListAdapter(context, colorDb.get(category)));
        return tabLayout;
    }


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

    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object o) {
        return view == o;
    }


    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        switch(position){
            case 0:
                return "Landscape";
            case 1:
                return "Animals";
            case 2:
                return "Outdoor Objects";
            case 3:
                return "Vehicles";
            case 4:
                return "Indoor Objects";
            case 5:
                return "Ornaments";
            case 6:
                return "Eatables";
            case 7:
                return "Misc.";
            default:
                return null;
        }
    }

    @Override
    public void destroyItem(ViewGroup collection, int position, Object view) {
        collection.removeView((View) view);
    }

}

color_list. xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="bla"/>

    <ListView
        android:id="@+id/colorListView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>

ColorListAdapter. java:

public class ColorListAdapter extends ArrayAdapter {
    private String[] labels;
    private String[] colors;
    private final DrawActivity context;

    ColorListAdapter(DrawActivity context, Map<String, String> colors){
        super(context,R.layout.color_row, colors.keySet().toArray(new String[10]));
        System.out.println("color list adapter constructor called :: " + colors.keySet().toArray(new String[10]).length);
        this.context = context;
        this.labels = colors.keySet().toArray(new String[10]);
        this.colors = colors.values().toArray(new String[10]);
    }

    @NonNull
    @Override
    public View getView(final int position, @Nullable View convertView, @NonNull final ViewGroup parent) {
        LayoutInflater inflater=context.getLayoutInflater();
        View rowView = inflater.inflate(R.layout.color_row, null,true);

        ImageView colorDisplay = rowView.findViewById(R.id.color_row_display);
        TextView colorName = rowView.findViewById(R.id.color_row_name_display);

        int color = Color.parseColor(colors[position]);
        Drawable unwrappedDrawable = colorDisplay.getDrawable();
        Drawable wrappedDrawable = DrawableCompat.wrap(unwrappedDrawable);
        DrawableCompat.setTint(wrappedDrawable, color);
        colorDisplay.setImageDrawable(wrappedDrawable);
        colorName.setText(labels[position]);
        rowView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                context.setColor(colors[position]);

            }
        });

        return rowView;
    }
}

color_row. xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:paddingHorizontal="10dp"
    android:gravity="center_vertical">

    <ImageView
        android:id="@+id/color_row_display"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:src="@drawable/ic_color_chosen"
        android:tint="@color/colorPrimaryDark"
        android:layout_margin="5dp"
        />

    <TextView
        android:id="@+id/color_row_name_display"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="unlabelled"
        android:textSize="20sp"
        android:layout_marginHorizontal="10dp"
        android:fontFamily="monospace"
        />

</LinearLayout>

Может кто-нибудь сказать мне, что я здесь не так делаю? Изменить: Вот мой репозиторий GitHub - https://github.com/jeromenicholas07/sketchola.git