Android Navigation Drawer Fragment

Question

I want to create a music player app which includes a navigation drawer which has been created by DEFAULT in Android Studio. I want to display content only in a fragment. For e.g the media controls or songs list needs to be in the fragment. On clicking on any Navigation Menu Item, it has to replace old fragment with new fragment with the Actionbar being intact. However, i am not sure how to move forward. Presently, the content_main.xml opens up via activity_main.xml. PLEASE HELP !! activity_main.xml

 <?xml version="1.0" encoding="utf-8"?>
 <android.support.v4.widget.DrawerLayout
 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:id="@+id/drawer_layout"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:fitsSystemWindows="true"
 tools:openDrawer="start">

    <!-- The ActionBar -->
 <include layout="@layout/app_bar_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    />

    <!-- The main content view -->
    <FrameLayout
        android:id="@+id/flContent"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </FrameLayout>

    <android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:background="#17BAFF"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/nav_header_main"
    app:menu="@menu/activity_main_drawer" />

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

app_bar_main.xml

   <?xml version="1.0" encoding="utf-8"?>
   <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"
   android:fitsSystemWindows="true"
   tools:context=".MainActivity">

  <android.support.design.widget.AppBarLayout
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    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="@android:color/transparent"
        android:theme="@style/AppTheme.AppBarOverlay"
        app:popupTheme="@style/AppTheme.PopupOverlay">
    </android.support.v7.widget.Toolbar>

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

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

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

content_main.xml contains the media controls that opens on starting the app.

MainActivity.java

 package com.music.app.shamaj.flickplay;
 import android.app.Fragment;
 import android.app.FragmentManager;
 import android.content.Intent;
 import android.content.res.ColorStateList;
 import android.graphics.Color;
 import android.os.Bundle;
 import android.support.design.widget.NavigationView;
 import android.support.v4.app.FragmentActivity;
 import android.support.v4.app.FragmentTransaction;
 import android.support.v4.view.GravityCompat;
 import android.support.v4.widget.DrawerLayout;
 import android.support.v7.app.ActionBar;
 import android.support.v7.app.ActionBarDrawerToggle;
 import android.support.v7.app.AppCompatActivity;
 import android.support.v7.widget.Toolbar;
 import android.view.Menu;
 import android.view.MenuItem;
 import android.widget.ImageButton;
 import android.widget.SeekBar;

 import static android.app.PendingIntent.getActivity;

 public class MainActivity extends AppCompatActivity
    implements NavigationView.OnNavigationItemSelectedListener {
 ImageButton shuffle,back,play,next,repeat;
 SeekBar songprogress;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    shuffle=(ImageButton)findViewById(R.id.shuffle);
    back=(ImageButton)findViewById(R.id.back);
    play=(ImageButton)findViewById(R.id.play);
    next=(ImageButton)findViewById(R.id.next);
    repeat=(ImageButton)findViewById(R.id.repeat);
    songprogress=(SeekBar)findViewById(R.id.songProgressBar);
    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);


    setSupportActionBar(toolbar);
    getSupportActionBar().setDisplayShowHomeEnabled(true);
    getSupportActionBar().setLogo(R.drawable.title_bar);
    getSupportActionBar().setDisplayUseLogoEnabled(true);



    ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
            this, drawer, toolbar, R.string.navigation_drawer_open,         R.string.navigation_drawer_close);
    drawer.setDrawerListener(toggle);
    toggle.syncState();

    NavigationView navigationView = (NavigationView)      findViewById(R.id.nav_view);
    navigationView.setNavigationItemSelectedListener(this);
    navigationView.setItemTextColor(ColorStateList.valueOf(Color.WHITE));
    }

    @Override
    public void onBackPressed() {
    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
    if (drawer.isDrawerOpen(GravityCompat.START)) {
        drawer.closeDrawer(GravityCompat.START);
    } else {
        super.onBackPressed();
    }
    }

    @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();

    //noinspection SimplifiableIfStatement
    if (id == R.id.action_search) {
        return true;
    }

    return super.onOptionsItemSelected(item);
   }

   @SuppressWarnings("StatementWithEmptyBody")
   @Override
   public boolean onNavigationItemSelected(MenuItem item) {
    // Handle navigation view item clicks here.
    int id = item.getItemId();

    if (id == R.id.nav_albums) {

    } else if (id == R.id.nav_artists) {

    } else if (id == R.id.nav_playlists) {

    } else if (id == R.id.nav_songs) {


    } else if (id == R.id.nav_share) {

    }


    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
    drawer.closeDrawer(GravityCompat.START);
    return true;
}
}

activity_main_drawer.xml

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

