Search code examples
androidandroid-arrayadapterandroid-imageviewnine-patch

insert imageview in android chat bubble adjustable


I would like to do this on my android chat

enter image description here

but I can not get my picture fit my bubble. -I have a LinearLayout, and his background is a bubble 9patch -within this, I have a imageview, insert the image here but not how to make this fit the background like we see on screen.

this is how my image is

enter image description here

could give me an idea of how I can do this?

thank.

UPDATE : 28/04/2013

this is my layout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rtlImganen"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginRight="25dp"
    android:gravity="center_vertical" >

    <LinearLayout
        android:id="@+id/lnyGenImagenMio"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:background="@drawable/bocadilloazulmio"
        android:gravity="right"
        android:orientation="vertical" >

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

            <ImageView
                android:id="@+id/imgImagenMio"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:adjustViewBounds="true"
                android:maxHeight="@dimen/maximagen"
                android:maxWidth="@dimen/maximagen"
                android:scaleType="centerCrop" />

            <ImageView
                android:id="@+id/imgPlayMio"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:src="@drawable/play" />
        </RelativeLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp" >

            <ImageView
                android:id="@+id/imgImagenEnvioRecibidoMio"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:src="@drawable/enviadorecibido" />

            <TextView
                android:id="@+id/txtFechaImagenVideoMio"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:textColor="#0000FF"
                android:textSize="8sp" />

        </LinearLayout>

    </LinearLayout>

</RelativeLayout>

yet I still haven´t the solution


Solution

  • this can only be done with a custom view. I had the same problem. Look for Custom ImageView and Paths and clipping Bitmaps. I wrote this snippet to clip a speech bubble shape out of a given bitmap:

      public static Bitmap clipit(Bitmap bitmapimg,int direct) {
    
        //1 = direction right
        //0 = direction left
    
          Bitmap output = Bitmap.createBitmap(bitmapimg.getWidth(),
                    bitmapimg.getHeight(), Config.ARGB_8888);
            Canvas canvas = new Canvas(output);
    
            final int color = 0xff424242;
            final Paint paint = new Paint();
            final Rect rect = new Rect(0, 0, bitmapimg.getWidth(),
                    bitmapimg.getHeight());
    
            paint.setAntiAlias(true);
            canvas.drawARGB(0, 0, 0, 0);
            paint.setColor(color);
    
            if(direct == 0) {
            canvas.drawRect(0, 0, bitmapimg.getWidth()-15, bitmapimg.getHeight(), paint);
            Path path = new Path();
            path.moveTo(bitmapimg.getWidth()-15, 10);
            path.lineTo(bitmapimg.getWidth(), 20);
            path.lineTo(bitmapimg.getWidth()-15, 30);
            path.lineTo(bitmapimg.getWidth()-15, 10);
            canvas.drawPath(path,paint);
            }
            if(direct == 1) {
                canvas.drawRect(15, 0, bitmapimg.getWidth(), bitmapimg.getHeight(), paint);             
                Path path = new Path();
                path.moveTo(15, 10);
                path.lineTo(0, 20);
                path.lineTo(15, 30);
                path.lineTo(15, 10);
                canvas.drawPath(path,paint);    
            }
    
    
            paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
            canvas.drawBitmap(bitmapimg, rect, rect, paint);
            return output;
    
      }
    

    does this solve your problem?