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;

     }

}
    



 

New Advance Topics:                   Android LiveWallpaer Tutorial
Android ImageSwitcher                    Android TextSwitcher                                Android ViewFlipper
Android Gesture Detector               Handling/Detecting Swipe Events                Gradient Drawable
Detecting Missed Calls                    Hide Title Bar                                           GridView Animation
Android AlarmManager                 Android BootReceiver                       Vibrate Phone In a Desirable Pattern    
Developing for Different Screen Sizes           Showing Toast for Longer Time       Publishing your App
How to publish Android App on Google Play
Android TextWatcher                               Android ExpandableListView

 Beginning With Android
      Android : Introduction(What is Android)                                                              Configuring Eclipse for Android Development
     Creating Your First Android Project                                           Understanding Android Manifest File of your android app

 Advance Android Topics                                                              Customizing Android Views


Working With Layouts                                                                Working With Views

Understanding Layouts in Android                                                   Using Buttons and EditText in Android
Working with Linear Layout (With Example)                                     Using CheckBoxes in Android
Nested Linear Layout (With Example)                                              Using AutoCompleteTextView in Android                                                                                          Grid View
Relative Layout In Android                                                               ListView
Table Layout                                                                                   Android ProgressBar
Frame Layout(With Example)                                                          Customizing ProgressBar
Absolute Layout                                                                             Customizing Radio Buttons
Grid Layout                                                                                    Customizing Checkboxes In Android

Android Advance Views
Android Spinner                                                                           Android GalleryView
Android TabWidget                                                                      Android ExpandableListView

Android Components                                                                 Dialogs In Android

Activity In Android                                                                    Working With Alert Dialog
Activity Life Cycle                                                                    Adding Radio Buttons In Dialog
Starting Activity For Result                                                       Adding Check Boxes In Dialog
Sending Data from One Activity to Other in Android                    Creating Customized Dialogs in Android
Returning Result from Activity                                                   Creating Dialog To Collect User Input
Android : Service                                                                     DatePicker and TimePickerDialog
BroadcastReceiver                                                                   Using TimePickerDialog and DatePickerDialog In android

Menus In Android                                                                ListView:
Creating Option Menu                                                               Populating ListView With DataBase
Creating Context Menu In Android                                              Populating ListView with ArrayList
                                                                                               ListView with Custom Adapter

Toast                                                                                      Working With SMS
Customizing Toast In Android                                                       How to Send SMS in Android
Customizing the Display Time of Toast                                        How To Receive SMS
Customizing Toast At Runtime                                                  Accessing Inbox In Android
Adding Image in Toast
Showing Toast for Longer Time


TelephonyManager                                                            Storage: Storing Data In Android
Using Telephony Manager In Android                                          SharedPreferences In Android
                                                                                              Reading and Writing files to Internal Stoarage

Working With Incoming Calls                                       DataBase :  Introduction of SQLiteDataBase
How To Handle Incoming Calls in Android                                Working With Database in Android
How to Forward an Incoming Call In Android                            Creating Table In Android
CALL States In Android                                                          Inserting, Deleting and Updating Records In Table in Android


Miscellaneous
Notifications In Android
How To Vibrate The Android Phone
Sending Email In Android
Opening a webpage In Browser
How to Access PhoneBook In Android
Prompt User Input with an AlertDialog
How to Hide Title Bar In Android
How to show an Activity in Landscape or Portrait Mode only.
How to Set an Image as Wallpaper.






14 comments:

  1. thanks kamlesh for such useful tutorial..
    i really want grid view tutorial.

    ReplyDelete
  2. good article, thankyou
    please visite back my blog
    beliatekno.blogspot.com

    ReplyDelete
  3. hey.. nice tutorial.. can u please tell me how to implement custom grid view in fragments.. ? thanks in advance.

    ReplyDelete
  4. nice tutorial.. I'm implementing Custom Grid View in fragments. But I'm unable to bind the custom view / layout to the grid view using code.

    ReplyDelete
  5. hey Kamlesh Yadav,
    thanks for this android tutorial it really helps.
    but you know i want to show this grid vertically can you explain me how i can do that thing with your code. ?

    ReplyDelete
  6. Nice tutorial. Can u please explain detail implementation of Grid view in fragments

    ReplyDelete
  7. Thanks for the detailed instruction. We create mobile apps based on android. For more info visit our website.

    ReplyDelete
  8. Very nice..tutorial check more for android here also: link Android Projects source code

    ReplyDelete
  9. Its extremely instructive, intelligent and quality substance. I wish all of you good fortunes for your coming sites and posts. Continue sharing! blog live

    ReplyDelete
  10. Nice Article. I have read whole article and I like the examples.maybe even make a sticky post if it's getting a lot of engagement.
    Graphic Design Contest

    ReplyDelete