Search code examples
androidimageviewresponsive-images

How to make image from internet responsive on Android layout?


I have an Imageview on my layout which I fill with a .jpg that I download from the web. The thing is that I am trying to make the image container responsive to the screen size since in larger phones the image is seen small.

    public class DownloadImageTask extends AsyncTask<String, Void, Bitmap> {

    ImageView bmImage;

    public DownloadImageTask(ImageView bmImage) {
        this.bmImage = bmImage;
    }

    protected Bitmap doInBackground(String... urls) {
        String urldisplay = urls[0];
        Bitmap mIcon11 = null;
        try {
            InputStream in = new java.net.URL(urldisplay).openStream();
            mIcon11 = BitmapFactory.decodeStream(in);
        } catch (Exception e) {
            Log.e("Error", e.getMessage());
            e.printStackTrace();
        }
        return mIcon11;
    }

    protected void onPostExecute(Bitmap result) {
        bmImage.setImageBitmap(result);
    }
    }

    public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        String imageUrl="https:url";

        new DownloadImageTask((ImageView) findViewById(R.id.imvAd))
                .execute(imageUrl);
    }
    }

I do not want to give fixed values.

Any help or suggestions on what to look for would be great

This is 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".startActivities.LoginActivity"
    android:orientation="vertical">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="5"
        android:background="@color/white"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/imvLogo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:src="@mipmap/logo"
                tools:ignore="ContentDescription" />

            <LinearLayout
                android:id="@+id/lytProgressBarLogin"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:visibility="gone">

                <ProgressBar
                    android:id="@+id/pgbLogin"
                    style="?android:attr/progressBarStyle"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="center" />

            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center_vertical"
                android:orientation="vertical"
                android:padding="10dp">

                <TextView
                    android:id="@+id/txtwelcome"
                    style="@style/styleTextview1"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="@string/welcome" />

                <EditText
                    android:id="@+id/edtPwdworker"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:ems="10"
                    android:hint="@string/password"
                    android:inputType="numberPassword" />

                <Button
                    android:id="@+id/btnLogin"
                    style="@style/styleButtonConsult"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="20dp"
                    android:text="@string/login" />
            </LinearLayout>

            <TextView
                android:id="@+id/txtInfoRoute"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginBottom="10dp"
                android:layout_weight="90"
                android:gravity="center" />

            <TextView
                android:id="@+id/txtPinDeviceLogin"
                style="@style/styleTextviewsubTitlebold"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="5dp"
                android:gravity="center"
                android:text="@string/pinDevice" />

            <ImageView
                android:id="@+id/imvAd"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:padding="10dp"
                tools:ignore="ContentDescription" />
        </LinearLayout>

    </ScrollView>

    <TextView
        android:id="@+id/txtVersionLogin"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="95"
        android:gravity="center" />

</LinearLayout>

Solution

  • If your ImageView is fixed you can scale the image by setting ScaleType to CENTER_CROP or other relevant scale types to make the image scale as your ImageView does.

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop" />
    

    Also don't use wrap_content instead you may use match_parent to fit the layout. or use 0dp ( in ConstraintLayout ) and constraint the ImageView between two other views.

    but if you want your ImageView's size changes with respect to the screen's size you can use a Constraintlayout as the parent and use layout_constraintDimensionRatio like this.

    <androidx.constraintlayout.widget.ConstraintLayout>
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:layout_constraintDimensionRatio="1:1" />
    </androidx.constraintlayout.widget.ConstraintLayout>
    

    Besides that, I suggest using an image loader library such as Glide. It's more efficient than loading the image yourself and also you can set the scale type directly from there.