I'm trying to make a round button, but I don't know how can I do it. I can make button with rounded corners, but how can I can round circle. It's not the same. Please, tell me, is it possible on Android? Thank you.
Create an xml file named roundedbutton.xml in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#eeffffff" />
<corners android:bottomRightRadius="8dp"
android:bottomLeftRadius="8dp"
android:topRightRadius="8dp"
android:topLeftRadius="8dp"/>
</shape>
Finally set that as background to your Button as android:background = "#drawable/roundedbutton"
If you want to make it completely rounded, alter the radius and settle for something that is ok for you.
If using Android Studio you can just use:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#FFFFFF"/>
</shape>
this works fine for me, hope this helps someone.
Create a drawable/button_states.xml file containing:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<shape android:shape="rectangle">
<corners android:radius="1000dp" />
<solid android:color="#41ba7a" />
<stroke
android:width="2dip"
android:color="#03ae3c" />
<padding
android:bottom="4dp"
android:left="4dp"
android:right="4dp"
android:top="4dp" />
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="rectangle">
<corners android:radius="1000dp" />
<solid android:color="#3AA76D" />
<stroke
android:width="2dip"
android:color="#03ae3c" />
<padding
android:bottom="4dp"
android:left="4dp"
android:right="4dp"
android:top="4dp" />
</shape>
</item>
</selector>
Use it in button tag in any layout file
<Button
android:layout_width="220dp"
android:layout_height="220dp"
android:background="#drawable/button_states"
android:text="#string/btn_scan_qr"
android:id="#+id/btn_scan_qr"
android:textSize="15dp"
/>
Markushi's android circlebutton:
(This library is deprecated and no new development is taking place. Consider using a FAB instead.)
If you want a FAB looking circular button and you are using the official Material Component library you can easily do it like this:
<com.google.android.material.button.MaterialButton
style="#style/Widget.MaterialComponents.ExtendedFloatingActionButton"
app:cornerRadius="28dp"
android:layout_width="56dp"
android:layout_height="56dp"
android:text="1" />
Result:
If you change the size of the button, just be careful to use half of the button size as app:cornerRadius.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#ffffff"
/>
</shape>
Set that on your XML drawable resources, and simple use and image button with an round image, using your drawable as background.
<corners android:bottomRightRadius="180dip"
android:bottomLeftRadius="180dip"
android:topRightRadius="180dip"
android:topLeftRadius="180dip"/>
<solid android:color="#6E6E6E"/> <!-- this one is ths color of the Rounded Button -->
and add this to the button code
android:layout_width="50dp"
android:layout_height="50dp"
Used the shape as oval. This makes the button oval
<item>
<shape android:shape="oval" >
<stroke
android:height="1.0dip"
android:width="1.0dip"
android:color="#ffee82ee" />
<solid android:color="#ffee82ee" />
<corners
android:bottomLeftRadius="12.0dip"
android:bottomRightRadius="12.0dip"
android:radius="12.0dip"
android:topLeftRadius="12.0dip"
android:topRightRadius="12.0dip" />
</shape>
</item>
You can use a MaterialButton:
<com.google.android.material.button.MaterialButton
android:layout_width="48dp"
android:layout_height="48dp"
android:insetTop="0dp"
android:insetBottom="0dp"
android:text="A"
app:shapeAppearanceOverlay="#style/ShapeAppearanceOverlay.App.Rounded"
/>
and apply a circular ShapeAppearanceOverlay with:
<style name="ShapeAppearanceOverlay.App.rounded" parent="">
<item name="cornerSize">50%</item>
</style>
Round button in Android
You can make a ImageButton with circular background image.
use ImageButton instead of Button....
and make Round image with transparent background
For a round button create a shape:
<?xml version="1.0" encoding="utf-8"?>
<stroke
android:width="8dp"
android:color="#FFFFFF" />
<solid android:color="#ffee82ee" />
<corners
android:bottomLeftRadius="45dp"
android:bottomRightRadius="45dp"
android:topLeftRadius="45dp"
android:topRightRadius="45dp" />
use it as a background of your button link
Update 2021:
Just use the MaterialButton
<com.google.android.material.button.MaterialButton
app:cornerRadius="30dp"
android:layout_width="60dp"
android:layout_height="60dp"
android:text="test" />
width equal height
cornerRadius is half of the width or height
Yes it's possible, look for 9-patch on google. Good articles :
http://radleymarx.com/blog/simple-guide-to-9-patch/
http://ogrelab.ikratko.com/custom-color-buttons-for-android/
You can use google's FloatingActionButton
XMl:
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/ic_dialog_email" />
Java:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
FloatingActionButton bold = (FloatingActionButton) findViewById(R.id.fab);
bold.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
// Do Stuff
}
});
}
Gradle:
compile 'com.android.support:design:23.4.0'
I simply use a FloatingActionButton with elevation = 0dp to remove the shadow:
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_send"
app:elevation="0dp" />
I like this solution
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardCornerRadius="18dp"
app:cardElevation="0dp"
>
<ImageButton
android:layout_width="35dp"
android:layout_height="35dp"
android:background="#null"
android:scaleType="centerCrop"
android:src="#drawable/social_facebook"
/>
</androidx.cardview.widget.CardView>
It is
android.R.drawable.expander_ic_minimized
look into built in android drawables:
http://androiddrawableexplorer.appspot.com/
Use the Image Buttons and make the background as the image you want.
Create the images from the android asset studio link -
" https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html#foreground.type=image&foreground.space.trim=0&foreground.space.pad=0.25&foreColor=rgba(94%2C%20126%2C%20142%2C%200)&backColor=rgb(96%2C%20125%2C%20139)&crop=1&backgroundShape=circle&effects=none&name=ic_home "
and download it, extraxt it , inside that look for mipmap-hdpi folder.
copy the image from the mipmap-hdpi folder and paste it in the drwable folder of your android project.
Now set the background as that image.
I went through all the answers. But none of them is beginner friendly. So here I have given a very detailed answers fully explained with pictures.
Open Android Studio. Go to Project Window and scroll to drawable folder under res folder
Right click, select New --> drawable resource folder
In the window that appears, name the file rounded_corners and click on OK
A new file rounded_corners.xml gets created
Open the file. You are presented with the following code -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://android.com/apk/res/android">
</selector>
Replace it with the following code -->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="8dp" />
<solid android:color="#66b3ff" />
</shape>
Here the design view can be seen on the right side
Adjust the value in android:radius to make the button more or less rounded.
Then go to activity_main.xml
Put the following code -->
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:padding="10dp">
<Button
android:id="#+id/_1"
android:text="1"
android:textSize="25dp"
android:textColor="#ffffff"
android:background="#drawable/rounded_corners"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"/>
</RelativeLayout>
Here I have placed the Button inside a RelativeLayout. You can use any Layout you want.
For reference purpose MainActivity.java code is as follows -->
import android.app.Activity;
import android.os.Bundle;
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
I have a Pixel 4 API 30 avd installed.
After running the code in the avd the display is as follows -->
Fully rounded circle shape.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FFFFFF" />
<stroke
android:width="1dp"
android:color="#F0F0F0" />
<corners
android:radius="90dp"/>
</shape>
Happy Coding!
In case someone needs a floating action button, but doesn't want to depend on the entire material library, here's a minimal implementation that looks exactly the same, has ripple animation, the shadow, and show()/hide() methods with animation.
Widget code:
class CircularImageButton #JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
) : AppCompatImageButton(context, attrs) {
init {
background = null
outlineProvider = pillOutlineProvider
clipToOutline = true
}
fun show() {
if (visibility != VISIBLE) {
visibility = VISIBLE
startAnimation(showAnimation)
}
}
fun hide() {
if (visibility != INVISIBLE) {
visibility = INVISIBLE
startAnimation(hideAnimation)
}
}
override fun setBackgroundColor(color: Int) {
if (backgroundPaint.color != color) {
backgroundPaint.color = color
invalidate()
}
}
private val backgroundPaint = Paint().apply { style = Paint.Style.FILL }
override fun onDraw(canvas: Canvas?) {
canvas?.drawPaint(backgroundPaint)
super.onDraw(canvas)
}
}
val pillOutlineProvider = object : ViewOutlineProvider() {
override fun getOutline(view: View, outline: Outline) {
outline.setRoundRect(0, 0, view.width, view.height, view.height.f / 2)
}
}
private val animationDuration = applicationContext
.resources.getInteger(android.R.integer.config_shortAnimTime).toLong()
val showAnimation = ScaleAnimation(
0f, 1f, 0f, 1f,
Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f)
.apply { duration = animationDuration }
val hideAnimation = ScaleAnimation(
1f, .5f, 1f, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f)
.apply { duration = animationDuration }
And the xml, where 40dp is the “mini” version of the FAB.
<CircularImageButton
android:id="#+id/fab"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/ic_your_drawable"
android:scaleType="center"
android:layout_margin="12dp"
android:elevation="3dp"
android:outlineAmbientShadowColor="#7000"
android:outlineSpotShadowColor="#7000"
android:foreground="?attr/selectableItemBackgroundBorderless" />
With jetpack compose, you can customize your button without requiring any 3-party lib or boilerplate code.
Button(
onClick = { /* do something when button clicked*/ },
modifier = Modifier
.width(64.dp)
.height(64.dp),
shape = CircleShape
) {
Icon(Icons.Default.Star, "")
}
Related
This question was asked on SO many times, but still I didn't find a good solution for this problem.
Why do I need this to do? Well because project me and my team develops has iOS style.
What did I try?
9.pathch shadow generator but 9.pathes are essentially pngs and it gives me no flexibility and if I'll use this approach I should edit margins everywhere.
Carbon library it supports custom shadows and they get drawn outside of view borders, but there is issue regarding rounded rectangles, when library doesn't draw shadow for rounded corners.
using old CardView implementation and overriding its shadow color, but it gets drawn inside of card bounds, so it isn't option.
So is there a way to change shadow color of CardView with minimum edits of all layout files and with drawing shadow outside of the view like original CardView does?
Consider this thread in twitter, where Nick Butcher talks about how to implement the feature:
See outlineAmbientShadowColor, outlineSpotShadowColor, spotShadowAlpha and ambientShadowAlpha attributes for details. Unfortunately, that's possible from API 28 onwards.
For lower APIs Nick has shared a gist. Here's the result:
Running on API 21
This technique isn't directly connected to CardView, it can be applied to any View.
You Can Implement this without having a cardview, and can also have all the properties of cardview
You have to Do:
Copy the two classes
Wrap your required view with the Custom View as in the example, you don't have to do much changes in your layout or anywhere else!
The below class will create a custom view, this will be wrapping your layout/View to be displayed in cardview with custom shadow color
Create a class:
import android.content.Context;
import android.support.annotation.Nullable;
import android.support.v4.content.ContextCompat;
import android.util.AttributeSet;
import android.view.Gravity;
import android.widget.LinearLayout;
import com.qzion.nfscrew.R;
public class RoundLinerLayoutNormal extends LinearLayout {
public RoundLinerLayoutNormal(Context context) {
super(context);
initBackground();
}
public RoundLinerLayoutNormal(Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
initBackground();
}
public RoundLinerLayoutNormal(Context context, #Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initBackground();
}
private void initBackground() {
setBackground(ViewUtils.generateBackgroundWithShadow(this,R.color.white,
R.dimen.radius_corner,R.color.colorPrimaryDark,R.dimen.elevation, Gravity.BOTTOM));
}
}
Also create the class for the Shadow Settings, ViewUtils.java
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.LayerDrawable;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.RoundRectShape;
import android.support.annotation.ColorRes;
import android.support.annotation.DimenRes;
import android.support.v4.content.ContextCompat;
import android.view.Gravity;
import android.view.View;
import static android.support.v4.view.ViewCompat.LAYER_TYPE_SOFTWARE;
public class ViewUtils {
public static Drawable generateBackgroundWithShadow(View view, #ColorRes int backgroundColor,
#DimenRes int cornerRadius,
#ColorRes int shadowColor,
#DimenRes int elevation,
int shadowGravity) {
float cornerRadiusValue = view.getContext().getResources().getDimension(cornerRadius);
int elevationValue = (int) view.getContext().getResources().getDimension(elevation);
int shadowColorValue = ContextCompat.getColor(view.getContext(),shadowColor);
int backgroundColorValue = ContextCompat.getColor(view.getContext(),backgroundColor);
float[] outerRadius = {cornerRadiusValue, cornerRadiusValue, cornerRadiusValue,
cornerRadiusValue, cornerRadiusValue, cornerRadiusValue, cornerRadiusValue,
cornerRadiusValue};
Paint backgroundPaint = new Paint();
backgroundPaint.setStyle(Paint.Style.FILL);
backgroundPaint.setShadowLayer(cornerRadiusValue, 0, 0, 0);
Rect shapeDrawablePadding = new Rect();
shapeDrawablePadding.left = elevationValue;
shapeDrawablePadding.right = elevationValue;
int DY;
switch (shadowGravity) {
case Gravity.CENTER:
shapeDrawablePadding.top = elevationValue;
shapeDrawablePadding.bottom = elevationValue;
DY = 0;
break;
case Gravity.TOP:
shapeDrawablePadding.top = elevationValue*2;
shapeDrawablePadding.bottom = elevationValue;
DY = -1*elevationValue/3;
break;
default:
case Gravity.BOTTOM:
shapeDrawablePadding.top = elevationValue;
shapeDrawablePadding.bottom = elevationValue*2;
DY = elevationValue/3;
break;
}
ShapeDrawable shapeDrawable = new ShapeDrawable();
shapeDrawable.setPadding(shapeDrawablePadding);
shapeDrawable.getPaint().setColor(backgroundColorValue);
shapeDrawable.getPaint().setShadowLayer(cornerRadiusValue/3, 0, DY, shadowColorValue);
view.setLayerType(LAYER_TYPE_SOFTWARE, shapeDrawable.getPaint());
shapeDrawable.setShape(new RoundRectShape(outerRadius, null, null));
LayerDrawable drawable = new LayerDrawable(new Drawable[]{shapeDrawable});
drawable.setLayerInset(0, elevationValue, elevationValue*2, elevationValue, elevationValue*2);
return drawable;
}
}
and finally your XML, where you have the views required to have shadow.
<com.qzion.nfscrew.utils.RoundLinerLayoutNormal
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This view will have shadow"/>
</com.qzion.nfscrew.utils.RoundLinerLayoutNormal>
Well I think of an easy solution without using a Java or Some Libraries. You should make a Drawable shape and put it in the drawable folder and then adjust the gradient to be like a shadow.
For example, in my solution I have added two colors:
<color name="yellow_middle">#ffee58</color>
<color name="yellow_end">#7ae7de83</color>
Then I made a file and put it in drawable folder drawable\card_view_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size
android:width="10dp"
android:height="10dp" />
<corners android:radius="6dp" />
<stroke
android:width="2dp"
android:color="#color/yellow_end" />
<gradient
android:angle="-90"
android:centerColor="#color/yellow_middle"
android:endColor="#color/yellow_end"
android:startColor="#fff" />
</shape>
Then from there you need to wrap a your view(that would have been inside CardView) in a container like LinearLayout then apply as the background to the container that you want to be seen like a cardview. To solve it well add some padding (Thats your shadow) to the Container itself. For instance check mine:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.xenolion.ritetrends.MainActivity">
<LinearLayout
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_gravity="center"
android:background="#drawable/card_view_shape"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingLeft="3dp"
android:paddingRight="3dp"
android:paddingTop="3dp">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:gravity="center"
android:text="I love StackOverflow"
android:textColor="#000"
android:textSize="18sp" />
</LinearLayout>
</FrameLayout>
Then the results looks like this:
Adjusting the bottom padding it will look like this:
COMMENT
Since I am not of an artist but if you play with it you may make the whole thing look exactly like CardView check some hints:
Putting multiple gradients in the shape
Adjust the end colors of gradients to appear more greyish
The end colours must also be a little transparent
Adjust your View's padding to appear like a shadow and coloured but greyish
The main View's background also matters to bring the reality
From there redesign the shape to look even more realistic like a CardView.
display shadow >= 28 or >= P for above Sdk level 28
use below code in your CardView
with xml
android:outlineAmbientShadowColor="<yourCoolor>"
android:outlineSpotShadowColor="<yourCoolor>"
with java and kt file
mCardView.setOutlineAmbientShadowColor(ContextCompat.getColor(getContext(), R.color.color_new_yellow));
mCardView.setOutlineSpotShadowColor(ContextCompat.getColor(getContext(), R.color.color_new_yellow));
display like this
Use Fake Shadow.
Well, it is not possible to change the color of the shadow of cardview before API 28 but we can add a custom shadow behind a layout. You need to use a drawable background (shadow.xml) in the parent layout which is looking like a shadow.
shadow.xml -
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<padding
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp" />
<solid android:color="#05FF46A9" />
<corners android:radius="15dp" />
</shape>
</item>
<item>
<shape>
<padding
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp" />
<solid android:color="#10FF46A9" />
<corners android:radius="15dp" />
</shape>
</item>
<item>
<shape>
<padding
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp" />
<solid android:color="#15FF46A9" />
<corners android:radius="15dp" />
</shape>
</item>
<item>
<shape>
<padding
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp" />
<solid android:color="#20FF46A9" />
<corners android:radius="15dp" />
</shape>
</item>
<item>
<shape>
<padding
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp" />
<solid android:color="#25FF46A9" />
<corners android:radius="15dp" />
</shape>
</item>
</layer-list>
Now use the following code -
<FrameLayout
android:layout_width="match_parent"
android:background="#drawable/shadow"
android:layout_height="200dp">
<CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardCornerRadius="15dp"
app:cardElevation="0dp">
<!-- your code here -->
</CardView>
</FrameLayout>
You can replace FF46A9 in shadow.xml to change the color of shadow.
Also android:backgroundTint="#color/colorShadow" works but you have to adjust colors alpha in shadow.xml.
Adjust the <corners android:radius="15dp"/> as app:cardCornerRadius="15dp".
This trick is difficult to achieve in most cases , due Official Android Framework do not have any way to change the cardview shadow color.
In this case you refers to ilumination light on the cardview . This library is optimized for this this trick.
Library Link:https://github.com/meetsl/SCardView-master
I hope can help you!
Good Luck
enter image description hereI know I'm late but I want to share the solution as I searched hard for this issue and solved the issue The solution is, You have to use "ComplexView" to create your custom shadow,
dependency: implementation 'com.github.BluRe-CN:ComplexView:v1.1'
XML:
<com.blure.complexview.ComplexView
android:id="#+id/shadow_card_1"
android:layout_width="#dimen/_65sdp"
android:layout_height="#dimen/_65sdp"
android:layout_centerInParent="true"
app:radius="#dimen/_30sdp"
app:shadow="true"
app:shadowAlpha="250"
app:shadowSpread="2"/>
//this will create the circular shadow for my need you can reduce the radius
Custom View
val shadow = ComplexView(context)
val radii = floatArrayOf(100f, 100f, 100f, 100f, 100f, 100f, 100f, 100f)//customise according to your requirement
val opacity = 150//customise according to your requirement
shadow.shadow =Shadow(
2,
opacity,
"#96B9BB",
GradientDrawable.RECTANGLE,
radii,
Shadow.Position.CENTER
)
val param: RelativeLayout.LayoutParams =
RelativeLayout.LayoutParams(
context.resources.getDimension(R.dimen._160sdp).toInt(),
context.resources.getDimension(R.dimen._160sdp).toInt()
)
shadow.layoutParams = param
shadow.addView(yourCustomView)
here is the result:
also
thanks :)
Already late for the answer.
Some trick can work perfectly for me
And XML file like
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<androidx.cardview.widget.CardView
android:id="#+id/cardview"
android:layout_width="#dimen/_150sdp"
android:layout_height="#dimen/_150sdp"
android:layout_marginLeft="#dimen/_10sdp"
android:layout_marginRight="#dimen/_10sdp"
app:cardBackgroundColor="#color/white"
app:cardCornerRadius="#dimen/_5sdp"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/_50sdp"
android:orientation="vertical">
</LinearLayout>
<View
android:id="#+id/view_color"
android:layout_width="match_parent"
android:layout_height="#dimen/_2sdp"
android:layout_gravity="bottom"
android:background="#color/app_green" />
</androidx.cardview.widget.CardView>
</LinearLayout>
Enjoy coding
Simple way to change card 's shadow color is to set android:outlineSpotShadowColor="#color/#CCCCCC" inside your CardView
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardElevation="15dp"
android:outlineAmbientShadowColor="#color/#CCCCCC"
android:outlineSpotShadowColor="#color/#CCCCCC" />
Here is what I want to make.
The default button should be like this:
Button default
Once a user taps or clicks this button, it should be like this: Button selected
What I have done so far is put a line on the bottom of the button. However, I can't put that small empty white circle on the left-bottom of the button. I think it's possible to make the circle as an image and put it fixed with the same height and width. But I have no idea how to put it on the button.
I also wonder how to code the effect if a user selects the button. Once it's selected, the line which is on the bottom of the button should be thicker and the circle should be changed to be colored white.
The current button is simply static, with no effect if the user taps or clicks it: Image
Here is the code.
game_border.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:bottom="1dp"
android:left="-2dp"
android:right="-2dp"
android:top="-2dp">
<shape android:shape="rectangle" >
<stroke
android:width="1dp"
android:color="#color/white" />
<solid android:color="#00FFFFFF" />
<padding android:left="10dp"
android:right="10dp"
android:top="10dp"
android:bottom="10dp" />
</shape>
</item>
</layer-list>
This is the button xml.
<Button
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="25dp"
android:layout_marginRight="25dp"
android:text="answer1"
android:textColor="#fff"
android:padding="8dp"
android:background="#drawable/game_border"
android:id="#+id/answer1"/>
I hope to help you.
To solve this case, you must create a custom view and in this view, design your button with the elements you want to include.
You need to create two circular shape Drawable Resource:
Circle without background:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke
android:width="1dp"
android:color="#color/colorAccent"/>
</shape>
Circle with background:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#color/colorAccent" />
</shape>
Create a Custom Button Layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ddd"
android:clickable="true"
android:orientation="vertical">
<TextView
android:id="#+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="#string/button_text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/iv_circle"
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:contentDescription="#null"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_title"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/shape_circle_empty" />
<LinearLayout
android:id="#+id/ll_line"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginEnd="8dp"
android:background="#color/colorAccent"
android:contentDescription="#null"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="#+id/iv_circle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/iv_circle"
app:layout_constraintTop_toTopOf="#+id/iv_circle" />
</androidx.constraintlayout.widget.ConstraintLayout>
In your_activity.xml layout, add an Include to show the Custom View of the Button
<include
android:id="#+id/btn_custom"
layout="#layout/button_custom"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
In your activity class, add the capture of the event you want to listen. In my case I used the OnTouchListener event.
YourActivity:
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val btn = this.findViewById<View>(R.id.btn_custom)
val circle = btn.findViewById<ImageView>(R.id.iv_circle)
val line = btn.findViewById<LinearLayout>(R.id.ll_line)
btn.setOnTouchListener(object : View.OnTouchListener {
override fun onTouch(v: View?, event: MotionEvent?): Boolean {
when (event?.action) {
MotionEvent.ACTION_DOWN -> {
circle.setBackgroundResource(R.drawable.shape_circle_solid)
lineSize(line, true)
}
MotionEvent.ACTION_UP -> {
circle.setBackgroundResource(R.drawable.shape_circle_empty)
lineSize(line, false)
}
}
return v?.onTouchEvent(event) ?: true
}
})
}
Function to change line size:
fun lineSize(view: View, isSelect: Boolean) {
val size: Float
if (isSelect)
size = 2F
else
size = 1F
// conver to DPI
val height = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
size,
getResources().getDisplayMetrics());
view.getLayoutParams().height = height.toInt()
view.requestLayout()
}
Result:
Normal view
When touches the view
I have created a listview and added a border to it's items.
something like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:orientation="horizontal"
android:background="#drawable/listviewborderbox"
android:padding="10dp" >
<LinearLayout
android:id="#+id/sharedbyyouNameLayout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".70"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:id="#+id/sharedbyyoutext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left"
android:text="#string/sampletext1"
android:textColor="#color/blackText"
android:textSize="14sp" />
<TextView
android:id="#+id/sharedbyyouselected"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left"
android:text="#string/sampletext2"
android:textColor="#color/blackText"
android:textSize="16sp"
tools:ignore="RtlHardcoded" />
</LinearLayout>
<LinearLayout
android:id="#+id/sharedbyyouLayoutforarrow"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".10"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_next"
tools:ignore="RtlSymmetry,RtlHardcoded,ContentDescription" />
</LinearLayout>
</LinearLayout>
And I have ripple effect value in Drawable-v21 like this:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#android:color/white"> <item android:drawable="#color/footercolor"/> </ripple>
Border shape xml in drawable folder is this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#color/colorforbodybox" />
<corners android:radius="10dip"/>
<stroke android:width="2dip" android:color="#color/colorforborder" />
</shape>
Ripple effect works but ripple effect is shown outside the border line that I have drawn. Please check pic below:
How do I make the ripple effect not to cross the border in the list view?
To achieve rounded corner ripple effect change your ripple xml file to:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#android:color/white"
tools:targetApi="lollipop">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<corners android:radius="10dp"/>
<solid android:color="#color/footercolor"/>
</shape>
</item>
</ripple>
The problem I had was that the corner radius of my views was not a fixed value therefore using the xml suggested didn't work for me.
I needed a something that would adapt the ripple effect every time regardless of the shape used so...
I used a simple view extension:
fun View.addRippleEffect(rippleColorId: Int = R.color.rippleColor) { // Here you can pass the color you want for the ripple effect and assign a "default" value
val rippleColor = ColorStateList.valueOf(ContextCompat.getColor(App.context(), rippleColorId))
this.background = RippleDrawable(
rippleColor, // This is the color of the effect and needs to be a ColorStateList
this.background, // ( = content ) With this you use your view's background as the content of the ripple effect
this.background) // ( = mask ) With this the ripple will take the shape of the background and not "spill over". (Could be null IF you did set the previous variable "content = this.background")
}
OR, if you want to separate the two layers:
fun View.addRippleEffect(rippleColorId: Int = R.color.rippleColor) {
val rippleColor = ColorStateList.valueOf(ContextCompat.getColor(App.context(), rippleColorId))
this.foreground = RippleDrawable( //Using the foreground allows you to give the view whatever background you need
rippleColor,
null, //Whatever shape you put here will cover everything you've got underneath so you probably want to keep it "null"
this.background)
}
Basically you give a view a background (rounded rectangle with borders in your case) then you can simply call the extension in your Activity/Fragment:
whateverView.addRippleEffect()
//or
whateverView.addRippleEffect(R.color.red)
See: https://developer.android.com/reference/android/graphics/drawable/RippleDrawable
1. Create the Ripple Drawable Contains the Backgound Shape
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?colorControlHighlight"> //defaul ripple color
<item>
<shape //the background shape when it's not being click
android:shape="rectangle">
<solid
android:color="#color/colorPrimary" />
<corners
android:radius="32dp" />
</shape>
</item>
</ripple>
2. Applying the Drawable to the View and REMOVE THE SHADOW
<Button
style="?borderlessButtonStyle" //remove the default shadow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/background_button" //here
android:text="Sign up"
android:textAllCaps="false"
android:textColor="#android:color/white" />
Try setting clipToOutline of your View / ViewGroup to true, either in the code or through XML, it should limit the ripple's area accordingly (as long as you background shape matches the requirements, see the docs for more details).
In the Material Design guidelines Google presented a new style of button, the FAB Button. I found instructions how to make it but I have trouble adding the shadow. How can this be achieved?
Check out the "activity.java", there is probably the code you need.
I made the Fab - Button like this:
layout.xml
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="56dp"
android:layout_height="56dp"
android:text="+"
android:textSize="40sp"
android:background="#drawable/ripple"
android:id="#+id/fabbutton"
android:layout_margin="#dimen/activity_horizontal_margin"
android:elevation="3dp"
android:paddingBottom="16dp"
android:fontFamily="sans-serif-light"
android:layout_alignParentEnd="true"
android:layout_gravity="right|bottom" />
ripple.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple android:color="#ffb300" xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/fab"></item>
</ripple>
fab.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#color/accentColor" />
</shape>
Activity.java
import android.graphics.Outline;
...
Button fab = (Button) rootView.findViewById(R.id.fabbutton);
Outline mOutlineCircle;
int shapeSize = getResources().getDimensionPixelSize(R.dimen.shape_size);
mOutlineCircle = new Outline();
mOutlineCircle.setRoundRect(0, 0, shapeSize, shapeSize, shapeSize / 2);
fab.setOutline(mOutlineCircle);
fab.setClipToOutline(true);
This code will be shown as error in android studio v0.8.1, so as other android l components. It will be fixed in the next version.
Result:
You can use a Button:
<ImageButton
android:id="#+id/fab"
android:background="#drawable/ripple"
android:stateListAnimator="#anim/anim"
android:src="#drawable/ic_action_add"
android:elevation="4dp"
/>
where the ic_action_add is your icon.
drawable/ripple.xml is:
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="?android:colorControlHighlight">
<item>
<shape android:shape="oval">
<solid android:color="?android:colorAccent" />
</shape>
</item>
</ripple>
anim/anim.xml is:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_enabled="true"
android:state_pressed="true">
<objectAnimator
android:duration="#android:integer/config_shortAnimTime"
android:propertyName="translationZ"
android:valueFrom="#dimen/button_elevation"
android:valueTo="#dimen/button_press_elevation"
android:valueType="floatType" />
</item>
<item>
<objectAnimator
android:duration="#android:integer/config_shortAnimTime"
android:propertyName="translationZ"
android:valueFrom="#dimen/button_press_elevation"
android:valueTo="#dimen/button_elevation"
android:valueType="floatType" />
</item>
</selector>
Dimens.xml is
<resources>
<dimen name="fab_size">56dp</dimen>
<dimen name="button_elevation">2dp</dimen>
<dimen name="button_press_elevation">4dp</dimen>
</resources>
With the elevation attribute you should set the Outline via code:
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layoutfab);
//Outline
Button fab = (Button) findViewById(R.id.fab)
ViewOutlineProvider viewOutlineProvider = new ViewOutlineProvider() {
#Override
public void getOutline(View view, Outline outline) {
// Or read size directly from the view's width/height
int size = getResources().getDimensionPixelSize(R.dimen.fab_size);
outline.setOval(0, 0, size, size);
}
};
fab.setOutlineProvider(viewOutlineProvider);
}
}
The problem with the circular shadow can be easily solved without any tricks with Outline: just add these properties to the button in the XML layout (in addition to the custom background):
android:elevation="5dp"
android:stateListAnimator="#null"
Although Android Studio may display it wrong in the layout preview, it works fine when launched on a device.
I want to create custom button and I need it to be circle. How can I create a circle button?
I do not think that be possible with draw9patch.
Also I do not know how to make custom button!
Do you have any suggestion?
Use xml drawable like this:
Save the following contents as round_button.xml in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<shape android:shape="oval">
<solid android:color="#fa09ad"/>
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="oval">
<solid android:color="#c20586"/>
</shape>
</item>
</selector>
Android Material Effect: Although FloatingActionButton is a better option, If you want to do it using xml selector, create a folder drawable-v21 in res and save another round_button.xml there with following xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#c20586">
<item>
<shape android:shape="oval">
<solid android:color="#fa09ad"/>
</shape>
</item>
</ripple>
And set it as background of Button in xml like this:
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:text="hello"
android:textColor="#fff" />
Important:
If you want it to show all these states (enabled, disabled, highlighted etc), you will use selector as described here.
You've to keep both files in order to make the drawable backward-compatible. Otherwise, you'll face weird exceptions in previous android version.
Markushi wrote a circle button widget with amazing effects. Click here!
With the official Material Components library you can use the MaterialButton applying a Widget.MaterialComponents.Button.Icon style.
Something like:
<com.google.android.material.button.MaterialButton
android:layout_width="48dp"
android:layout_height="48dp"
style="#style/Widget.MaterialComponents.Button.Icon"
app:icon="#drawable/ic_add"
app:iconSize="24dp"
app:iconPadding="0dp"
android:insetLeft="0dp"
android:insetTop="0dp"
android:insetRight="0dp"
android:insetBottom="0dp"
app:shapeAppearanceOverlay="#style/ShapeAppearanceOverlay.MyApp.Button.Rounded"
/>
Currently the app:iconPadding="0dp",android:insetLeft,android:insetTop,android:insetRight,android:insetBottom attributes are needed to center the icon on the button avoiding extra padding space.
Use the app:shapeAppearanceOverlay attribute to get rounded corners. In this case you will have a circle.
<style name="ShapeAppearanceOverlay.MyApp.Button.Rounded" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">50%</item>
</style>
The final result:
With jetpack compose you can use:
Button(
onClick = { /* Do something! */ },
modifier = Modifier.width(48.dp).height(48.dp),
shape = CircleShape
) {
Icon(Icons.Filled.Add, "")
}
AngryTool for custom android button
You can make any kind of custom android button with this tool site...
i make circle and square button with round corner with this toolsite..
Visit it may be i will help you
For a FAB looking button this style on a MaterialButton:
<com.google.android.material.button.MaterialButton
style="#style/Widget.MaterialComponents.ExtendedFloatingActionButton"
app:cornerRadius="28dp"
android:layout_width="56dp"
android:layout_height="56dp"
android:text="1" />
Result:
If you change the size be careful to use half of the button size as app:cornerRadius.
You can use MaterialButton from AndroidX material library
<com.google.android.material.button.MaterialButton
android:layout_width="75dp"
android:layout_height="75dp"
android:layout_margin="10dp"
android:insetLeft="0dp"
android:insetTop="0dp"
android:insetRight="0dp"
android:insetBottom="0dp"
app:cornerRadius="50dp"
app:icon="#drawable/ic_camera"
app:iconGravity="textStart"
app:iconPadding="0dp"
app:iconSize="35dp" />
and it will be like this
if you want use VectorDrawable and ConstraintLayout
<FrameLayout
android:id="#+id/ok_button"
android:layout_width="100dp"
android:layout_height="100dp"
android:foreground="?attr/selectableItemBackgroundBorderless"
android:background="#drawable/circle_button">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/icon_of_button"
android:layout_width="32dp"
android:layout_height="32dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:srcCompat="#drawable/ic_thumbs_up"/>
<TextView
android:id="#+id/text_of_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/icon_of_button"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginTop="5dp"
android:textColor="#android:color/white"
android:text="ok"
/>
</android.support.constraint.ConstraintLayout>
</FrameLayout>
circle background: circle_button.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="1000dp" />
<solid android:color="#41ba7a" />
<stroke
android:width="2dip"
android:color="#03ae3c" />
<padding
android:bottom="4dp"
android:left="4dp"
android:right="4dp"
android:top="4dp" />
</shape>
Unfortunately using an XML drawable and overriding the background means you have to explicitly set the colour instead of being able to use the app style colours.
Rather than hardcode the button colours for every behaviour I opted to hardcode the corner radius, which feels marginally less hacky and retains all the default button behaviour (changing colour when it's pressed and other visual effects) and uses the app style colours by default:
Set android:layout_height and android:layout_width to the same value
Set app:cornerRadius to half of the height/width
(It actually appears that anything greater than or equal to half of the height/width works, so to avoid having to change the radius every time you update the height/width, you could instead set it to a very high value such as 1000dp, the risk being it could break if this behaviour ever changes.)
Set android:insetBottom and android:insetTop to 0dp to get a perfect circle
For example:
<Button
android:insetBottom="0dp"
android:insetTop="0dp"
android:layout_height="150dp"
android:layout_width="150dp"
app:cornerRadius="75dp"
/>
here is how you can perform simply, make a drawable resource file in drawable.xml. Say round_button.xml and then paste the following code.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="oval">
<solid
android:color="#color/button_start_gradient_color"/>
</shape>
</item>
<item
android:drawable="#drawable/microphone"/>
</layer-list>
Note:- use your own color and drawable resource as i have used #drawable/microphone
Following is the result
[1]: https://i.stack.imgur.com/QyhdJ.png
If you want to do with ImageButton, use the following. It will create round ImageButton with material ripples.
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_settings_6"
android:background="?selectableItemBackgroundBorderless"
android:padding="10dp"
/>
Create a new vector asset in the drawable folder.
You can import your PNG image as well, and convert the file to SVG online at https://image.online-convert.com/convert-to-svg. The higher the resolution, the better the conversion will be.
Next, create a new vector asset from that SVG file.
This is a sample vector circle image you can use. Copy the code to an xml file in the drawables folder.
ic_check.xml:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportHeight="256"
android:viewportWidth="256">
<path
android:fillColor="#2962FF"
android:pathData="M111,1.7c-7.2,1.1 -22.2,4.8 -27.9,7 -33.2,12.5 -61.3,40.3 -74.1,73.3 -8.7,22.6 -10.5,55.3 -4.4,78 10.9,40 39.7,72.4 77.4,87 22.6,8.7 55.3,10.5 78,4.4 45.3,-12.3 79.1,-46.1 91.4,-91.4 2.9,-10.7 3.9,-21.9 3.3,-37.4 -0.7,-21.2 -4.6,-35.9 -14,-54.1 -18.2,-35 -54,-60.5 -93.4,-66.4 -6.7,-1 -30.7,-1.3 -36.3,-0.4zM145,23.1c21.8,3.3 46.5,16.5 61.1,32.8 20.4,22.6 30.1,51.2 27.7,81.1 -3.5,44.4 -35.9,82.7 -79.6,94 -21.6,5.6 -46.6,3.7 -67.8,-5.1 -10.4,-4.3 -24.7,-14.1 -33.4,-22.9 -41.6,-41.5 -41.6,-108.4 0,-150 24.3,-24.3 57.6,-35.1 92,-29.9z"
android:strokeColor="#00000000" />
<path
android:fillColor="#2962FF"
android:pathData="M148.4,113c-24.6,26 -43.3,44.9 -44,44.6 -0.7,-0.3 -8.5,-6.1 -17.3,-13 -8.9,-6.9 -16.5,-12.6 -17,-12.6 -1.4,-0 -25.6,19 -25.8,20.3 -0.3,1.4 62.7,50.2 64.8,50.2 1.7,-0 108.4,-112.3 108.4,-114.1 0,-1.3 -23.8,-20.4 -25.4,-20.4 -0.6,-0 -20.2,20.3 -43.7,45z"
android:strokeColor="#00000000" />
</vector>
Use this image in your button:
<ImageButton
android:id="#+id/btn_level1"
android:layout_width="36dp"
android:layout_height="36dp"
android:background="#drawable/ic_check"
/>
Your button will be a circle button.