0

I'm making this Minesweeper game as an app as a project. I have coded it all out so it works perfectly, now i want to add images too the buttons, to represent mines, flags and such.

All the research I have done points too either putting the image as the buttons background, or using an image button. When I use either of these methods it warps the button out of its original proportion and makes it cover the screen.

How do I have the image set onto the button but not change the current dimensions of the button?

FYI: I am using android studio.

Here is my xml:

<TableLayout 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" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context="com.example.daniel.msb.Small"
android:background="#ff666666">

<TableRow
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:id="@+id/Header"
android:background="#ff898989"
android:layout_gravity="center">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:text="0/0"
    android:id="@+id/txtCount"
    android:layout_weight="0.1"
    android:layout_gravity="center"
    android:background="#ff87141d"
    android:gravity="center" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:text="Small"
    android:id="@+id/txtHeader"
    android:layout_weight="0.5"
    android:gravity="center|center_horizontal"
    android:layout_gravity="center"
    android:textSize="30dp" />

<CheckBox
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:text="Flag"
    android:id="@+id/chbFlag"
    android:layout_gravity="center"
    android:layout_weight="0.1"
    android:layout_span="0"
    android:layout_column="0" />
</TableRow>

<TableRow
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="@+id/Row1">

<Button
    android:layout_width="0dip"
    android:layout_height="match_parent"
    android:text=""
    android:id="@+id/button1_1"
    android:layout_weight="1"
    android:clickable="true"
    android:onClick="mineCheck"
    android:longClickable="false" />

<Button
    android:layout_width="0dip"
    android:layout_height="match_parent"
    android:text=""
    android:id="@+id/button1_2"
    android:onClick="mineCheck"
    android:layout_weight="1"/>

<Button
    android:layout_width="0dip"
    android:layout_height="match_parent"
    android:text=""
    android:id="@+id/button1_3"
    android:onClick="mineCheck"
    android:layout_weight="1"
    android:clickable="true"
    android:longClickable="false" />

<Button
    android:layout_width="0dip"
    android:layout_height="match_parent"
    android:text=""
    android:id="@+id/button1_4"
    android:onClick="mineCheck"
    android:layout_weight="1" />

<Button
    android:layout_width="0dip"
    android:layout_height="match_parent"
    android:text=""
    android:id="@+id/button1_5"
    android:onClick="mineCheck"
    android:layout_weight="1" />
</TableRow>

<TableRow
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="@+id/Row2">

<Button
    android:layout_width="0dip"
    android:layout_height="match_parent"
    android:text=""
    android:id="@+id/button2_1"
    android:onClick="mineCheck"
    android:layout_weight="1" />

<Button
    android:layout_width="0dip"
    android:layout_height="match_parent"
    android:text=""
    android:id="@+id/button2_2"
    android:onClick="mineCheck"
    android:layout_weight="1" />

<Button
    android:layout_width="0dip"
    android:layout_height="match_parent"
    android:text=""
    android:id="@+id/button2_3"
    android:onClick="mineCheck"
    android:layout_weight="1" />

<Button
    android:layout_width="0dip"
    android:layout_height="match_parent"
    android:text=""
    android:id="@+id/button2_4"
    android:onClick="mineCheck"
    android:layout_weight="1" />

<Button
    android:layout_width="0dip"
    android:layout_height="match_parent"
    android:text=""
    android:id="@+id/button2_5"
    android:onClick="mineCheck"
    android:layout_weight="1" />
</TableRow>

<TableRow
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="@+id/Row3">

<Button
    android:layout_width="0dip"
    android:layout_height="match_parent"
    android:text=""
    android:id="@+id/button3_1"
    android:onClick="mineCheck"
    android:layout_weight="1" />

<Button
    android:layout_width="0dip"
    android:layout_height="match_parent"
    android:text=""
    android:id="@+id/button3_2"
    android:onClick="mineCheck"
    android:layout_weight="1" />

<Button
    android:layout_width="0dip"
    android:layout_height="match_parent"
    android:text=""
    android:id="@+id/button3_3"
    android:onClick="mineCheck"
    android:layout_weight="1" />

