I have an android application which can playback audio/video and show pictures.
For videos I want to overlay a play button on top of the preview image and also in list views..
Right now how I'm doing it is with an ImageView in xml, and then the drawable is a layer layer-list which I define programmatically because one of the images is dynamic, the play button is static of course. I want to align the play button 10px from the bottom, and centered horizontally.
My ImageView is defined like this (in xml)
<ImageView
android:id="#+id/EvidencePreview"
android:layout_width="267dp"
android:layout_height="201dp"
android:scaleType="centerCrop"
android:layout_margin="3dp"
android:layout_gravity="center_horizontal|center_vertical"/>
The ImageView is part of a form where the user can edit title and other information.
Then in my activity now I create the layer list like this:
Resources resources = mContext.getResources();
Drawable playOverlayDrawable = resources.getDrawable(R.drawable.play_overlay_large);
Drawable[] layers = new Drawable[2];
layers[0] = Drawable.createFromPath(tb.filePath);
layers[1] = playOverlayDrawable;
LayerDrawable layerDrawable = new LayerDrawable(layers);
ViewGroup.LayoutParams lp = iv.getLayoutParams();
int imageHeight = lp.height;
int imageWidth = lp.width;
int overlayHeight = layers[1].getIntrinsicHeight();
int overlayWidth = layers[1].getIntrinsicWidth();
int lR = (imageWidth - overlayWidth) / 2;
int top = imageHeight - (overlayHeight + 10);
int bottom = 10;
layerDrawable.setLayerInset(1, lR, top, lR, bottom);
iv.setImageDrawable(layerDrawable);
This only works when the orientation of the image is horizontal.
Keep in mind that the image/thumbnail is the MINI_KIND which means its supposed to be 512 x 384 but I'm seeing that it actually isn't the size.. On my phone they are either 480x800 or 800x480 depending on the orientation the camera was in..
Since my layout width/height is pre defined I just want a way to keep the play button layer from scaling at all and align it the same way everytime..
The other obvious way to do this would be to use a relative layout (or perhaps a frame layout?) but I was hoping to avoid that since I'm using the same code for displaying both images and videos (both of which have an image thumbnail preview -- but only videos should have the play button on them).
Any idea how to align the layers with a layer list, or alternatives that would work just as well or better?
I ended up using a FrameLayout like this:
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:layout_gravity="center_horizontal|center_vertical" >
<ImageView
android:id="#+id/MediaPreview"
android:layout_width="267dp"
android:layout_height="201dp"
android:scaleType="centerCrop"
android:src="#drawable/loading" />
<ImageView
android:id="#+id/VideoPreviewPlayButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:layout_gravity="center_horizontal|bottom"
android:visibility="gone"
android:src="#drawable/play_overlay_large" />
</FrameLayout>
Then I just set the visibility to View.VISIBLE to the preview play button for videos and left it gone for photos.
For my list view I used the layer list method shown above because all of the thumbnails were the same dimension. Hope this helps someone else!
notice that the layout_gravity on the ImageView with id VideoPreviewPlayButton puts it at the bottom centered horizontally, and the 10dp paddingBottom moves it up a bit from the bottom.
Consider using RelativeLayout as the container for your views. It gives you freedom of placing child views. You could bind your button to the right or top edge of your imageview.
Related
Background
Suppose I want to show an image of the something using an ImageView, and I want to put new views on top of it (animated ImageViews that show pins on a world map image, for example, or a Switch view on top of a smartphone image).
This means that no matter how the ImageView shows the image, the views should be in it, inside correct spot, with the same size as specified, or in a size related to the imageView itself
The problem
As opposed to other views, the ImageView can have a certain size, but its content is something else (to keep aspect ratio).
What I tried
I tried to use ConstraintLayout, but this can't really help, because the ImageView can change its size (for example when changing orientation), and thus ruining the position I've given the views compared to the ImageView.
I've found some libraries that can handle a similar thing (like here) and I even asked a similar question before (here), but all those solutions are for a static image within the ImageView, yet what I search for is adding a view on top of an ImageView.
The question
How do I put the views on top of the ImageView's content correctly?
How do I also scale the views down/up compared to the size of the ImageView's content ?
Can ConstraintLayout be used to change the scale of the views according to the ImageView's size ?
Make FrameLayout with wrap_content around ImageView. Then you could set SwitchView on top of ImageView. You could align it to center, side or corners and using margins to get some fine position.
It still won't scale with image, but you can get pretty good results. If that doesn't fit you, you can programatically get width/height of ImageView and alter position (or margins) of SwitchView accordingly.
With below you can manage width of switch or any other view as per image view width
android:layout_alignLeft="#+id/imageView"
android:layout_alignRight="#+id/imageView"
<Switch
android:id="#+id/swi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView"
android:layout_alignRight="#+id/imageView" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/swi"
android:src="#drawable/download" />
In Java,
ImageView imgView = (ImageView) findViewById(R.id.imageView);
imageView.setBackgroundResource(R.drawable.yourDrawable);
int width = imgView.getDrawable().getIntrinsicWidth();
Switch switchKey = (Switch) findViewById(R.id.switchKey);
switchKey.setMinimumWidth(width);
And in XML, align it with alignLeft and alignRight with ImageView.
As far as i get it, you need the image size displayed inside the image view and set that as the max width of your switch view right?
You need both Java and XML for this,
The XML file is basically as RelativeLayout with the view stacked as needed.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:src="#drawable/nonet_icon"
android:id="#+id/iconView"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<android.support.v7.widget.SwitchCompat
android:layout_width="wrap_content"
android:visibility="gone"
android:layout_centerInParent="true"
android:layout_height="wrap_content"
android:id="#+id/switchView"/>
</RelativeLayout>
And the Java Code gets the imageWidth and sets it to the SwitchView.
mSwitchCompat.setVisibility(View.VISIBLE);
// 20% x 25% of Content in ImageView
final float x = mImageView.getDrawable().getIntrinsicWidth()*.2f;
final float y = mImageView.getDrawable().getIntrinsicHeight()*.25f;
// waiting for the view to be drawn
mSwitchCompat.post(new Runnable() {
#Override
public void run() {
// scale current view W.r.t. x and y values
mSwitchCompat.setScaleX((float)mSwitchCompat.getWidth()/x);
mSwitchCompat.setScaleY((float)mSwitchCompat.getHeight()/y);
}
});
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
WindowManager.LayoutParams.WRAP_CONTENT);
// 30% x 35% of content, for location
int xMargin = Math.round(mImageView.getDrawable().getIntrinsicWidth()*.3f);
int yMargin = Math.round(mImageView.getDrawable().getIntrinsicHeight()*.35f);
// set margin values, can optionally add for top and bottom
layoutParams.setMargins(xMargin,0,yMargin,0);
mSwitchCompat.setLayoutParams(layoutParams);
Ref: Getting Displayed image size of an ImageView
Trying to get the display size of an image in an ImageView
Ref: Dynamic size values
Do comment if you need a detailed explaination.
Example: Check this image!
Scaled View on Image: Scaled View on Image!
You can use MarginLayoutParams with Relative Layout to set left and top position in ImageView.
image = (ImageView) findViewById(R.id.imageID);
MarginLayoutParams marginParams = new MarginLayoutParams(image.getLayoutParams());
marginParams.setMargins(left_margin, top_margin, right_margin, bottom_margin);
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(marginParams);
image.setLayoutParams(layoutParams);
find complete information for this in below link :
MarginLayoutParams
Try this, may be it will help you.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/img_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/semi_transparent"
android:layout_margin="#dimen/spacing_small"
android:layout_alignTop="#+id/img_background"
android:layout_alignBottom="#id/img_background">
//this layout will expand according to your image size
</RelativeLayout>
</RelativeLayout>
Do you want to show switch that lay on imageview ?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll_download"
android:layout_width="100dp"
android:layout_height="60dp"
android:layout_centerInParent="true"
android:orientation="vertical">
<ImageView
android:src="#android:drawable/btn_star_big_on"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<Switch
android:id="#+id/mySwitch"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Switch" />
</RelativeLayout>
I am developing a feature for my app where the user can click on buttons that are placed within an image background. The problem: I need to place the buttons to a particular location within the image so it doesn't look displaced and works dynamically to different kind of devices' resolutions. Here's an image example:
I would like to place the buttons exactly where these rounded squares are. How can I be sure they will look exactly the same in different devices as well? I might need to place some text above each button. The buttons they have to be clickable and I have some animation over the buttons to allow the user to know when the button is being clicked. Any lead is much appreciated. Any feasible solution could be the accepted answer.
The game clash of clans have something similar:
This is exactly what I am trying to achieve!
Since there are a lot of Android devices, in practice you can't show buttons exactly in all devices. You can use a RelativeLayout or a LinearLayout to assure that the top title will be above buttons
There will be a parent view with two children : One is for the title, and another is for all the buttons
If you use a RelativeLayout, you could place the buttons at any point within the Image.
Just make sure that you use DP units of measurement and have size appropriate images for each density.
A short example:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent" />
<Button android:layout_marginLeft="10dp"
android:layout_marginTop="10dp" />
<Button android:layout_marginLeft="30dp"
android:layout_marginTop="30dp" />
<Button android:layout_marginLeft="10dp"
android:layout_marginTop="50dp" />
</RelativeLayout>
I found a hacked solution by using the percentages of the width and height of the device. It worked for tablets and 2 more different screen size devices.
int w = front_layout.getWidth();
int h = front_layout.getHeight();
LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
int top = convert(h * 0.248f);
int bottom = 0;
int left = convert(w * 0.186f);
int right = 0;
params.setMargins(left, top, right, bottom);
btn1.setLayoutParams(params);
private int convert(float value) {
return (int) Math.ceil(value);
}
The only downside of it is that I have to find the exact percentages by try and error. A better solution will score my accepted answer!
I've setup a relative view with all my elements inside (buttons, images, etc...). It is the title page of my Android application.Now I would like to overlay "LITE" banner over the whole layout, in the upperleft corner.My problem is that the "LITE" banner image is an oblique red rubber, and that I need to set its topleft point to (-45,-45) on the screen to only display the part of the image I want (attached is the source image so you can understand what part of the image should be visible on the screen).
I have tried the AbsoluteLayout, the RelativeLayout, to move it programmatically with SetLeft and SetTop, but the negative values are not accepted.
Any idea ?
You can use Relative layout with the attribute android:clipToPadding="false" to get the desire effect.
example:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clipToPadding="false"
android:background="#android:color/white"
android:paddingLeft="50dip"
>
<ImageView
android:id="#+id/myId"
android:layout_width="60dip"
android:layout_height="60dip"
android:layout_marginLeft="-70dp"
android:layout_marginTop="-20dp"
android:clipChildren="false"
android:src="#drawable/button_normal" />
</RelativeLayout>
result:
I'd like to share my experience of this affair with the community...
The idea was to display an oblique "LITE" rubber on the top-left corner of the main screen of my app.
Rod Algonquin's answer was fine. However, it did not completely solve my problem, because I had to adapt the picture's dimensions to the screen height...AND to the screen orientation. Nightmare. Even with a relative layout, it was nearly impossible, because the hidden parts of the image were never correctly aligned.
So I had to work differently: The picture had to be moved left and top, by 20%. How to do that?
In the layout.xml file :
Insert the ImageView inside a RelativeLayout
Give the relative layout an ID
Configure the ImageView to make it fit its container RelativeLayout's width and height (layout_width="wrap_content" and layout_height="wrap_content")
<RelativeLayout
android:id="#+id/accueil_litebannerlayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="#+id/accueil_litebanner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/lite_banner" />
</RelativeLayout>
In your activity.java class file :
//get screen dimensions
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int ScreenWidth = size.x;
int ScreenHeight = size.y;
//set the desired height of the rubber, based on screen's height
int myLayoutWidthAndHeight=ScreenHeight/4;
//get rubber PNG image dimensions
BitmapFactory.Options options = new BitmapFactory.Options();
options.inJustDecodeBounds=true;
BitmapFactory.decodeResource(getResources(),
R.drawable.lite_banner,options);
int imageHeight = options.outHeight;
int imageWidth = options.outWidth;
//redux_factor has to be calculated, because if the image is reduced, then the translation has to be adapted
double redux_factor=1;
if (myLayoutWidthAndHeight<imageWidth) {
redux_factor=(double)myLayoutWidthAndHeight/imageWidth;
}
//determine by how many pixels left and top (same) the image will have to be translated
double translation_percents=.22;
double myCroppedMargin_double=imageWidth*translation_percents*redux_factor;
int myCroppedMargin=(int) Math.round(myCroppedMargin_double);
//get the image layout
RelativeLayout litebannerlayout=(RelativeLayout) this.findViewById(R.id.accueil_litebannerlayout);
//change its parameters (width, height, leftMargin, topMargin)
RelativeLayout.LayoutParams params=new RelativeLayout.LayoutParams(myLayoutWidthAndHeight,myLayoutWidthAndHeight);
params.setMargins(-myCroppedMargin, -myCroppedMargin, 0,0);
litebannerlayout.setLayoutParams(params);
Arghhh. It works...
You can use this sample code to move an imageView out of the screen, either based on a percentage, or a pixel count. This code can also be adapted to put the rubber/banner in the topright, bottomleft, bottomright corners.
OK, let's move on to something else...
I have a RelativeLayout which holds an ImageView and an ImageButton. The ImageView serves as an container for a background image. Now I'm trying to set the button at a fixed position so that it always appears on the same position on the background image.
Here is the layout file I'm using:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout1" android:layout_height="match_parent"
android:layout_width="match_parent" android:gravity="center_horizontal">
<ImageView android:src="#drawable/bg_1" android:id="#+id/imgView"
android:adjustViewBounds="true" android:layout_height="match_parent"
android:layout_width="match_parent" />
<ImageButton android:layout_width="120dp"
android:background="#drawable/button_1" android:layout_height="30dp"
android:id="#+id/imgButton" android:layout_marginLeft="100dp"
android:layout_marginTop="170dp" />
</RelativeLayout>
As you can see I've tried positioning the button with it's left-/top-margin using dp as unit, but this doesn't work. Since the background image is beeing scaled down/up, the position would have to be dynamic in some kind of way.
I understand that absolute positioning, with pixel-values for x-/y-position, is something that won't work on Android, like it is explained here. I still need to solve this and am not sure how.
Would I have to calculate the values for left-/top-margin (not sure how that would be) and then set them with something like this?
final float density = getResources().getDisplayMetrics().density;
int width = (int)((float)120 * density);
int height = (int)((float)120 * density);
RelativeLayout.LayoutParams rlp = new RelativeLayout.LayoutParams(width, height);
rlp.leftMargin = newMargin;
rlp.topMargin = newTopMargin;
ImageButton imgButton = (ImageButton) findViewById(R.id.imgButton);
imgButton.setLayoutParams(rlp);
Hope I didn't forget something ...
//EDIT:
I was thinking, the reason for the issue might be, that the scaled image has different "borders", depending on the screen size.
With an image at a 1:1.6 ratio on a HVGA screen I have black bars on the left and right, whereas on a WVGA screen the bars are on the left. Considering I'm using the default scaling. I will look into it and post again, if necessaray...
Why scaling happens? Because of different dpi on different devices? Do you have different drawabled for different dpi settings? If it isn't just dpi issue and you want to scale that background image freely then you can't do the job using standard layouts. You should implement a custom one.
My issue is this:
I use the android emulator, targeting android 2.2.
I created a custom view which I want to handle the background of my application, in this view I only want to display an image but I want it to fill the entire screen.
I initialize the view from my "Activity" like this:
BackgroundView bw = new BackgroundView(this);
The problem:
On my HDD, the resource image I'm using is 500x375 pixels. After calling:
Bitmap m_resourceBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.landscape_1);
int nWidth = m_resourceBitmap.getWidth();
int nHeight = m_resourceBitmap.getHeight();
the returned nWidth and nHeight depend on where I placed the resource, if i place it in the "drawable-mdpi" I get the original size, otherwise I get other sizes.
On the other hand if I ask the view for it's width and height via
this.getWidth();
this.getHeight();
I get fixed values, but different from the resolution I expected from the device (I set a 480x800 device and I get 320x533)
and finally if I try to create a scale matrix using view dimensions divided by the image dimensions, the result, on screen, is an image much smaller than the screen...
My question is:
What questions should I ask and from which objects so that inside a View I can draw a resource Bitmap so that it occupies the entire screen?
Cant you do it all in the layout XML file? (Here's an example that I use for my menu background image)
<ImageView android:id="#+id/menuBackground"
android:src="#drawable/imageResource"
android:adjustViewBounds="true"
android:gravity="center_vertical"
android:scaleType="fitXY"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_x="0dp"
android:layout_y="0dp" />
Then if you need to change it in runtime all you have to do is change the drawable.