Keeping the buttons on Fragment ImageView change

Question

I have a Fragment that displays images on swipe, and I am adding on the bottom a raw of buttons. My problem is that buttons are moved/re-created every time I am changing the image. Is it a way to have buttons on a Fragment class in a stationary position so they don't move along with the Fragment? Cannot add buttons on the FragmentActivity class, as I'm having trouble passing the bitmap from Fragment to FragmentActivity for share/save like options.

Thank you!

image_detail_fragment.xml

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

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/black">

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <ProgressBar
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" />

    <com.example.android.displayingbitmaps.ui.RecyclingImageView
        android:id="@+id/imageView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:contentDescription="@string/imageview_description" />

</FrameLayout>

<LinearLayout
    android:id="@+id/llShare"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_marginBottom="49dp"
    android:layout_marginLeft="90dp"
    android:background="@drawable/btn_rounded_corner"
    android:gravity="center_vertical"
    android:orientation="horizontal" >

<ImageView
    android:layout_weight="1"
    android:layout_gravity="center_vertical"
    android:layout_width="0dp"
    android:layout_height="40dp"
    android:src="@drawable/ic_menu_share" />
</LinearLayout>

</RelativeLayout>

ImageDetailFragment.java

package com.example.android.displayingbitmaps.ui;

import android.graphics.Bitmap;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.ImageView;

import com.example.android.displayingbitmaps.R;
import com.example.android.displayingbitmaps.util.ImageFetcher;
import com.example.android.displayingbitmaps.util.ImageWorker;
import com.example.android.displayingbitmaps.util.Utils;

/**
 * This fragment will populate the children of the ViewPager from {@link ImageDetailActivity}.
 */
public class ImageDetailFragment extends Fragment {
    private static final String IMAGE_DATA_EXTRA = "extra_image_data";
    private String mImageUrl;
    public ImageView mImageView;
    private ImageFetcher mImageFetcher;
    public Bitmap bitmap;


    /**
     * Factory method to generate a new instance of the fragment given an image number.
     *
     * @param imageUrl The image url to load
     * @return A new instance of ImageDetailFragment with imageNum extras
     */
    public static ImageDetailFragment newInstance(String imageUrl) {
        final ImageDetailFragment f = new ImageDetailFragment();
        final Bundle args = new Bundle();
        args.putString(IMAGE_DATA_EXTRA, imageUrl);
        f.setArguments(args);
        return f;
    }

    /**
     * Empty constructor as per the Fragment documentation
     */
    public ImageDetailFragment() {

    }

    /**
     * Populate image using a url from extras, use the convenience factory method
     * {@link ImageDetailFragment#newInstance(String)} to create this fragment.
     */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mImageUrl = getArguments() != null ? getArguments().getString(IMAGE_DATA_EXTRA) : null;


    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate and locate the main ImageView
        final View v = inflater.inflate(R.layout.image_detail_fragment, container, false);
        mImageView = (ImageView) v.findViewById(R.id.imageView);


        return v;

    }


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

        // Use the parent activity to load the image asynchronously into the ImageView (so a single
        // cache can be used over all pages in the ViewPager
        if (ImageDetailActivity.class.isInstance(getActivity())) {
            mImageFetcher = ((ImageDetailActivity) getActivity()).getImageFetcher();
            mImageFetcher.loadImage(mImageUrl, mImageView);
        }

        // Pass clicks on the ImageView to the parent activity to handle
        if (OnClickListener.class.isInstance(getActivity()) && Utils.hasHoneycomb()) {
            mImageView.setOnClickListener((OnClickListener) getActivity());

        }

    }

    @Override
    public void onDestroy() {
        super.onDestroy();
        if (mImageView != null) {
            // Cancel any pending image work
            ImageWorker.cancelWork(mImageView);
            mImageView.setImageDrawable(null);
        }
    }


}

image_detail_pager.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="http://schemas.android.com/apk/res-auto"

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/black"
    >
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="90dp"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- android:layout_above="@+id/llBack"-->
        <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/pager"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" >

        </android.support.v4.view.ViewPager>
</LinearLayout>



