Facebook Login Button Appears Over Navigation Drawer

Question

I'm trying to implement the facebook login tutorial, along with a navigation drawer. I managed to create the drawer successfully, but when I tried it on the emulator, the facebook login button appears over the drawer, even though it is part of another layout (fragment). Here's my MainActivity layout:

<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- The main content view -->
<FrameLayout
    android:id="@+id/content_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<!-- The navigation drawer -->
<ListView android:id="@+id/left_drawer"
    android:layout_width="240dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:choiceMode="singleChoice"
    android:divider="#ff939393"
    android:dividerHeight="1dp"
    android:background="#ff333333"/>

</android.support.v4.widget.DrawerLayout>

And here is my fragment layout:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/facebook_login_view"
android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
android:weightSum="1">

<com.facebook.widget.LoginButton android:id="@+id/authButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:gravity="center|center_horizontal"
    android:layout_marginTop="40dp" />

<TextView
    android:id="@+id/textView"
    android:layout_width="312dp"
    android:layout_height="101dp"
    android:text="@string/please_login_with_facebook"
    android:padding="10dp"
    android:textStyle="bold"
    android:typeface="serif"
    android:singleLine="false"
    android:layout_weight="0.13"
    android:textAlignment="center"
    android:gravity="center"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="150dp" />

<Button android:id="@+id/connection_settings_button"
    android:layout_width="188dp"
    android:layout_height="wrap_content"
    android:text="@string/turn_on_internet_button"
    android:layout_gravity="center"
    android:layout_marginTop="36dp"
    android:visibility="invisible" />
</FrameLayout>

And this is the MainActivity class:

public class MainActivity extends ActionBarActivity {

private String[] mDrawerTitles;
private DrawerLayout mDrawerLayout;
private ListView mDrawerList;
private FacebookLoginFragment fbFragment;

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

    mDrawerTitles = getResources().getStringArray(R.array.nav_drawer_items);
    mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    mDrawerList = (ListView) findViewById(R.id.left_drawer);
    // Set the adapter for the list view
    mDrawerList.setAdapter(new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1, mDrawerTitles));
    // Set the list's click listener
    mDrawerList.setOnItemClickListener(new DrawerItemClickListener());

    if (savedInstanceState == null) {
        // Add the fragment on initial activity setup
        fbFragment = new FacebookLoginFragment();
        getSupportFragmentManager()
                .beginTransaction()
                .add(android.R.id.content, fbFragment)
                .commit();
    } else {
        // Or set the fragment from restored state info
        fbFragment = (FacebookLoginFragment) getSupportFragmentManager().findFragmentById(android.R.id.content);
    }
}

private class DrawerItemClickListener implements ListView.OnItemClickListener {
    @Override
    public void onItemClick(AdapterView parent, View view, int position, long id) {
        selectItem(position);
    }
}


private void selectItem(int position) {
    // Highlight the selected item, update the title, and close the drawer
    mDrawerList.setItemChecked(position, true);
    setTitle(mDrawerTitles[position]);
    mDrawerLayout.closeDrawer(mDrawerList);
}


@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();
    if (id == R.id.action_settings) {
        return true;
    }
    return super.onOptionsItemSelected(item);
}
}

I'll post more code if necessary. Unfortunately I still don't have the reputation to post images, but here is my problem. Any help is very appreciated!

Answer 1

When you FragmentTransaction.replace your FacebookLoginFragment, don't use the id android.R.id.content. Instead use the id of the FrameLayout that acts as the content of your DrawerLayout, which in this case is R.id.content_frame.