Laman

Wednesday, September 25, 2013

Android Custom GridView Example

Creating a custom  GridView with Text and Image is as easy as Using a Simple GridView.
We need to just have a custom adapter and populate the GridView elements with custom adapter. It is similar to populating a ListView with Custom Adapter.

If you are not familiar with these two concepts follow my blog

Using Android GridView
ListView with  Custom Adapter

In this example I have explained how to  how to make a custom grid with Text and Image and poipulate it's content through Custom Adapter.

Steps:
  • Create Layout
  • Create Cutom Adapter and override it's getView() method.
  • Set the adapter to GridView


Custom GridView

main.xml


<RelativeLayout 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"
    tools:context=".MainActivity" >

   <GridView
        android:id="@+id/gridViewCustom"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        android:columnWidth="80dp"
        android:gravity="center"
        android:numColumns="auto_fit"
        android:stretchMode="columnWidth" />


</RelativeLayout>

grid_row.xml


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="5dp" >

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginRight="10dp"
        android:src="@drawable/ic_launcher" >
    </ImageView>

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:textSize="15sp" >
    </TextView>

</LinearLayout>

CustomGridViewMainActivity.java

public class CustomGridViewMainActivity extends Activity
{

   
            GridView gridView;
            GridViewCustomAdapter grisViewCustomeAdapter;
           
          
            @Override
            protected void onCreate(Bundle savedInstanceState)
            {
                    super.onCreate(savedInstanceState);
                    setContentView(R.layout.main);
                   
                   
                    gridView=(GridView)findViewById(R.id.gridViewCustom);
                    // Create the Custom Adapter Object
                    grisViewCustomeAdapter = new GridViewCustomAdapter(this);
                    // Set the Adapter to GridView
                    gridView.setAdapter(grisViewCustomeAdapter);
                     
                    // Handling touch/click Event on GridView Item

                      gridView.setOnItemClickListener(new OnItemClickListener() {

                       @Override
                       public void onItemClick(AdapterView<?> arg0, View v, int position, long arg3) {
                           String selectedItem;
                           if(position%2==0)
                               selectedItem="Facebook";
                           else
                               selectedItem="Twitter";
                        Toast.makeText(getApplicationContext(),"Selected Item: "+selectedItem, Toast.LENGTH_SHORT).show();
                       
                       }
                      });


               }

}


 GridViewCustomAdapter.java


public class GridViewCustomAdapter extends ArrayAdapter
{
         Context context;
      
   

     public GridViewCustomAdapter(Context context)
     {
             super(context, 0);
             this.context=context;
            
     }
   
     public int getCount()
        {
                     return 24;
        }

     @Override
     public View getView(int position, View convertView, ViewGroup parent)
     {
             View row = convertView;
            
             if (row == null)
             {
                     LayoutInflater inflater = ((Activity) context).getLayoutInflater();
                     row = inflater.inflate(R.layout.grid_row, parent, false);


                     TextView textViewTitle = (TextView) row.findViewById(R.id.textView);
                     ImageView imageViewIte = (ImageView) row.findViewById(R.id.imageView);
                    
                     if(position%2==0)
                     {
                             textViewTitle.setText("Facebook");
                             imageViewIte.setImageResource(R.drawable.facebook);
                     }
                     else
                     {
                             textViewTitle.setText("Twitter");
                             imageViewIte.setImageResource(R.drawable.twitter);
                     }
             }

   
     
      return row;

     }

}
    


1 comment:

Related Posts Plugin for WordPress, Blogger...