</RelativeLayout>

ImageDetailActivity.java

 package com.example.android.displayingbitmaps.ui;

    import android.annotation.TargetApi;
    import android.app.ActionBar;
    import android.os.Build.VERSION_CODES;
    import android.os.Bundle;
    import android.support.v4.app.Fragment;
    import android.support.v4.app.FragmentActivity;
    import android.support.v4.app.FragmentManager;
    import android.support.v4.app.FragmentStatePagerAdapter;
    import android.support.v4.app.NavUtils;
    import android.support.v4.view.ViewPager;
    import android.util.DisplayMetrics;
    import android.view.Menu;
    import android.view.MenuItem;
    import android.view.View;
    import android.view.WindowManager.LayoutParams;
    import android.widget.Toast;

    import com.example.android.displayingbitmaps.BuildConfig;
    import com.example.android.displayingbitmaps.R;
    import com.example.android.displayingbitmaps.provider.Images;
    import com.example.android.displayingbitmaps.util.ImageCache;
    import com.example.android.displayingbitmaps.util.ImageFetcher;
    import com.example.android.displayingbitmaps.util.Utils;

    public class ImageDetailActivity extends FragmentActivity  {
        private static final String IMAGE_CACHE_DIR = "images";
        public static final String EXTRA_IMAGE = "extra_image";

        private ImagePagerAdapter mAdapter;
        private ImageFetcher mImageFetcher;
        private ViewPager mPager;
        public ImageDetailFragment detail;



        @TargetApi(VERSION_CODES.HONEYCOMB)
        @Override
        public void onCreate (Bundle savedInstanceState)  {

    detail= new ImageDetailFragment();
            if (BuildConfig.DEBUG) {
                Utils.enableStrictMode();
            }
            super.onCreate(savedInstanceState);
            setContentView(R.layout.image_detail_pager);




            // Fetch screen height and width, to use as our max size when loading images as this
            // activity runs full screen
            final DisplayMetrics displayMetrics = new DisplayMetrics();
            getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
            final int height = displayMetrics.heightPixels;
            final int width = displayMetrics.widthPixels;

            // For this sample we'll use half of the longest width to resize our images. As the
            // image scaling ensures the image is larger than this, we should be left with a
            // resolution that is appropriate for both portrait and landscape. For best image quality
            // we shouldn't divide by 2, but this will use more memory and require a larger memory
            // cache.
            final int longest = (height > width ? height : width) / 2;

            ImageCache.ImageCacheParams cacheParams =
                    new ImageCache.ImageCacheParams(this, IMAGE_CACHE_DIR);
            cacheParams.setMemCacheSizePercent(0.25f); // Set memory cache to 25% of app memory

            // The ImageFetcher takes care of loading images into our ImageView children asynchronously
            mImageFetcher = new ImageFetcher(this, longest);
            mImageFetcher.addImageCache(getSupportFragmentManager(), cacheParams);
            mImageFetcher.setImageFadeIn(false);

            // Set up ViewPager and backing adapter
            mAdapter = new ImagePagerAdapter(getSupportFragmentManager(), Images.imageUrls.length);
            mPager = (ViewPager) findViewById(R.id.pager);
            mPager.setAdapter(mAdapter);
            mPager.setPageMargin((int) getResources().getDimension(R.dimen.horizontal_page_margin));
            mPager.setOffscreenPageLimit(2);

            // Set up activity to go full screen
            getWindow().addFlags(LayoutParams.FLAG_FULLSCREEN);

            // Enable some additional newer visibility and ActionBar features to create a more
            // immersive photo viewing experience
            if (Utils.hasHoneycomb()) {
                final ActionBar actionBar = getActionBar();

                // Hide title text and set home as up
                actionBar.setDisplayShowTitleEnabled(false);
                actionBar.setDisplayHomeAsUpEnabled(true);

                // Hide and show the ActionBar as the visibility changes
                mPager.setOnSystemUiVisibilityChangeListener(
                        new View.OnSystemUiVisibilityChangeListener() {
                            @Override
                            public void onSystemUiVisibilityChange(int vis) {
                                if ((vis & View.SYSTEM_UI_FLAG_LOW_PROFILE) != 0) {
                                    actionBar.hide();
                                } else {
                                    actionBar.show();
                                }
                            }
                        });

                // Start low profile mode and hide ActionBar
                mPager.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LOW_PROFILE);
                actionBar.hide();
            }

            // Set the current item based on the extra passed in to this activity
            final int extraCurrentItem = getIntent().getIntExtra(EXTRA_IMAGE, -1);
            if (extraCurrentItem != -1) {
                mPager.setCurrentItem(extraCurrentItem);
            }
        }


        @Override
        public void onResume() {
            super.onResume();
            mImageFetcher.setExitTasksEarly(false);
        }

        @Override
        protected void onPause() {
            super.onPause();
            mImageFetcher.setExitTasksEarly(true);
            mImageFetcher.flushCache();
        }

        @Override
        protected void onDestroy() {
            super.onDestroy();
            mImageFetcher.closeCache();
        }

        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
            switch (item.getItemId()) {
                case android.R.id.home:
                    NavUtils.navigateUpFromSameTask(this);
                    return true;
                case R.id.clear_cache:
                    mImageFetcher.clearCache();
                    Toast.makeText(
                            this, R.string.clear_cache_complete_toast,Toast.LENGTH_SHORT).show();
                    return true;
            }
            return super.onOptionsItemSelected(item);
        }

        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            getMenuInflater().inflate(R.menu.main_menu, menu);
            return true;
        }

        /**
         * Called by the ViewPager child fragments to load images via the one ImageFetcher
         */
        public ImageFetcher getImageFetcher() {
            return mImageFetcher;
        }

        /**
         * The main adapter that backs the ViewPager. A subclass of FragmentStatePagerAdapter as there
         * could be a large number of items in the ViewPager and we don't want to retain them all in
         * memory at once but create/destroy them on the fly.
         */
        private class ImagePagerAdapter extends FragmentStatePagerAdapter {
            private final int mSize;

            public ImagePagerAdapter(FragmentManager fm, int size) {
                super(fm);
                mSize = size;
            }

            @Override
            public int getCount() {
                return mSize;
            }

            @Override
            public Fragment getItem(int position) {
                return ImageDetailFragment.newInstance(Images.imageUrls[position]);
            }
        }


        /**
         * Set on the ImageView in the ViewPager children fragments, to enable/disable low profile mode
         * when the ImageView is touched.
         */
  @TargetApi(VERSION_CODES.HONEYCOMB)
    @Override
    public void onClick(View v) {
        final int vis = mPager.getSystemUiVisibility();
        if ((vis & View.SYSTEM_UI_FLAG_LOW_PROFILE) != 0) {
            mPager.setSystemUiVisibility(View.SYSTEM_UI_FLAG_VISIBLE);
        } else {
            mPager.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LOW_PROFILE);
        }
    }


    }

