How to add image to a framelayout in android app ?

Question

I am building a left slide menu in my app, in which I am using a framelayout. And a listview is called inside this framelayout.

In this frame layout, I want to call a imageView which will display user profile picture.

Here is the code for my navigation drawer, where I am initializing framelayout and calling its listview.

Here is my navigation drawer code -

public class NavigationDrawerFragment extends Fragment {

Context context;

ArrayList prgmName;
public static int [] prgmImages={R.drawable.feedbackgrey,R.drawable.followinggrey,R.drawable.questiongrey,R.drawable.feedbackgrey,
        R.drawable.invitegrey,R.drawable.rategrey,R.drawable.settings};
public static String [] prgmNameList={"Feed","Following","My Question","Profile","Invite Friend","Rate Us","Setting"};

/**
 * Remember the position of the selected item.
 */
private static final String STATE_SELECTED_POSITION = "selected_navigation_drawer_position";

/**
 * Per the design guidelines, you should show the drawer on launch until the user manually
 * expands it. This shared preference tracks this.
 */
private static final String PREF_USER_LEARNED_DRAWER = "navigation_drawer_learned";

/**
 * A pointer to the current callbacks instance (the Activity).
 */
private NavigationDrawerCallbacks mCallbacks;

/**
 * Helper component that ties the action bar to the navigation drawer.
 */
private ActionBarDrawerToggle mDrawerToggle;

private DrawerLayout mDrawerLayout;
private ListView mDrawerListView;
private View mFragmentContainerView;

private int mCurrentSelectedPosition = 0;
private boolean mFromSavedInstanceState;
private boolean mUserLearnedDrawer;

public NavigationDrawerFragment() {
}

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    context=getActivity();

    // Read in the flag indicating whether or not the user has demonstrated awareness of the
    // drawer. See PREF_USER_LEARNED_DRAWER for details.
    SharedPreferences sp = PreferenceManager.getDefaultSharedPreferences(getActivity());
    mUserLearnedDrawer = sp.getBoolean(PREF_USER_LEARNED_DRAWER, false);

    if (savedInstanceState != null) {
        mCurrentSelectedPosition = savedInstanceState.getInt(STATE_SELECTED_POSITION);
        mFromSavedInstanceState = true;
    }

    // Select either the default item (0) or the last selected item.
    selectItem(mCurrentSelectedPosition);
}

@Override
public void onActivityCreated(Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);
    // Indicate that this fragment would like to influence the set of actions in the action bar.
    setHasOptionsMenu(true);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    mDrawerListView = (ListView) inflater.inflate(
            R.layout.fragment_navigation_drawer, container, false);
    mDrawerListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            selectItem(position);
        }
    });

    mDrawerListView.setAdapter(new CustomAdapterNavigation((MainActivity) getActivity(), prgmNameList, prgmImages));


   return mDrawerListView;
}

public boolean isDrawerOpen() {
    return mDrawerLayout != null && mDrawerLayout.isDrawerOpen(mFragmentContainerView);
}

/**
 * Users of this fragment must call this method to set up the navigation drawer interactions.
 *
 * @param fragmentId   The android:id of this fragment in its activity's layout.
 * @param drawerLayout The DrawerLayout containing this fragment's UI.
 */
