Android: Displaying player icon on map based on coords - android

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... :/

Related

Create Bitmap From View in Android (with CardView)

In my app, I need to work with GoogleMap and on Markers, I need to put the next custom view
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="true"
android:layout_margin="1dp"
android:elevation="10dp"
app:cardCornerRadius="18dp">
<app.into.additional.DownloadImageView
android:id="#+id/offer_image_1"
android:scaleType="fitXY"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="1dp" />
</android.support.v7.widget.CardView>
DownloadImageView is a custom class that uses the Picasso framework to download some images.
The problem is the next one: if I add the above layout in a fragment, the ImageView is rounded as I need. When I try to create a Bitmap using the above layout, the Image loaded inside ImageView doesn't keep the round property, and it's shows square.
This is the code I'm using to create the Bitmap :
DisplayMetrics displayMetrics = new DisplayMetrics();
activity.getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
marker.setLayoutParams(new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT));
marker.measure(displayMetrics.widthPixels, displayMetrics.heightPixels);
marker.layout(0, 0, displayMetrics.widthPixels, displayMetrics.heightPixels);
marker.buildDrawingCache();
Bitmap bitmap = Bitmap.createBitmap(marker.getMeasuredWidth(), marker.getMeasuredHeight(), Bitmap.Config.ARGB_4444);
Canvas canvas = new Canvas(bitmap);
marker.draw(canvas);

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;
}

ImageView not fitting sides of screen

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.

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.

ImageView inside of a ScrollView

I am working on a android project. I n that I have to deal with ScrollViews to scroll image. But when I am using ImageView inside ScrollView image given to me is not fit in UI layout. So I am thinking I convert a ScrollView to ImageView. Is there any procedure in android.
Plz help me.
I found a nice solution, in your ImageView parameters, just add -
android:adjustViewBounds="true"
Try this:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_launcher"
android:contentDescription="#string/describe_something_here"/>
</RelativeLayout>
</ScrollView>
Hope this helps.
If you want to fit your imageview inside your emulator screen then why to use scrollview.
You can scale your imageview inside your emulator screen like this
LinearLayout linLayout = new LinearLayout(this);
// load the origial BitMap (500 x 500 px)
Bitmap bitmapOrg = BitmapFactory.decodeResource(getResources(),
R.drawable.android);
int width = bitmapOrg.width();
int height = bitmapOrg.height();
int newWidth = 200;
int newHeight = 200;
// calculate the scale - in this case = 0.4f
float scaleWidth = ((float) newWidth) / width;
float scaleHeight = ((float) newHeight) / height;
// createa matrix for the manipulation
Matrix matrix = new Matrix();
// resize the bit map
matrix.postScale(scaleWidth, scaleHeight);
// rotate the Bitmap
matrix.postRotate(45);
// recreate the new Bitmap
Bitmap resizedBitmap = Bitmap.createBitmap(bitmapOrg, 0, 0,
width, height, matrix, true);
// make a Drawable from Bitmap to allow to set the BitMap
// to the ImageView, ImageButton or what ever
BitmapDrawable bmd = new BitmapDrawable(resizedBitmap);
ImageView imageView = new ImageView(this);
// set the Drawable on the ImageView
imageView.setImageDrawable(bmd);
// center the Image
imageView.setScaleType(ScaleType.CENTER);
// add ImageView to the Layout
linLayout.addView(imageView,
new LinearLayout.LayoutParams(
LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT
)
);
// set LinearLayout as ContentView
setContentView(linLayout);
Hope it helps
hello I think you can solve your problem like this
<anyLayout>
<ScrollView>
<RelativeLayout>
<ImageView/>
</RelativeLayout>
</ScrollView>
</anyLayout>
scroll view work within a layout.
<ScrollView>
<RelativeLayout>
<ImageView/>
</RelativeLayout>
</ScrollView>
This will work for you
I find a very easy solution, all you need to do is add
android:src="#drawable/hayhouse"
to your imageview in layout xml file.

Categories

Resources