Skip to content

rayliverified/CustomImagePicker

Repository files navigation

GitHub release GitHub Release Date Libraries.io for GitHub GitHub issues GitHub code size in bytes API GitHub top language

Custom Image Picker

Screenshots

Custom Image Picker is a popup image picker for quick selection of recent images. This photo chooser does not require a custom image provider. Custom Image Picker works great for choosing images in a chat app, selecting a profile image, or any quick image selection needs.

Single Row

Screenshots

Double Row

Screenshots

This library is part of the Custom UI collection of beautiful, minimalistic, and customizable Android UI components.

Gradle Dependency

Add this line to your build.gradle project. Use the latest release version for the version code.

repositories {
    maven { url 'https://jitpack.io' }
}
compile 'com.github.searchy2:CustomImagePicker:latest-version'

Usage

Code

Custom Image Picker uses a Dialog popup to display the image gallery. Copy the following code into your project and you will have a working image picker. It's that simple!

First, initialize the bottom sheet layout of our image picker gallery and create the popup dialogue.

final View bottomSheet = getLayoutInflater().inflate(R.layout.bottom_sheet, null);
final Dialog mBottomSheetDialog = new Dialog(this, R.style.MaterialDialogSheet);
mBottomSheetDialog.setContentView(bottomSheet);
mBottomSheetDialog.setCancelable(true);
mBottomSheetDialog.getWindow().setLayout(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
mBottomSheetDialog.getWindow().setGravity(Gravity.BOTTOM);

Next, create the image gallery adapter and show it to the user.

CustomImagePicker imagePicker = new CustomImagePicker();
imagePicker.setHeight(100);
imagePicker.setWidth(100);
ImageAdapter adapter = imagePicker.getAdapter(MainActivity.this);

TwoWayGridView gridview = bottomSheet.findViewById(R.id.gridview);
gridview.getLayoutParams().height = Units.dpToPx(mContext, 200);
gridview.setNumRows(2);
gridview.setAdapter(adapter);
gridview.setOnItemClickListener(new TwoWayAdapterView.OnItemClickListener() {
    public void onItemClick(TwoWayAdapterView parent, View v, int position, long id) {
        imageUri = ContentUris.withAppendedId(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, id);
        //Do what you want with the returned imageUri here.
        mBottomSheetDialog.dismiss();
    }
});

mBottomSheetDialog.show();

That's it! Now you have a fancy new image picker!

Customization

Layouts

Custom Image Picker is highly customizable. The default bottom_sheet_default.xml layout contains only an image gallery but you can design your own image picker layout or use an existing layout. Please view the sample app for an example image layout with action sheet buttons that capture a photo and open the device image gallery.

Builder Attributes

getAdapter(Context context) - default method to get adapter

getAdapter(Context context, String columns, String sort) - filter available images and sort in Descending or Ascending order.

setDrawable(int drawable) - set drawable resource Id to replace default placeholder image.

setHeight(int height) - set image height (dp).

setWidth(int width) - set image width (dp).

setPadding(int padding) - set image padding (dp).

setSize(int size) - set 1, 2, 3, 4 for image thumbnail quality. 1 is the best quality and 4 is the lowest quality. Default 1.

Features Wishlist

These features would make this library even more awesome. You can contribute to this library by developing any of the features below. Or, if you really want to see a feature developed, you can sponsor me to develop the feature.


None

If you have any ideas for marking this library even more awesome, please let me know!


Pull requests are most welcome!

If you've fixed a bug or have a feature you've added, just create a pull request. If you've found a bug, file an issue. If you have any questions or would like to discuss upcoming features, please get in touch. You can get in touch with me in the Contact section below.

★ Acknowledgements ★

♥ Developer ♥

Ray Li

♥ Designer ♥

Ray Li

♥ Inspiration ♥ Image selection code from https://github.com/amirarcane/recent-images

★ Get in Touch ★

Ray Li Email Ray Li Website Ray Li Twitter Ray Li LinkedIn Ray Li UpLabs Ray Li GitHub

Apps Using This Library

Want to be here? You can include yourself by making a pull request.

Crowdfunding Community

Search Terms

android, image, photo, picker, select, selector, chooser, gallery, viewer