Permanently change button backgroundimage within gridview android

Question

I am new Android App development (started about a month ago), so I hope you will excuse me if this question is easy or i did the coding wrong.

I am trying to build a riddle app where the app asks a question and the code checks if the answer is correct (simple enough for a first app right?) This riddle app has multiple riddles and you need to unlock them in order (you can only play riddle 2 if you completed riddle 1). I am displaying the different riddles in a Gridview and I managed to get the click function and everything working. Furthermore, using a SQlitedatabase i managed that the app only allowes you to click on Riddle 2 if Riddle 1 is completed (and saves your progress when you close the app).

Ok so the problem is this

Now the problem is that I want the user to easily see which levels he/she has unlocked so far. To do this I simply want to show the gridview with images(buttons with background images actually) that show a lock on it, and when the previous riddle is completed the image should permenantly be changed to a unlocked image. Now i have spent multiple days trying this and looked at many seemingly similar threads but I am not able to pull it off. So I hope you guys can help!

Code: The activity containing the gridview

package com.michiel.puzzelapp;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.GridView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.AdapterView;

public class Main2Activity extends AppCompatActivity {

Intent i = getIntent();
MyDBHandler dbHandler;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main2);
    dbHandler = new MyDBHandler(this, null, null, 1);

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


    gridview.setOnItemClickListener(new OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View v,
                                int position, long id) {
            //System.out.println("a" + position);
            // I expect that some people will consider this awfull coding.. However for now it works so I'll work on this later:)
            if (position == 0) {
                Intent iinent = new Intent(Main2Activity.this, Main22Activity.class);
                startActivity(iinent);
            }

            if (position == 1) {
                boolean result = dbHandler.hasObject("puzzel 1 completed");
                String str = String.valueOf(result);
                if (str.equals("true")){
                    Intent i3 = new Intent(Main2Activity.this, Raadsel2.class);
                    startActivity(i3);
                }

            }
            // ******* this continues for the other riddles (until position == 50) but i cut this out because the rest is similar and not that relevant..

    }
    });


    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
}

Image adapter code

package com.michiel.puzzelapp;

import android.content.Context;
import android.graphics.Color;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.GridView;

public class ImageAdapter extends BaseAdapter {

private Context mContext;

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

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

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

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

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

    if (convertView == null) {
        button = new Button(mContext);
        button.setLayoutParams(new GridView.LayoutParams(285, 200));
        button.setPadding(8, 8, 8, 8);

    } else {
        button = (Button) convertView;
    }

    button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            ((GridView) parent).performItemClick(v, position, 0);
        }
    });
    button.setText(filesnames[position]);
    button.setTextColor(Color.WHITE);
    button.setBackgroundResource(mThumbIds[position]);
    button.setId(position);

    return button;
}

public String[] filesnames = {
        "Raadsel 1", "Raadsel 2", "Raadsel 3", "Raadsel 4", "Raadsel 5", "Raadsel 6", "Raadsel 7", "Raadsel 8", "Raadsel 9", "Raadsel 10",
        "Raadsel 11", "Raadsel 12", "Raadsel 13", "Raadsel 14", "Raadsel 15", "Raadsel 16", "Raadsel 17", "Raadsel 18", "Raadsel 19", "Raadsel 20",
        "Raadsel 21", "Raadsel 22", "Raadsel 23", "Raadsel 24", "Raadsel 25", "Raadsel 26", "Raadsel 27", "Raadsel 28", "Raadsel 29", "Raadsel 30"
};


public Integer[] mThumbIds = {
        R.drawable.unlockedwood,R.drawable.wood, R.drawable.wood,R.drawable.wood, R.drawable.wood, R.drawable.wood, R.drawable.wood, R.drawable.wood,
        R.drawable.wood, R.drawable.wood, R.drawable.wood, R.drawable.wood, R.drawable.wood,R.drawable.wood, R.drawable.wood,R.drawable.wood,
        R.drawable.wood, R.drawable.wood, R.drawable.wood, R.drawable.wood, R.drawable.wood, R.drawable.wood, R.drawable.wood, R.drawable.wood,
        R.drawable.wood,R.drawable.wood, R.drawable.wood,R.drawable.wood, R.drawable.wood, R.drawable.wood,

};
}

