ImageView not fitting sides of screen - android

Well my app should let me take a picture of my face and display it until i delete it where I can take another one. What is happening when I first open the app is that the pink side lines of the layout backround shows but when I take a picture the pink lines dissapear. This shouldnt happen because the imageview that i am setting the backround bitmap to is match_parent on width and height
The second problem is that the when I set the background imageview back to the background before which is transparent in the center so you can see where the camera is pointing does not happen even though I set it back. The screen should revert back to the transparent center but it stays the screenshot that is taken when takePicture is run. Thanks for any help as i am ripping my hair out right now
background_view = (ImageView) view.findViewById(R.id.backround_view);
background = BitmapFactory.decodeResource(getResources(), R.drawable.camera_backround);
background_view.setImageBitmap(background);
private void takePicture() {
if (picturePresent == false) {
edit_button.setVisibility(View.INVISIBLE);
pictureBitmap = getBitmapFromView();
edit_button.setVisibility(View.VISIBLE);
closeCamera();
stopBackgroundThread();
BitmapDrawable bitmapDrawable = new BitmapDrawable(getResources(), pictureBitmap);
background_view.setBackground(bitmapDrawable);
picturePresent = true;
} else {
}
}
private void deletePicture() {
if (picturePresent == true) {
startBackgroundThread();
openCamera(mTextureView.getWidth(), mTextureView.getHeight());
background_view.setImageBitmap(background);
picturePresent = false;
} else {
}
}
public Bitmap getBitmapFromView() {
Bitmap bitmap = mTextureView.getBitmap();
Bitmap bitmap2 = BitmapFactory. decodeResource(getResources(), R.drawable.camera_backround);
Bitmap bmOverlay = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), bitmap.getConfig());
Canvas canvas = new Canvas(bmOverlay);
canvas.drawBitmap(bitmap, new Matrix(), null);
canvas.drawBitmap(bitmap2, new Matrix(), null);
return bmOverlay;
}
XML
<RelativeLayout 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"
tools:context="yourfacelivewallpaper.alexcz.yourfacelivewallpaper.CameraFragment"
android:background="#ffbf1ec5">
<!-- TODO: Update blank fragment layout -->
<view
android:layout_width="fill_parent"
android:layout_height="fill_parent"
class="yourfacelivewallpaper.alexcz.yourfacelivewallpaper.AutoFitTextureView"
android:id="#+id/texture"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/backround_view"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:longClickable="false"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"/>

android:scaleType="fitXY"
Add above code in xml file.

If your image is smaller than your ImageView it won't fill the screen. You should add android:scaleType="fitCenter" to your ImageView's layout properties.

Related

Drawn rectangle is not square when drawing on ImageView Android

I am trying to draw a rectangle on top of an image in an ImageView. If I specifify (top, left) as (100, 100) and (bottom, right) = (200, 200) I get this:
As you can see it is not a square. How do I get that?
Here is the code for drawing:
private fun drawRectangle(
color: Int,
bitmap: Bitmap
) {
var image_view: ImageView = findViewById(R.id.image)
val tempBitmap =
Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888)
var canvas: Canvas = Canvas(tempBitmap)
val matrix: Matrix = Matrix()
val bitmap_paint: Paint = Paint(Color.TRANSPARENT)
canvas.drawBitmap(bitmap, matrix, bitmap_paint)
var shapeDrawable: ShapeDrawable
// rectangle positions
var left = 100
var top = 100
var right = 200
var bottom = 200
// draw rectangle shape to canvas
shapeDrawable = ShapeDrawable(RectShape())
shapeDrawable.setBounds( left, top, right, bottom)
shapeDrawable.getPaint().setColor(color)
shapeDrawable.getPaint().setStyle(Paint.Style.STROKE)
shapeDrawable.draw(canvas)
image_view.background = BitmapDrawable(getResources(), tempBitmap)
}
and the xml file:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
tools:context=".MainActivity">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter" />
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:textSize="18sp"
android:background="#80000000"
android:textColor="#android:color/white" />
</FrameLayout>
The problem is that you are using ImageView.background property and "match_parent" for your ImageView.
And parent have rectangular shape which you are using to get width and height for your new bitmap and canvas so ImageView also being stretched.
If you change ImageView width and height to "wrap_content" or to specific size it will give you square square.
Better results will be achieved if you use setImageBitmap instead of "background.
eg change line
image_view.background = BitmapDrawable(getResources(), tempBitmap)
to
image_view.setImageBitmap( tempBitmap)

