Fit Image in ImageButton in Android

Question

I have 6 ImageButton in my activity  I set images through my code in them   not using xml    I want them to cover 75  of the button area  But where as some images cover less area  some are too big to fit into the imageButton  How to programatically resize and show them  Below is the screen shot   below is the xml-file   lt  xml version  1 0  encoding  utf-8   gt   lt LinearLayout xmlns android  http   schemas android com apk res android      android layout width  match parent      android layout height  match parent      android orientation  vertical      android layout marginBottom  5sp          android layout marginLeft  2sp          android layout marginRight  5sp          android layout marginTop  0sp       gt      lt LinearLayout         android layout height  0dp          android layout width  match parent          android layout weight  1          android orientation  horizontal  gt           lt ImageButton                        android layout height  match parent              android layout width  0dp              android layout weight  1              android id    id button topleft          android layout marginBottom  5sp          android layout marginLeft  2sp          android layout marginRight  5sp          android layout marginTop  0sp                gt           lt ImageButton             android layout height  match parent              android layout width  0dp              android layout weight  1              android id    id button topright      android layout marginBottom  5sp          android layout marginLeft  2sp          android layout marginRight  5sp          android layout marginTop  0sp                gt       lt  LinearLayout gt       lt LinearLayout         android layout height  0dp          android layout width  match parent          android layout weight  1          android orientation  horizontal  gt            lt ImageButton             android layout height  match parent              android layout width  0dp              android layout weight  1              android id    id button repeat      android layout marginBottom  5sp          android layout marginLeft  2sp          android layout marginRight  5sp          android layout marginTop  0sp                      gt                  lt ImageButton             android layout height  match parent              android layout width  0dp              android layout weight  1              android id    id button next      android layout marginBottom  5sp          android layout marginLeft  2sp          android layout marginRight  5sp          android layout marginTop  0sp                      gt        lt  LinearLayout gt          lt LinearLayout         android layout height  0dp          android layout width  match parent          android layout weight  1          android orientation  horizontal  gt            lt ImageButton             android layout height  match parent              android layout width  0dp              android layout weight  1              android id    id button bottomleft      android layout marginBottom  5sp          android layout marginLeft  2sp          android layout marginRight  5sp          android layout marginTop  0sp                                                  gt           lt ImageButton             android layout height  match parent              android layout width  0dp              android layout weight  1              android id    id button bottomright      android layout marginBottom  5sp          android layout marginLeft  2sp          android layout marginRight  5sp          android layout marginTop  0sp                                  gt               lt  LinearLayout gt            lt  LinearLayout gt    and a snippet of myClass java    public void addImageButtons                 iB topleft    ImageButton  findViewById R id button topleft           iB topright    ImageButton  findViewById R id button topright           iB bottomleft    ImageButton  findViewById R id button bottomleft           iB bottomright    ImageButton  findViewById R id button bottomright           iB next    ImageButton  findViewById R id button next           iB repeat    ImageButton  findViewById R id button repeat              public void setImageNextAndRepeat              iB topleft  setImageResource R drawable aa           iB topright setImageResource R drawable bb           iB bottomleft setImageResource R drawable cc           iB bottomright setImageResource R drawable dd               iB next setImageResource R drawable next           iB repeat setImageResource R drawable repeat

User · Answer

I m using the following code in xml  android adjustViewBounds  true  android scaleType  centerInside

User · Answer

It worked well in my case  First  you download an image and rename it as iconimage  locates it in the drawable folder  You can change the size by setting android layout width or android layout height  Finally  we have    lt ImageButton         android id    id answercall          android layout width  120dp          android layout height  80dp          android src   drawable iconimage          android layout alignParentBottom  true          android layout alignParentLeft  true          android scaleType  fitCenter    gt

User · Answer

I m using android scaleType  fitCenter  with satisfaction

User · Answer

Refer below link and try to find what you really want      ImageView ScaleType   CENTER Center the image in the view  but perform   no scaling        ImageView ScaleType   CENTER CROP Scale the image uniformly  maintain   the image s aspect ratio  so that both dimensions  width and height    of the image will be equal to or larger than the corresponding   dimension of the view  minus padding         ImageView ScaleType   CENTER INSIDE Scale the image uniformly  maintain   the image s aspect ratio  so that both dimensions  width and height    of the image will be equal to or less than the corresponding dimension   of the view  minus padding         ImageView ScaleType   FIT CENTER Scale the image using CENTER        ImageView ScaleType   FIT END Scale the image using END        ImageView ScaleType   FIT START Scale the image using START        ImageView ScaleType   FIT XY Scale the image using FILL        ImageView ScaleType   MATRIX Scale using the image matrix when drawing    https   developer android com reference android widget ImageView ScaleType html

