So, I'm trying to view a camera preview as a background with an imageview on top of it. Check this question out, that I've asked, to get a better idea of what I'm trying to accomplish. However, instead of using a FrameLayout, I found it easier to use a RelativeLayout (for the reason of placing views where I want on the screen). The problem is that I can't get the imageview (over the surface view) to take up the whole screen. No matter how I re-size the image it still displays in the center without filling the screen.
So, my question is, how would I make the imageview fill the entire screen over the surface view? Perhaps, I am making a simple mistake but if that is the case please point it out. Any help will be greatly appreciated! Thanks!
Here's the XML file:
<?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:id="#+id/relative" >
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/image"
android:src="#drawable/background" >
</ImageView>
<Button
android:id="#+id/scan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_margin="10dp"
android:text="Scan"
android:textSize="20dp"
android:textStyle="bold"
android:onClick="Scan" />
<Button
android:id="#+id/search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/scan"
android:layout_centerHorizontal="true"
android:layout_margin="10dp"
android:text="Search"
android:textSize="20dp"
android:textStyle="bold"
android:onClick="Search" />
<Button
android:id="#+id/importing"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/search"
android:layout_centerHorizontal="true"
android:layout_margin="10dp"
android:text="Import"
android:textSize="20dp"
android:textStyle="bold"
android:onClick="Import" />
</RelativeLayout>
And here's the code where I place the views (bring to front so they are visible over the surface view):
mPreview = new CameraPreview(this, mCamera);
relative.addView(mPreview);
layout.bringToFront();
scan.bringToFront();
search.bringToFront();
friendImport.bringToFront();
EDIT:
Here's an example image of what I'm talking about (I am trying to get the white transparent image to cover the whole screen):
Am I correct that you want to stretch android:id="#+id/image" into your entire layout?
First check in layout view that the ImageView takes entire space as it is supposed to.
If so, then add the proper scaling type to your ImageView attribute list:
android:scaleType="fitXY"
Or as an alternative, apply the image resource not as "src" but as "background":
android:background="#drawable/background"
Good luck.
After experimenting for a while, I seem to have found a solution to my problem. My image was showing up similar to this picture:
Which is weird, because this is how a 9-patch image works and I did not declare my image as a 9-patch. But even when I called match_parent (or even fill_parent) it only filled to the fill area like in the image I posted.
So, with lots of trial and error, I took away any border that was on the image and took all the blur effects off. The image was, for some reason, a dramatically smaller file size. Then, I tried to place this as the background and... success!
I'm not too sure as to why it did not work to begin with, but, I have a theory that, perhaps, because there was a 1px border on the image it saved it as a 9-patch PNG instead of a normal PNG file. Or maybe it was due to the blur effect that was on the image. I'm not too sure, but, I do know that once I took off the blur effects and removed the border it did work.
I hope this is useful for anyone who might be faced with a similar problem!
Related
i am having some issues here regarding grid layout.
Lets say that i have a grid layout that covers the whole screen and which has fixed row and column count (eg. 8/8). Now lets say that i want to insert 2 custom views that only match that column and row that they were inserted into.
image example:
i am sorry if the picture is bad :D Have in mind that column width and height is fixed to the device screen and the views should not spread it, instead they should fill that 1 column. I am sure that it is possible to achieve this but unfortunately i have not found a solution till now. Any help is much appreciated, thanks!!!!
<GridLayout 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:background="#0099cc"
tools:context="com.example.luka.gridlayouttest.FullscreenActivity"
android:columnCount="12"
android:rowCount="12"
android:columnOrderPreserved="true"
android:rowOrderPreserved="true">
<TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView5"
android:layout_row="1"
android:layout_column="3"/>
<TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView6"
android:layout_row="4"
android:layout_column="6" />
</GridLayout>
You're doing it correctly. You're just not complete. The undefined views essentially have a zero size. If you add something like
android:text="row0, col0"
android:layout_row="0"
android:layout_column="0"/>
android:text="row1, col1"
android:layout_row="1"
android:layout_column="1"/>
etc, you will see your TextViews going diagonally down to the right. It seems you have to populate every view in the grid for it to give you the complete grid. For each view, you either have to give it a fixed size (instead of wrap_content) or fill it with something (using android:text="row0, col0").
I have a bitmap which I am reading from a particular location on the device like such and am setting the image to an ImageView
scaledBitmap = BitmapFactory.decodeFile(selectedImagePath);
ivImage.setImageBitmap(scaledBitmap);
And thats how I am setting the xml code for that imageview
<ImageView
android:id="#+id/ivImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:adjustViewBounds="true"
android:layout_centerHorizontal="true"
android:scaleType="fitXY" />
Is there a way I can remove the blank space above the image inside the ImageView?
Try Change android:scaleType="fitXY" to android:scaleType="centerCrop"
I had the same problem, and what I remember is removing adjustViewBounds attribute line from code will fix it. Try this and let me know.
scaleType="fitCenter" (default when omitted)
will make it as wide as the parent allows and up/down-scale as needed keeping aspect ratio.
scaleType="centerInside"
if the intrinsic width of src is smaller than parent widthwill center the image horizontally
if the intrinsic width of src is larger than parent widthwill make it as wide as the parent allows and down-scale keeping aspect ratio.
It doesn't matter if you use android:src or ImageView.setImage* methods and the key is probably the adjustViewBounds.
use this
<ImageView
android:id="#+id/ivImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:scaleType="centerCrop" />
I'm developing a game for android and it's like a match game it looks like that:
the game work perfectly but the problem is the size of the cards " the clowns in the picture "didn't change I've tried everything from changing the size of the image to change the size of the image view, the xml file is a Tablelayout and each row table contain something in the first row there is the image view that will display the card and this is the xml code
<TableRow
android:id="#+id/Row01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
>
<LinearLayout
android:id="#+id/LinearLayout01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center">
<ImageView
android:id="#+id/ImageView1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="bottom|center"
></ImageView>
</LinearLayout>
</TableRow>
As mentioned previously, you should probably avoid static values when designing your layouts as much as possible so they remain scalable from tiny-phone to mega-tablet.
This is a common problem for people who develop android and in this case it's probably a screen density issue. I would suggest making three different sized sets of your clown icon and putting them in the low, medium, and high resolution image folders in your "res" folder. That's the reason they have those folders, if your application is scalable across screen sizes the system will pick the appropriate resolution image from the folders when you make a call on that resource. You can also modify how the system chooses density in the manifest I believe.
I am trying to design an application and need to create a very simple menu bar with one image button i have created the image for the button for all the resolutions and an image bar of the same height for all the different resolutions but my problem is the image button which has to sit on top of the plain image is always taller and i cant figure out why, example under hdpi i have the menu bar image 1024x72 and another image for the button 72x72 but when rendered the image button is always larger I'm going crazy trying to find an answer any help would be greatly appreciated.
this is my current not working code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="#+id/layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_menu_menu_bar"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true" />
<ImageButton
android:id="#+id/new_convo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView1"
android:layout_alignParentTop="true"
android:src="#drawable/ic_menu_new_convo" />
</RelativeLayout>
For a menubar a LinearLayout is the best choice. You have to specify a gradient or a 9-patch for the background, and then using your ImageButtons. On Android there's no guarantee that the window width is 1024px, so you must change your mindset and approach the UI design in a way different from other mobile platforms. If you provided a sketch of the desired result we could understand (and help) better
Can you help me to configure my layout? I don't achieve what I'm looking for:
I've put the imageview background to red for explain what I want:
The image's width is smaller than the layout width. I'd like the image grow proportionally keeping its aspect ratio until reach the aspect at the first image (I modified it manually with photoshop) but when setting width="fill_parent" the result is the second image and setting both width and height to "fill_parent" the result is the third image.
I tried to combine with ScaleType with no success
How can I achieve the first option? Thanks
Use android:adjustViewBounds=true attr in xml for ImageView
This question is solved here by extending the ImageView class.
Android ImageView adjusting parent's height and fitting width
I created a sample. It works for me. Here is the xml layout file.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView android:src="#drawable/hydrangeas"
android:layout_height="wrap_content" android:id="#+id/imageView1"
android:scaleType="centerInside"
android:adjustViewBounds="true"
android:background="#android:color/white"
android:layout_width="wrap_content"/>
</LinearLayout>
It works for fitCenter too. Have a look at the snapshot.
Use the attribute fit_center into your ImageView tag.
<ImageView ... android:scaleType="fitCenter" .. />