I have a BitmapDrawable in xml:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:antialias="true"
android:autoMirrored="true"
android:dither="true"
android:gravity="bottom"
android:filter="true"
android:src="#drawable/test"
/>
I used this bitmap for a Imageview like below:
<ImageView android:id="#+id/detail_img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorAccent"
android:src="#drawable/bitmap_drawable"/>
The result:
You can see there is some padding in top and bottom. And the bitmap didn't aligned to bottom of the imageview, but I set android:gravity="bottom" in the bitmap xml.
I also tried android:gravity="top", It also didn't work.
What's wrong with my code. I googled, but didn't find anything about it.
I just want to know why the gravity property in bitmap xml didn't work.
Thanks in advance.
I know I can set android:scaleType="fitEnd" to the imageview which can let the imageview alignd to bottom.
Try this: android:adjustViewBounds.
Set this to true, if you want the ImageView to adjust its bounds to preserve.So, android:adjustViewBounds="true" which fixes the issue.
Put your ImageView inside any LinearLayout and set linearlayout gravity to center or anyone you want Like Wise..
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_horizontal" >
<ImageView
android:id="#+id/iv"
android:layout_width="50dp"
android:layout_height="50dp"
/>
</LinearLayout>
This should be work..
Thank you
Related
I'm confused how to design the layout as shown below. I can do a circular image using glide but how to align it with the layout?
Regards,
Sree
Thanks guys for the answers.
I found a solution with my UI goes like this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#drawable/background_chip"
android:orientation="horizontal"
>
<com.makeramen.roundedimageview.RoundedImageView
android:id="#+id/rv_profile_pic"
android:layout_width="#dimen/chip_pic_height_width"
android:layout_height="#dimen/chip_pic_height_width"
android:src="#mipmap/ic_account_circle_white_24dp"
app:riv_oval = "true"
android:layout_gravity="center_vertical"/>
<TextView android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14sp"
android:paddingStart="#dimen/padding_half"
android:paddingTop="#dimen/padding_half"
android:paddingBottom="#dimen/padding_half"
android:textColor="#color/app_bg_white"
android:layout_gravity="center_vertical"
style="#style/SecondaryText"/>
<ImageView
android:id="#+id/iv_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_remove_circle_white_24dp"
android:layout_gravity="center_vertical"
android:paddingEnd="#dimen/padding_half"
android:paddingStart="#dimen/padding_half"
/>
</LinearLayout>
MY background_chip lookslike this
<?xml version="1.0" encoding="utf-8"?>
<corners
android:radius="#dimen/chip_pic_radius"/>
<solid
android:color="#color/grey_light"/>
Finally its looking like
Trick is I have given the corner radius exactly half as the width of my left image.
Place a textview next to imageview. Both the imageview and textview should have background with rounded corners. You will need to work with your UX designer.
The textview and image view should have same height so that hey align correctly.
NOTE: I have ended up reporting this as a bug to the android project here: http://code.google.com/p/android/issues/detail?id=39159 Please also have a look at the accepted bounty answer, the solution is, unfortunately, to use an absolute (ie specifiying 'dp's rather than 'wrap_content' etc) layout to fix the issue.
I'm getting some VERY strange behaviour when placing a background on an image. I have simplified this down quite heavily to demonstrate the issue to you. What im doing is placing an image in a relativelayout, and also using a background. It seems that giving the relativelayout a padding is causing the background of the image to be missdrawn. Wrap_content seems to be messing up.
Firstly, here is the code that demonstrates the problem. Note that the same behaviour is seen without using a linearlayout and just giving the imageview a background, but this really demonstrates the problem better.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="60dp"
android:padding="5dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/black_bg" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/red_rectangle" />
</LinearLayout>
</RelativeLayout>
</FrameLayout>
Here is the black_bg xml file:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FF000000"/>
</shape>
Here is red_rectangle:
NOTE that this is a reference image, to demonstrate the problem. my actual image has detail, and so cannot be a .9.png
And here is a screenshot of the problem:
You can see that the image width is less than the linearlayout, despite the linearlayout having a width set to "wrap_content". If I set the relativelayout padding to 0dp, this problem dissapears.
This is hopefully a fairly well contained set of resource I'm providing here, so people can try it out themselves if they wish.
For reference, I am using this to provide a border around the image, so I could set the linearlayout (or the image itself) to have a padding, the problem still persists in that case.
EDIT: It appears I probably need a little more context around this, as answers are focussing round how to provide this border. Here is a screenshot of a more contextual layout. I didnt want to include this in the first place as it adds more confusion to the problem:
The FIRST 5dp padding you see is for the content of this entire item (the relativelayout). Then, as i said originally, the idea is that "I could set the linearlayout (or the image itself) to have a padding" in addition to the first padding you see in the relativelayout. Currently, this layout should have NO border shown.
the problem seems to be with the different stretching properties of image(in image view) and the one set as a background(in linear layout). The image set as a backgroung doesnt necessarily maintains the aspect ratio while the image in the image tends to maintain it.
When you give the height of the layout to 60 dp, the image shrinks maintaining the aspect ratio leaving the black strips on the sides.
This works for me:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="60dp"
android:padding="5dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/black_bg" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="60dp"
android:src="#drawable/asd"
android:scaleType="fitXY"
/>
</LinearLayout>
</RelativeLayout>
</FrameLayout>
I believe this is a good candidate of a bug!
Anyway, I understand what you intend to achieve with this layout. The problem is setting the height of your RelativeLayout. I will not ask you to wrap content! Simply, since the height is set to 60dp and padding to 5dp, take a further step and set the height of the LinearLayout to 50dp which is 60-2*5 :)
Finally, to get the border, add a padding of, say, 5dp to your LinearLayout and set the Height of the ImageView to 50dp - 2*5 = 40dp.
This will work perfectly
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="60dp"
android:padding="5dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="50dp"
android:padding="5dp"
android:background="#drawable/black_bg" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:adjustViewBounds="true"
android:src="#drawable/red_rectangle" />
</LinearLayout>
</RelativeLayout>
</FrameLayout>
I dont know why its showing the extra black patch there. Have you tried running the app? The UI editor has some defects, especially when it comes to ImageView..
Now for the border around image, set the background and padding to the ImageView itself. Do not need the LinearLayout. Add the scale type attribute with "centerInside" value.
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:src="#drawable/red_rectangle"
android:background="#000"
android:scaleType="centerInside"/>
"For reference, I am using this to provide a border around the image"
Add a drawable "border.xml"
<shape xmlns:android:"http://schemas.android.com/apk/res/android" android:shape:"rectangle">
<stroke android:width="5dp" android:color="#FF000000" />
<padding android:left="5dp" android:top="5dp" android:right="5dp" android:bottom="5dp" />
</shape>
set your ImageView background to this drawable.
And lets simplify your layout and center the ImageView:
<?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" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:src="#drawable/red_rectangle"
android:background="#drawable/border" />
</RelativeLayout>
Try this ...........
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="60dp"
android:padding="5dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/black_bg"
**android:padding="5dp"**
>
<ImageView
**android:layout_width="fill_parent"
android:layout_height="fill_parent"**
android:adjustViewBounds="true"
android:src="#drawable/red_rectangle" />
</LinearLayout>
</RelativeLayout>
</FrameLayout>
make your image view like this ..
<ImageView
android:id="#+id/imageViewMyicon"
android:layout_width="30dp"
android:background="#drawable/myiconbackground"
android:layout_height="30dp"
android:src="#drawable/myicon"
android:contentDescription="#string/my_icon"
/>
Inside your drawable myiconbackground.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:padding="10dp">
<solid android:color="#0D95BD"/>
<corners android:radius="5dp"/>
<padding android:left="2dp" android:right="2dp" android:top="2dp" android:bottom="2dp"/>
</shape>
i checked this one is working for me , should do for you as well
I want to repeat the image with ImageView with in RelativeLayout. Can it be possible to use the Bitmap xml and use tilemode "repeat" with RelativeLayout, because what I have seen things on Internet they all dealing with LinearLayout.
Any help or tip will be warmly welcomed.
Create an XML file named background in Drawable folder
background.xml
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/imagename"
android:tileMode="repeat" />
In your Relative Layout add the above XML as background
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:background="#drawable/background" />
Yes of Course, You can use it with relative layout. Use it as background of your RelativeLayout. I also used it in my project.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/top_header_bg_repeat"
android:gravity="center">
top_header_bg_repeat.xml (in drawable folder)
----------------------------------------------
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/top_header"
android:tileMode="repeat"
android:dither="true"/>
Set Bitmap in ImageView
----------------------
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/top_header_bg_repeat"
android:scaleType="fitXY"/>
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/top_header_bg_repeat"/>
Yes, its possible. Define your repeating image as Drawable (bitmap) with android:tileMode="repeat" in XML and use it as background of your RelativeLayout.
In all requests exists one small problem if you image will be great and smaller what size your layout, image will not resize, only repeat by X.
For repeat by Y you can do it only programmly.
I solve my problem like this (set gravity fill)
drawable bg for image
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/table_cells_bg_img"
android:tileMode="repeat" android:gravity="fill" />
and on layout
<?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="#dimen/table_cell_height">
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="#dimen/table_cell_height"
android:scaleType="fitXY"
android:src="#drawable/table_cells_bg"/>
<TextView
android:id="#+id/txtActivityTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/avatarImage"
android:text="TextView"
android:textColor="#color/white"
android:textSize="#dimen/font_size_middle" />
</RelativeLayout>
And table_cells_bg_img it's image with width=1px and height = 1px
and etc of layout, so now your image it's like background and it's will resized for any size of parent layout
Try, maybe help. To be cleared in my case i need tiled background image to full size of tablecell repeated by X coordinate (like i can do it on iOS). So i solve it like i describe.
I'm trying to make a ImageView inside a HorizontalScrollView, but the imageView gets twice the width of the screen and end halfway out of bounds.
My XML:
<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/horizontalScrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:baselineAligned="true"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/penguins" />
</LinearLayout>
</HorizontalScrollView>
And a image of what I get (click me!)
Does anyone know a solution to this problem?
Greetings
I copied your xml and using my resource it looks perfect, i believe your resource is bigger than you think it is, you probably should use layout_width and layout_height as fix size and also set scaleType to centerInside.
I have a simple LinearLayout in Android with two images vertically:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.eataly.android"
android:orientation="vertical"
android:background="#android:color/white"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/img_header1"
/>
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/img_header2"
/>
</LinearLayout>
As you can see at the following link, I can't get rid of a a gap at the top and at the bottom of the images:
http://img185.imageshack.us/img185/8484/senzanomev.png
I've tried everything imaginable on the LinearLayout and the ImageViews, i.e.:
android:padding="0px"
android:top="0px"
android:bottom="0px"
android:top="0px"
android:layout_margin="0px"
with no success.
What can I do to remove these empty borders?
I found the solution. I needed to add this attribute to the ImageView:
android:adjustViewBounds="true"
add android:scaleType="fitXY" in xml layout.
To do this in a linearlayout
for the top ImageView: android:gravity="bottom"
for the bottom ImageView: android:gravity="top"
Are you sure you don't want to be using a RelativeLayout? If you're trying to align two images to each other, that seems the way to go for down the road imho.