Well.. I have some ImageButtons in my Android application. I want them to display the full picture. I mean: I want the ImageButton to be JUST the picture, you know?
Ok... so far, so good... I can do it use the property "background".
However I also want the ImageButton to have the corners rounded.
I have the following xml in my layout folder:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFFFF"/>
<corners android:radius="10dip"/>
<stroke android:width="8dip"/>
<size android:height="8dip"/>
</shape>
It works perfect when I don't want the picture to fill the WHOLE ImageButton... however when I try to use the picture to use the whole imagebutton... it doesn't show the rounded corners.
Can anyone help me, please?
Bonus question: Also, how can I have a beautiful black line (rounded corners) around the imagebutton?
I can suggest you to use ImageView instead of ImageButton and catch its onClick().And you can use this xml file to give it a fine black rounded edges outline to your image:
image_bg.xml:(paste this xml file in drawable folder)
<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#000000" />
<stroke android:width="3dp" android:color="#776da8" />
<corners android:bottomRightRadius="5dp" android:bottomLeftRadius="5dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" />
<padding android:left="2dp" android:top="2dp" android:right="2dp" android:bottom="2dp" />
</shape>
You can use it (in xml file where you have added the image) like:
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/image"
android:src="#drawable/icon"
android:background="#drawable/image_bg" />
What is the use of the image button? I'm currently working on a soundboard and i ran into the same issue. Then I realized that it doesn't have to be an "imagebutton" for you to be able to use it like a button. Now i'm just using imageview and then using onclick. As for the aesthetics of the black line i don't know but my images have rounded corners because i brought the images in by creating icons under new/other/android icons. It automatically makes one in each diff size category. Hope it helps!
I believe this will help you out. You might be able to tweak it slightly to add in black borders when painting the new bitmap.
How to make an ImageView with rounded corners?
You can then just attach an onClick handler to the imageview.
Related
I'm trying to create a shape for ImageView that would have round corners, the actual image and a shadow. When I created a shape and set the following variables then I got myself a rounded image with some shadow:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#42000000" />
<corners android:radius="5dp" />
</shape>
Now when I tried to add my custom image (like many people suggested I used Layer-list I got the image but the rounded corners and shadow was gone :
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#42000000" />
<corners android:radius="5dp" />
</shape>
</item>
<item android:drawable="#drawable/no_cover_art" />
</layer-list>
Also I will be changing``Images` programatically so maybe that is also something that needs to be mentioned.
What am I doing wrong and how do I get the rounded corners with shadows and custom image?
EDIT
I have tried using only the shape as a drawable, but I get a result where it applies the corners to something behind it and does not change the ImageView itself.
<ImageView
android:id="#+id/song_album_cover"
android:layout_width="64dp"
android:layout_height="68dp"
android:layout_marginStart="8dp"
android:layout_marginTop="6dp"
android:elevation="18dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/no_cover_art"
android:background="#drawable/artist_cover_image"/>
On the left side is a picture of what Android Studio shows me and on the right side is the image from when I actually run the app.
Use the drawable as the background for the image view and then set the src to whatever image you want.
/use need to use this below thing in the imageview and put your code in the drawable file and then add in the below way/
android:background="#drawable/nameofdrawablefile"
Image View background reflect only inside the circle not outside the circle.
I tried so many things but not able do that.
Anybody please me.
Thanks!!
Make an .xml file in drawable folder with this content:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#color/black"/>
</shape>
Then set this file as your background.
circle.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
<size android:width="50dp"
android:height="50dp"/>
<stroke
android:width="3dp"
android:color="#color/black"/>
<solid android:color="#color/black"/>
</shape>
in ImageView
add this in
android:background="#drawable/circle"
thank you everyone for the help.
This code is working as I want.
thank You!!
I guess you're using CircularImageView custom imageview class to make it circular. That's why background it getting apllied in cicular region only.
To solve it, do something like this,
<LineaLayout
android:width="wrap_content"
android:height="wrap_content"
android:orientation="vertical"
android:background="#color/black"/>
<!-- your circular CircularImageView here..!! -->
</LinearLayout>
Other solution you can do is, Use native ImageView and set its android:src by creating circular bitmap and use android:background black color and i would suggest to go with thise solution as you can avoid nested layouts.
I hope this hepls! Thanks.
for rounding image corners there are many library and released, but i want to round custom corners such as only TopLeft and BottomRight but i cant find this library on Android Arsenal or github. for example see this screen shot
all of released libraries rounding all corners, and i dont like it
If you want to use such rounded corners (only 2 out of 4), I'd suggest creating .png file with corners as you want them, 9patching images to stretch properly and setting created file as background to your layout (CardView, any layout you use...)
Set below xml as background of your main layout of listview raw file.
corner.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="#ffffff" />
<corners android:topLeftRadius="10dp"
android:topRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp" />
</shape>
</item>
</layer-list>
Hope it helps!!!
I'm trying to define a background drawable in XML that will make the background have a 1dp grey border on the left. The XML I'm using is:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#00FFFFFF" />
<stroke android:width="1dp" android:color="#CCCCCC" />
<padding android:left="1dp" android:top="0dp" android:right="0dp" android:bottom="0dp" />
</shape>
In the screenshot below you can see that it's actually putting a 1dp border around the entire view (the "Recent Lessons" area):
Can someone explain to me what I've done wrong here?
I think that you may have confused padding and stroke. The 1dp stroke you are adding is the border you see around the shape - not the padding. Try following these examples. For more about LayerList see the android docs (LayerList section). Basically, it boils down to multiple drawables as one.
I have a custom drawable in my android project that should be the background of a button. But each button should also support an icon AND a text.
What I tried so far is the following:
I have a drawable called "btn_background.xml"
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list >
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#ff0000"
android:endColor="#ee1111"
android:type="linear"
android:angle="90"/>
<stroke android:color="#ff0000"
android:width="1dip"/>
<size android:width="80dip"
android:height="40dip" />
</shape>
</item>
<item android:drawable="#drawable/btn_search"/>
</layer-list>
</item>
And in my layout file i use that like this:
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:background="#drawable/btn_background"
android:textColor="#ffffff"/>
This is getting me somewhere close... but there are two problems:
* The image is stretched across the whole button
* I can't just change the image in the layout file... so i would have to make a seperate btn_whatever.xml file for each icon?!?
The other solution that I tried was to use an ImageButton instead of an Button and set the background to my btn_background.xml .... this would make me able to select the image in the layout file... but then i can't give it a text....
I would be happy to hear about your solutions for my problem :)
Thanks a lot!
Try to use android:drawableLeft (or similar Top, Right, Bottom) attribute.