How to divide the screen to small squares in android?

Question

I want to make appliction that all the screen divide to small squares, and when i touch on one of them it change the color of the squares i touched. I didnt find any code that do this. How can i do this in android ?

Answer 1

Use GridView to achieve this kind of things

GridView

GridView is a ViewGroup that displays items in a two-dimensional, scrollable grid. The grid items are automatically inserted to the layout using a ListAdapter.

Set the Click Listener to particular item to change the respective box color.

For Reference:- https://developer.android.com/guide/topics/ui/layout/gridview

Answer 2

You should use a RecyclerView which recycles it's children views for better performance and you can set it's layoutmanager to GridLayoutManger. For the color change, you can store the colors or state into something like a SparseArray when you initialize your list of data and update the colors on an item click, then retrieve the right color from your viewholder getAdapterPosition() in the onBindViewHolder() method from your Recyclerview.Adapter

Here are the references :

https://developer.android.com/reference/android/support/v7/widget/RecyclerView https://developer.android.com/reference/android/support/v7/widget/RecyclerView.Adapter https://developer.android.com/reference/android/support/v7/widget/GridLayoutManager

Answer 3

XML

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/gradient_touchscreen"
    tools:context=".tochscreen_page_2">


    <GridView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:columnWidth="90dp"
        android:numColumns="auto_fit"
        android:verticalSpacing="10dp"
        android:horizontalSpacing="10dp"
        android:stretchMode="none"
        android:gravity="center"
        />




</android.support.constraint.ConstraintLayout>

Java

public class tochscreen_page_2 extends AppCompatActivity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tochscreen_page_2);

        GridView gridview = (GridView) findViewById(R.id.gridview);
        gridview.setAdapter(new ImageAdapter(this));

        gridview.setOnItemClickListener(new OnItemClickListener() {
            public void onItemClick(AdapterView<?> parent, View v,
                                    int position, long id) {
                Toast.makeText(tochscreen_page_2.this, "" + position,
                        Toast.LENGTH_SHORT).show();
            }
        });
    }

ImageAdapter

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;

public class ImageAdapter extends BaseAdapter {
    private Context mContext;

    public ImageAdapter(Context c) {
        mContext = c;
    }

    public int getCount() {
        return mThumbIds.length;
    }

    public Object getItem(int position) {
        return null;
    }

    public long getItemId(int position) {
        return 0;
    }

    // create a new ImageView for each item referenced by the Adapter
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView;
        if (convertView == null) {
            // if it's not recycled, initialize some attributes
            imageView = new ImageView(mContext);
            imageView.setLayoutParams(new ViewGroup.LayoutParams(100, 100));
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);

        } else {
            imageView = (ImageView) convertView;
        }

        imageView.setImageResource(mThumbIds[position]);
        return imageView;
    }

    // references to our images
    private Integer[] mThumbIds = {
            R.drawable.gradient_charger, R.drawable.gradient_flashlight,
            R.drawable.gradient_vibrtion, R.drawable.gradient_charger,
            R.drawable.gradient_charger, R.drawable.gradient_flashlight,
            R.drawable.gradient_vibrtion, R.drawable.gradient_charger,
            R.drawable.gradient_charger, R.drawable.gradient_flashlight,
            R.drawable.gradient_vibrtion, R.drawable.gradient_charger,
            R.drawable.gradient_charger, R.drawable.gradient_flashlight,
            R.drawable.gradient_vibrtion, R.drawable.gradient_charger,
            R.drawable.gradient_charger, R.drawable.gradient_flashlight,
            R.drawable.gradient_vibrtion, R.drawable.gradient_charger,
            R.drawable.gradient_charger, R.drawable.gradient_flashlight,
            R.drawable.gradient_vibrtion, R.drawable.gradient_charger,
            R.drawable.gradient_charger, R.drawable.gradient_flashlight,
            R.drawable.gradient_vibrtion, R.drawable.gradient_charger,
            R.drawable.gradient_charger, R.drawable.gradient_flashlight,
            R.drawable.gradient_vibrtion, R.drawable.gradient_charger,
            R.drawable.gradient_charger, R.drawable.gradient_flashlight,
            R.drawable.gradient_vibrtion, R.drawable.gradient_charger,
            R.drawable.gradient_charger, R.drawable.gradient_flashlight,
            R.drawable.gradient_vibrtion, R.drawable.gradient_charger,













    };
}

This is the result: http://prntscr.com/kvqe34