public void setUp(int fragmentId, DrawerLayout drawerLayout) {
    mFragmentContainerView = getActivity().findViewById(fragmentId);
    mDrawerLayout = drawerLayout;

    // set a custom shadow that overlays the main content when the drawer opens
    mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);
    // set up the drawer's list view with items and click listener

    ActionBar actionBar = getActionBar();
    actionBar.setDisplayHomeAsUpEnabled(true);
    actionBar.setHomeButtonEnabled(true);

    // ActionBarDrawerToggle ties together the the proper interactions
    // between the navigation drawer and the action bar app icon.
    mDrawerToggle = new ActionBarDrawerToggle(
            getActivity(),                    /* host Activity */
            mDrawerLayout,                    /* DrawerLayout object */
            R.drawable.ic_drawer,             /* nav drawer image to replace 'Up' caret */
            R.string.navigation_drawer_open,  /* "open drawer" description for accessibility */
            R.string.navigation_drawer_close  /* "close drawer" description for accessibility */
    ) {
        @Override
        public void onDrawerClosed(View drawerView) {
            super.onDrawerClosed(drawerView);
            if (!isAdded()) {
                return;
            }

            getActivity().supportInvalidateOptionsMenu(); // calls onPrepareOptionsMenu()
        }

        @Override
        public void onDrawerOpened(View drawerView) {
            super.onDrawerOpened(drawerView);
            if (!isAdded()) {
                return;
            }

            if (!mUserLearnedDrawer) {
                // The user manually opened the drawer; store this flag to prevent auto-showing
                // the navigation drawer automatically in the future.
                mUserLearnedDrawer = true;
                SharedPreferences sp = PreferenceManager
                        .getDefaultSharedPreferences(getActivity());
                sp.edit().putBoolean(PREF_USER_LEARNED_DRAWER, true).apply();
            }

            getActivity().supportInvalidateOptionsMenu(); // calls onPrepareOptionsMenu()
        }
    };

    // If the user hasn't 'learned' about the drawer, open it to introduce them to the drawer,
    // per the navigation drawer design guidelines.
    if (!mUserLearnedDrawer && !mFromSavedInstanceState) {
        mDrawerLayout.openDrawer(mFragmentContainerView);
    }

    // Defer code dependent on restoration of previous instance state.
    mDrawerLayout.post(new Runnable() {
        @Override
        public void run() {
            mDrawerToggle.syncState();
        }
    });

    mDrawerLayout.setDrawerListener(mDrawerToggle);
}

private void selectItem(int position) {
    mCurrentSelectedPosition = position;
    if (mDrawerListView != null) {
        mDrawerListView.setItemChecked(position, true);
    }
    if (mDrawerLayout != null) {
        mDrawerLayout.closeDrawer(mFragmentContainerView);
    }
    if (mCallbacks != null) {
        mCallbacks.onNavigationDrawerItemSelected(position);
    }
}

@Override
public void onAttach(Activity activity) {
    super.onAttach(activity);
    try {
        mCallbacks = (NavigationDrawerCallbacks) activity;
    } catch (ClassCastException e) {
        throw new ClassCastException("Activity must implement NavigationDrawerCallbacks.");
    }
}

@Override
public void onDetach() {
    super.onDetach();
    mCallbacks = null;
}

@Override
public void onSaveInstanceState(Bundle outState) {
    super.onSaveInstanceState(outState);
    outState.putInt(STATE_SELECTED_POSITION, mCurrentSelectedPosition);
}

@Override
public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    // Forward the new configuration the drawer toggle component.
    mDrawerToggle.onConfigurationChanged(newConfig);
}

@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
    // If the drawer is open, show the global app actions in the action bar. See also
    // showGlobalContextActionBar, which controls the top-left area of the action bar.
    if (mDrawerLayout != null && isDrawerOpen()) {
        inflater.inflate(R.menu.global, menu);
        showGlobalContextActionBar();
    }
    super.onCreateOptionsMenu(menu, inflater);
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    if (mDrawerToggle.onOptionsItemSelected(item)) {
        return true;
    }

    if (item.getItemId() == R.id.navigation_drawer) {
        Toast.makeText(getActivity(), "Example action.", Toast.LENGTH_SHORT).show();
        return true;
    }

    return super.onOptionsItemSelected(item);
}

/**
 * Per the navigation drawer design guidelines, updates the action bar to show the global app
 * 'context', rather than just what's in the current screen.
 */
private void showGlobalContextActionBar() {
    ActionBar actionBar = getActionBar();
    actionBar.setDisplayShowTitleEnabled(true);
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
    actionBar.setTitle(R.string.app_name);
}

private ActionBar getActionBar() {
    return ((ActionBarActivity) getActivity()).getSupportActionBar();
}

/**
 * Callbacks interface that all activities using this fragment must implement.
 */
public static interface NavigationDrawerCallbacks {
    /**
     * Called when an item in the navigation drawer is selected.
     */
    void onNavigationDrawerItemSelected(int position);
  }
}

Here is the fragment and framelayout xml

<!-- A DrawerLayout is intended to be used as the top-level content view         
using match_parent for both width and height to consume the full space    
available. -->
<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"
tools:context=".MainActivity">