Ok so I manage to get the position with

int index = mPager.getCurrentItem();

but how can I get the Drawable from it, so I can create the Bitmap I need, as my items are string as bellow:

public class Images {

    public final static String[] imageUrls = new String[] {
            "https://lh6.googleusercontent.com/-55osAWw3x0Q/URquUtcFr5I/AAAAAAAAAbs/rWlj1RUKrYI/s1024/A%252520Photographer.jpg",
            "https://lh4.googleusercontent.com/--dq8niRp7W4/URquVgmXvgI/AAAAAAAAAbs/-gnuLQfNnBA/s1024/A%252520Song%252520of%252520Ice%252520and%252520Fire.jpg",
            "https://lh5.googleusercontent.com/-7qZeDtRKFKc/URquWZT1gOI/AAAAAAAAAbs/hqWgteyNXsg/s1024/Another%252520Rockaway%252520Sunset.jpg",
            "https://lh3.googleusercontent.com/--L0Km39l5J8/URquXHGcdNI/AAAAAAAAAbs/3ZrSJNrSomQ/s1024/Antelope%252520Butte.jpg",
            "https://lh6.googleusercontent.com/-8HO-4vIFnlw/URquZnsFgtI/AAAAAAAAAbs/WT8jViTF7vw/s1024/Antelope%252520Hallway.jpg",

};

}