<group android:checkableBehavior="single"
    >
    <item android:id="@+id/nav_albums"
        android:icon="@drawable/albums"
        android:title="Albums"

        />
    <item android:id="@+id/nav_artists"

        android:icon="@drawable/artists"
        android:title="Artists" />
    <item android:id="@+id/nav_playlists"
        android:icon="@drawable/playlists"
        android:title="Playlists" />
    <item android:id="@+id/nav_songs"
        android:icon="@drawable/songs"
        android:title="Songs" />
 </group>

 <item android:title="Liked the app ?">
    <menu>
        <item android:id="@+id/nav_share"                  android:icon="@android:drawable/ic_menu_share"
            android:title="Share with Friends" />

    </menu>
    </item>
    </menu>

you have created fragment all fragments like song list and media control etc. right? — V-rund Puro-hit, Oct 06 '15 at 08:54

Aniruddha K.M · Accepted Answer · 2015-10-06T08:46:05.977

i have done it like this, i have used navigation view. based on the id change your action.

NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
        if (navigationView != null) {
            setupDrawerContent(navigationView);

    }

    private void setupDrawerContent(NavigationView navigationView) {
        navigationView.setNavigationItemSelectedListener(
                new NavigationView.OnNavigationItemSelectedListener() {
                    @Override
                    public boolean onNavigationItemSelected(MenuItem menuItem) {                            
                        switch (menuItem.getItemId()) {
                            case R.id.action_settings:
                                menuItem.setChecked(true);
                                drawerLayout.closeDrawers();
                                doFragmentTransaction();
                        }
                        return true;
                    }
                });
    }

This is my toolbar layout

<?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">

    <android.support.v7.widget.Toolbar
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/tool_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/primary"
        android:elevation="2dp"
        android:theme="@style/Base.ThemeOverlay.AppCompat.Dark" />


    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:background="@android:color/holo_red_dark"
        android:layout_height="match_parent" />

</LinearLayout>

This is my main.xml

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

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


    <!-- The navigation drawer -->

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/menu_main" />


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

I am able to replace the old fragment (i.e the Media player) with the new fragment content (Songs list). But the problem is on the songs list fragment, the action bar doesn't show. — Sha, Oct 06 '15 at 08:36
Since, the app_bar_main.xml has ,the action bar is displayed only for the content_main. — Sha, Oct 06 '15 at 08:39
Just one more doubt. How to display content_main.xml in the fragment on starting the app? — Sha, Oct 06 '15 at 09:17
dont do it that do fragment transaction in onstart/oncreate of activity — Aniruddha K.M, Oct 06 '15 at 09:19
ok sure no worries... also upvote the answer as it might be helpful to other people — Aniruddha K.M, Oct 06 '15 at 09:50
Please help me with this code. http://stackoverflow.com/questions/32984317/android-music-player — Sha, Oct 07 '15 at 05:17

score 1 · Answer 2 · answered Oct 06 '15 at 08:41

1

The following code maybe help you:

@SuppressWarnings("StatementWithEmptyBody")    
@Override    
public boolean onNavigationItemSelected(MenuItem item) {    
    // Handle navigation view item clicks here.    
    int id = item.getItemId();    
    Fragment fragment = null;    
    if (id == R.id.nav_camara) {    
        // Handle the camera action    
        fragment = new ImportFragment();    

    } else if (id == R.id.nav_gallery) {    
        fragment = new GalleryFragment();    
    } else if (id == R.id.nav_slideshow) {    

    } else if (id == R.id.nav_manage) {    

    } else if (id == R.id.nav_share) {    

    } else if (id == R.id.nav_send) {    

    }    

    FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();    

    // Replace whatever is in the fragment_container view with this fragment,    
    // and add the transaction to the back stack so the user can navigate back    
    transaction.replace(R.id.fragment_container, fragment);    
    transaction.addToBackStack(null);    

    // Commit the transaction    
    transaction.commit();    

    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);    
    drawer.closeDrawer(GravityCompat.START);    
    return true;    
}

answered Oct 06 '15 at 08:41

Anh Nguyen Ngoc

137
6

I am able to replace the old fragment (i.e the Media player) with the new fragment content (Songs list). But the problem is on the songs list fragment, the action bar doesn't show. Since, the app_bar_main.xml has ,the action bar is displayed only for the content_main. Any solutions?? – Sha Oct 06 '15 at 08:43
You should try to replace by – Anh Nguyen Ngoc Oct 06 '15 at 09:24
Yaa. But how to display content_main.xml in the fragment on starting the app? – Sha Oct 06 '15 at 09:26
and put and into in app_bar_main.xml – Anh Nguyen Ngoc Oct 06 '15 at 09:26
You can create a fragment with content_main.xml layout and show it in onCreate() method – Anh Nguyen Ngoc Oct 06 '15 at 09:28
Anh, can you send me a sample code? would help a lot. – Sha Oct 06 '15 at 09:35
Please help me with this code. http://stackoverflow.com/questions/32984317/android-music-player – Sha Oct 07 '15 at 05:19

Android Navigation Drawer Fragment

2 Answers2