Ajustar imagen en ImageButton en Android

147

Tengo 6 ImageButton en mi actividad, configuro imágenes a través de mi código en ellos (sin usar xml).

Quiero que cubran el 75% del área del botón. Pero cuando algunas imágenes cubren menos área, algunas son demasiado grandes para caber en el botón ImageButton. ¿Cómo cambiar el tamaño programáticamente y mostrarlos? A continuación se muestra la captura de pantalla

ingrese la descripción de la imagen aquí a continuación se muestra el archivo xml

<?xml version="1.0" encoding="utf-8"?>
<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"     >
   <LinearLayout
        android:layout_height="0dp"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:orientation="horizontal">
        <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"
            />
        <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"
            />
    </LinearLayout>
    <LinearLayout
        android:layout_height="0dp"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:orientation="horizontal">

        <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"     
             />

              <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"     
             />

    </LinearLayout>    
   <LinearLayout
        android:layout_height="0dp"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:orientation="horizontal">

        <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"                                 
             />
        <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"                  
            />        
    </LinearLayout>        

</LinearLayout>

y un fragmento de 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);      
    }
RDX
fuente
2
¿Has comprobado los métodos de escala que proporciona Android? developer.android.com/reference/android/widget/…
bofredo

Respuestas:

393

Quiero que cubran el 75% del área del botón.

Use android:padding="20dp"(ajuste el relleno según sea necesario) para controlar cuánto ocupa la imagen en el botón.

pero donde algunas imágenes cubren menos área, algunas son demasiado grandes para caber en el botón ImageButton. ¿Cómo cambiar el tamaño programáticamente y mostrarlos?

Use a android:scaleType="fitCenter"para que Android escale las imágenes y android:adjustViewBounds="true"haga que ajusten sus límites debido al escalado.

Todos estos atributos se pueden establecer en código en cada uno ImageButtonen tiempo de ejecución. Sin embargo, en mi opinión, es mucho más fácil configurar y obtener una vista previa en xml.

Además, no lo use sppara otra cosa que no sea el tamaño del texto, se escala según la preferencia de tamaño del texto que establezca el usuario, por lo que sus spdimensiones serán mayores de lo previsto si el usuario tiene una configuración de texto "grande". Use en su dplugar, ya que no está escalado por la preferencia de tamaño de texto del usuario.

Aquí hay un fragmento de cómo debería ser cada botón:

    <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" />

Botón de muestra

Steven Byle
fuente
@Steven Byle Lo siento por la respuesta tardía, pero ¿cómo puedo aplicar lo mismo pero para un diseño relativo?
Estamos todos locos aquí
8
Para aquellos que buscan, los ImageButtonmétodos setScaleType(ImageView.ScaleType.CENTER) setAdjustViewBounds(true)hacen esto mediante programación.
ps95
Muchas gracias :)
Pankaj Nimgade
1
También haga android: background = "@ null" para probar el fondo predeterminado
C.Ikongo
31

Estoy usando el siguiente código en xml

android:adjustViewBounds="true"
android:scaleType="centerInside"
Pratibha Sarode
fuente
2
Tengo un rectángulo bastante "plano" y esto funciona bien para mí ... sin embargo, asegúrate de usar "android: src" en lugar de "android: background". +1.
Johnny Wu
@johnny Gracias amigo por el consejo!
Bishan
8

Intenta usar android:scaleType="fitXY"en i-Imagebutton xml

Swap-IOS-Android
fuente
aunque esto funcionó y escalado, pero quería que cubriera el 75% del área para una mejor visibilidad.
RDX
@PowerPC intenta usar framelayout para dar altura y ancho al 75% y en ese diseño de marco usa tu botón de imagen y ajusta el tipo de escala para xy
Swap-IOS-Android
framelayout para cada botón de imagen dentro de linearlayout? ¿Puedes aclarar
RDX
@PowerPC Nunca uso esto, pero este enlace puede ayudarlo a stackoverflow.com/questions/9946580/…
Swap-IOS-Android
1
@StevenByle consideré ambos enfoques, pero como quería una cobertura de área del 75%, su solución funcionó bien. Gracias.
RDX
7

Estoy usando android:scaleType="fitCenter"con satisfacción.

Serafines
fuente
3

Consulte el siguiente enlace e intente encontrar lo que realmente desea:

ImageView.ScaleType CENTER Centra la imagen en la vista, pero no realiza escala.

ImageView.ScaleType CENTER_CROP Escala la imagen de manera uniforme (mantiene la relación de aspecto de la imagen) de modo que ambas dimensiones (ancho y alto) de la imagen sean iguales o mayores que la dimensión correspondiente de la vista (menos el relleno).

ImageView.ScaleType CENTER_INSIDE Escala la imagen de manera uniforme (mantiene la relación de aspecto de la imagen) de modo que ambas dimensiones (ancho y alto) de la imagen sean iguales o menores que la dimensión correspondiente de la vista (menos el relleno).

ImageView.ScaleType FIT_CENTER Escala la imagen con CENTER.

ImageView.ScaleType FIT_END Escala la imagen con END.

ImageView.ScaleType FIT_START Escala la imagen usando START.

ImageView.ScaleType FIT_XY Escala la imagen usando FILL.

ImageView.ScaleType MATRIX Escala utilizando la matriz de imagen al dibujar.

https://developer.android.com/reference/android/widget/ImageView.ScaleType.html

Nhat Dinh
fuente
1

Recientemente descubrí por accidente que, dado que tienes más control sobre un ImageView, puedes configurar un onclicklistener para una imagen. Aquí hay una muestra de un botón de imagen creado dinámicamente.

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
                }
            });
David
fuente
No es una mala idea Me gusta.
Boris Karloff el
0

Funcionó bien en mi caso. Primero, descarga una imagen y la renombra como iconimage, la ubica en la carpeta dibujable. Puede cambiar el tamaño configurando android:layout_widtho android:layout_height. Finalmente tenemos

 <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" />
Jame
fuente
0

Puedes hacer tu widget ImageButton como lo hice yo. En mi caso, necesitaba un widget con un tamaño de icono fijo. Comencemos por los atributos personalizados:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ImageButtonFixedIconSize">
        <attr name="imageButton_icon" format="reference" />
        <attr name="imageButton_iconWidth" format="dimension" />
        <attr name="imageButton_iconHeight" format="dimension" />
    </declare-styleable>
</resources>

La clase de widget es bastante simple (el punto clave son los cálculos de relleno en el método onLayout ):

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 > iconWidth) (width - iconWidth) / 2 else 0
        val verticalPadding = if(height > 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()
    }
}

Y por fin deberías usar tu widget así:

<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"
    />
Alex Shevelev
fuente