Thanks!

Answer 1

You need to edit image_detail_pager.xml and add a Stationary buttons Layout at the bottom.

For Example:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/black"
    >
        <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="90dp"
        xmlns:android="http://schemas.android.com/apk/res/android">
        <!-- android:layout_above="@+id/llBack"-->
        <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/pager"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" >

        </android.support.v4.view.ViewPager>
        </LinearLayout>

    <LinearLayout
        android:id="@+id/llShare"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_marginBottom="49dp"
        android:layout_marginLeft="90dp"
        android:background="@drawable/btn_rounded_corner"
        android:gravity="center_vertical"
        android:orientation="horizontal" >

    <ImageView
        android:layout_weight="1"
        android:layout_gravity="center_vertical"
        android:layout_width="0dp"
        android:layout_height="40dp"
        android:src="@drawable/ic_menu_share" />
    </LinearLayout>
</RelativeLayout>

and then you can simply find Your Share Button in your ImageDetailActivity.java like this:

        package com.example.android.displayingbitmaps.ui;

    import android.annotation.TargetApi;
    import android.app.ActionBar;
    import android.os.Build.VERSION_CODES;
    import android.os.Bundle;
    import android.support.v4.app.Fragment;
    import android.support.v4.app.FragmentActivity;
    import android.support.v4.app.FragmentManager;
    import android.support.v4.app.FragmentStatePagerAdapter;
    import android.support.v4.app.NavUtils;
    import android.support.v4.view.ViewPager;
    import android.util.DisplayMetrics;
    import android.view.Menu;
    import android.view.MenuItem;
    import android.view.View;
    import android.view.WindowManager.LayoutParams;
    import android.widget.Toast;

    import com.example.android.displayingbitmaps.BuildConfig;
    import com.example.android.displayingbitmaps.R;
    import com.example.android.displayingbitmaps.provider.Images;
    import com.example.android.displayingbitmaps.util.ImageCache;
    import com.example.android.displayingbitmaps.util.ImageFetcher;
    import com.example.android.displayingbitmaps.util.Utils;

    public class ImageDetailActivity extends FragmentActivity  {
    private static final String IMAGE_CACHE_DIR = "images";
    public static final String EXTRA_IMAGE = "extra_image";

    private ImagePagerAdapter mAdapter;
    private ImageFetcher mImageFetcher;
    private ViewPager mPager;
    public ImageDetailFragment detail;

    private LinearLayout shareLL;


    @TargetApi(VERSION_CODES.HONEYCOMB)
    @Override
    public void onCreate (Bundle savedInstanceState)  {

    detail= new ImageDetailFragment();
        if (BuildConfig.DEBUG) {
            Utils.enableStrictMode();
        }
        super.onCreate(savedInstanceState);
        setContentView(R.layout.image_detail_pager);

        shareLL = (LinearLayout) findViewById(R.id.llShare);
        shareLL.setOnClickListener(this);


        // Fetch screen height and width, to use as our max size when loading images as this
        // activity runs full screen
        final DisplayMetrics displayMetrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
        final int height = displayMetrics.heightPixels;
        final int width = displayMetrics.widthPixels;

        // For this sample we'll use half of the longest width to resize our images. As the
        // image scaling ensures the image is larger than this, we should be left with a
        // resolution that is appropriate for both portrait and landscape. For best image quality
        // we shouldn't divide by 2, but this will use more memory and require a larger memory
        // cache.
        final int longest = (height > width ? height : width) / 2;

        ImageCache.ImageCacheParams cacheParams =
                new ImageCache.ImageCacheParams(this, IMAGE_CACHE_DIR);
        cacheParams.setMemCacheSizePercent(0.25f); // Set memory cache to 25% of app memory

        // The ImageFetcher takes care of loading images into our ImageView children asynchronously
        mImageFetcher = new ImageFetcher(this, longest);
        mImageFetcher.addImageCache(getSupportFragmentManager(), cacheParams);
        mImageFetcher.setImageFadeIn(false);

        // Set up ViewPager and backing adapter
        mAdapter = new ImagePagerAdapter(getSupportFragmentManager(), Images.imageUrls.length);
        mPager = (ViewPager) findViewById(R.id.pager);
        mPager.setAdapter(mAdapter);
        mPager.setPageMargin((int) getResources().getDimension(R.dimen.horizontal_page_margin));
        mPager.setOffscreenPageLimit(2);

        // Set up activity to go full screen
        getWindow().addFlags(LayoutParams.FLAG_FULLSCREEN);

        // Enable some additional newer visibility and ActionBar features to create a more
        // immersive photo viewing experience
        if (Utils.hasHoneycomb()) {
            final ActionBar actionBar = getActionBar();

            // Hide title text and set home as up
            actionBar.setDisplayShowTitleEnabled(false);
            actionBar.setDisplayHomeAsUpEnabled(true);

            // Hide and show the ActionBar as the visibility changes
            mPager.setOnSystemUiVisibilityChangeListener(
                    new View.OnSystemUiVisibilityChangeListener() {
                        @Override
                        public void onSystemUiVisibilityChange(int vis) {
                            if ((vis & View.SYSTEM_UI_FLAG_LOW_PROFILE) != 0) {
                                actionBar.hide();
                            } else {
                                actionBar.show();
                            }
                        }
                    });

            // Start low profile mode and hide ActionBar
            mPager.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LOW_PROFILE);
            actionBar.hide();
        }

        // Set the current item based on the extra passed in to this activity
        final int extraCurrentItem = getIntent().getIntExtra(EXTRA_IMAGE, -1);
        if (extraCurrentItem != -1) {
            mPager.setCurrentItem(extraCurrentItem);
        }
    }


    @Override
    public void onResume() {
        super.onResume();
        mImageFetcher.setExitTasksEarly(false);
    }

    @Override
    protected void onPause() {
        super.onPause();
        mImageFetcher.setExitTasksEarly(true);
        mImageFetcher.flushCache();
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        mImageFetcher.closeCache();
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                NavUtils.navigateUpFromSameTask(this);
                return true;
            case R.id.clear_cache:
                mImageFetcher.clearCache();
                Toast.makeText(
                        this, R.string.clear_cache_complete_toast,Toast.LENGTH_SHORT).show();
                return true;
        }
        return super.onOptionsItemSelected(item);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main_menu, menu);
        return true;
    }

    /**
     * Called by the ViewPager child fragments to load images via the one ImageFetcher
     */
    public ImageFetcher getImageFetcher() {
        return mImageFetcher;
    }

    /**
     * The main adapter that backs the ViewPager. A subclass of FragmentStatePagerAdapter as there
     * could be a large number of items in the ViewPager and we don't want to retain them all in
     * memory at once but create/destroy them on the fly.
     */
    private class ImagePagerAdapter extends FragmentStatePagerAdapter {
        private final int mSize;

        public ImagePagerAdapter(FragmentManager fm, int size) {
            super(fm);
            mSize = size;
        }

        @Override
        public int getCount() {
            return mSize;
        }

        @Override
        public Fragment getItem(int position) {
            return ImageDetailFragment.newInstance(Images.imageUrls[position]);
        }
    }


    /**
     * Set on the ImageView in the ViewPager children fragments, to enable/disable low profile mode
     * when the ImageView is touched.
     */
  @TargetApi(VERSION_CODES.HONEYCOMB)
    @Override
    public void onClick(View v) 
    {

        switch(v.getId())
        {
            case R.id.llShare:
            {
                //Get your current ImageFragment Position from ViewPager's Adapter and do Whatever you want to do man !
            }
            break;
        }

    /*final int vis = mPager.getSystemUiVisibility();
    if ((vis & View.SYSTEM_UI_FLAG_LOW_PROFILE) != 0) {
        mPager.setSystemUiVisibility(View.SYSTEM_UI_FLAG_VISIBLE);
    } else {
        mPager.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LOW_PROFILE);
    }*/
    }
  }

I hope this helps.