Android Beginner Image Gallery Example

Tutorial using PlaceHolderView

This example demonstrate creation of a list of images with animation using PlaceHolderView. For the sake of this example we will be placing our images in the drawable folder.

Note: After exploring this example I will strongly recommend going through next advanced and complete example listed here.

Reference to PlaceHolderView can be found here

Lets Begin:

Step 1:

Create a project in the Android Studios and add dependency in app’s build.gradle

dependencies {
    compile 'com.mindorks:placeholderview:0.2.7'
}

Step 2:

Create Activity XML layout res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <com.mindorks.placeholderview.PlaceHolderView
        android:id="@+id/galleryView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scrollbars="vertical"/>
</LinearLayout>

Step 3:

Create gallery image item view res/layout/gallery_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="10dp">
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="225dp"
        android:scaleType="centerCrop"
        android:src="@drawable/img_1"/>
</LinearLayout>

Step 4:

Create GalleryItem.class

@Animate(Animation.CARD_LEFT_IN_DESC)
@NonReusable
@Layout(R.layout.gallery_item)
public class GalleryItem {

    @View(R.id.imageView)
    private ImageView imageView;

    private Drawable mDrawable;

    public GalleryItem(Drawable drawable) {
        mDrawable = drawable;
    }

    @Resolve
    private void onResolved() {
        imageView.setImageDrawable(mDrawable);
    }
}

Notes:

@NonReusable is annotation in PlaceHolderView, to be used in cases where we want to release all the resources and references if removed from the list and won’t use the same object in addView() method in PlaceHolderView.
@layout is used to bind the layout with this class
@View is used to bind the views in this layout we want to refer to
@Resolve is used to operate on the view references obtained from @View, in short if we want to define any operation on the view it should be put in a method and annotated with @Resolve
@Animate() is used to assign defined animations in the Animation class

Step 5:

Create the MainActivity.class.

Get the reference to the PlaceHolderView and then add views to this using addView method.

public class MainActivity extends AppCompatActivity {

    private PlaceHolderView mGalleryView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mGalleryView = (PlaceHolderView)findViewById(R.id.galleryView);
        mGalleryView
                .addView(new GalleryItem(getResources().getDrawable(R.drawable.img_1)))
                .addView(new GalleryItem(getResources().getDrawable(R.drawable.img_2)))
                .addView(new GalleryItem(getResources().getDrawable(R.drawable.img_3)))
                .addView(new GalleryItem(getResources().getDrawable(R.drawable.img_4)))
                .addView(new GalleryItem(getResources().getDrawable(R.drawable.img_5)))
                .addView(new GalleryItem(getResources().getDrawable(R.drawable.img_6)))
                .addView(new GalleryItem(getResources().getDrawable(R.drawable.img_7)))
                .addView(new GalleryItem(getResources().getDrawable(R.drawable.img_8)))
                .addView(new GalleryItem(getResources().getDrawable(R.drawable.img_9)));
    }
}

Note:

If we need a grid of 2 rows then use Builder class.

mGalleryView.getBuilder().setLayoutManager(new GridLayoutManager(this.getApplicationContext(), 2));

That’s All

Cheers!!