ImageView Inside the ScrollView should fit device layout

Question

Please help me in designing the screen as follows

I want to set the imageview to device layout. Ex: if i run the app in 5 inch screen, only image view should show up, i need to scroll down to see the description. similarly when i run the app in 4 inch screen, only image view should show up without any cut in image.

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/category_scroll"
android:layout_width="match_parent"
android:layout_height="match_parent" >

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

    <RelativeLayout
        android:id="@+id/relativeLayout1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <ImageView
            android:id="@+id/dishDetailPageImage"
            android:layout_width="match_parent"
            android:layout_height="565dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:scaleType="centerCrop"
            android:src="@drawable/placeholder" />
</RelativeLayout>
<RelativeLayout
        android:id="@+id/relativeLayout2"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

//description contents

</RelativeLayout>
</ScrollView>

Thanks in Advance.

@Elltz i've updated my xml. for ImaveView i've set the height as 565dp. I want to apply autolayout that should adjust as per the screen size. If i give "match_parent" or "fill_parent" i'm not getting the proper output. — VinothKathir, Jan 23 '15 at 09:49

score 3 · Accepted Answer · edited May 23 '17 at 12:08

You can't set the height of ImageView directly in layout XML file.

You need to find the height of your screen programmatically and then need to set LayoutParams to your ImageView.

Here are the steps you need to follow:

Get the height of device screen.
Get the height of ActionBar.
Get the height of StatusBar.

Height-For-ImageView = 1-2-3.

Here is the XML file that you can use.

<ScrollView 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"
    android:fillViewport="true"
    tools:context=".MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/iv_image"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_red_light"
            android:src="@drawable/ic_launcher" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/iv_image"
            android:text="Hello how are you?, Hello how are you?, Hello how are you?,Hello how are you? ,Hello how are you? " />

    </RelativeLayout>

</ScrollView>

Here is how you can set height programmatically in activity.

public class MainActivity extends ActionBarActivity {

    private ImageView ivImage = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);
        DisplayMetrics displayMetrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
        int height = (int) (displayMetrics.heightPixels/displayMetrics.density);
        int width = (int) (displayMetrics.widthPixels/displayMetrics.density);

        // Calculate ActionBar height
        TypedValue tv = new TypedValue();
        int actionBarHeight=0;
        if (getTheme().resolveAttribute(android.R.attr.actionBarSize, tv, true))
        {
            actionBarHeight = TypedValue.complexToDimensionPixelSize(tv.data,getResources().getDisplayMetrics());
        }

        ivImage = (ImageView) findViewById(R.id.iv_image);
        RelativeLayout.LayoutParams param = new RelativeLayout.LayoutParams(displayMetrics.widthPixels, (displayMetrics.heightPixels-actionBarHeight-getStatusBarHeight()));
        ivImage.setLayoutParams(param);
    }

    public int getStatusBarHeight() {
        int result = 0;
        int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
        if (resourceId > 0) {
            result = getResources().getDimensionPixelSize(resourceId);
        }
        return result;
    }

}

Sources of Answer:

Let me know if it help.

score 1 · Answer 2 · answered Jan 23 '15 at 09:55

You can dynamically set the height of the ImageView By:

ImageView yourImageView=(ImageView)v.findViewById(R.id.yourImageView);
RelativeLayout.LayoutParams params=new RelativeLayout.LayoutParams(widthOfTheImage,getScreenSize(context)[1]));

Get the screen size:

public static int[] getScreenSize(Context context) 
{
    DisplayMetrics displayMetrics=context.getResources().getDisplayMetrics();

    int screenWidthInPix = displayMetrics.widthPixels;

    int screenheightInPix = displayMetrics.heightPixels;

    return (new int[] {  screenWidthInPix,screenheightInPix });
}

This is a possible solution, but you must do this after the view has been measured, otherwise the measurement will override your orders. — Gent Ahmeti, Jan 23 '15 at 10:06

ImageView Inside the ScrollView should fit device layout

2 Answers2