Facebook like GridView to display images android

Question

I am using a layout with Gridview by custom library Click here StaggeredGridView

But not achieved the result that I needed.

Th GridView should auto adjust its column and row depending upon the number of images (min 1 images & max 4 images ) like here

news_default.xml

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

     xmlns:tools="http://schemas.android.com/tools"
     xmlns:app="http://schemas.android.com/apk/lib/com.rb.nonstop.HomeActivity"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <RelativeLayout android:id="@+id/rel_sender_photo"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dip">

        <ImageView
            android:id="@+id/img_news_sender_photo"
            android:layout_width="70dip"
            android:layout_height="70dip"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop"
            android:src="@drawable/ic_launcher" />

        <com.devspark.robototextview.widget.RobotoTextView
            android:id="@+id/txt_category"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/img_news_sender_photo"                       
            android:textColor="#343434"
            android:textSize="15dip"
            android:text="News"
            android:paddingLeft="5dip"
            android:paddingTop="10dip"       
             />

        <View
                android:id="@+id/view1"
                android:layout_width="100dp"
                android:layout_height="2dp"              
                android:background="@color/border"               
                android:layout_toRightOf="@+id/img_news_sender_photo"   
                android:layout_below="@+id/txt_category"
                android:paddingLeft="20dip"
                android:paddingTop="5dip" />

        <com.devspark.robototextview.widget.RobotoTextView
            android:id="@+id/txt_sender_name_location"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/img_news_sender_photo"   
            android:layout_below="@+id/view1"                   
            android:textColor="#343434"
            android:textSize="15dip"
            android:text="Karthik Kolanji, Mumbai"
            android:paddingLeft="5dip"
            android:paddingTop="5dip"       
             />

    </RelativeLayout>

   <RelativeLayout android:id="@+id/rel_news_content"
       android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dip" 
        android:layout_below="@+id/rel_sender_photo">

         <com.rb.lined.edittext.LinedEditText
                android:id="@+id/edit_news"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"                
                android:background="@null"
                android:inputType="textMultiLine|textNoSuggestions"
                android:padding="10dip" 
                android:singleLine="false"
                android:imeOptions="actionNone"        
                android:textSize="10sp"
                android:gravity="top|left"              

               android:minLines="10"
               />
    </RelativeLayout>

   <RelativeLayout android:id="@+id/rel_news_date"
       android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dip" 
        android:layout_below="@+id/rel_news_content"
       >
        <com.devspark.robototextview.widget.RobotoTextView
            android:id="@+id/txt_app_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"                            
            android:textColor="#343434"
            android:textSize="10dip"
            android:text="NewsFirst MobileApp"
            android:paddingLeft="5dip"
            android:paddingTop="5dip"                 
            android:layout_alignParentLeft="true"
             />

        <com.devspark.robototextview.widget.RobotoTextView
            android:id="@+id/txt_news_date"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"                            
            android:textColor="#343434"
            android:textSize="10dip"
            android:text="September 10,2014 4:20 PM"
            android:paddingLeft="5dip"
            android:paddingTop="5dip"   
            android:layout_alignParentRight="true"               
            />
    </RelativeLayout>

   <RelativeLayout android:id="@+id/rel_news_grid_photos"
       android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dip" 
        android:layout_below="@+id/rel_news_date"
       >
       <com.jake.quiltview.QuiltView
        android:id="@+id/quilt"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="5dip"
        app:scrollOrientation="horizontal|vertical" >               
        </com.jake.quiltview.QuiltView>

    </RelativeLayout>

</RelativeLayout>

activity_home.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res/com.rb.nonstop"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

     <include android:id="@+id/rel_news_default"
         layout="@layout/news_default"/>
</RelativeLayout>

HomeActivity.java

public class HomeActivity extends Activity{

    public QuiltView quiltView; 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.fragment_home);

        quiltView = (QuiltView) findViewById(R.id.quilt);
        quiltView.setChildPadding(5);
        addTestQuilts(200);

    }


    public void addTestQuilts(int num){
        ArrayList<ImageView> images = new ArrayList<ImageView>();
        for(int i = 0; i < num; i++){
            ImageView image = new ImageView(this.getApplicationContext());
            image.setScaleType(ScaleType.CENTER_CROP);
            if(i % 2 == 0)
                image.setImageResource(R.drawable.app_logo);
            else 
                image.setImageResource(R.drawable.app_logo1);
            images.add(image);
        }
        quiltView.addPatchImages(images);
    }

}

Answer 1

I would suggest you to use RecyclerView with StaggeredGridLayoutManager.

There is a great tutorial on the official documentation.