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 .
Related
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.
I am trying to add a linear layout with rounded corners and blurred background in my app. So far ive managed to give the layout rounded corners but i cant figure out how to give it a blurred background.Ive tried setting an alpha attribute in the xml file but it dosent work.
Heres what i want to achieve:
The Drawable resource file:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#fff"/>
<stroke android:width="0.5dp" android:color="#B1BCBE" />
<corners android:radius="160dp"/>
<padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" />
</shape>
The Xml code of the layout:
<LinearLayout
android:id="#+id/team_lay"
android:layout_width="match_parent"
android:layout_height="95dp"
android:layout_marginTop="40dp"
android:background="#drawable/layout_bg"
android:orientation="horizontal">
</LinearLayout>
What i have achieved so far:
How can i achieve the desired results?
TIA..!!!
You can achieve it by create a blur background as a xml file and then set background of your container view to it.
Try my example:
blur_background.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
android:shape="rectangle">
<solid android:color="#4CAF50" />
</shape>
</item>
<item>
<shape
android:shape="rectangle">
<solid android:color="#AA000000" />
</shape>
</item>
</layer-list>
And your container layout:
<LinearLayout
android:id="#+id/team_lay"
android:layout_width="match_parent"
android:layout_height="95dp"
android:layout_marginTop="40dp"
android:background="#drawable/blur_background"
android:orientation="horizontal">
</LinearLayout>
Hope it help. ^^
So i fount the solution myself. I changed the transparency of the solid color in the drawable resouce file(as mentioned here https://stackoverflow.com/a/41865518/8175719 ) and it worked.
I have ImageView with shape but image is also visible to the outside of shape bounds.
This is my shape code:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/dashboard_bg" />
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="ring"
android:thicknessRatio="1.9"
android:useLevel="false">
<solid android:color="#android:color/transparent" />
<padding
android:bottom="7dp"
android:left="7dp"
android:right="7dp"
android:top="7dp" />
<stroke
android:width="10dp"
android:color="#android:color/white" />
</shape>
</item>
</layer-list>
and this is my ImageView
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/layer_list_circl"/>
And this is the result i got..
what i want just squeeze image into shape. Thanks in advance.
First of all, the image you are loading seems large, so you need to scale it to fit the right size you want. since the image you are trying to wrap is rectangle it can't be wrapped in a ring shape.
Therefore, you can use an image loading lib like fresco or picasso and set the correct size you want, and the scaling/crop option.
After you did that, you can add the background as you created and it should fit the image.
You can try adding this to your ImageView:
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/layer_list_circl"/>
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 create relative layout i want to set background color like half circle on top . i given like display below.please help me .
I have created following xml drawable you can use this:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="-150dp"
android:right="-150dp"
android:top="-200dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#C72C2F" />
</shape>
</item>
</layer-list>
Just copy and paste it in half_circle.xml in DRAWABLE folder.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="190dp"
android:bottomRightRadius="190dp"
android:topLeftRadius="0dp"
android:topRightRadius="0dp" />
<padding
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="0dp" />
<stroke
android:width="0dp" />
<gradient
android:startColor="#2196f3"
android:endColor= "#2196f3"
android:angle="90" />
</shape>
Use like this
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="100">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="48"
android:background="#drawable/half_filled_circle">
</RelativeLayout>
</LinearLayout>
You could create a 9-patch image and set it to the background. The patch (the part that is stretchable) would be set to just below the end of the half circle.
You can use Path specifying paint.setStyle(FILL) then in your view's onDraw(Canvas c) you can draw a path using canvas.drawPath(path,paint).
or
You can define a LayerList Drawable containing two Shape Drawable in the following order
Create a Rectangle
Create an oval
You are done now set this Layer list drawable to any view or layout as background.
or
You can have a nine patch image.