<Button
    android:layout_width="0dip"
    android:layout_height="match_parent"
    android:text=""
    android:id="@+id/button3_4"
    android:onClick="mineCheck"
    android:layout_weight="1" />

<Button
    android:layout_width="0dip"
    android:layout_height="match_parent"
    android:text=""
    android:id="@+id/button3_5"
    android:onClick="mineCheck"
    android:layout_weight="1" />
</TableRow>

<TableRow
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="@+id/Row4">

<Button
    android:layout_width="0dip"
    android:layout_height="match_parent"
    android:text=""
    android:id="@+id/button4_1"
    android:onClick="mineCheck"
    android:layout_weight="1" />

<Button
    android:layout_width="0dip"
    android:layout_height="match_parent"
    android:text=""
    android:id="@+id/button4_2"
    android:onClick="mineCheck"
    android:layout_weight="1" />

<Button
    android:layout_width="0dip"
    android:layout_height="match_parent"
    android:text=""
    android:id="@+id/button4_3"
    android:onClick="mineCheck"
    android:layout_weight="1" />

<Button
    android:layout_width="0dip"
    android:layout_height="match_parent"
    android:text=""
    android:id="@+id/button4_4"
    android:onClick="mineCheck"
    android:layout_weight="1" />

<Button
    android:layout_width="0dip"
    android:layout_height="match_parent"
    android:text=""
    android:id="@+id/button4_5"
    android:onClick="mineCheck"
    android:layout_weight="1" />
</TableRow>

<TableRow
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="@+id/Row5">

<Button
    android:layout_width="0dip"
    android:layout_height="match_parent"
    android:text=""
    android:id="@+id/button5_1"
    android:onClick="mineCheck"
    android:layout_weight="1" />

<Button
    android:layout_width="0dip"
    android:layout_height="match_parent"
    android:text=""
    android:id="@+id/button5_2"
    android:onClick="mineCheck"
    android:layout_weight="1" />

<Button
    android:layout_width="0dip"
    android:layout_height="match_parent"
    android:text=""
    android:id="@+id/button5_3"
    android:onClick="mineCheck"
    android:layout_weight="1" />

<Button
    android:layout_width="0dip"
    android:layout_height="match_parent"
    android:text=""
    android:id="@+id/button5_4"
    android:onClick="mineCheck"
    android:layout_weight="1" />

<Button
    android:layout_width="0dip"
    android:layout_height="match_parent"
    android:text=""
    android:id="@+id/button5_5"
    android:onClick="mineCheck"
    android:layout_weight="1" />
</TableRow>

<Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Play again?"
    android:id="@+id/button"
    android:layout_weight="0"
    android:onClick="restart" />

<Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Return to main menu"
    android:id="@+id/btnReturn"
    android:layout_weight="0"
    android:onClick="returnToMain" />

</TableLayout>
codeMagic
  • 44,549
  • 13
  • 77
  • 93
Daniel A
  • 1
  • 1

5 Answers5

1

Maybe you could resize your image to get it fit to your buttons size, so you can simulate a "padding" effect and don't mess up the original size.

Here some info

Community
  • 1
  • 1
José Molero
  • 118
  • 10
0

You could try using ImageViews (see here) in place of the the buttons and attach event handlers directly to the ImageViews.

Benten
  • 1,014
  • 12
  • 17
0

Check here: http://developer.android.com/reference/android/view/ViewGroup.LayoutParams.html

You can set the width and height to be a fixed size by assigning a number to layout_width, layout_height.

You would probably want to use the sp unit so that the button still changes size depending on the screen size.

3-14159265358979323846264
  • 3,250
  • 2
  • 15
  • 38
0

There is really many ways to achieve this. You could replace the TextView with ImageView and define it ScaleType as you wish. You could defind bitmap in XML and set it dimensions to fit your TextView and then use it as background.

There is more ways but the simplest is just replace to ImageView.

yshahak
  • 4,996
  • 1
  • 31
  • 37
0

I think you should go through these :

1.Android: combining text & image on a Button or ImageButton

2.Android image button

They have already clearly explain how to use image on button.If any problem occur come here again.

Community
  • 1
  • 1
Ravikant Paudel
  • 2,228
  • 2
  • 17
  • 28