Android - Image coming from web service has different size on different devices

Question

I know there are lots of question about this topic. But still I need help. I want to show my ImageView has equal width and height in my TableLayout. But on different devices I couldn't be able to do this.

Here is I get the image using URL in AsyncTask, and set the ImageView on onPostExecute method.

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) {
    // set the imageview 
    bmImage.setImageBitmap(result);
}

Here is my XML file (news.xml) where my ImageView located

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:paddingEnd="10dp"
android:layout_marginRight="10dp"
android:layout_marginEnd="10dp"
android:paddingBottom="10dp"
android:id="@+id/mylayout"
>

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/image"
    android:clickable="true"
    android:background="@drawable/border"/>

<TextView
    android:layout_width="match_parent"
    android:layout_height="75dp"
    android:maxLines="4"
    android:id="@+id/text"
    android:layout_below="@+id/image"
    android:layout_alignEnd="@+id/image"
    android:layout_alignRight="@+id/image"

    android:clickable="true"
    android:textSize="18sp"
    android:background="#e3e3e3"
    android:paddingTop="10dp"
    android:gravity="center_vertical"
    />


</RelativeLayout>

I thought that I can create a TableLayout, and locate the View (above) inside a TableRow like, side by side 2 view.(view is above)

To do this I get the screen width and subtract the paddings and divide by 2 and give that width to the ImageView to be able to get same size for all image views.

Here is my code,

    DisplayMetrics metrics = new DisplayMetrics();
    getActivity().getWindowManager().getDefaultDisplay().getMetrics(metrics);

    screenWidth = metrics.widthPixels;

    tableLayout = (TableLayout) view.findViewById(R.id.tableLayout);


    Log.e("screenwidth",":"+screenWidth);
    // here is my paddings converted to pixel and will be subtracted from screen width
    int pixValue = (int) (20 * Resources.getSystem().getDisplayMetrics().density);
    int imageWidthPix = ( screenWidth - pixValue ) / 2;
    Log.e("imageWidthPix ",":"+imageWidthPix );

    for (int i = 0; i < categoryNews.get(myString).size(); i++) {

        if (i % 2 == 0) {
            tr = new TableRow(getActivity());
            tableLayout.addView(tr);
        }

        //here is where my ImageView layout (news.xml)
        View oneNews = inflater.inflate(R.layout.news, null);

        ImageView imageView = (ImageView) oneNews.findViewById(R.id.image);
        TextView textView = (TextView) oneNews.findViewById(R.id.text);

        //here I set the width as I want
        imageView.setLayoutParams(new RelativeLayout.LayoutParams(imageWidthPix, RelativeLayout.LayoutParams.WRAP_CONTENT));

        String imagePath = "http://my.url.com/" + categoryNews.get(myString).get(i).getImagePath();

        new DownloadImageTask(imageView,getActivity().getApplicationContext())
                .execute(imagePath);

I got the perfect result on my phone. But on the different device which has different screen size, ImageView has spaces on top and bottom. I tried to convert nine patch chunk and convert that into again bitmap but there were no difference. If I wouldn't get the images from web service, I would put other resolution images into mipmap-hpdi, mipmap-mdpi etc folders and there would be no error. But I am getting images dynamically so how can achieve that ImageView has half of screen width? Thanks in advance.

Answer 1

Here I have edited your xml

Try Linear layout with weights,change the weight according to your need, change the layout_weight to make your image view and textview smaller or larger.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingBottom="10dp"
    android:orientation="vertical"
    android:id="@+id/mylayout"
    android:weightSum="10">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="3"
        android:id="@+id/image"
        android:src="@drawable/sd"
        android:clickable="true"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:maxLines="4"
        android:id="@+id/text"
        android:clickable="true"
        android:textSize="18sp"
        android:background="#e3e3e3"
        android:paddingTop="10dp"
        android:gravity="center_vertical"
        />


</LinearLayout>