how to change fragments when the first fragment is a map activity

Question

I have a map activity, which also contains a navigation drawer layout with items in the drawer. I want to be able to click an item in the drawer, and the item i choose opens an activity. I tried using startActivity to call the class in a separate page, but it distorted my xml file in my emulator. I also tried updateFragment(); but it showed my new class as an error. would anyone know what i can do? this is my MapActivity.java file

public class MapsActivity extends FragmentActivity {

private GoogleMap mMap; 
DrawerLayout drawerLayout;
ListView listView;
ActionBarDrawerToggle drawerToggle;
String[]items;
int selectedPosition=0;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_maps);
    setUpMapIfNeeded();

    items=getResources().getStringArray(R.array.options);
    drawerLayout=(DrawerLayout)findViewById(R.id.drawer_layout);
    listView=(ListView)findViewById(R.id.drawer_list);
    ArrayAdapter<String>adapter=new ArrayAdapter<String>(MapsActivity.this,R.layout.drawer_list_item,items);
    listView.setAdapter(adapter);
    drawerToggle=new ActionBarDrawerToggle(MapsActivity.this,drawerLayout,R.drawable.images,R.string.drawer_open,R.string.drawer_close){
        @Override
        public void onDrawerClosed(View drawerView) {
            super.onDrawerClosed(drawerView);
        }

        @Override
        public void onDrawerOpened(View drawerView) {
            super.onDrawerOpened(drawerView);
        }
    };
    drawerLayout.setDrawerListener(drawerToggle);
   // getActionBar().setHomeButtonEnabled(false);
  //  getActionBar().setDisplayHomeAsUpEnabled(false);
  //  getActionBar().setDisplayShowTitleEnabled(false);
   // getActionBar().setDisplayShowHomeEnabled(false);

    listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            selectedPosition = position;
            if (selectedPosition==2){
            startActivity(new Intent(MapsActivity.this, MenuActivity.class);

            }

           // updateFragment();
            drawerLayout.closeDrawer(listView);
        }
    });
   // selectedPosition=0;
   // updateFragment();
}

@Override
protected void onResume() {
    super.onResume();
    setUpMapIfNeeded();
}

private void setUpMapIfNeeded() {
    // Do a null check to confirm that we have not already instantiated the map.
    if (mMap == null) {
        // Try to obtain the map from the SupportMapFragment.
        mMap = ((SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map))
                .getMap();
        // Check if we were successful in obtaining the map.
        if (mMap != null) {
            setUpMap();
        }
    }
}

private void setUpMap() {
    mMap.addMarker(new MarkerOptions().position(new LatLng(0, 0)).title("Marker"));
}
   private void updateFragment() {
    FragmentManager fragmentManager=getFragmentManager();
    WebViewFragment rFragment=new WebViewFragment();

    Bundle data=new Bundle();
    data.putString("title",items[selectedPosition]);
    rFragment.setArguments(data);
    FragmentTransaction ft=fragmentManager.beginTransaction();
    ft.replace(R.id.content_frame,rFragment);
    ft.commit();



}

@Override
protected void onPostCreate(Bundle savedInstanceState) {
    super.onPostCreate(savedInstanceState);
    drawerToggle.syncState();
}
}

My MenuActivity.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"
tools:context="com.example.xxxxxx.qdoba.MenuFragment">

<!-- TODO: Update blank fragment layout -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:background="@drawable/woodcrop">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="MENU"
        android:id="@+id/textView"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:textStyle="bold"
        android:textSize="60dp"
        android:textColor="#ff912424" />

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true">

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="140dp"
            android:layout_marginTop="100dp">

            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:id="@+id/imageView"
                android:layout_marginTop="20dp"
                android:layout_marginLeft="20dp" />

            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:id="@+id/imageView2" 
                android:layout_marginTop="20dp"
                android:layout_marginLeft="30dp" />

            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:id="@+id/imageView3"
                android:layout_marginTop="20dp"
                android:layout_marginLeft="30dp" />
        </LinearLayout>

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="140dp"
            android:layout_gravity="center_horizontal">
            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:id="@+id/imageView4"
                android:layout_marginTop="20dp"
                android:layout_marginLeft="20dp" />

            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:id="@+id/imageView5"
                android:layout_marginTop="20dp"
                android:layout_marginLeft="30dp" />

            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:id="@+id/imageView6"
                android:layout_marginTop="20dp"
                android:layout_marginLeft="30dp" />
        </LinearLayout>

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="140dp"
            android:layout_gravity="center_horizontal">
            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:id="@+id/imageView7"
                android:layout_marginTop="20dp"
                android:layout_marginLeft="20dp" />

            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:id="@+id/imageView8"
                android:layout_marginTop="20dp"
                android:layout_marginLeft="30dp" />

            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:id="@+id/imageView9"
                android:layout_marginTop="20dp"
                android:layout_marginLeft="30dp" />
        </LinearLayout>

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="140dp"
            android:layout_gravity="center_horizontal">
            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:id="@+id/imageView10"
                android:layout_marginTop="20dp"
                android:layout_marginLeft="20dp" />

            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:id="@+id/imageView11"
                android:layout_marginTop="20dp"
                android:layout_marginLeft="30dp" />

            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:id="@+id/imageView12"
                android:layout_marginTop="20dp"
                android:layout_marginLeft="30dp" />
        </LinearLayout>
    </LinearLayout>

</RelativeLayout>

this is how it looks in the preview;

this is how it looks on the emulator :(

one image:

Answer 1

It happens because you are using layout_width="100dp" for every image view and 20dp of margin, so the final width of your layout bigger than screen width of device. You can see it if you change preview from Nexus 6 to Nexus One, for example.
You can use layout_weight parameter for every image or TableLayout with 3 columns, or you may try to use GridLayout.
Try this, for example.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:layout_weight="1"
        android:minHeight="50dp"
        />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:layout_weight="1"
        android:minHeight="50dp"
        />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:layout_weight="1"
        android:minHeight="50dp"
        />
</LinearLayout>

Or with same effect

<TableLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/textView"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:stretchColumns="*">

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <ImageView
                    android:id="@+id/imageView"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_margin="10dp"
                    android:layout_weight="1"
                    android:minHeight="50dp"
                    />

                <ImageView
                    android:id="@+id/imageView2"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_margin="10dp"
                    android:layout_weight="1"
                    android:minHeight="50dp"
                    />

                <ImageView
                    android:id="@+id/imageView3"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_margin="10dp"
                    android:layout_weight="1"
                    android:minHeight="50dp"
                    />
            </TableRow>
//your other rows
</TableLayout>