Develop Reference

Why does the background of the CardView's rounded corners show?

I want to display an Image in a CardView using an ImageView as its child.
I created a layout like this:
<merge 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="wrap_content"
android:layout_height="wrap_content"
tools:parentTag="androidx.cardview.widget.CardView"
app:cardCornerRadius="40dp">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/some_image" />
</merge>
I expected it to show my image but its corners to be removed respectively. I didn't set any border, so the sides of the CardView/merge don't show any. However, the rounded corners of the CardView do show some sort of border or maybe remnants of it's background color or something:
As you can see, the corner shows some grey pixels and then the straight parts of the card view don't (there might be some color difference between the black of the background and the black of the inside image but you can ignore that, it really just happens at the corners).
I played with a few things like app:cardElevation, suggested in this answer or card_view:cardPreventCornerOverlap in this one under the same question and it didn't change.
Most of the questions and posts I've found regarding the CardView's corners have more to do with the actual border of the CardView, which is not the case for me. The Image gets cropped respective to the rounded corners, but those gray lines appear.
This happens with ImageView or if I just put a View in its stead and color its background to a similar color. If I use a bright color, this doesn't seem to happen. And I don't mean it's less noticeable, but it actually doesn't happen:
I suspected that the original background of the CardView might somehow be responsible for this, so I set setCardBackgroundColor to the same value as the background and it actually removed the ugly gray corners. So it looks to me, even though my ImageView fills the parent CardView completely, the corners somehow shine through.
So I have my answer as to how to avoid those ugly gray lines, but I don't understand how this happens and whether this is the right way to go about this or whether it's just a bug I found a workaround for. Have I done something wrong?
I'm using a Pixel 4a.

is it possible to specify android:minHeight to be the same as android:layout_width

I have an xml layout file for a venue details page, which specifies a few linear layouts and then a map view. Each linear layout has 2 TextViews, one as a header and another as the detail. At the bottom of the page is a mapView which shows the location of the venue.
On a large screen/tablet the map has plenty of room and looks fine, on a smaller screen, e.g. on a phone the map is squeezed into this tiny space at the bottom of the screen.
I'm happy with main layout of the page except for the map at the bottom.
What I would like to do is to specify that the minimum height of the map is at least the same dp as the available width - i.e. make sure its square. If there is more space for the map to fill at the bottom of the screen - i.e. to make it a portrait aspect rectangle, then it should do so.
Edit : I don't want to reduce the already dynamic size of the LinearLayouts as the information they provide is actually what the user will want to see.
pseudo code below:
<com.google.android.gms.maps.MapView
android:id="#+id/mapView"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:minHeight="android:layout_width"
/>
I can see that it would be possible to do this through Java code. I can also see that I would be able to set a specific size such as 320dp, but this then requires more effort to get the size correct for multiple screen sizes.
Is this possible in xml alone?

Having had time to think about the comments made by #confused_at_times, I decided that in fact the problem was in the layout of my activity and not in the unavailable option in the xml.
My chosen solution is to have the map as the main element of the page with the marker pin being clickable and showing all available detail upon click.

It is not possible in XML for most View types.
As you know it can be accomplished in code, but I have always thought this type of a feature would be very helpful.
However for an ImageView you can accomplish something like this using the adjustViewBounds property, for example if you want a banner image at the top of your screen, and you want it to size correctly.
This XML below shows how to use that property:
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitStart"
android:src="#drawable/big_image" />
First impression is that this image will match_parent in both height & width i.e. fill the screen. The scaleType will allow it to change size if required.
The trick is using adjustViewBounds set to true.
The image is scaled, but the bottom bound of the view is brought up to wrap_content of the newly scaled image.
Bear in mind that this method will not stretch a smaller image, but will work when shrinking a larger image onto a smaller screen.

TextView going out of screen

I have a TextView in a RelativeLayout that sometimes is partially out of the screen.
the problem is that instead of just being partially out of the screen its sizes change so that the entire TextView still remains on the screen.
I want to know how to disable that change.
EDIT: this is my TextView XML
<TextView android:id="#+id/neighborImage"
android:drawableBottom ="#drawable/icon"
android:text="Temple Bar"
android:singleLine="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="matrix"
/>
EDIT2:
The icons you see on the radar are the TextView. The reason I'm using TextViews is because there will be text above the icons eventually.
So, as you can see I've uploaded 3 pictures.
These 3 pictures describe a zoom in, and as a result the icons are moving. If we will look at lower right picture we can see that when it reaches the end of the screen, the image width is changed and as a result the image is pushed to the right in the third picture you can see how it continues. i want to have the same result as when using ImageView, in this case the picture will just be partially out of the screen it it's size will be the same.
Thanks.

Check your xml. You are likely setting layout_width as "wrap_content", you want "fill_parent"
Alternatively, post the xml in question.

Android : Alignment bug in making/showing 9patch image

