I have a simple ImageView that has layout_width="match_parent". It looks fine there is no margin or padding around the ImageView in the Android Studio, but when I run and test it with my phone an unwanted margin or padding appears around the ImageView. I searched for similar threads but didn't help. I also tried scale types, background color, and negative paddings. These didn't work either.
This problem also appears on all the layout types.
XML codes
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".BlankFragment">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/hthtt" />
</FrameLayout>
Margin or padding around the ImageView appears on the tested phone
you need to set the background color(or other changes) in your drawable (#drawable/hthtt)....share drawable code
Related
I can't figure out how can we apply filters over an image.
In this case I want the image to be darker (black, 40% transparency, layer on top of the image would give me the result I want). However, it will be helpful (in future) if I know how to put a layer over an image of any color (with some transparency) to make it more visually compatible with the other UI elements of the app.
How it looks now.
How I want it to look on the app (the above image has been edited in Adobe illustrator but the app repeatedly crashes if I use it even though its size is not large)
Also, I suspect there must be a way to do this in android studio without the need of any image editing software.
Correct me if I am wrong ;)
This is what i do ,
imageView =(ImageView) findViewById(R.id.image_view) ;
imageView.getDrawable().setColorFilter(0x76ffffff, PorterDuff.Mode.MULTIPLY );
color range [0x00000000 -0xffffffff]
If you don't understand the pattern this might help you
Red - 0xffff0000
green -0xff00ff00
blue - 0xff0000ff
your request average black color 0xff555555
change color codes as you want > here
out put
Further more :
setColorFilter params : (int color,
PorterDuff.Mode mode)
What does PorterDuff.Mode mean
You can use android:foreground property of a object to set a color over any object. here i used an ImageView to show a image and android:foreground to put a filter!
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/yourImage"
android:foreground="#60000000" />
</RelativeLayout>
if you want to do this a layout then use android:background property instead of android:src for the source of image.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/yourImage"
android:foreground="#60000000">
</RelativeLayout>
Generate a 9 patch image using any online tool for the darker image and use that 9 patch in your app. it will work.
Try this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/black"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha=".5"
android:src="#drawable/your_naruto_img"/>
</RelativeLayout>
Of course you can adjust the opacity accordingly by changing android:alpha [0 - 1].
Hope this helps!
Try this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/your_drawable">
<ImageView
android:id="#+id/backImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#66000000"
android:scaleType="fitXY"/>
</RelativeLayout>
You can set the image to the background of a RelativeLayout. Use the imageview tag and set background with transparent color which you want to set.
What worked for me was
ImageView backgroundimage = FindViewById<ImageView>(Resource.Id.img_view);
backgroundimage.SetColorFilter(Color.Argb(200,0,0,0), PorterDuff.Mode.Overlay);
after trying all the above answers.
Hope it helps someone .
Here is my layout
<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:background="#drawable/backg"
android:paddingTop="40dp"
android:orientation="vertical"
tools:context=".AppleActivity" >
...
<LinearLayout>
I expect the background to fill the layout. But it leaves considerable space based on top and at the bottom. I don't mind if the background stretches. I just want it to fill the view. Does anyone know what might be causing this problem?
In case it's important: in my manifest file I am using android:theme="#android:style/Theme.Holo.NoActionBar.Fullscreen" to hide the status bar.
try something like this..
<RelativeLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/backg"
android:orientation="vertical">
Have you tried adding
android:scaleType="fitXY"
into your linear layout? This will stretch your background image to linear layout bounds. You can also use centerCrop to fit the image to bounds without stretching it.
android:scaleType="centerCrop"
Also, use margin instead of padding.
So I have this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainParent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bgdark"
android:orientation="vertical"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="76dp"
android:src="#drawable/myheader_250x60"
/>
<ListView
android:id="#+id/mainListview"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</ListView>
</LinearLayout>
Note I have now edited this post. I was using a grey background image, so I thought that was what was visible to right/left of header image.See below for an image showing the problem.
However, moving the background to the listview did not solve the problem. Hence it would seem it is the imageview that somehow has a left/right border in grey. As i have set width to "match_parent" it should have taken he maximum width.
The problem is that to the top/right of header there's a grey pixel border? which I would like to remove if possible.
Try scaleType attribute for your ImageView.
Anothrer way - replace
android:src="#drawable/myheader_250x60"
for
android:background="#drawable/myheader_250x60"
Try using fill_parent instead of match_parent except in listView height . Use wrap_content in listView height
set this scletype property
android:scaleType=fitXY
and set image to imageview like this
android:background="#drawable/myheader_250x60"
In my Android project, I am not quite sure how to make my background image fill the entirety of the RelativeLayout root element in XML, which is the size of the screen. I want to be sure that this works for all aspect ratios, so the image will clip vertically or horizontally as necessary. Does someone know how to do this easily? I've only seen questions regarding ImageViews and Buttons, but not really generic Views.
My XML file currently:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/enclosing_rl"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background"
android:fitsSystemWindows="false">
<!-- Other elements -->
</RelativeLayout>
Other than turning your image into a nine patch I don't think this is possible. What you could do instead is-
Add an ImageView as the first view in your RelativeLayout.
Set layout_centerInParent to true.
Have the layout_width and layout_height set to match_parent.
Then set scaleType to centerCrop.
That will make sure the image fills the screen without any distortion, but depending on screen size/orientation either some of the top/bottom or left/right of the image may be cut off.
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:scaleType="centerCrop"
android:src="#drawable/background" />
Any other views in the RelativeLayout will appear on top of the ImageView, as long as it is the first view in the RelativeLayout (when you are in the xml).
Create a bitmap drawable XML resource in your res/drawable folder:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/background"
android:tileMode="repeat" />
Use that drawable as background instead of #drawable/background
according to this answer If you want your ImageView fill your RelativeLayout,use align parameters for ImageView.
you can put all of your views to a LinearLayout and set align parameter to your background ImageView:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/my_background"
android:scaleType="centerCrop"
android:layout_alignTop="#+id/my_views"
android:layout_alignBottom="#+id/my_views"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/my_views"
android:orientation="vertical" >
<!-- stuff -->
</LinearLayout>
</RelativeLayout>
Its smart and 100% working answer is to set the property scaleType of image view !
android:scaleType="fitCenter"
I tried to put background image to linearlayout in my android project. All is working nicely except those fading edges in the left and right on the screen. My background image dimensions are 52x602 and don't have such fading edge originally. I want the background image to cover all the area. Also it has done by designer and using 9-patch I think (black border around image). How can I set the background correctly without those edges?
In emulator it looks like this:
XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/login_background"
android:orientation="vertical"
>
</LinearLayout>
Ok, got answer myself. The .png files must have .9.png ending if they are 9-patch files...So if someone will have same problem, then you'll know.
Try setting fadingEdge to none
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/login_background"
android:orientation="vertical"
android:fadingEdge="none"
>
</LinearLayout>