How to change imageview according to screen size

Question

I tried to add an imageview (profile image), 2 textview (username and email) into navigation header.

This is the xml code for the navigation header

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="@dimen/nav_header_height"
android:background="@drawable/side_nav_bar"
android:gravity="bottom"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:theme="@style/ThemeOverlay.AppCompat.Dark">

<ImageView
    android:id="@+id/header_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@android:drawable/sym_def_app_icon" />

<TextView
    android:id="@+id/header_username"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="@dimen/nav_header_vertical_spacing"
    android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

<TextView
    android:id="@+id/header_email"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    />

</LinearLayout>

I load the imageview via picasso , this is the code how I load it.

private void setNavHeader() {
    User user = presenter.getUser();
    username.setText(user.getUsername());
    email.setText(user.getEmail());
    try {
        Picasso.with(this)
                .load(user.getUserImage())
                .error(R.drawable.ic_menu_camera)
                .resize(200, 200)
                .into(profileImage);
    }catch(Exception e){
        profileImage.setImageResource(R.drawable.ic_menu_camera);
        LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(200, 200);
        profileImage.setLayoutParams(layoutParams);
    }
}

This is my output However, it only fit my phone screen size. When I change the screen size to smaller screen size. The profile image will cover off the username and email. How to change the size of profile image according to the screen size then it will not cover off the username and email?

Answer 1

First, remove the try and catch. Its not good to hide this error, simply check for possible url issues and set your image by hand, like in your cache block. Check the userimage url for its empty or null , if you use a String or Uri.

The point is you are using a LinearLayout , which takes care that the child views not overlap. If you change the ImageView height it could be possible, that your TextViews get cut on bottom, because there is not enough space defined by your android:layout_height="@dimen/nav_header_height" value.

Set your wished hight and width in XML like:

<ImageView
    android:id="@+id/header_image"
    android:layout_width="100dp"
    android:layout_height="100dp"
    app:srcCompat="@android:drawable/sym_def_app_icon" />

Simply find your correct size / ask your designer (if you work with one) whats the suitable size for this image. This will change the View bounds of the ImageView , the shown image will, of course, depend on this size.

You can play a little bit with the following attributes for imageView:

android:scaleType
android:adjustViewBounds

This changes the behavior how the image will be shown inside the bounds of the ImageView .

Use dp instead of pixel, this takes also care, that your image view gets good scaled on different device sizes.

And you can play with Picasso functions like:

Picasso.with(this)
            .load(user.getUserImage())
            .error(R.drawable.ic_menu_camera)

            .placeholder(...)

            .resize(imageView.getMeasuredWidth(), imageView.getMeasuredHeight()) // <-- is needed for some functions

            .fit()// <--
            .centerCrop()// <--
            .centerInside()// <--

            .into(profileImage);

Simply find your function which gives you best result.