GridView android suffle items when scroll

Question

I want to show a list of circle in a GridView scrollable vertically. I want one element of two in 3 columns.

You can see a screenshot of the result.

But i have two more problems : - When i scroll down in my app, the app redraw the circles and suffle them. (second screen). - I can't have a perfect round button i don't understand why.

To do that i have that : my Activity with the gridLayout

    gridView = (GridView) findViewById(R.id.interestsgrid);
    gridView.setColumnWidth(UTIL.getScreenWidth(getBaseContext()) / 3);
    List<Interest> interests = new ArrayList<Interest>();
    interests.add(new Interest(18,"coucou7"));
    interests.add(new Interest(18,"coucou7"));
    interests.add(new Interest(18,"coucou6"));
    interests.add(new Interest(18,"coucou6"));
    interests.add(new Interest(18,"coucou5"));
    interests.add(new Interest(18,"coucou5"));
    interests.add(new Interest(18,"coucou4"));
    interests.add(new Interest(18,"coucou4"));
    interests.add(new Interest(18,"coucou3"));
    interests.add(new Interest(18,"coucou3"));
    interests.add(new Interest(18,"coucou8"));
    interests.add(new Interest(18,"coucou8"));
    interests.add(new Interest(18,"coucou9"));
    interests.add(new Interest(18,"coucou9"));
    interests.add(new Interest(18,"coucou10"));
    interests.add(new Interest(18,"coucou10"));
    interests.add(new Interest(18,"coucou11"));
    interests.add(new Interest(18,"coucou12"));
    interests.add(new Interest(18,"coucou13"));
    interests.add(new Interest(18,"coucou13"));
    interests.add(new Interest(18,"coucou14"));
    interests.add(new Interest(18,"coucou14"));
    gridView.setAdapter(new InterestsGridAdapter(this, interests));

Activity.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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:fitsSystemWindows="true"
    tools:context=".viewController.user.ChoiceInterests">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/AppBarLayoutInterest"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

            <GridView xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/interestsgrid"
                android:layout_width="match_parent"
                android:paddingTop="10sp"
                android:layout_below="@+id/AppBarLayoutInterest"
                android:layout_height="match_parent"
                android:columnWidth="90dp"
                android:numColumns="auto_fit"
                android:stretchMode="columnWidth"
                android:gravity="center"
                />
   </RelativeLayout>

and my adapter :

@Override
    public View getView(int position, View convertView, ViewGroup parent) {

        // LayoutInflator to call external grid_item.xml file

            LayoutInflater inflater = (LayoutInflater) context
                    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

            View gridView;


            if (convertView == null) {

                gridView = new View(context);

                // get layout from grid_item.xml ( Defined Below )

                gridView = inflater.inflate(R.layout.interest_item, null);

                // set value into textview

                Button buttonView = (Button) gridView
                        .findViewById(R.id.buttonCircleInterest);

                int width = UTIL.getScreenWidth(parent.getContext());


                ViewGroup.LayoutParams params = buttonView.getLayoutParams();
                params.width = (width / 3);
                params.height = (width / 3);
                buttonView.setLayoutParams(params);

                if(position%2 != 0){
                    buttonView.setVisibility(View.INVISIBLE);
                }

                buttonView.setText(this.interests.get(position).getName());

            } else {
                gridView = (View) convertView;
            }

            return gridView;
    }
  }

My gridItem :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <Button
        android:layout_width="50sp"
        android:layout_height="50sp"
        android:id="@+id/buttonCircleInterest"
        android:background="@drawable/rounshapebtn"
        android:textColor="@color/white"
        android:layout_marginBottom="2sp"
        android:text="1"/>
</LinearLayout>

my Drawable to have a circle button :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:padding="10dp">
    <solid android:color="#FFA633"/> <!-- this one is ths color of the Rounded Button -->
    <corners
        android:bottomRightRadius="50dp"
        android:bottomLeftRadius="50dp"
        android:topLeftRadius="50dp"
        android:topRightRadius="50dp"/>
</shape>

Thank you for your answers !

Answer 1

@Override
public View getView(int position, View convertView, ViewGroup parent) {

    // LayoutInflator to call external grid_item.xml file

        LayoutInflater inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        View gridView;


        if (convertView == null) {

            gridView = new View(context);

            // get layout from grid_item.xml ( Defined Below )

            gridView = inflater.inflate(R.layout.interest_item, null);


        } else {
            gridView = (View) convertView;
        }

      // set value into textview

            Button buttonView = (Button) gridView
                    .findViewById(R.id.buttonCircleInterest);

            int width = UTIL.getScreenWidth(parent.getContext());


            ViewGroup.LayoutParams params = buttonView.getLayoutParams();
            params.width = (width / 3);
            params.height = (width / 3);
            buttonView.setLayoutParams(params);

            if(position%2 != 0){
                buttonView.setVisibility(View.INVISIBLE);
            }

            buttonView.setText(this.interests.get(position).getName());


        return gridView;
  }
  }