Android : ImageView bitmap image being cut off

Question

I have an app which displays an Imageview, which is populated using bitmap. The image displays properly on Samsung Galaxy S3, but it cuts off on Sony XPeria Z.

The images on these devices are as below:

What do I need to do in order to display the image so that it does not get cropped.

try {
            Paint paint1 = new Paint();
            paint1.setTextSize(20);
            paint1.setTypeface(rcond);
            int bitmapWidth = (int)(bitmapList.size() * (80 + paint1.measureText("\u2192")));// + paint1.measureText("\u2192"));
            drawnBitmap = Bitmap.createBitmap(bitmapWidth, 110, Config.ARGB_8888);

            Canvas canvas = new Canvas(drawnBitmap);
            float left = 0;

            for (Bitmap bmp : bitmapList){
                canvas.drawBitmap(bmp, left, 10, null);

                left = left + 80;// + paint.measureText("\u2192");
            }           
        }



<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/widget76"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/black" >

    <ListView
        android:id="@android:id/list"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="5dp"
        android:divider="@android:color/black"
        android:dividerHeight="10dp" />

    <RelativeLayout
        android:id="@+id/widget78"
        android:layout_marginTop="5dp" 
        android:layout_width="wrap_content"
        android:paddingLeft="5sp"
        android:paddingRight="5sp"
        android:background="@drawable/roundedbutton"
        android:layout_height="wrap_content" >

<!--     <RelativeLayout -->
<!--         android:id="@+id/widget778" -->
<!--         android:layout_width="wrap_content" -->
<!--         android:visibility="gone" -->
<!--         android:background="@drawable/rounded_button_black" -->
<!--         android:layout_height="wrap_content" > -->

<!--         From -->
        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="sans-serif"
            android:text=""
            android:ellipsize="middle"
            android:layout_alignParentLeft="true"
            android:textColor="#000000"
            android:textStyle="bold"
            android:textSize="13sp" />

<!--         From Time-->
        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="sans-serif"
            android:layout_toRightOf="@id/textView1"
            android:text=""
            android:gravity="right"
            android:layout_alignParentRight="true"
            android:textColor="#000000"
            android:textStyle="bold"
            android:textSize="13dp" />

        <LinearLayout 
            android:id="@+id/llMid"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:weightSum="10"
            android:orientation="horizontal"
            android:layout_below="@id/textView1"
            >
        <ImageView
            android:id="@+id/ImageView01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="9"
            android:layout_gravity="left"
            android:maxHeight="110dp"
            android:paddingTop="3dp"
            android:paddingBottom="3dp"
            android:src="@drawable/walking" />

        <TextView
            android:id="@+id/textView5"
            android:layout_width="wrap_content"
            android:fontFamily="sans-serif"
            android:text=""
            android:layout_gravity="center"
            android:gravity="center"
            android:layout_weight="1"
            android:textColor="#000000"
            android:textStyle="bold"
            android:textSize="24sp"
            android:layout_height="50sp"            
            android:width="60sp" />        
        </LinearLayout>
<!--         To -->        
        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="sans-serif"
            android:text=""
            android:gravity="right"
            android:layout_below="@id/llMid"
            android:layout_alignParentLeft="true"            
            android:textColor="#000000"
            android:textStyle="bold"
            android:ellipsize="middle"
            android:textSize="13sp" />

<!--         To Time -->        
        <TextView
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="sans-serif"
            android:text=""
            android:layout_below="@id/llMid"
            android:layout_toRightOf="@id/textView2"
            android:layout_alignParentRight="true"           
            android:gravity="right" 
            android:textColor="#000000"
            android:textStyle="bold"
            android:textSize="13sp" />
<!--     </RelativeLayout> -->

    </RelativeLayout>
</RelativeLayout>

PS: The image is that of a train with some text underneath.

Answer 1

I can't understand why you didn't set a src on your ImageView as the train drawable. Anyway, you should create different sizes of the same image at PS or any other img editor and import it properly. Anyway, I would strongly suggest you to read this guide and this one to better understand how to approach on different screen sizes.

Hope it helps !

Answer 2

So after trying for a few days and getting inconsistent results using a bitmap to draw various icons, I came up with a solution that works (it is not very pretty though).

The number of icons to display is a max of 10, but how many will be in each row, I don't know. So in my layout, I define 10 ImageViews. In the code, I set each imageview with an icon that is needed. The remaining ones, I set the visibility as GONE.

This seems to work fine and I don't get any icons that are cropped off.