1. Download our Official Android App: Forums for Android!

Apps ImageButton scaling changes layout width and height

Discussion in 'Android Development' started by LightningBolt226, May 26, 2016.

  1. LightningBolt226

    Thread Starter
    Rank:
    None
    Points:
    16
    Posts:
    6
    Joined:
    May 26, 2016

    May 26, 2016
    6
    1
    16
    Male
    I'm using an ImageButton to display a picture but since it's really small, I'm using the scaleX and scaleY attributes to make it a bit bigger. The problem is that for some reason, if I scale it, the button itself gets larger. I know this because my buttons have borders and are in a grid. When I scale it, it overlaps the adjacent buttons. I'm really not sure why. What did I do wrong or am I lacking something?

    Original
    http://imgur.com/NJ6UOO4

    Scaled
    http://imgur.com/QLgHlux
     

    Advertisement

    #1 LightningBolt226, May 26, 2016
    Last edited: May 26, 2016
  2. LightningBolt226

    Thread Starter
    Rank:
    None
    Points:
    16
    Posts:
    6
    Joined:
    May 26, 2016

    May 26, 2016
    6
    1
    16
    Male
    I don't think they address my present issue. The problem there was that the image didn't fit the button. My problem is that when I resize the image, the button itself changes. Here is the xml tag for that backspace ImageButton:
    Code (Text):
    1. <ImageButton
    2.                     android:id="@+id/arr"
    3.                     android:layout_width="0dp"
    4.                     android:layout_height="match_parent"
    5.                     android:layout_weight="1"
    6.                     android:background="@drawable/sp_calc_button"
    7.                     android:onClick="btnClicked"
    8.                     android:src="@drawable/backspace"
    9.                     android:textColor="@color/btnFontColor"
    10.                     android:scaleType="center"
    11.                     android:typeface="sans"
    12.                     android:scaleX="1.5"
    13.                     android:scaleY="1.5"
    14.                     android:padding="0dp"
    15.                     android:layout_margin="0dp" />
    16.  
     
  3. LightningBolt226

    Thread Starter
    Rank:
    None
    Points:
    16
    Posts:
    6
    Joined:
    May 26, 2016

    May 26, 2016
    6
    1
    16
    Male
    Oh, I think I see the problem now. I assumed scaleX and scaleY only resized the image contained in the ImageButton. However, it's meant to resize the ImageButton itself. I see now how those links are helpful. Thanks @LV426 ! :D
    Now, I've stumbled across a different problem though. What I'm doing now is using fitCenter to make it take up the remainder of the space then using padding to add extra space as needed. My problem, however, is that the padding makes the button height and width change as well. I want the button's height and width to remain uniform as I'm aiming for a uniform grid of buttons.

    Here is how it looks like without the padding:
    http://imgur.com/vNTlBiH

    With the padding:
    http://imgur.com/jRvu40G

    My xml tag:
    Code (Text):
    1. <ImageButton
    2.                     android:id="@+id/arr"
    3.                     android:layout_width="0dp"
    4.                     android:layout_height="match_parent"
    5.                     android:layout_weight="1"
    6.                     android:background="@drawable/sp_calc_button"
    7.                     android:onClick="btnClicked"
    8.                     android:src="@drawable/backspace"
    9.                     android:textColor="@color/btnFontColor"
    10.                     android:scaleType="fitCenter"
    11.                     android:typeface="sans"
    12.                     android:padding="20dp"
    13.                     android:layout_margin="0dp" />
     

Share This Page

Loading...