I have this ImageButton
<ImageButton
android:id="#+id/imageButton"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#drawable/crimson_round_button"
android:src="#drawable/play_white"/>
where crimson_round_button.xml drawable is
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="oval">
<solid android:color="#color/hibiscus"/>
<stroke
android:width="4dp"
android:color="#color/crimson"/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#color/crimson"/>
<stroke
android:width="4dp"
android:color="#color/crimson"/>
</shape>
</item>
</selector>
and the play_white.png drawable represents only the white play icon in the button.
My final result is this one
A you can see the inner icon is not centered and you can notice that the right and bottom borders are a little bit cropped.
The reason is that the applied background is not fitting the ImageButton, as you can see in this image where I selected the ImageButton in Android Studio preview
Any idea why this is happening?
EDIT:
Ok, let's try to forget about the white arrow.
This is my new code for the Image button (and its container)
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white">
<ImageButton
android:id="#+id/save_record_dialog_play_imageButton"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:background="#drawable/crimson_round_button"/>
</FrameLayout>
as you can see the circle set as ImageButton background is no more a circle, it's cropped on the left side and at the bottom
and setting a 4dp elevation to the ImageButton the cropped border is much more visible
I think the problem is that the triangle-shaped play button just doesn't look centered.
I tried your layout with my own triangle-shaped button:
It looks like it's too far to the right, but if we picture the bounds of the triangle button (sorry about my paint skills) like so:
the icon itself does seem to be centered.
One solution is to adjust the left padding so it looks better:
<ImageButton
android:id="#+id/imageButton"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#drawable/crimson_round_button"
android:src="#drawable/play_white"
android:paddingLeft="3dp"/>
Which gives this:
With regard to the second part of your question, have you observed the cropping on the design tab? In an emulator? On a device? For me, I see this issue on the layout design tab:
but not on a device (this is from a screenshot):
Related
I have a rectangular image that I want to appear circular in an ImageView? I tried the following to no avail.
I create a circular xml shape and apply it as the background of my ImageView. Then I add the png image as the src of the ImageView. But the image still appears rectangular in a circular view. When I try to scale the image in the view, it simply fills the view and forces the view to look rectangular. Of course I just want to effectively get a circular cross-section of the image, losing all four straight edges. I welcome any help.
<ImageView android:id="#+id/circular_content"
android:background="#drawable/bkg_circle_shape"
android:src="#drawable/img_1"
android:scaleType="fitCenter"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
Shape:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="oval" >
<solid android:color="#CCFFFFFF" />
<size
android:height="300dp"
android:width="300dp" />
</shape>
try it splitTrack=-false in api21 or higher
for SeekBar, i test it work correctly.
I am trying to create a ImageButton for my user portrait.
<ImageButton
android:id="#+id/new_question_user_portrait"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#drawable/oler_login_submit_button_bg"
android:src="#drawable/oler_portrait"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"/>
This is the background xml file.
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="10dp" />
</shape>
My src image is 200*200 px. Round Corner still not working for these code.
Could anyone show me the correct way to create a rounded Image Button with fixed height and width regardless of image source?
You are expecting the background drawable to work as a mask, which it does not. The drawable is drawn behind the bitmap (after all, it's a background), so it's invisible.
What you are looking for is a mask, have a look at this question and its answers: Mask ImageView with round corner background
In my application, I want to display videoview as a rounded corners. I have tried placing videoview/surfaceview inside linearlayout with rounded corner set to linearlayout. but it does not work perfectly. I can not set rounded corner to videoview/surfaceview. I want to set view as below image:
Anyone have idea how to do this?
Not sure why there are so many bad answers when the solution is really simple (as long as you're min sdk > 21). Creating a shape and putting it overtop of the video won't work because you obviously want the background to be transparent to see the views behind it.
I found the answer here Android View Clipping. You just put the video view in a frame layout, add a rounded background to the frame layout, add an outline provider and clip the frame layout to the outline.
The background rounded_video_background:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#000000"/>
<corners android:radius="16dp" />
</shape>
The frame layout and video view inside of it:
<FrameLayout
android:id="#+id/video_view_container"
android:layout_width="90dp"
android:layout_height="120dp"
android:background="#drawable/rounded_video_background"
android:outlineProvider="background">
<VideoView
android:id="#+id/video_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
/>
</FrameLayout>
And the final step is clipping to the outline (didn't see a way to do it in xml so I did it programatically):
video_view_container.clipToOutline = true
Its worked for me,
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_gravity="center"
android:layout_width="match_parent"
card_view:cardCornerRadius="25dp"
android:layout_height="wrap_content">
<VideoView
android:id="#+id/video"
android:layout_width="match_parent"
android:layout_height="215dp" />
</android.support.v7.widget.CardView>
You can make it using a FramLayout & an XML drawable
FramLayout
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<VideoView
android:layout_width="match_parent"
android:layout_height="#dimen/dp_240"
android:layout_margin="#dimen/dp_24"/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/rounded_corner_video_bg" />
</FrameLayout>
XML Drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="#dimen/dp_24"
android:color="#color/md_white_1000" />
<corners android:radius="#dimen/dp_24" />
</shape>
You could try layering different views on top of each other to create the rounded corners you are looking for. Try placing four ImageViews over the VideoView in each corner, to achieve the desired rounded corners. I have had success using a RelativeLayout to accomplish this, but you could also try using a FrameLayout to hold the Views together.
It is directly not possible, but you can do this by draw a imageview on top of videoview and set an image having transparent from between and solid color in rounded shape on the corners.
check this: Click here
Its simple,
1. Create a drawable with rounded corners as mentioned by #sunil kumar
2. Set that drawable to your layout as a background
3. When using that layout set layout(your layout item name).clipToOutline = true
This is XML code of rounded VideoView.
<androidx.cardview.widget.CardView
android:id="#+id/videoCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
app:cardCornerRadius="20dp"
card_view:cardBackgroundColor="#color/white">
<VideoView
android:id="#+id/relativeVideo"
android:layout_width="match_parent"
android:layout_height="225dp"
android:paddingTop="-10dp"
android:paddingBottom="-10dp" />
</androidx.cardview.widget.CardView>
Negative padding is important otherwise height of VideoView is smaller than cardview by half of cornerRadius in both top and bottom side. You can set height whatever you want but negative padding should be half of cardCornerRadius all the time. Purple in the image is a video preview, not related to xml.
Have a nice day!
put rounded.xml in your drawable folder and set on framelayout of video like android:background="#drawable/rounded.xml"
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<solid android:color="#FFFFFFFF" />
<corners android:radius="7dp" />
</shape>
Create an xml file in drawable folder called shape_video.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:radius="6dp" />
</shape>
Change the radius according to your rqmnt and in the background attribute of your videoview, give
android:background="#drawable/shape_video"
I'm trying to create rounded corners on a MapView, and since there doesn't seem to be any way to do it by default, I'm basically overlaying a layout with a background over my map view, like so:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp" >
<RelativeLayout
android:id="#+id/map_holder"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#drawable/panel_rounded_corner_transparent" />
</RelativeLayout>
My rounded corner drawable is defined like this:
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/bg_rounded_corner_transparent" />
</selector>
and the drawable inside is defined as:
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid
android:color="#color/transparent" />
<stroke
android:width="1dp"
android:color="#color/darkgray" />
<corners
android:radius="5dp" />
</shape>
</item>
</layer-list>
However, the problem is that since the map ends up rectangular and the border is rounded, the corners of the map peek out from behind the corners of my makeshift border. How do I set a background color for only the outside of my border, while keeping the inside of the panel transparent?
To clarify, here are some screenshots.
This screenshot shows the map as originally "bounded" by the overlaid border:
This screenshot replaces the map with a red background, for greater clarity in seeing what the problem is:
As you can see, the red (and by extension, the map) bleeds outside the border.
I can add a 1dp padding to the map, but that doesn't entirely solve the issue as you can see here:
Since the corners are rounded, part of the map still leaks out. It's a lot better than the first option, but not perfect--there are 1 pixel dots at the corners.
As this screenshot shows, a padding of more than 1dp is not a solution since it creates another problem entirely:
Try extending the MapView like the following:
private class MyMapView extends MapView {
public MyMapView(Context context, String apiKey) {
super(context, apiKey);
}
#Override
public void draw(Canvas canvas) {
Path path = new Path();
RectF r = new RectF(0, 0, this.getWidth(), this.getHeight());
path.addRoundRect(r, 12, 12, Path.Direction.CW);
canvas.clipPath(path);
super.draw(canvas);
}
}
You might need to adjust the radius for path.addRoundRect()
Have you tried using the styleable elements? Take a look at this:
http://developer.android.com/reference/android/R.styleable.html#DrawableCorners_bottomLeftRadius
Hope this helps, this should solve your problem :)
hi there i play around for a few hours with this and here is my solution for a ImageView with transparent frame (oval) inside and solid color outside. I know it is a oval shape but it also works with rect.
Implement a FrameLayout with two children inside. So the shape will overlapping the ImageView:
<FrameLayout
android:id="#+id/testLinearLayout"
android:layout_width="300dp"
android:layout_height="300dp">
<ImageView
android:id="#+id/mainContentImage"
android:layout_width="300dp"
android:layout_height="300dp"/>
<LinearLayout
android:layout_width="300dp"
android:layout_height="300dp"
android:background="#drawable/shape_circle">
</LinearLayout>
</FrameLayout>
here is the shape_circle.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/shape_circle_rect"/>
<item android:drawable="#drawable/shape_circle_oval"/>
</layer-list>
shape_circle_rect.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<padding
android:left="-70dp"
android:top="-70dp"
android:right="-70dp"
android:bottom="-70dp"/>
</shape>
shape_circle_oval.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<stroke android:color="#ffffff" android:width="70dp"/>
</shape>
its not exactly what you searching for but it could help.
hope this is woking........read abount styles and other part of developers
may help you
http://developer.android.com/reference/android/R.style.html
I am looking to have a button's background be composed of a backround image, with another image overlayed on top. I do not need the button to have any text.
I have tried the following approach:
<Button android:layout_width="wrap_content" android:layout_height="wrap_content"
android:background="#drawable/button_background" />
button_background.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap android:src="#drawable/background_image" android:gravity="center"></bitmap>
</item>
<item>
<bitmap android:src="#drawable/foreground_image" android:gravity="center"></bitmap>
</item>
</layer-list>
However, when I do this, the foreground image is stretched to the size of the background image, even though I am specifying gravity to center.
Use an imagebutton with background image, like this:
<ImageButton android:layout_width="wrap_content"
android:background="#drawable/background_image" android:id="#+id/imageButton1"
android:layout_height="wrap_content" android:src="#drawable/foreground_image"></ImageButton>