User · Answer

I recently found out by accident that since you have more control on a ImageView that you can set an onclicklistener for an image here is a sample of a dynamically created image button  private int id  private bitmap bmp      LinearLayout LayoutParams familyimagelayout   new LinearLayout LayoutParams                      LinearLayout LayoutParams MATCH PARENT LinearLayout LayoutParams WRAP CONTENT         final ImageView familyimage   new ImageView this               familyimage setBackground null               familyimage setImageBitmap bmp               familyimage setScaleType ImageView ScaleType FIT START               familyimage setAdjustViewBounds true               familyimage setId id               familyimage setOnClickListener new View OnClickListener                      Override                 public void onClick View v                          what you want to do put here

User · Answer

You can make your ImageButton widget as I did  In my case  I needed a widget with a fixed icon size  Let s start from custom attributes    lt  xml version  1 0  encoding  utf-8   gt   lt resources gt       lt declare-styleable name  ImageButtonFixedIconSize  gt           lt attr name  imageButton icon  format  reference    gt           lt attr name  imageButton iconWidth  format  dimension    gt           lt attr name  imageButton iconHeight  format  dimension    gt       lt  declare-styleable gt   lt  resources gt    Widget class is quite simple  the key point is padding calculations in onLayout method    class ImageButtonFixedIconSize  JvmOverloads constructor      context  Context      attrs  AttributeSet    null      defStyleAttr  Int   android R attr imageButtonStyle     ImageButton context  attrs  defStyleAttr         private lateinit var icon  Drawable       Px     private var iconWidth  Int   0      Px     private var iconHeight  Int   0      init           scaleType   ScaleType FIT XY         attrs  let   retrieveAttributes it                                      override fun onLayout changed  Boolean  left  Int  top  Int  right  Int  bottom  Int            val width   right - left         val height   bottom - top          val horizontalPadding   if width  gt  iconWidth   width - iconWidth    2 else 0         val verticalPadding   if height  gt  iconHeight   height - iconHeight    2 else 0          setPadding horizontalPadding  verticalPadding  horizontalPadding  verticalPadding           setImageDrawable icon           super onLayout changed  left  top  right  bottom                                    private fun retrieveAttributes attrs  AttributeSet            val typedArray   context obtainStyledAttributes attrs  R styleable ImageButtonFixedIconSize           icon   typedArray getDrawable R styleable ImageButtonFixedIconSize imageButton icon             iconWidth   typedArray getDimension R styleable ImageButtonFixedIconSize imageButton iconWidth  0f  toInt           iconHeight   typedArray getDimension R styleable ImageButtonFixedIconSize imageButton iconHeight  0f  toInt            typedArray recycle             And at last you should use your widget like this    lt com syleiman gingermoney ui common controls ImageButtonFixedIconSize     android layout width  90dp      android layout height  63dp       app imageButton icon   drawable ic backspace      app imageButton iconWidth  20dp      app imageButton iconHeight  15dp       android id    id backspaceButton      tools ignore  ContentDescription        gt

User · Answer

I want them to cover 75  of the button area     Use android padding  20dp   adjust the padding as needed  to control how much the image takes up on the button      but where as some images cover less area  some are too big to fit into the imageButton  How to programatically resize and show them    Use a android scaleType  fitCenter  to have Android scale the images  and android adjustViewBounds  true  to have them adjust their bounds due to scaling    All of these attributes can be set in code on each ImageButton at runtime  However  it is much easier to set and preview in xml in my opinion   Also  do not use sp for anything other than text size  it is scaled depending on the text size preference the user sets  so your sp dimensions will be larger than your intended if the user has a  large  text setting  Use dp instead  as it is not scaled by the user s text size preference   Here s a snippet of what each button should look like        lt ImageButton         android id    id button topleft          android layout width  0dp          android layout height  match parent          android layout marginBottom  5dp          android layout marginLeft  2dp          android layout marginRight  5dp          android layout marginTop  0dp          android layout weight  1          android adjustViewBounds  true          android padding  20dp          android scaleType  fitCenter    gt

User · Answer

Try to use android scaleType  fitXY  in i-Imagebutton xml

[android] Fit Image in ImageButton in Android

Examples related to android

Examples related to image

Examples related to android-linearlayout

Examples related to scale

Examples related to imagebutton