Circular ImageView with SVG as background with padding - android

I am trying to set a SVG Icon as the background of an Android ImageView.
The SVG Icon will receive some padding and colors are being changed a little.
<ImageView
android:id="#+id/passwordLabel"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#android:color/black"
android:padding="30px"
android:tint="#android:color/white"
app:srcCompat="#drawable/ic_lock"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="524dp" />
Is there a way to make the ImageView circular now?
I have tried other solutions but am confused, as they demand me to change the background.

You can't make the imageView circular, because it just displayed the image that already set.
Use CircleImageView library instead
Wrap your ImageView with CardView and make the radius half of its width/height
Change your image shape to be circle instead

1- you can use this library
https://github.com/hdodenhof/CircleImageView
2- use cardview
put imageview inside it and make radius half of width or height
(as suitable for your use case) also see this link

Related

Layer-List drawable as background does not completely fill its Android view

I have been working with a Layer-List drawable for some time now.
I am not really understanding why the drawable does not fit the dimensions of the Textview. Only after I set android:background="some color" and android:drawableTop="#drawable/myxml_drawable" is when I began to see the drawable was all over the place of this textview.
First I just had: android:background="#drawable/myxml_drawable" doing this will clip the top part of the drawable even though I matched the specifications of the size that was used in creating the xml drawable.
See the picture of the drawable below( purple arrow) and the textview has been colored black.
The only reason why the drawable looks centered in the background of this textview is cause I used paddingTop and paddingLeft to fix the appearance.
Here is how the textview is laid out in its constraintlayout
<TextView
android:id="#+id/uppy_arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/grandstander_extrabold"
android:gravity="bottom|fill_horizontal"
android:text="#string/add_string"
android:textColor="#color/purple_200"
android:drawableTop="#drawable/uppy_arrow"
android:paddingTop="43dp"
android:paddingLeft="9dp"
android:background="#android:color/black"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/my_image_view"
app:layout_constraintLeft_toLeftOf="#id/t2"
app:layout_constraintRight_toRightOf="#id/t2"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.99"
app:layout_constraintHorizontal_bias="0.5"
/>
How can I use this xml drawable as the background of this textview and make sure it fills the size of the textview as much as possible so that the text will be centered on it?
Please check the drawable itself. Make sure there is no inherent padding to it.Use vectors.
If you're using png or any other format makes sure the scaletype paramter is set to a legit value like fitXY or centerCrop
To center the text inside the image.You can also have a imageview separately and superimpose your textview on it

Using a Layout to Make Rounded Corners affect on image

I have some ImageView's and it seems like too much trouble to round the corners by using an ImageLoader or similar technique.
Can I just simply make a LinearLayout to cover the image? (or set the Image as its background?) For example, if the layout had rounded corners, would it hide the portion of the image beneath to create a rounded corner affect?
I have been trying to play with this (specifically using image as background) and can't seem to hide the image's corners.
well, with FrameLayout or RelativeLayout you can easily stack a second layer on top of you imageview like:
<FrameLayout
android:layout_width="60dp"
android:layout_width="60dp">
<ImageView android:id="#+id/myimage"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="#drawable/myrealimage" />
<ImageView android:id="#+id/my_roundedcorner_overlay"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="#drawable/myoverlaywithroundedcornersandtransparentcenter" />
</FrameLayout>
however, be warned this causes overdraw and makes your layout more complex.
You could also set the real image as a background to you ImageView and the overlay as the ImageViews src, however don't set a padding in this case (also loading images from the web with a library probably won't work anymore)
Cleanest solution is to create a custom widget extending ImageView and override its onDraw method, paint to the canvas using a bitmapshader, similar to http://www.curious-creature.org/2012/12/11/android-recipe-1-image-with-rounded-corners/ pretty much the same, but do it once and reuse as often as you want.
I once had the same problem, Only I wanted to create a Google Map with rounded corners, check this
question:
Is there a way to implement rounded corners to a Mapfragment?
The trick is to create a FrameLayout and in it place you content and on top of it place another layout with a 9-patch image background that has rounded corners.
If you use Universal Image Loader you can round the corners of the the image instead.
DisplayImageOptions options = new DisplayImageOptions.Builder()
.displayer(new RoundedBitmapDisplayer())
.build();
ImageLoader.getInstance().displayImage(imageUrl, imageView, options);

How can I give a border to image view in Android?

In my new android app I need to give border to imageview by using something like .9.png.
The border size should change with respect to image which I have given to imageview and If possible I need to give a background image to imageview as I'm going to apply a transparent png image to imageview.
Should I create a new custom view for this?
I think you should create a custom view. Do a LinearLayout with the background as the border and have the ImageView centered inside the LinearLayout. Use 9-patch to get a correct stretch and create a content area so that the border is showing (use draw9patch in android SDK/Tools).
Example:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/border">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
/>
</LinearLayout>
Then 9-patch your border (border.9.png in this example). You can have the same stretching as content area.

Android: 9-patch image not stretching as expected

The actual image is this:
the red boxex are where i made 1 px black likes. Even the preview shows fine. So no problem with 9-patch
but the image i get for the following layout is:
<ImageView
android:id="#+id/image_landing"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:background="#drawable/loginheader"
android:contentDescription="#string/login_header"
/>
I Expected, the logo to be on the left and black dots on the right and the rest of the space between them is filled with grey color i selected on the top
Thank You
Is your ImageView really bigger than your 9patch?
If not, you need to change scaleType as defaut is FIT_CENTER.
Use android:scaleType="fitXY" or android:adjustViewBounds="true".
It looks like your 9 patch is larger than the ImageView that you are trying to put it in. Try setting the ImageView to wrap_content to see if it fixes the problem. If it does, try making the 9 patch smaller, the ImageView bigger or set the scaleType as pcans mentioned.

Android ImageView will not match_parent width

I have an ImageView that is 1x20px. The image is a .9.png. I am trying to use match_parent but when I run the app on my device, it is not stretched to fill the width of the screen. Here's the code in the XML for the ImageView
<ImageView
android:id="#+id/dividerBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_bar"
android:layout_gravity="center_horizontal"
android:scaleType="centerInside" />
Any ideas on how I can get the ImageView to cover the entire width of the screen?
If it's a 9 patch it needs to be set as the background attribute of the imageview for it to scale properly. Right now it's trying to scale the image as it would any other image using the scaleType tag that you provided.
Try setting
android:background="#drawable/ic_bar"
and remove the src attribute
Additionally, if you are using the imageView only to display the 9-patch you can switch to using a regular View instead of the ImageView. As long as you set the background attribute you will be good to go.

Categories

Resources