Add image on another image in android

In my application, I want to add an image on another image and also when user zoom on image at that time it should also move, Just like google map.
Please have a look at below image and i want to set flag dynamically
Please advice better way to complete this task.
Use relative layout as background and place the images as the component of relative layout, use the relative layout params to adjust the images locations on the screen.you can apply zoom on the relative layout itself
Solution (XML):
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/t" />
<item android:drawable="#drawable/tt" />
</layer-list>
Solution (dynamic):
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
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="maxdorid.ir.MainActivity">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:srcCompat="#mipmap/ic_launcher"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:id="#+id/imageView" />
</RelativeLayout>
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Resources r = getResources();
Drawable[] layers = new Drawable[2];
layers[0] = r.getDrawable(R.drawable.ic_alarm_off_black_24dp);
layers[1] = r.getDrawable(R.drawable.ic_apps_black_24dp);
LayerDrawable layerDrawable = new LayerDrawable(layers);
ImageView imageView= (ImageView) findViewById(R.id.imageView);
imageView.setImageDrawable(layerDrawable);
}
}
If you use more than one image:
private Bitmap overlay(Bitmap bmp1, Bitmap bmp2,int x,int y) {
Bitmap bmOverlay = Bitmap.createBitmap(bmp1.getWidth(), bmp1.getHeight(), bmp1.getConfig());
Canvas canvas = new Canvas(bmOverlay);
canvas.drawBitmap(bmp1, new Matrix(), null);
canvas.drawBitmap(bmp2, x,y, null);
return bmOverlay;
}

Android: Displaying player icon on map based on coords

I have an image of map (fixed size) to be displayed as background and I want to display a player icon over it. I am getting player's current coords as android.graphic.Point.
I tried RelativeLayout with setting up margins, which kinda worked, but when the display is rotated, the icon is obviously moved elsewhere. Also I think this absolute positioning can't work on different screen size...
Any suggestions how to do this as intended?
This is my XML
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:id="#+id/mapLayout"
tools:context="cz.alois_seckar.vseadventrura.MapActivity">
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:id="#+id/playerIcon"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="#drawable/player" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/mapImage"
android:src="#drawable/spacemap"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/back_button"
android:id="#+id/mapBackButton"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:onClick="goBack"/>
</RelativeLayout>
And this is how I am (re)placing player icon
RelativeLayout mapLayout = (RelativeLayout) findViewById(R.id.mapLayout);
mapLayout.removeView(playerIcon);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(40, 40);
Point playerCoords = game.getWorld().getCurrentSpace().getPosition();
params.leftMargin = playerCoords.x;
params.topMargin = playerCoords.y;
mapLayout.addView(playerIcon, params);
I solved the problem like this:
//Get bitmap to draw
Bitmap playerPic = BitmapFactory.decodeResource(getResources(), getResources().getIdentifier(game.getPlayer(), "drawable", getPackageName()));
//Create a new image bitmap and attach a brand new canvas to it
BitmapFactory.Options opts = new BitmapFactory.Options();
opts.inMutable = true;
Bitmap mapPic = BitmapFactory.decodeResource(getResources(), getResources().getIdentifier(game.getMap(), "drawable", getPackageName()), opts);
Canvas tempCanvas = new Canvas(mapPic);
//Draw the image bitmap into the cavas
Point playerCoords = game.getWorld().getCurrentSpace().getPosition();
tempCanvas.drawBitmap(playerPic, playerCoords.x * mapPic.getWidth() / 10, playerCoords.y * mapPic.getHeight() / 10, null);
//Attach the canvas to the ImageView
ImageView mapImage = (ImageView) findViewById(R.id.mapImage);
mapImage.setImageDrawable(new BitmapDrawable(getResources(), mapPic));
only problem would be size of playerPic - could be too big or do small based on actual DPI... :/

