I would like to add a border to a cardview which contains an ImageView. It works perfect if I use an icon as a image (a vector graphic). The image is inside an ImageView with the size MATCH_PARENT and added to a cardview. The cardview should be responsible for the border. Therefore I set the background image of the cardview this way:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#fff"/>
<stroke android:width="1px" android:color="#e6e6e6" />
<corners android:radius="20dp"/>
<padding android:left="0dp" android:top="0dp"
android:right="0dp" android:bottom="0dp" />
</shape>
So the image of the ImageView seems to overwrite the background of the cardview. Any idea how to fix it?
This is not a direct solution to using a drawable, but I'd suggest to use MaterialCardView which offers you the same specs as in your drawable using app:strokeColor, app:strokeWidth & app:cardCornerRadius:
<com.google.android.material.card.MaterialCardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardCornerRadius="20dp"
app:strokeColor="#e6e6e6"
app:strokeWidth="1dp">
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:background="#drawable/my_image" />
</com.google.android.material.card.MaterialCardView>
Note: the margin added to the ImageView that equals to the card stroke so that it's not covered by the card stroke, you can remove it if you'd like to.
Related
I am trying to design a custom layout like below:
So far I have done as following image but that's not exactly like the intended one:
Here is the code that I have tried.
***et_rounded_corner*******
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#android:color/white" />
<corners android:radius="10dp" />
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp" >
</padding>
<stroke
android:width="0dp"
android:color="#color/white"/>
</shape>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/et_rounded_corner"
android:padding="5dp">
<TextView
android:id="#+id/et_search"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_alignParentStart="true"
android:layout_toStartOf="#+id/imageView"
android:maxLines="1"
android:padding="5dp"
android:text="#string/loading"
android:textAppearance="#style/Small"
android:visibility="visible" />
<ImageView
android:id="#+id/imageView"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:background="#color/red"
android:padding="5dp"
android:visibility="visible"
app:srcCompat="#drawable/ic_search" />
</RelativeLayout>
For the record, I have fixed it by using the following background with imageview.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/red" />
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="20dp"
android:topLeftRadius="0dp"
android:topRightRadius="20dp" />
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp" >
</padding>
<stroke
android:width="0dp"
android:color="#color/red"/>
</shape>
Increase your corner radius to a big number, like 100dp.
<corners android:radius="100dp" />
Android will then create a circle at each end for you.
Apply the same trick to a red background of your `ImageView~ and make the actual image have a transparent background. That will give you the correct rounded corners on the right of the red. But the left will now be rounded.
To make the left border of the red button vertical, either overlay a white block, or better, add a negative left padding to this new red background drawable. Then the left rounded part will try to draw outside the view, so it will not show.
As stated by other answer, you also need to remove the padding from the enclosing view, because this is adding the vertical space, and the right padding on the red image.
For the same reason, remove the padding on your image.
an Imageview is a wrapped in a linearlayout. the linearlayout has a rounded background. I want the imageView not to overlap the rounded corners of the linearlayout. Cardview does something similar but I don't want all corners radius.
Here's my snippet.
<LinearLayout
android:background="#drawable/bottom_sheet_top_stroke"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.github.chrisbanes.photoview.PhotoView
android:id="#+id/preview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:minHeight="300dp"
android:scaleType="center" />
</LinearLayout>
bottom_sheet_top_stroke
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:top="0dp"
android:left="-6dp"
android:right="-6dp"
android:bottom="-32dp">
<shape android:shape="rectangle">
<solid android:color="#color/dark"/>
<stroke
android:width="5dp"
android:color="#color/white"/>
<corners android:radius="40dp"/>
</shape>
</item>
</layer-list>
how do I achieve making sure the image is within the defined radius of the parent and not overlap.
You have to make your Image with roundedCorners.
For Image loading libaries like Glide and picasso there is already lots of transformation available .
You have to use RoundedCornersTransformation
Glide.with(this).load(url)
.apply(RequestOptions.bitmapTransform(
new RoundedCornersTransformation(this, 10, 10))).into(mImageView);
For transformations you can take reference from glide-transformations .
I am trying to set a backgroundimage to my ImageButton. The ImageButton should be full filled. Currently it looks like:
ImageButton
<ImageButton
android:id="#+id/imgBtn_OpenUserPicture"
android:layout_width="96dp"
android:layout_height="96dp"
android:layout_gravity="center_horizontal|center_vertical"
android:src="#drawable/ic_camera"
android:background="#drawable/round_imagebutton"
android:scaleType="centerCrop"
android:tint="#android:color/transparent"
android:padding="20dp"/>
#drawable/round_imagebutton
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/transparent"/>
<corners android:radius="90dp" />
<stroke
android:width="2dp"
android:color="#FFF"
/>
</shape>
</item>
</selector>
One problem could be the padding of 20dp. After removing it, the problem was the same. I think I have to set the image as the background of the shape. But how can I set the image dynamically - captured by the camera - to the shape background?
Use scale type as fit center.
android:scaleType="fitCenter"
There are Two way
1# Use rounded image instead of rectangle to set src
2# use this link instead of ImageButton
https://github.com/hdodenhof/CircleImageView
I want to create a button in an Android application which will be round with a color of my choosing and a plus sign as its text.
Is it better (in terms of space, efficiency etc.) to create an image of the above description and set it as a background image, or it it better to make a shape with a color and add that as a background?
To do that you can create a circle shape with the help of shape drawable, but the better way to do this is to use the FloatingActionButton which is circular in shape and you can provide the icon of your choice.
-First of You create drawable xml
-ic_round_shape_background
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#000" /><!--color code which you are use instead #000-->
<corners android:bottomRightRadius="8dp"
android:bottomLeftRadius="8dp"
android:topRightRadius="8dp"
android:topLeftRadius="8dp"/>
</shape>
//Create xml and use background like below
activity_main.xml
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_round_shape_background"
/>
please try the below code.
create a background.xml in drawable folder and paste this code.
`
<solid android:color="#color/colorPrimary"></solid>
<stroke
android:width="2dp"
android:color="#color/colorPrimary"></stroke>
<padding
android:left="5dp"
android:right="5dp"
android:top="5dp"></padding>
<corners android:radius="5dp"></corners>
`
in Layout
<LinearLayout
android:id="#+id/place_holder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/background"
android:gravity="center"
android:orientation="horizontal">
` <ImageView
android:layout_gravity="center_vertical"
android:layout_width="20dp"
android:layout_height="20dp"
android:background="#drawable/image" />
</LinearLayout>`
I have a View with a background of a circle drawable. I want the circle to be larger than it's containing view, but still clipped off. The problem is, the drawable size doesn't want to go beyond the view's size, and the whole circle is much smaller than I need it to be.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="60dp">
<View
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentRight="true"
android:background="#drawable/circle" />
</RelativeLayout>
And the circle.xml:
<shape android:shape="oval">
<solid android:color="#ff0000" />
</shape>
How can I get the get the large cropped circle instead?
<shape android:shape="oval">
<size android:width="50dp" android:height="50dp" />
<solid android:color="#ff0000" />
</shape>
If problem still exists, you may need to use ImageView and setImageResource instead of view and backgrounds.
Make sure you set android:clipChildren="false" atribute in the view parent and its parent.