XML : Android background tile gridlayout

I'm trying to recreate the game 2048, in which I succeeded. To make the layout more appealing, I'm trying to (like in the real game) setting the backgroundcolor of the tiles dynamically in the code, dependent on their tile number. So a tile with a 2 gets a different backgroundcolor and textcolor than a tile with a number 4 on it.

Now it looks like this:

enter image description here

The xml-layout for a tile (card):

  <?xml version="1.0" encoding="utf-8"?>  <FrameLayout      xmlns:android="http://schemas.android.com/apk/res/android"      android:layout_width="match_parent"      android:layout_height="match_parent"      android:background="@color/card_frame_layout_background"      android:layout_margin="2dp">        <TextView          android:id="@+id/card_frame_layout_textView"          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:textSize="40sp"          android:layout_gravity="center"/>  </FrameLayout>    

The xml-layout of the gridLayout:

  <?xml version="1.0" encoding="utf-8"?>  <GridLayout      xmlns:android="http://schemas.android.com/apk/res/android"      android:layout_width="match_parent"      android:layout_height="match_parent"      android:columnCount="4"      android:rowCount="4">  </GridLayout>    

The Card.java file:

  public class Card extends FrameLayout {      @Bind(R.id.card_frame_layout_textView)      TextView txtNumber;        private int number;      private boolean merged;        public void setNumber(int number) {          this.number = number;            if(number!=0)              txtNumber.setText(String.valueOf(number));          else              txtNumber.setText("");      }        public int getNumber() {          return this.number;      }        public boolean isMerged() {          return this.merged;      }        public void setMerged() {          this.merged = true;      }        public void setUnmerged() {          this.merged = false;      }        public Card(Context context, AttributeSet attributeSet, int defaultStyle) {          super(context, attributeSet, defaultStyle);          inflateLayout();          ButterKnife.bind(this);          number = 0;          merged = false;      }        public Card(Context context, AttributeSet attributeSet) {          super(context, attributeSet);          inflateLayout();          ButterKnife.bind(this);          number = 0;          merged = false;      }        public Card(Context context) {          super(context);          inflateLayout();          ButterKnife.bind(this);          number = 0;          merged = false;      }        private void inflateLayout() {          String infService = Context.LAYOUT_INFLATER_SERVICE;          LayoutInflater li = (LayoutInflater)getContext().getSystemService(infService);          li.inflate(R.layout.card_frame_layout, this, true);      }  }    

I added a private method in the class Card.java that should update the layoutcolors right after I set the number on the card:

  private void updateLayoutColors() {      switch(number) {          case 0:              setBackgroundColor(defaultBackgroundColor);              break;          case 2:              setBackgroundColor(tile2BackgroundColor);              txtNumber.setTextColor(tile2TextColor);              break;          default:              setBackgroundColor(defaultBackgroundColor);              txtNumber.setBackgroundColor(defaultBackgroundColor);              break;      }  }    

But when I run the project, I'm getting this:

enter image description here

The space between the tiles also gets colored, and I want the space between the tiles always have the same color (which is different from any tile).

So the lighter "border" around the tile with the number 2 is the color I want for the tile itself, the space between the tiles must stay the same...

Anyone an idea of ho I can fix this?

Thanks in advance!

No comments:

Post a Comment