How can i capture my cameraview and my customview over camera simultaneously android

I am making an app in which i am opening a camera and above the camera i am drawing a flower picture from a custom view canvas object. Now i want to take picture what should i do to take picture of camera with that flower.
I have used this layout for that
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/layoutCam">
<FrameLayout
android:id="#+id/preview"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
</FrameLayout>
<ImageView
android:id="#+id/imgHole"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:layout_gravity="center"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="Take Snap"
android:id="#+id/btnTakeSnap"/>
</FrameLayout>
and java code is
public void onClick(View v)
{
preview.camera.takePicture(shutterCallback, rawCallback, postViewCallback, jpegCallback);
chal();
}
private boolean chal()
{
buttonTakeSnap.setVisibility(View.INVISIBLE);
View v1 = camView.getChildAt(1);
v1.setDrawingCacheEnabled(true);
v1.buildDrawingCache();
bmp = v1.getDrawingCache();
v1.setDrawingCacheEnabled(true);
buttonTakeSnap.setVisibility(View.VISIBLE);
Toast.makeText(this, "Akhtitaam", Toast.LENGTH_SHORT).show();
return true;
}
using this code i got two bitmaps one from chal(); method and second from jpegCallBack(); method now you can put these bitmaps on a same layout to overlap and capture that view
Using this code
Use this method to capture views
public static Bitmap loadBitmapFromView(View v)
{
Paint drawPaint = new Paint(Paint.FILTER_BITMAP_FLAG);
drawPaint.setAntiAlias(false);
drawPaint.setFilterBitmap(false);
Bitmap b = Bitmap.createBitmap(v.getWidth(), v.getHeight(), Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(b);
c.drawBitmap(b, 0, 0, drawPaint);
v.draw(c);
return b;
}
pass your camera's surface view as a parameter like this
View view=(YourParentLayout) findViewById(R.id.YourParentLayout);
loadBitmapFromView(view);

Bitmap size changes

I have an ImageView containing an image. This image is rotated by button clicks, but sometimes it gets smaller or gets its original size. I have no idea what causes this.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
//tablelayout here
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:maxWidth="200dp"
android:maxHeight="200dp"
/>
</LinearLayout>
</RelativeLayout>
Inital settings:
iv = (ImageView)findViewById(R.id.imageView1);
int id = getResources().getIdentifier("landolt", "drawable", getPackageName());
iv.setImageResource(id);
myImg = BitmapFactory.decodeResource(getResources(), R.drawable.landolt);
matrix = new Matrix();
size = 200;
randomize = new Random();
random = randomize.nextInt(8) + 1;
rotate = getAngle(random); //function created by me
matrix.postRotate(rotate);
rotatedBitmap = Bitmap.createBitmap(myImg, 0, 0, myImg.getWidth(), myImg.getHeight(), matrix, true);
iv.setImageBitmap(rotated);
So the image is rotated, no size change in code.
A rotation on button click:
btn1.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if (rotate == -90)
{
//rotate back to original direction
old_rotate = -rotate;
matrix.postRotate(old_rotate);
//next rotation
random = randomize.nextInt(8) + 1;
rotate = getAngle(random);
matrix.postRotate(rotate);
rotatedBitmap = Bitmap.createBitmap(myImg, 0, 0, myImg.getWidth(), myImg.getHeight(), matrix, true);
iv.setLayoutParams(new LinearLayout.LayoutParams(size, size));
iv.setImageBitmap(rotated);
}
}
});
When I launch the activity, the image appears with its original size, sometimes smaller. When I click on a button the image gets smaller or gets as big as its original size.
What is going on?
I figured out why does the image keep changing size. It simply doesn't have enough place in the imageView when rotated. I found the solution to my problem on this link.

Categories

Resources