Fragment is occupying full screen in activity

Question

I am stuck at this point where I am adding a Fragment in a NavigationDrawer activity. When the activity displays the fragment, the fragment bumps up the whole screen as shown in the image below:

The expected behaviour is as shown in the image below.

I am using databinding with a RecyclerView. StockListItem is the POJO class used for accessing data in RecyclerView and stock_list_item_layout is the layout used for displaying list items in RecylerView.

public class MainActivity extends AppCompatActivity
    implements NavigationView.OnNavigationItemSelectedListener {
    private RecyclerViewAdapter adapter;
    DrawerLayout drawer;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        drawer  = (DrawerLayout) findViewById(R.id.drawer_layout);

        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, drawer, toolbar, R.string.navigation_drawer_open, 
    R.string.navigation_drawer_close);
        drawer.addDrawerListener(toggle);
        toggle.syncState();

        NavigationView navigationView = (NavigationView) 
    findViewById(R.id.nav_view);
        navigationView.setNavigationItemSelectedListener(this);
        getSupportFragmentManager().beginTransaction().add(R.id.flContainer,new 
    WatchlistFragment()).commit();

    }
}

public class WatchlistFragment extends Fragment {

    private FragmentWatchlistBinding watchlistBinding;
    private RecyclerViewAdapter adapter;
    private List<StockListItem> lstStockItems = new ArrayList<>();

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


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View v = inflater.inflate(R.layout.fragment_watchlist, container, 
    false);
        Toast.makeText(getActivity(), "Reached WatchlistFragment.", 
    Toast.LENGTH_SHORT).show();
        watchlistBinding = 
    DataBindingUtil.setContentView(getActivity(),R.layout.fragment_watchlist);
        watchlistBinding.rvMyRecyclerView.setLayoutManager(new 
    LinearLayoutManager(getActivity()));
        watchlistBinding.rvMyRecyclerView.setHasFixedSize(false);

