I would like to create a group of radio buttons to pick a color. Something like this:
How can I achieve something like this? I didn't find any color property on the original RadioButton. Do I have to create a custom control? If yes, can someone just hint me on the basic steps so I can try to some new research? I'm very new to Android, and trying to learn by doing...
You can surely try custom radio buttons or you could simply use or inflate views to achieve this kind of color picker.
with xml: you will need to create two drawable resource files in the drawable folder. First goes like this,
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#e91e63" />
<size
android:width="48dp"
android:height="48dp" />
This is applicable when you haven't received any click on the view (clickable). The second file applies when we detect a click.
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#e91e63" />
<size
android:width="53dp"
android:height="53dp" />
<stroke
android:width="5dp"
android:color="#d2d1d2" />
Now, in the activity one needs to set the background drawable to the view (be it image button or imageview). This goes like this (just an example):
public class MainActivity extends AppCompatActivity {
private ImageButton img;
private boolean isSelected = false;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
img = (ImageButton) findViewById(R.id.img);
img.setClickable(true);
img.setBackground(getDrawable(R.drawable.unselected_circle));
img.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
img.startAnimation(AnimationUtils.loadAnimation(getBaseContext(), android.R.anim.fade_in));
if (isSelected) {
isSelected = false;
img.setBackground(getDrawable(R.drawable.unselected_circle));
} else {
isSelected = true;
img.setBackground(getDrawable(R.drawable.selected_circle));
}
}
});
}
}
and the activity_main layout looks something like this:
<RelativeLayout 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"
android:id="#+id/viewGroup"
tools:context="com.android.empty.MainActivity">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:layout_margin="20dp"
android:clickable="true"
android:id="#+id/img"/>
However, with this method one will end up creating multiple drawables for different colors. To avoid that, we can create the drawables programmatically, writing code once and using the same for different colors using setColor(int color) method:
public class MainActivity extends AppCompatActivity {
private ImageButton img;
private boolean isSelected = false;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final GradientDrawable unselected = new GradientDrawable();
unselected.setShape(GradientDrawable.OVAL);
unselected.setColor(Color.parseColor("#e91e63"));
unselected.setSize(144, 144);
final GradientDrawable selected = new GradientDrawable();
selected.setShape(GradientDrawable.OVAL);
selected.setColor(Color.parseColor("#E91E63"));
selected.setSize(159, 159);
selected.setStroke(15, Color.parseColor("#D2D1D2"));
img = (ImageButton) findViewById(R.id.img);
img.setBackground(unselected);
img.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
img.startAnimation(AnimationUtils.loadAnimation(getBaseContext(), android.R.anim.fade_in));
if (isSelected) {
isSelected = false;
img.setBackground(unselected);
} else {
isSelected = true;
img.setBackground(selected);
}
}
});
}
}
The result looks something like this
Note: This example tells only the way to achieve one selector like the one mentioned in the question. To create multiple selectors, one needs to inflate the view (Image Button) using LayoutInflater class.
I Was stuck in the same problem to use radio buttons but then I tried my own hand on and created [CustomRadioShapes]1 Lib.
Simple implementation.
implementation:
Download release aar file from CustomRadioAndShapes/library folder
In your Android Studio File-> New -> New Module -> Import .aar or .jar
Select aar file and SubProject Name as CustomRadioAndShapes. Done.
Replace Drawable in RadioButton
I found a way to use the native RadioButton. You have to create your own Drawable and Style and then you're good to go. It took me all afternoon to get it right, so dear poor soul reading this - I hope it helps.
Below is a list of all resources you would need to achieve the following:
Built on Android 13 (API level 33)
Tested to also work on Android 7.0 (API level 24)
drawable/colour_picker.xml
(start with the selector element if you don't care about the ripple effect when picking an option)
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#android:color/white" android:radius="50dp">
<item>
<selector>
<item android:drawable="#drawable/colour_picker_checked" android:state_checked="true" />
<item android:drawable="#drawable/colour_picker_unchecked" android:state_checked="false" />
</selector>
</item>
</ripple>
drawable/colour_picker_checked.xml
(make sure shapes only use tint instead of color here or they will later on be broken)
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval" android:tint="#FFFFFF">
<stroke android:width="5dp" />
<solid android:color="#android:color/transparent" />
<size android:width="50dp" android:height="50dp"/>
</shape>
</item>
<item android:top="10dp" android:bottom="10dp" android:left="10dp" android:right="10dp">
<shape android:shape="oval" android:tint="#FFFFFF">
<solid android:width="1dp" />
</shape>
</item>
</layer-list>
drawable/colour_picker_unchecked.xml
(size needs to match colour_picker_checked.xml exactly or selecting options causes layout shift)
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval" android:tint="#FFFFFF">
<solid android:color="#android:color/transparent" />
<size android:width="50dp" android:height="50dp"/>
</shape>
</item>
<item android:top="10dp" android:bottom="10dp" android:left="10dp" android:right="10dp">
<shape android:shape="oval" android:tint="#FFFFFF">
<solid android:width="1dp" />
</shape>
</item>
</layer-list>
values/styles.xml
(the settings will distribute and align the buttons horizontally)
<style name="colour_picker"
parent="Base.Widget.AppCompat.CompoundButton.RadioButton">
<item name="android:button">#drawable/colour_picker</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsFloating">false</item>
<item name="android:backgroundDimEnabled">true</item>
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">0dp</item>
<item name="android:gravity">center</item>
<item name="android:layout_weight">1</item>
</style>
layout/colour_picker.xml
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="center"
android:orientation="vertical"
android:theme="#style/RippleStyle">
<RadioGroup
android:id="#+id/colour_choice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingBottom="10dp">
<RadioButton name="" style="#style/colour_picker" android:buttonTint="#FFFFFF"/>
<RadioButton style="#style/colour_picker" android:buttonTint="#FF00FF"/>
</RadioGroup>
</LinearLayout>
How to Use It
The only difficulty at this point is identifying which option was chosen. If your list of colours is fixed and you don't mind hardcoding, consider giving each RadioButton an android:id directly in the XML.
In my case, I chose to create the RadioButton objects programmatically, which lets me cross-reference the colour from a string-array resource.
String[] colourPalette = getResources().getStringArray(R.array.colour_options);
RadioGroup colourPicker = findViewById(R.id.YOUR_LAYOUT_WHERE_THIS_SHOULD_END_UP);
LayoutInflater inflater = LayoutInflater.from(this);
for (int i = 0; i < colourPalette.length; i++) {
RadioButton colourOption = (RadioButton) inflater.inflate(R.layout.colour_picker_item,null).getRootView();
colourOption.setId(i);
colourOption.setButtonTintList(ColorStateList.valueOf(Color.parseColor(colourPalette[i])));
colourPicker.addView(colourOption);
}
For this to work you need two additional resources:
layout/colour_picker_item.xml
<?xml version="1.0" encoding="utf-8"?>
<RadioButton style="#style/colour_picker" />
values/colors.xml
<string-array name="colour_options">
<item name="#FFFF00">#FFFF00</item>
<item name="#FF0000">#FF0000</item>
</string-array>
And then in your code it's as easy as this:
colourPicker.setOnCheckedChangeListener((group, checkedId) -> {
RadioButton colourOption = colourPicker.findViewById(checkedId);
int colour = Color.parseColor(colourPalette[colourOption.getId()]);
// do whatever you need to do with your picked colour
});
New material design guidelines introduce elevated buttons which are dropping nice shadow. According to the preview SDK documentation there will be elevation attribute available in new SDK. However, is there any way to achieve similar effect now?
This worked for me.
Layout having button
<Button
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="#dimen/button_size"
android:layout_height="#dimen/button_size"
android:background="#drawable/circular_button_ripple_selector"
android:textAppearance="?android:textAppearanceLarge"
android:textColor="#color/button_text_selector"
android:stateListAnimator="#anim/button_elevation"/>
drawble/button_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true"
android:drawable="#drawable/button_selected"/>
<item android:state_pressed="true"
android:drawable="#drawable/button_pressed"/>
<item android:drawable="#drawable/button"/>
</selector>
anim/button_elevation.xml
<?xml version="1.0" encoding="utf-8"?>
<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="2dip"
android:valueTo="4dip"
android:valueType="floatType" />
</item>
<item>
<objectAnimator
android:duration="#android:integer/config_shortAnimTime"
android:propertyName="translationZ"
android:valueFrom="4dip"
android:valueTo="2dip"
android:valueType="floatType" />
</item>
</selector>
If you have a button in rectangular shape then you are done here. But if you have circular or oval shaped button then it would be looking like,
To remove corners from circular or oval shaped button add this code to your .java file.
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
...........
int buttonSize = (int) getResources().getDimension(R.dimen.button_size);
Outline circularOutline = new Outline();
circularOutline.setOval(0, 0, buttonSize, buttonSize);
for (int i = 0; i < MAX_BUTTONS; i++) {
Button button = ......
.......
button.setOutline(circularOutline);
........
}
.....
}
Angular shape removed!! Now, it would look exactly like
You can use 9-patch images, with shadows. Put the image in drawable--xxhdpi and set it as background on the button or other element.
android:background="#drawable/shadow_bg"
Or you could use CardView as a Button and use its CardView as a Button and its setCardElevation method.
Combined with touch events and ValueAnimator, you could get nice animated shadow below the button.
i am designing for the button using the icon samples, and wish that when icon is not pressed, it is black, and become white when it is pressed. Coding as follows:
in layout xml:
<Button
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_weight="1"
android:background="#drawable/icon_new_btn"
android:scaleType="fitXY"
android:id="#+id/newBtn" />
in icon_new_btn.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:drawableTop="#drawable/icon_new_white"
android:background="#android:color/transparent"/>>
</shape>
</item>
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:drawableTop="#drawable/icon_new"
android:background="#android:color/transparent"/>
</shape>
</item>
</selector>
Question1 (seem to be solved using the below modification):
The whole button becomes invisible on the screen (it can still be pressed at that screen location!). How could I modify the above coding for meeting the purposes defined? Thanks!!
Modification but new Question (Question2):
The following modified layout and selector seem to be solving the above Question 1. Yet the resolution become much poorer and icon distorted and looks bigger. See the below screenshot for the first and second icon using the below modified codes (icon 3 to 6 are simply using android:drawableTop="#drawable/icon_save" without any pressing effect and showing higher resolution):
modified layout
<Button
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_weight="1"
android:background="#drawable/icon_new_btn"
android:scaleType="fitXY"
android:id="#+id/newBtn" />
modified selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/icon_new_white"
android:state_pressed="true" />
<item android:drawable="#drawable/icon_new" />
</selector>
The reason your graphic is being distored is because it being set as the background. To resolve this, you can instead use an ImageButton:
<ImageButton
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_weight="1"
android:src="#drawable/icon_new_btn"
android:background="#null"
android:id="#+id/newBtn" />
Also, you had specified android:scaleType="fitXY". You might instead want android:scaleType="centerInside".
Hi I'm posting the answer for you .
create 4 xml files in res/layout.
state.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Button Focused-->
<item android:state_focused="true"
android:state_pressed="false"
android:drawable="#layout/state1"
/>
<!-- Button Focused Pressed-->
<item android:state_focused="true"
android:state_pressed="true"
android:drawable="#layout/state1"
/>
<!-- Button Pressed-->
<item android:state_focused="false"
android:state_pressed="true"
android:drawable="#layout/state1"
/>
<!-- Button Default Image-->
<item android:drawable="#layout/state2"/>
</selector>
state1.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" shape="rectangle">
<!--this is to give gradient effect -->
<gradient android:angle="270"
android:startColor="#6b6b6b"
android:endColor="#0e0e0e"
/>
<!-- this is make corners of button rounded -->
<corners android:topLeftRadius="5dip"
android:bottomRightRadius="5dip"
android:topRightRadius="5dip"
android:bottomLeftRadius="5dip"/>
</shape>
state2.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" shape="rectangle">
<!--this is to give gradient effect -->
<gradient android:angle="270"
android:startColor="#e7ff47"
android:endColor="#90a501"
/>
<!-- this is make corners of button rounded -->
<corners android:topLeftRadius="5dip"
android:bottomRightRadius="5dip"
android:topRightRadius="5dip"
android:bottomLeftRadius="5dip"/>
</shape>
In activity_main.xml
<RelativeLayout 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" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="183dp"
android:text="Click Here To Change Color"
android:background="#layout/state"/>
</RelativeLayout>
Java file
MainActivity.java
package com.example.getimage;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
public class MainActivity extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
}
thats all enjoy coding:)
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, "")
}
I need to do round cornered button with background color change in android.
How could i do that?
Example link/code is much appreciated.
You want to use Android's Shape Drawables.
http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape
drawable/cool_button_background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="#dimen/corner_radius" />
<gradient
android:angle="270"
android:startColor="#color/almost_white"
android:endColor="#color/somewhat_gray"
android:type="linear" />
</shape>
Then you'd have to create a "selector" drawable from those shape drawables. This allows you to make the button appear different depending on the state. IE: Pressed, focused, etc.
http://developer.android.com/guide/topics/resources/drawable-resource.html#StateList
drawable/cool_button.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#drawable/cool_inner_press_bottom" />
<item android:state_focused="true" android:state_enabled="true"
android:state_window_focused="true"
android:drawable="#drawable/cool_inner_focus_bottom" />
<item
android:drawable="#drawable/cool_button_background" />
</selector>
Bonus: You might want to create a style for the button so you can have them be consistent throughout the program. You can cut this step out and just set the button's android:background="#drawable/cool_button".
values/styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyCoolButton">
<item name="android:background">#drawable/cool_button_background</item>
</style>
</resources>
Finally, the button!
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/appwidget_bg">
<Button
android:id="#+id/btnAction"
android:layout_width="wrap_content"
android:layout_weight="wrap_content"
style="#style/CoolButton"
/>
</LinearLayout>
Import PorterDuff and use setColorFilter() as follows
import android.graphics.PorterDuff.Mode;
Button btn = (Button) findViewById(R.id.myButton);
btn.getBackground().setColorFilter(Color.GRAY, Mode.MULTIPLY);