linearlayout - relativelayout android studio

ImageView rellena el ancho o la altura del elemento principal, pero mantiene la relación de aspecto

Question

Tengo una imagen cuadrada (aunque este problema también se aplica a imágenes rectangulares). Quiero mostrar la imagen lo más grande posible, estirándolos si es necesario, para llenar a sus padres, al mismo tiempo que mantengo la relación de aspecto. La imagen es más pequeña que ImageView. El problema es que no puedo estirar la imagen y "hacer coincidir" el alto y el ancho de ImageView.

Este es mi archivo de diseño XML:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:padding="10dp">

    <ImageView android:id="@+id/image"
               android:layout_width="fill_parent"
               android:layout_height="fill_parent"
               android:adjustViewBounds="true"
               android:scaleType="fitCenter"
               android:layout_marginTop="10dp"/>

    <TextView android:id="@+id/name"
              android:layout_below="@id/image"
              android:layout_alignLeft="@id/image"
              android:layout_marginTop="20dp"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:textSize="18dp"/>

    <TextView android:id="@+id/name2"
              android:layout_below="@id/name"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:textSize="14dp"/>


</RelativeLayout>

He usado muchas combinaciones de fill_parent , wrap_content con múltiples scaleTypes: fitCenter , fitStart , fitEnd , centerInside , y todos ellos dibujan las imágenes en la relación de aspecto correcta, pero ninguna de ellas escala realmente las imágenes y la propia ImageView , lo que da como resultado los TextViews se desplazan hacia abajo desde la pantalla, los espacios en blanco dentro de ImageView, la imagen sin escala o la imagen recortada.

No puedo entender la combinación correcta para esto.

Answer 1

¿Intentó ajustarlo programáticamente? Creo que funciona muy bien si calcula la altura de su TextView y ajusta la altura y el ancho de la imagen en función de esto.

private void adjustImageView()
{
    //Get the display dimensions
    DisplayMetrics metrics = new DisplayMetrics();
    getWindowManager().getDefaultDisplay().getMetrics(metrics);

    //TextView name
    TextView name = (TextView) findViewById(R.id.name);
    name.setText("your name text goes here");
    name.measure(0, 0);

    //name TextView height
    int nameH = name.getMeasuredHeight();

    //TextView name2
    TextView name2 = (TextView) findViewById(R.id.name2);
    name2.setText("your name2 text goes here");
    name2.measure(0, 0);

    //name2 TextView height
    int name2H = name2.getMeasuredHeight();

    //Original image
    Bitmap imageOriginal = BitmapFactory.decodeResource(getResources(), R.drawable.image);

    //Width/Height ratio of your image
    float imageOriginalWidthHeightRatio = (float) imageOriginal.getWidth() / (float) imageOriginal.getHeight();

    //Calculate the new width and height of the image to display 
    int imageToShowHeight = metrics.heightPixels - nameH - name2H;
    int imageToShowWidth = (int) (imageOriginalWidthHeightRatio * imageToShowHeight);

    //Adjust the image width and height if bigger than screen
    if(imageToShowWidth > metrics.widthPixels)
    {
        imageToShowWidth = metrics.widthPixels;
        imageToShowHeight = (int) (imageToShowWidth / imageOriginalWidthHeightRatio);
    }

    //Create the new image to be shown using the new dimensions 
    Bitmap imageToShow = Bitmap.createScaledBitmap(imageOriginal, imageToShowWidth, imageToShowHeight, true);

    //Show the image in the ImageView
    ImageView image = (ImageView) findViewById(R.id.image);
    image.setImageBitmap(imageToShow);
}

Answer 2

Establecer android:layout_height="wrap_content" en la vista de la imagen. Para crear una imagen con un ancho igual al ancho de la pantalla y una altura proporcionalmente establecida de acuerdo con la relación de aspecto, haga lo siguiente. Aquí menciono cómo cargar imágenes a la vista de la imagen desde url.

Glide.with(context).load(url).asBitmap().into(new SimpleTarget<Bitmap>() {
                    @Override
                    public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) {

                        // creating the image that maintain aspect ratio with width of image is set to screenwidth.
                        int width = imageView.getMeasuredWidth();
                        int diw = resource.getWidth();
                        if (diw > 0) {
                            int height = 0;
                            height = width * resource.getHeight() / diw;
                            resource = Bitmap.createScaledBitmap(resource, width, height, false);
                        }
                                              imageView.setImageBitmap(resource);
                    }
                });

Espero que esto ayude.

Answer 3

Estas:

android:layout_height="wrap_content"
android:scaleType="fitStart"
android:adjustViewBounds="true"

debería cambiar el tamaño de la imagen y cambiar el tamaño de los límites para que se ajuste al nuevo tamaño de imagen. Si no funciona en su dispositivo, publique la imagen que está utilizando y el dispositivo con el que está probando.

Answer 4

Este código xml funcionará !. Si especifica que el ancho de sus aplicaciones es siempre el mismo que el de la ventana, entonces android:adjustViewBounds="true" establecerá la altura correspondiente a la ración de la imagen.

        <ImageView
        android:adjustViewBounds="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/screen"/>

Answer 5

Tuve el mismo problema, android: adjustViewBounds no está haciendo su trabajo y tiene un relleno en la parte superior de la imagen. En un diseño relativo que tenía valores match_parent para el ancho y la altura, tuve:

   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="vertical" android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:background="@color/transparent">

   <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleType="fitStart"
    android:adjustViewBounds="true" ...

Cambié el diseño Relativo a un diseño Linear con valores wrap_content para ancho y alto y ahora está bien:

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

Answer 6

Use este código con los parámetros de diseño de vista como contenido

android: adjustViewBounds = "true"

Espero que esto funcione.

Answer 7

Use este código: android:scaleType="fitXY"

Para obtener más detalles sobre la escala de la imagen, mira lo que se indica en este artículo here

Resumen:

• center

Centre la imagen en la vista, pero no realice escalas

• centerCrop

Escale la imagen uniformemente (mantenga la relación de aspecto de la imagen) para que ambas dimensiones (ancho y alto) de la imagen sean iguales o mayores que la dimensión correspondiente de la vista (menos el relleno). La imagen se centra en la vista

• centerInside

Escale la imagen de manera uniforme (mantenga la relación de aspecto de la imagen) para que ambas dimensiones (ancho y alto) de la imagen sean iguales o menores que la dimensión correspondiente de la vista (menos relleno)

• fitCenter

• fitEnd

• fitStart

• fitXY

• matrix

Escala usando la matriz de imagen al dibujar

más detalles here nuevo artículo