1

I am trying to add a background image for a button and it is working, but not as I expected.

1st picture (without background)

2nd picture (with background)

I would like the background to cover only the button. In other words, the image should have the same form as the 2 buttons from above (I'm talking about the round corners and a bit smaller size).

Here is the xml of the layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:showIn="@layout/activity_main" tools:context=".MainActivity"
android:orientation="vertical">

<LinearLayout android:layout_weight="1" android:layout_height="fill_parent" android:layout_width="fill_parent">
    <Button
        android:onClick="playerStats"
        android:text="@string/plStats"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
</LinearLayout>

<LinearLayout android:layout_weight="1" android:layout_height="fill_parent" android:layout_width="fill_parent">
    <Button

        android:text="@string/comp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
</LinearLayout>

<LinearLayout android:layout_weight="1" android:layout_height="fill_parent" android:layout_width="fill_parent">
    <Button
        android:background="@drawable/calendar"
        android:text="@string/calendar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
</LinearLayout>

Linh
  • 57,942
  • 23
  • 262
  • 279
Lerul Ler
  • 339
  • 7
  • 21

4 Answers4

3

its easy to do that

you should use ImageButton and remove those Buttons for example

<ImageButton
    android:src="@drawable/calendar"
    android:text="@string/calendar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />

also if you want to remove the background of that button you can use :

android:background="@null"
Mahdi Nouri
  • 1,391
  • 14
  • 29
1

Replace your layout with these layout...It can be helpfil for you

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:showIn="@layout/activity_main" tools:context=".MainActivity"
android:orientation="vertical">

<LinearLayout android:layout_weight="1" android:layout_height="match_parent" android:layout_width="match_parent">
    <Button
        android:onClick="playerStats"
        android:text="@string/plStats"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
</LinearLayout>
  <View    ////I HAVE ADDED VIEW WHICH IS TRASNPARENT TO SEPRATE THE BUTTONS
    android:layout_width="fill_parent"
    android:layout_height="10dp"

    android:background="@android:color/transparent" >
</View>


<LinearLayout android:layout_weight="1" android:layout_height="match_parent" android:layout_width="match_parent">
    <Button

        android:text="@string/comp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
</LinearLayout>

  <View ////I HAVE ADDED VIEW WHICH IS TRASNPARENT TO SEPRATE THE BUTTONS
    android:layout_width="fill_parent"
    android:layout_height="10dp"

    android:background="@android:color/transparent" >
</View>


<LinearLayout android:layout_weight="1" android:layout_height="match_parent" android:layout_width="match_parent">
    <Button
        android:background="@drawable/calendar"
        android:text="@string/calendar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
</LinearLayout>

<View  ////I HAVE ADDED VIEW WHICH IS TRASNPARENT TO SEPRATE THE BUTTONS
    android:layout_width="fill_parent"
    android:layout_height="10dp"

    android:background="@android:color/transparent" >
</View>
Ravindra Kushwaha
  • 7,846
  • 14
  • 53
  • 103
  • I have tried your code, however it's not exactly what i need; it just puts some space between the buttons – Lerul Ler Dec 25 '15 at 10:28
  • @LerulLer ...What you else , actually want bro?? – Ravindra Kushwaha Dec 25 '15 at 10:31
  • I want the image of the third button (from the second picture) to have the same size/form as the third button from the 1st picture (if you look closely, the image from the second picture is a bit bigger than the button from the 1st picture) – Lerul Ler Dec 25 '15 at 10:35
  • @LerulLer ..You have to use the dimen approach for it...You can specify the height of buttons of the respective dimen folders of android – Ravindra Kushwaha Dec 25 '15 at 10:41
  • @LerulLer ... I have edited the answer..plz check it...In place of FILL_PARENT inside the LINERLAYOUT..i replaced to the MATCH_APRENT....It will work for you..You can try it...and let me know in case of concern – Ravindra Kushwaha Dec 25 '15 at 10:44
0

The simplest solution is: You need to edit your image background (make it a little smaller and have corner) - it can be done easily by using Photoshop
Than use 9-patch tool for make 9-patch image (9-patch images can automatically resize to accommodate the contents of the view and the size of the screen)

Linh
  • 57,942
  • 23
  • 262
  • 279
0

The "without background" button is actually displaying it default background, so setting new background will override that corner-rounded-gray thing...

Check this question.

I recommend using ImageButton with android:src instead.

Community
  • 1
  • 1
inKirby
  • 51
  • 3