        lstStockItems.add(new StockListItem("Vedanta 
    Ltd","174.45","+5.35","+3.45"));
        lstStockItems.add(new StockListItem("Eicher Motors 
    Ltd","19974.45","+545.35","+13.45"));
        lstStockItems.add(new StockListItem("Adani Green Energy 
    Ltd","34.45","+5.35","+3.45"));
        lstStockItems.add(new StockListItem("Federal Bank 
    Ltd","84.45","+5.35","+3.45"));
        lstStockItems.add(new StockListItem("Hindustan Zinc 
    Ltd","274.45","+5.35","+3.45"));
        lstStockItems.add(new StockListItem("Indian Oil Corporation 
    Ltd","154.45","+5.35","+3.45"));
        lstStockItems.add(new StockListItem("Hindustan Petroleum Corporation 
    Ltd","154.45","+5.35","+3.45"));
        lstStockItems.add(new StockListItem("ITC 
    Ltd","274.45","+5.35","+3.45"));
        adapter = new RecyclerViewAdapter(getActivity(),lstStockItems);
        watchlistBinding.rvMyRecyclerView.setAdapter(adapter);
        return v;
    }}

This is what my fragment_watchlist.xml looks like.

<?xml version="1.0" encoding="utf-8"?>
<layout >
    <FrameLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        tools:context=".WatchlistFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:orientation="vertical"
            android:layout_height="wrap_content">
            <TextView
                android:text="Watchlist"
                android:gravity="center"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
            <android.support.v7.widget.RecyclerView
                android:id="@+id/rvMyRecyclerView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>
        </LinearLayout>
    </FrameLayout>
</layout>

---

public class RecyclerViewAdapter extends 
    RecyclerView.Adapter<RecyclerViewAdapter.MyViewHolder> {

    private Context ctx;
    private List<StockListItem> lstUsers = new ArrayList<>();
    public RecyclerViewAdapter(Context ctx, List<StockListItem> lstUsers) {
        this.ctx = ctx;
        this.lstUsers = lstUsers;
    }

    @NonNull
    @Override
    public RecyclerViewAdapter.MyViewHolder onCreateViewHolder(@NonNull 
    ViewGroup viewGroup, int i) {

        StockListItemLayoutBinding stockListItemLayoutBinding = 
    DataBindingUtil.inflate(LayoutInflater.from(viewGroup.getContext()), 
    R.layout.stock_list_item_layout,viewGroup,false);

        MyViewHolder myViewHolder = new 
    MyViewHolder(stockListItemLayoutBinding);
        return myViewHolder;
    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerViewAdapter.MyViewHolder 
    viewHolder, int i) {
        StockListItem stockListItem = lstUsers.get(i);
        viewHolder.stockListItemLayoutBinding.setStock(stockListItem);
    }

    @Override
    public int getItemCount() {
        return lstUsers.size();
    }

    public static class MyViewHolder extends RecyclerView.ViewHolder
    {
        StockListItemLayoutBinding stockListItemLayoutBinding;
        public MyViewHolder(@NonNull StockListItemLayoutBinding 
    stockListItemLayoutBinding) {
            super(stockListItemLayoutBinding.getRoot());
            this.stockListItemLayoutBinding = stockListItemLayoutBinding;

        }
    }
}

---

public class StockListItem
{
    private String StockName;
    private String StockPrice;
    private String StockPriceChange;
    private String StockPriceChangePercent;


    public String getStockPriceChange() {
        return StockPriceChange;
    }

    public String getStockPriceChangePercent() {
        return StockPriceChangePercent;
    }

    public void setStockPriceChange(String stockPriceChange) {
        StockPriceChange = stockPriceChange;
    }

    public void setStockPriceChangePercent(String stockPriceChangePercent) {
        StockPriceChangePercent = stockPriceChangePercent;
    }

    public void setStockName(String stockName) {
        StockName = stockName;
    }

    public void setStockPrice(String stockPrice) {
        StockPrice = stockPrice;
    }

    public String getStockName() {
        return StockName;
    }

    public String getStockPrice() {
        return StockPrice;
    }

    public StockListItem(String stockName, String stockPrice, String 
    stockPriceChange, String stockPriceChangePercent) {
        this.StockName = stockName;
        this.StockPrice = stockPrice;
        this.StockPriceChange = stockPriceChange;
        this.StockPriceChangePercent = stockPriceChangePercent;
    }
}

This is what stock_list_item_layout.xml looks like.

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">
    <data>
        <variable
            type="com.example.mvp1stockmeter.StockListItem"
            name="Stock"/>
    </data>

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:foreground="?attr/selectableItemBackground"
        android:layout_margin="4dp">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <TextView
                android:id="@+id/tvStockName"
                android:layout_margin="16dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@{Stock.StockName}"
                android:layout_alignParentLeft="true"/>
            <LinearLayout
                android:orientation="vertical"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:gravity="right">
                <TextView
                    android:id="@+id/tvStockPrice"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="2dp"
                    android:text="@{Stock.StockPrice}"
                    android:textSize="20sp"
                    />
                <LinearLayout
                    android:orientation="horizontal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">
                    <TextView
                        android:id="@+id/tvStockPriceChange"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_margin="2dp"
                        android:text="@{Stock.StockPriceChange}"
                        android:textSize="16sp"
                        android:layout_alignParentRight="true"/>
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_margin="2dp"
                        android:text="("
                        android:textSize="16sp"/>
                    <TextView
                        android:id="@+id/tvStockPriceChangePercent"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="2dp"
                        android:text="@{Stock.StockPriceChangePercent}"
                        android:textSize="16sp"
                        />
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_margin="2dp"
                        android:text="%)"
                        android:textSize="16sp" />
                </LinearLayout>

            </LinearLayout>

        </RelativeLayout>
    </android.support.v7.widget.CardView>
</layout>

This is what my activity_main.xml looks like. -

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity"
    tools:showIn="@layout/app_bar_main"
    android:orientation="vertical">

    <FrameLayout
        android:visibility="visible"
        android:id="@+id/flContainer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </FrameLayout>

</LinearLayout>

---

app_bar_main.xml layout file looks like-

<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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    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:popupTheme="@style/AppTheme.PopupOverlay" />

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

<include layout="@layout/content_main" />

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

The content_main.xml file looks like this-

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:showIn="@layout/app_bar_main"
android:orientation="vertical">


<FrameLayout
    android:visibility="visible"
    android:id="@+id/flContainer"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="?attr/actionBarSize">
</FrameLayout>
</LinearLayout>

This is how my nav_header_main.xml file looks like-

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="@dimen/nav_header_height"
android:background="@drawable/side_nav_bar"
android:gravity="bottom"
android:orientation="vertical"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
android:theme="@style/ThemeOverlay.AppCompat.Dark">

<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@string/app_name"
    android:paddingTop="@dimen/nav_header_vertical_spacing"
    app:srcCompat="@mipmap/ic_launcher_round" />

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="@dimen/nav_header_vertical_spacing"
    android:text="@string/app_name"
    android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/website" />

</LinearLayout>

This is how my activity_main_drawer.xm file looks like-

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:showIn="navigation_view">

<group android:checkableBehavior="single">
    <item
        android:id="@+id/nav_watchlist"
        android:icon="@drawable/ic_menu_camera"
        android:title="Watchlist" />

    <item
        android:id="@+id/nav_profile"
        android:icon="@drawable/ic_menu_manage"
        android:title="Profile" />
    <item
        android:id="@+id/nav_suggestions_or_complaints"
        android:icon="@drawable/ic_menu_manage"
        android:title="Suggestions / Complaints" />
    <item
        android:id="@+id/nav_upcoming_features"
        android:icon="@drawable/ic_menu_manage"
        android:title="Upcoming Features" />
</group>
</menu>

This is how my main.xml file looks like -

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
    android:id="@+id/action_settings"
    android:orderInCategory="100"
    android:title="@string/action_settings"
    app:showAsAction="never" />
</menu>

Answer 1

Just add android:layout_marginTop="?attr/actionBarSize" in your activity_main's FrameLayout , like this:

 <FrameLayout
        android:visibility="visible"
        android:layout_marginTop="?attr/actionBarSize"
        android:id="@+id/flContainer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </FrameLayout>