How To Merge Two ImageView Using Canvas Android

Please follow and like us:

Merge Two ImageView Using Canvas Android Tutorial

Many Developers find difficult to merge two ImageView, we can achieve this by using Canvas. In this tutorial, we add one Image on top of other image and it looks like we set border as the second image to front image.

Let’s Explore how to implement the logic of how to merge two ImageView using Canvas.

 

Merge Two ImageView In Android
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.nkdroid.sampleapp.MainActivity">

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

        <ImageView
            android:id="@+id/logo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@drawable/marshmallow" />
    </LinearLayout>

</LinearLayout>

MainActivity.java

package com.nkdroid.sampleapp;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Shader;
import android.graphics.drawable.BitmapDrawable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {


    private ImageView logo;
    private Bitmap borderPatern;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        logo = (ImageView) findViewById(R.id.logo);
        borderPatern= BitmapFactory.decodeResource(getResources(), R.drawable.pattern_02);
        BitmapDrawable drawable = (BitmapDrawable) logo.getDrawable();
        Bitmap bitmap = drawable.getBitmap();
        Bitmap bm1= mergeImages(bitmap);

        logo.setImageBitmap(bm1);
    }
    public Bitmap mergeImages(Bitmap paramBitmap)
    {
        if (borderPatern == null) {
            return paramBitmap;
        }
        Bitmap localBitmap = Bitmap.createBitmap(paramBitmap.getWidth()+ 2*2, paramBitmap.getHeight() + 2*2 , paramBitmap.getConfig());
        Canvas localCanvas = new Canvas(localBitmap);
        Paint localPaint = new Paint();
        localPaint.setShader(new BitmapShader(borderPatern, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT));
        localCanvas.drawPaint(localPaint);
        localCanvas.drawBitmap(paramBitmap, 2, 2, null);
        return localBitmap;
    }
}

 

 

Hope you liked our simple “Merge Tow ImageView Using Canvas Android” Tutorial.

 

nirav kalola