<!-- As the main content view, the view below consumes the entire
     space available using match_parent in both dimensions. -->
<FrameLayout android:id="@+id/container" android:layout_width="match_parent"
    android:layout_height="match_parent" />

<!-- android:layout_gravity="start" tells DrawerLayout to treat
     this as a sliding drawer on the left side for left-to-right
     languages and on the right side for right-to-left languages.
     If you're not building against API 17 or higher, use
     android:layout_gravity="left" instead. -->
<!-- The drawer is given a fixed width in dp and extends the full height of
     the container. -->
<fragment android:id="@+id/navigation_drawer"
    android:layout_width="@dimen/navigation_drawer_width"   
android:layout_height="match_parent"
    android:layout_gravity="start"
    android:name="navigation.NavigationDrawerFragment"
    tools:layout="@layout/fragment_navigation_drawer" />

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

Here is my listview xml

<ListView 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"
android:choiceMode="singleChoice"
android:dividerHeight="0dp"
android:background="#FFFFFF"
tools:context=".NavigationDrawerFragment" />

Help is appreciated, thanks so much !

Answer 1

You can add a ViewGroup such as LinearLayout,RelativeLayout,etc.. as a container for the entire banner or imageView.

See the xml and output below. XML

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res/com.rh.bookmany"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >


    <!--What ever your want in the Right drawer, put it in  below RelativeLayout -->

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@color/white" >

        <!-- TO SHOW FRAGMENTS -->

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

    </RelativeLayout>





    <!--What ever your want in the LEFT drawer, put it in  below RelativeLayout -->

    <!-- LEFT DRAWER -->

    <RelativeLayout
        android:id="@+id/whatYouWantInLeftDrawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@android:color/black" >

        <!-- Cover or Banner -->

        <RelativeLayout
            android:id="@+id/rlBanner"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:orientation="vertical" >

            <!-- Cover Pic Container -->
            <RelativeLayout 
                android:layout_width="match_parent"
                android:layout_height="150dp"
                >
                <!-- Cover Picture -->
                <ImageView
                android:id="@+id/ivCoverPic"
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:contentDescription="@string/dummy_desc"
                android:scaleType="centerCrop"
                android:src="@drawable/skrillex" />

                <!-- Tint -->
                <LinearLayout
                    android:orientation="vertical"
                    android:id="@+id/llCoverTint" 
                    android:layout_height="150dp"
                    android:layout_width="match_parent"
                    ></LinearLayout>

            </RelativeLayout>

            <!-- Profile Pic Container -->
            <LinearLayout
                android:id="@+id/llProfilePicContainer"
                android:layout_width="65dp"
                android:layout_height="65dp"
                android:layout_alignParentBottom="true"
                android:layout_alignParentLeft="true"
                android:layout_marginBottom="5dp"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="7dp"
                android:orientation="vertical" >

                 <com.rh.bookmany.view.MLRoundedImageView
                        android:id="@+id/civProfilePic"
                        android:src="@drawable/tony"
                        android:layout_height="65dp"
                        android:layout_width="65dp"
                        />

            </LinearLayout>

            <TextView
                android:id="@+id/tvUserEmail"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/tvUserName"
                android:layout_below="@+id/tvUserName"
                android:textColor="@color/white"
                android:textSize="12sp" />

            <TextView
                android:id="@+id/tvUserName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignTop="@+id/llProfilePicContainer"
                android:layout_marginTop="10dp"
                android:layout_toRightOf="@+id/llProfilePicContainer"
                android:textColor="@color/white"
                android:textSize="15sp" />

        </RelativeLayout>

        <!-- ListMenu -->

        <ListView
            android:id="@+id/navigation_menu_container"
            android:layout_width="240dp"
            android:layout_height="match_parent"
            android:layout_below="@id/rlBanner"
            android:layout_gravity="start"
            android:background="@color/nyc_black"
            android:choiceMode="singleChoice"
            android:divider="@color/border_black"
            android:dividerHeight="@dimen/divider_height"
            android:listSelector="@drawable/item_selector" >
        </ListView>

    </RelativeLayout>

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

OUTPUT

Do you need something like this,huh ??

Answer 2

you must declare your ImageView in cells of ListView