So basicly what I want the code to do is to change the resource in mThumbIds to R.drawable.unlockedwood (like the first riddle is by default) when the previous riddle is completed. As mentioned before i use a very basic SQlitedatabase to track the players status. It only contains one table with two columns, see the part of the code below. So somehow the database and Imageadapter should communicate..

public class MyDBHandler extends SQLiteOpenHelper {

private static final int DATABASE_VERSION = 1;
private static final String DATABASE_NAME = "products.db";
public static final String TABLE_PRODUCTS = "products";
public static final String COLUMN_ID = "_id";
public static final String COLUMN_PRODUCTNAME = "productname";

public MyDBHandler(Context context, String name, SQLiteDatabase.CursorFactory factory, int version) {
    super(context, DATABASE_NAME, factory, DATABASE_VERSION);
}

//Oncreate, onUpgrade, addProduct and delete product code is here in between.
//**********************
// And this is the hasObject i use to check the database:

public boolean hasObject(String id) {
    SQLiteDatabase db = getWritableDatabase();
    String selectString = "SELECT * FROM " + TABLE_PRODUCTS + " WHERE " + COLUMN_PRODUCTNAME + " =?";

    Cursor cursor = db.rawQuery(selectString, new String[] {id});

    boolean hasObject = false;
    if(cursor.moveToFirst()){
        hasObject = true;

        int count = 0;
        while(cursor.moveToNext()){
            count++;
        }

    }

    cursor.close();          
    db.close();              
    return hasObject;
}

Whenever a puzzle is completed. A new string is added: "puzzel # completed"

I hope someone will be able to help! Thanks in Advance, Chiel

You could check about [custom ViewTypes](http://stackoverflow.com/questions/4777272/android-listview-with-different-layout-for-each-row) in the adapter. — Blo, Jan 13 '16 at 11:36

score 0 · Answer 1 · answered Jan 13 '16 at 12:08

0

I think you should maintain "isLock (true/false)" flag for each item and check in adapter if flag true then set background of lock otherwise unlock.

First default set unlock or lock

answered Jan 13 '16 at 12:08

Vishal Gadhiya

450
1
6
21

score 0 · Accepted Answer · answered Jan 13 '16 at 12:10

You can create a new class which will hold level info, for example:

public class LevelInfo{
    public boolean locked = true;
    public String title;
    public int imageID;

    public LevelInfo(boolean locked, String title, int imageID){
        this.locked = locked;
        this.title = title;
        this.imageID = imageID;
    }
}

And change the adapter a little so you can pass a list of this kind of objects to it.

public class ImageAdapter extends BaseAdapter {

    private Context mContext;
    List<LevelInfo> levelsInfo;

    public ImageAdapter(Context c, List<LevelInfo> levelsInfo) {
        mContext = c;
        this.levelsInfo = levelsInfo;
    }
    public int getCount() {
        return levelsInfo.size();
    }

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

        ....

        LevelInfo currentLevel = levelsInfo.get(position);
        button.setText(currentLevel.title);
        button.setTextColor(Color.WHITE);
        if(currentLevel.locked){
            button.setBackgroundResource(R.drawable.wood);
        }else{
            button.setBackgroundResource(currentLevel.image); 
        }
        button.setId(position);

        return button;
    }

}

And here is how you can create the list for this addapter:

public class Main2Activity extends AppCompatActivity {

    ...

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        List<LevelInfo> list = new ArrayList<LevelInfo>();
        LevelInfo level1 = new LevelInfo(dbHandler.hasObject("puzzel 1 completed"), "Level 1", R.drawable.level1);
        list.add(level1);
        ....
        gridview.setAdapter(new ImageAdapter(this, list));
        ....
    }
 ...
}

Your answer is pure gold! Thank you so much for the clear answer, it works:) — Chiel K, Jan 13 '16 at 13:12

Permanently change button backgroundimage within gridview android

2 Answers2