NinePatch:
Screenshot:
Layout XML:
<?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:orientation="vertical"
android:background="#ffffff">
<LinearLayout
android:id="#+id/edit_tray"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<View
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/trash"/>
</LinearLayout>
</RelativeLayout>
Desired Results:
The "edit_tray" represents a UI element that will be toggleable. When edit mode is off, the "edit_tray" (and therefore the trash can icon) are "gone". When edit mode is on the "edit_tray" is visible and overlaid over the ScrollView contents.
There are two elements to the trash can icon: The icon itself and the linear gradient behind it. The NinePatch image contains three stretchable areas and one static area to accommodate these elements. The trash can icon in the middle of the graphic is static and should appear directly in the horizontal center and on the bottom of the screen. The gradient should stretch across the bottom of the screen from one side to the other.
The Bug?
The NinePatch image contains only one pixel of stretchable area on either side of the image horizontally. The effect of which should be that the trash can icon appears directly in the center (1 pixel on left side == 1 pixel on right side). However, as you can see in the screenshot above that is not the case. Note: this screenshot was taken from my test phone, a T-Mobile G2. The same effect can be seen in the emulator. However, in the draw9patch preview and the eclipse Graphical Layout view the image is perfectly distributed.
I've tried several different methods to try to find out where the bug is and to try to fix it or work around it. Including: using ImageViews instead of Views (same effect), using android:scaleType="fitXY" (same issue), checking at runtime that the width of the screen and the width of the "edit_tray" are the same (they are), using two different images for gradient (as edit_tray background) and icon (as ImageView src) (create another problem where the two images were not overlayed on each other. Fixed by setting an absolute height on both), etc.
The Answer, the Workaround, and the Real Question
I did some testing using some simple NinePatch images with up to six stretchable areas per side. I noticed there were some issues displaying them in at least one of the testing cases (phone, emulator, draw9patch, Graphical Layout in eclipse).
I decided to try to expand the image horizontally so that there was more of the linear gradient showing on the edges of the trash can icon. I made the image 128x64 (previously 64x64). I made more of the edges part of the stretchable part to try to curb any bad math (?) that was happening to the image. Draw9patch reported bad sections so I put it back to just the two pixels, one on either side. It worked! The icon is directly in the center of the screen now! I don't know why, but without changing the actual stretchable portion of the image, only changing the width of the image to 128, it works now.
I tried resizing the image back down to around 100px wide to remove some of the redundant pixels and the error came back! Not only did it come back, but the icon was placed at exactly the same spot offset from the center of the screen. I can't figure out why this would happen this way.
Anyone have any ideas? Is this a bug?
I currently have this working given the workarounds I described above, but if anyone has any suggestions I'm listening.

Make your 9 Patch image with using 4 points as I have done in this..and it will work.
Tips for Creating 9 Patch Image.(not a designer,telling you my funda)
Put points on Left and Top
If you have some text or image in between ..then put point on left
and right of image and top and bottom of that image or text.
Always see the no of space left and no of points on both sides(left-right and top-bottom) are equal.
Always check once the preview or right side before using check in 2x
to 6x

From my experience with the draw 9-patch tool there is an automatic 1px offset on each side of the image. Given this information if you were using just this one pixel offset your image was actually not being stretch the way you would imagine.
This can be seen by the fact that when you used a 2px offset it worked perfect.
Also the 9-patch images have a tendency of showing up in eclipse exactly how you would think... but then appearing different on the phone/emulator.
Learning the 9-patch tool is def a great thing as it allows greater customization. Another tip, if you want to do something like replace any android 9-patch with your own alterations - then just copy the 9patch that exists in the SDK and alter it. For some reason 9patch images in the SDK have weird offsets. Doing this will guarantee you don't get weird responses from your 9-patches. An example of this - I outline an editText in red when bad input is given.
The SDK images can be found in SDK->platforms->[plateform-you-want]->data->res-drawable-[you-choice]
You can also look at the SDK 9-patch images to help understand how the 9-patch-tool works.
Hope this give a little more insight.
Here are some good links:
http://developer.android.com/guide/developing/tools/draw9patch.html
http://android10.org/index.php/articlesother/279-draw-9-patch-tutorial
http://jaanus.com/post/7878186745/how-does-androids-nine-patch-tool-work-from-a

Maybe it's bug in nine-patch drawing, or just error resulting from rounding.
However, I don't like your approach of drawing this icon. You try to position your screen element using something that is not designed for this task.
You should draw it other way: create some container view (FrameLayout) with gradiend background. Then on top of that position ImageView with trash can. Neither of these 2 images need to be nine-patch, gradiend would fill entire view, trash can would be drawn without scaling.
Although there's overdraw in area of trash view, CPU time is not wasted in nine-patch areas computations.
You would use layout system for exact positioning of your trash icon. Certainly you would get expected result, since UI layouts are well tuned, and made for purpose of positioning screen elements. Nine-patch images are used for other purpose (where pixels shifted here or there a bit should not matter).

As #jjNford said - it's bad practice to work with images in this way.
For this task the best solution is to create "trash" icon with transparent background, and create shape drawable with gradient. So, you can remove unnecessary LinearLayout and use only ImageView:
<ImageView
android:id="#+id/edit_tray"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:src="#drawable/trash"
android:background="#drawable/gradient_background"/>
Docs for shape drawable.
EDIT
Just check your image - it starches fine on SE Xperia 2.3.3

Android Layout & overlapping issue

The image is what i'm trying to achieve. I tried using tab layout, relativelayout and linearlayout (and even a combination), but in no scenario i got it exactly right.
The requirements:
no overlapping of any component
no clipping of the image in the button (the green one)
the red bar is always at the bottom
in landscape, the components should still be in their same place, but you can scroll down
If required I can paste my current variations of the different layouts, but they are all rather big and messy.
Professional insights on which layout approach you would use is also appreciated, at least i can keep trying using the right things then.
At the moment, the orange things are normal buttons, defined like so:
<Button
android:id="#+id/btn_web"
style="#style/NewButton2"
android:onClick="webClick"
android:text="#string/Text_Web"
android:drawableTop="#drawable/jc_menu_web"
android:layout_weight="0.3"
/>
This is a problem on its own,because if you stretch the buttons using fill_parent, the result is that the image will be high at the top, whereas the text will be entirely at the bottom.Would be nicer if it were a centered image in the button.