Fragment is not covering entire screen

Question

please help When I run my ListFragment actitivy and click on a fragment (either Buick or Mazda), the layout of the fragment I clicked on is supposed to replace and cover the entire screen but the container containing the list of cars stays on the screen and my fragment layout is shown below it. How can I make my fragment's layout replace the entire screen?

I couldn't post my AVD image showing the screen because I don't have enough reputatons to do but the screen was showing as below when I clicked on the first item on the list.

Buick Mazda

Hello! It's a Buick

my Mainactivity

package in.cars.demo;

import android.app.Activity;
import android.os.Bundle;

public class CarsMainActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

My ListFragment activity

package in.cars.demo;

import android.app.Fragment;
import android.app.FragmentTransaction;
import android.app.ListFragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ListAdapter;
import android.widget.ListView;
import android.widget.Toast;

public class CarsList extends ListFragment {

    String[] cars = new String[] { "Buick", "Mazda" };

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ListAdapter myListAdapter = new ArrayAdapter<String>(getActivity(), android.R.layout.simple_list_item_1, cars);
        setListAdapter(myListAdapter);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.cars_container, container, false);
    }

    @Override
    public void onListItemClick(ListView l, View v, int position, long id) {
        Toast.makeText(getActivity(), getListView().getItemAtPosition(position).toString(), Toast.LENGTH_LONG).show();
        switch (position) {
        case 0:
            Fragment fragment1 = new Fragment1();
            FragmentTransaction transaction1 = getFragmentManager().beginTransaction();
            transaction1.replace(R.id.car_fragment, fragment1);
            transaction1.addToBackStack(null);
            transaction1.commit();
            break;
        case 1:
            Fragment fragment2 = new Fragment2();
            FragmentTransaction transaction2 = getFragmentManager().beginTransaction();
            transaction2.replace(R.id.car_fragment, fragment2);
            transaction2.addToBackStack(null);
            transaction2.commit();
            break;
        }
    }
}

Fragment1

package in.cars.demo;

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

public class Fragment1 extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment1, container, false);
    }
}

Fragment2

package in.cars.demo;

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

public class Fragment2 extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment2, container, false);
    }
}

main.xml

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

    <fragment 
        android:id="@+id/car_fragment"
        android:name="in.cars.demo.CarsList"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        />
</LinearLayout>

cars_container.xml

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

     <ListView android:id="@id/android:list"
               android:layout_width="match_parent"
               android:layout_height="0dip"
               android:layout_weight="1"/>
 </LinearLayout>

fragment1.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"
    android:orientation="vertical" >
    <TextView
        android:id="@+id/frag1TV"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Hello! It's a Buick" />
</LinearLayout>

fragment2.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"
    android:orientation="vertical" >
    <TextView
        android:id="@+id/frag2TV"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Hello! It's a Mazda" />
</LinearLayout>

Answer 1

The problem is that you set the layout_height of your fragment to wrap_content in your main.xml. The visible size will be reduced to the actual size of the fragment.

Change it to match_parent to fill the whole screen:

...
<fragment 
    android:id="@+id/car_fragment"
    android:name="in.cars.demo.CarsList"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />
...

Furthermore use match_parent instead of fill_parent in apps with API Level 8+. See this question for more information.

Edit:

You have to change the container for the Fragments. The Fragment set with the tag will be static. Every fragment will be set in addition to this container. To have a dynamic approach use a FrameLayout. Now you can replace the fragment which was in there before.

...
<FrameLayout
    android:id="@+id/car_fragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
/>   
...

To show your CarsList you have to do a Fragment transaction in your Activity.

getFragmentManager() / getSupportFragmentManager()
.beginTransaction()
.replace(R.id.car_fragment, new CarsList())
.addToBackstack(null)
.commit();

Answer 2

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:clickable="true"
    android:orientation="vertical">

Try to setUp a color background to your fragment. In this way the background covers the entire space.

Answer 3

It is a little bit late, but maybe I will help someone else. The problem is with 'fragment' in your activity xml layout file (main.xml). You have to change:

<fragment 
    android:id="@+id/car_fragment"
    android:name="in.cars.demo.CarsList"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"/>

to

<fragment 
    android:id="@+id/car_fragment"
    android:name="in.cars.demo.CarsList"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>