android: text size changed while combining text and image

Question

I have textView (mTextOnImage) and imageView (mImageView) .
I combine them by using the function combineImages , but when I combine , the text size is changed .

//generate bitmap of textView by using getDrawingCache()
Bitmap bmp = Bitmap.createBitmap(mTextOnImage.getDrawingCache());

//getting image as bitmap from image view ( to use as background to combine )
BitmapDrawable drawable = (BitmapDrawable) mImageView.getDrawable();
Bitmap bitmapBackground = drawable.getBitmap();

//combining two bitmaps
Bitmap combined = combineImages(bitmapBackground, bmp);

This is combineImages function

 public Bitmap combineImages(Bitmap background, Bitmap foreground) {


        Bitmap cs;
        cs = Bitmap.createBitmap(background.getWidth(), background.getHeight(), Bitmap.Config.ARGB_8888);

        //creating canvas by background image's width and height
        Canvas comboImage = new Canvas(cs);
        background = Bitmap.createScaledBitmap(background, background.getWidth(), background.getHeight(), true);

        //Drawing background to canvas
        comboImage.drawBitmap(background, 0, 0, null);

        //Drawing foreground (text) to canvas            
        comboImage.drawBitmap(foreground, mTextOnImage.getLeft(),mTextOnImage.getTop(), null);

        return cs;
    }

Bitmap combined successfully but the text size is changed .
This is how I set text size

mTextOnImage.setTextSize(getResources().getDimensionPixelSize(R.dimen.myFontSize));

In string resource ,

<resources>
    <dimen name="myFontSize">40sp</dimen>
</resources>

I get the background image from device gallery , so the resolution (image dimension) may be different.
Is there any calculation I missed ?

Additionally , textView (mTextOnImage) is draggable, so I also want to set the position correctly on combining those two.

https://stackoverflow.com/questions/3176033/spannablestring-with-image-example — AskNilesh, Dec 06 '17 at 04:58
@Nilu , may be this example is to add image into `text String` . But what I need is to combine text and image like **overlay**. like this [image](https://i.pinimg.com/736x/80/76/d3/8076d33b2194237f8ef486a22b6246f2--quotes-from-albert-einstein-make-mistakes.jpg) — zey, Dec 06 '17 at 11:45
Have you tried `comboImage.drawBitmap(background, new Matrix(), null)`? — azizbekian, Dec 11 '17 at 06:36

Cheticamp · Accepted Answer · 2017-12-12T04:18:24.080

It would be helpful to see your layout XML and a couple of images. Lacking those, I suggest that you check to make sure that your images are not somehow being resized upon display.

Update: Before looking at the longer solution, try changing how you are setting the text size. The default is "sp" and you are using "px".

mTextOnImage.setTextSize(TypedValue.COMPLEX_UNIT_PX, getResources().getDimension(R.dimen.myFontSize))

If that doesn't work, try the following:

I took your code and made a few changes to try to reproduce the problem. In the layout, I display a text view (height and width = wrap_content) and a non-resized image. Below these two views I display the combined view. I have positioned the text of the combined view at the top with a white background so I could make a quick comparison. Here is the result:

The two "Hello World!"s look the same to me. This leads me to believe that your combined image view is being stretched or shrunk and, in the process, your text is changing size since it is just part of the image.

Here is my code that produces the above image. The image is just a "png" graphic.

MainActivity.java

public class MainActivity extends AppCompatActivity {
    private TextView mTextOnImage;
    private ImageView mImageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mTextOnImage = findViewById(R.id.textOnImage);
        mImageView = findViewById(R.id.imageView);
        mTextOnImage.post(new Runnable() {
            @Override
            public void run() {
                //generate bitmap of textView by using getDrawingCache()
                mTextOnImage.buildDrawingCache();
                Bitmap bmp = Bitmap.createBitmap(mTextOnImage.getDrawingCache());

//getting image as bitmap from image view ( to use as background to combine )
                mImageView.buildDrawingCache();
                BitmapDrawable drawable = (BitmapDrawable) mImageView.getDrawable();
                Bitmap bitmapBackground = drawable.getBitmap();

//                Bitmap bitmapBackground = mImageView.getDrawingCache();

//combining two bitmaps
                Bitmap combined = combineImages(bitmapBackground, bmp);
                ((ImageView) findViewById(R.id.imageCombined)).setImageBitmap(combined);
            }
        });
    }

    public Bitmap combineImages(Bitmap background, Bitmap foreground) {


        Bitmap cs;
        cs = Bitmap.createBitmap(background.getWidth(), background.getHeight(), Bitmap.Config.ARGB_8888);

        //creating canvas by background image's width and height
        Canvas comboImage = new Canvas(cs);
        background = Bitmap.createScaledBitmap(background, background.getWidth(), background.getHeight(), true);

        //Drawing background to canvas
        comboImage.drawBitmap(background, 0, 0, null);

        //Drawing foreground (text) to canvas
//        comboImage.drawBitmap(foreground, mTextOnImage.getLeft(),mTextOnImage.getTop(), null);
        comboImage.drawBitmap(foreground, (mImageView.getWidth() - foreground.getWidth()) / 2,
                              0, null);

        return cs;
    }
}

activity_main.xml

<android.support.constraint.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        app:layout_constraintBottom_toTopOf="@+id/textOnImage"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed"
        app:srcCompat="@drawable/sky" />

    <TextView
        android:id="@+id/textOnImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:text="Hello World!"
        android:textColor="@android:color/holo_red_dark"
        android:textSize="40sp"
        app:layout_constraintBottom_toTopOf="@+id/imageCombined"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />

    <ImageView
        android:id="@+id/imageCombined"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textOnImage" />

</android.support.constraint.ConstraintLayout>

@zey `TypedValue.COMPLEX_UNIT_PX` - `40sp` is being converted to `px` in the call `getResources().getDimension(R.dimen.myFontSize)`. — Cheticamp, Dec 12 '17 at 12:05

android: text size changed while combining text and image

1 Answers1