ViewPager and its Indicator are not visible

Question

I'm trying to display some news using CardView. On top of those, there will be a ViewPager and ViewPager Indicator, for displaying ads. These are the relevant codes.

fragment_news.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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="net.devbyzero.app.school.fragment.NewsFragment">


    <!-- for displaying ads -->
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

    <LinearLayout
        android:id="@+id/llDots"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:orientation="horizontal" >
    </LinearLayout>


    <!-- for displaying news -->
    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
                <android.support.v7.widget.RecyclerView
                    android:id="@+id/news_list"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    />
        </LinearLayout>

</FrameLayout>

vp_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    android:padding="10dp" >

    <ImageView
        android:id="@+id/flag"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:contentDescription="@string/app_name"
        android:padding="1dp" />

</RelativeLayout>

ViewPagerAdapter.java

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;

public class ViewPagerAdapter extends PagerAdapter {

    Context context;
    int[] flag;
    LayoutInflater inflater;

    public ViewPagerAdapter(Context context, int[] flag){
        this.context = context;
        this.flag = flag;
    }

    @Override
    public int getCount() {
        return flag.length;
    }

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

    @Override
    public float getPageWidth(int position) {
        return 0.7f;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        ImageView imgflag;

        inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View itemView = inflater.inflate(R.layout.vp_item, container,false);

        // Locate the ImageView in vp_item.xml
        imgflag = (ImageView) itemView.findViewById(R.id.flag);
        // Capture position and set to the ImageView
        imgflag.setImageResource(flag[position]);

        // Add viewpager_item.xml to ViewPager
        ((ViewPager) container).addView(itemView);

        return itemView;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        // Remove viewpager_item.xml from ViewPager
        ((ViewPager) container).removeView((RelativeLayout) object);
    }
}

NewsFragment.java

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.DefaultItemAnimator;
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 android.widget.ImageButton;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;

import net.devbyzero.app.school.NewsListAdapter;
import net.devbyzero.app.school.R;
import net.devbyzero.app.school.ViewPagerAdapter;
import net.devbyzero.app.school.data.NewsProvider;

import java.util.ArrayList;

public class NewsFragment extends Fragment {

    private RecyclerView recView;
    private NewsListAdapter adapter;
    private ViewPager vPager;
    private PagerAdapter pAdapter;
    private LinearLayout llDots;

    public static NewsFragment newInstance(String param1, String param2){
        NewsFragment fragment = new NewsFragment();
        return fragment;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.fragment_news, container, false);
        recView = (RecyclerView) view.findViewById(R.id.news_list);
        recView.setLayoutManager(new LinearLayoutManager(getActivity()));

        vPager = (ViewPager) view.findViewById(R.id.pager);
        llDots = (LinearLayout) view.findViewById(R.id.llDots);
        int[] banners = new int[]{R.drawable.banner1, R.drawable.banner2, R.drawable.banner3};
        pAdapter = new ViewPagerAdapter(getActivity(), banners);
        vPager.setAdapter(pAdapter);

        for (int x = 0; x < pAdapter.getCount(); x++){
            ImageButton imgDot = new ImageButton(getActivity());
            imgDot.setTag(x);
            imgDot.setImageResource(R.drawable.dot_selector);
            imgDot.setBackgroundResource(0);
            imgDot.setPadding(5, 5, 5, 5);
            LayoutParams params = new LayoutParams(20, 20);
            imgDot.setLayoutParams(params);
            if(x == 0) imgDot.setSelected(true);
            llDots.addView(imgDot);
        }

        ((AppCompatActivity)getActivity()).getSupportActionBar().setTitle("News");

        adapter = new NewsListAdapter(new NewsProvider().getNews());
        recView.setAdapter(adapter);
        return view;
    }
}

The CardView part works fine. But not with the ViewPager and the Indicator. They are not shown at all. Weird. BTW, the ViewPager code are taken from this site.

How to fix this, then?

Answer 1

Use LinearLayout in place of FrameLayout with vertical orientation

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="3">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1.5"
        android:orientation="vertical"
        android:weightSum="1.5">

        <!-- for displaying ads -->
        <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1.0" />

        <LinearLayout
            android:id="@+id/llDots"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_weight="0.5"
            android:gravity="center"
            android:background="@android:color/black"
            android:orientation="horizontal" />

    </LinearLayout>


    <!-- for displaying news -->
    <android.support.v7.widget.RecyclerView
        android:id="@+id/news_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1.5" />


</LinearLayout>

you can manage weight value according to need of space for particular widget.