I want to remove the inner circle from the checked radio button in Android Studio.I've read that android:button="#null" would solve it but it removed my whole button. This is my code:
RadioButton
<RadioButton
android:id="#+id/xroma11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/radio_bg1"
android:tag = "00" />
radio_bg1.xml
<item android:state_pressed="true" >
<shape android:shape="oval" >
<corners android:radius="3dp" />
<stroke android:width="3dip" android:color="#333333" />
<solid android:color="#color/xrwma2"/>
</shape>
</item>
<item android:state_checked="true">
<shape android:shape="oval" >
<corners android:radius="3dp" />
<stroke android:width="3dip" android:color="#333333" />
<solid android:color="#color/xrwma2"/>
</shape>
</item>
<item>
<shape android:shape="oval" >
<corners android:radius="3dp" />
<solid android:color="#color/xrwma2"/>
</shape>
</item>
In checked state make color of solid as transparent like this
.....
<item android:state_checked="true">
<shape android:shape="oval" >
<corners android:radius="3dp" />
<stroke android:width="3dip" android:color="#333333" />
<solid android:color="#android:color/transparent"/>
</shape>
</item>
.....
You can also try android:button="?android:selectableItemBackground"
Related
I tried to customized a toggle switch and after hours on playing with material, I just gave up and re-used the SwitchCompat
<androidx.appcompat.widget.SwitchCompat
android:id="#+id/settingsSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/cell_padding"
android:checked="#{item.enabled}"
tools:checked="true"
android:thumb="#drawable/ios_thumb"
app:trackTintMode="multiply"
app:trackTint="#null"
app:track="#drawable/ios_track"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
and the ios_thumb look like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
<solid android:color="#FFFFFF"/>
<corners android:radius="15dp" />
<size android:width="30dp" android:height="30dp" />
<stroke android:width="4dp" android:color="#0000ffff" />
</shape>
</item>
<item android:state_checked="false">
<shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
<solid android:color="#FFFFFF"/>
<corners android:radius="15dp" />
<size android:width="30dp" android:height="30dp" />
<stroke android:width="4dp" android:color="#0000ffff" />
</shape>
</item>
</selector>
and ios_track as below:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
<solid android:color="#color/green300"/>
<corners android:radius="25dp" />
<size android:width="60dp" android:height="30dp" />
</shape>
</item>
<item android:state_checked="false">
<shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
<solid android:color="#color/lightness200"/>
<corners android:radius="25dp" />
<size android:width="60dp" android:height="30dp" />
</shape>
</item>
</selector>
the mechanism works and I almost there for the customization... Only thing is that :
When the switch is to false for check or true, it's not exactly reflecting the color.
As an example:
The white is grey-ish. I think the false is also bad but as my background for false state is a transparent white it's not affecting the visual. It's look like the track is displayed over the thumb instead of the opposite. Any idea?
I have this code for the style of my list item.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<size
android:width="40dp"
android:height="40dp" />
<solid android:color="#444444" />
<corners
android:bottomRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp"/>
</shape>
</item>
<item android:top="30dp">
<shape android:shape="rectangle">
<size
android:width="30dp"
android:height="30dp" />
<solid android:color="#2f2f2f" />
<corners
android:bottomRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:topLeftRadius="00dp"
android:topRightRadius="0dp"/>
</shape>
</item>
</layer-list>
How can I dye the right bottom corner black ?
When I add a new layer-list-item it only appears at the bottom of the last.
Here is an example what I want to do:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/colorPrimary" />
<item
android:bottom="-200dp"
android:right="-200dp"
android:top="250dp">
<rotate
android:fromDegrees="-6"
android:pivotX="0%"
android:pivotY="100%">
<shape android:shape="rectangle">
<solid android:color="#edf0f9" />
</shape>
</rotate>
</item>
</layer-list>
Try this one and chnage from degree ,pivot x and y
and one thing add this as child view and put both view inside framelayout
This is how I go about adding a border to a EditText. How can I go about adding a border only on 3 sides of a EditText, and define a different color and width to each of the borders?
EditText editText = new EditText(this);
editText.setText("Find");
editText.setWidth(555);
GradientDrawable border = new GradientDrawable();
border.setColor(0xFFFFFFFF); // white background
border.setStroke(1, 0xFF000000); // black border with full
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
editText.setBackgroundDrawable(border);
} else {
editText.setBackground(border);
}
My attempt below doesn't work:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#FF0000" />
</shape>
</item>
<item android:right="5dp">
<shape android:shape="rectangle">
<solid android:color="#FFFF" />
</shape>
</item>
<item android:left="22dp">
<shape android:shape="rectangle">
<solid android:color="#746565" />
</shape>
</item>
</layer-list>
Vielen dank im voraus.
Create a layer-list drawable and define 3 different rectangle shape with custom width and color, and hide 3 side of each shape to show only one side. like this:
my_edittext_border.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list android:paddingLeft="30dp" xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="-1dp"
android:left="-1dp"
android:right="-1dp">
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#ff0000" />
</shape>
</item>
<item
android:bottom="-3dp"
android:right="-3dp"
android:top="-3dp">
<shape android:shape="rectangle">
<stroke
android:width="3dp"
android:color="#11ee66" />
</shape>
</item>
<item
android:bottom="-5dp"
android:left="-5dp"
android:top="-5dp">
<shape android:shape="rectangle">
<stroke
android:width="5dp"
android:color="#0000ff" />
</shape>
</item>
</layer-list>
Now set this drawable to your EditText background:
android:background="#drawable/my_edittext_border"
Set this drawable as background and modify it as per your choice:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--Top border-->
<item
android:bottom="-2dp"
android:left="-2dp"
android:right="-2dp"
android:top="0dp">
<shape android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#color/black" />
</shape>
</item>
<!--Bottom border-->
<item
android:bottom="0dp"
android:left="-2dp"
android:right="-2dp"
android:top="-2dp">
<shape android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#color/orange" />
</shape>
</item>
<!--Right border-->
<item
android:bottom="-2dp"
android:left="-2dp"
android:right="0dp"
android:top="-2dp">
<shape android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#color/remove" />
</shape>
</item>
<!--Left border-->
<item
android:bottom="-2dp"
android:left="0dp"
android:right="-2dp"
android:top="-2dp">
<shape android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#color/green" />
</shape>
</item>
</layer-list>
Above all answer you can also use vector drawable to draw that :
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="200px"
android:width="200px"
android:viewportHeight="150"
android:viewportWidth="200">
<path
android:strokeColor="#android:color/black"
android:strokeWidth="1"
android:pathData="M0,0 L100,0 "/>
<path
android:strokeColor="#android:color/white"
android:strokeWidth="1"
android:pathData="M100,0 L100,100 "/>
<path
android:strokeColor="#android:color/holo_red_light"
android:strokeWidth="1"
android:pathData="M100,100 L0,100 "/>
<path
android:strokeColor="#android:color/holo_green_dark"
android:strokeWidth="1"
android:pathData="M0,100 L0,0 "/>
</vector>
I have tried to implement edittext with shadow like the https://www.google.com.gh/imghp using this layerd xml
<?xml version="1.0" encoding="utf-8"?>
<!-- most important is order of layers -->
<!-- Bottom right side 2dp Shadow -->
<item>
<shape android:shape="rectangle" >
<solid android:color="#d8d8d8" />
<corners
android:bottomLeftRadius="7dp"
android:bottomRightRadius="7dp" />
</shape>
</item>
<!-- White Top color -->
<item android:bottom="3px"
android:left="3px"
android:right="3px">
<shape android:shape="rectangle" >
<solid android:color="#FFFFFF" />
<corners
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp" />
</shape>
</item>
.but have not succeded. can anyone place help
Try this into layer-list drawable file-
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Drop Shadow Stack -->
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="2dp" android:left="1dp" />
<corners android:radius="5dp" />
<solid android:color="#00CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="2dp" android:left="1dp" />
<corners android:radius="5dp" />
<solid android:color="#10CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="2dp" android:left="1dp" />
<corners android:radius="5dp" />
<solid android:color="#20CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="2dp" android:left="1dp" />
<corners android:radius="5dp" />
<solid android:color="#30CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="2dp" android:left="1dp" />
<corners android:radius="5dp" />
<solid android:color="#50CCCCCC" />
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="#ffffff" />
<corners android:radius="0dp" />
</shape>
</item>
</layer-list>
Check this code:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- most important is order of layers -->
<!-- Bottom right side 2dp Shadow -->
<item >
<shape android:shape="rectangle">
<solid android:color="#000000" />
</shape>
</item>
<!-- Bottom 2dp Shadow -->
<item>
<shape android:shape="rectangle">
<solid android:color="#BEBEBE" />
</shape>
</item>
<!-- White Top color -->
<item android:bottom="3px" android:right="3px" android:top="3px" android:left="3px">
<shape android:shape="rectangle">
<solid android:color="#FFFFFF" />
</shape>
</item>
I have tried the following
View view = (View) findViewById (id);
view.setBackgroundColor (Color.WHITE);
The above destroys the property of the ToggleButton. I can no longer make out if it is TextView or ToggleButton. Clicking the button produces onClick but the UI change to show the selected bar is absent.
ToggleButton btn = (ToggleButton) findViewById (id);
btn.setBackgroundColor (Color.WHITE);
This also produces the same error. Using XML styling also causes the same error. I am using Android Studio v1.0.2 and the target is a lollipop emulator. I tried the same thing in 4.4.4 mobile. I see the same behavior.
I don't want to use images. Kindly don't suggest that to me. I have gone through the threads that are available in stackoverflow - nothing works for me.
Can anyone help me?
It will be something like this as an xml file in drawables that you want as the background for the toggle button. You need to add the various colors to a color file in res/values. See: https://developer.android.com/samples/MediaRouter/res/values/colors.html
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:state_pressed="true">
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="2dp">
<shape android:shape="rectangle">
<solid android:color="#color/toggle_button_pressed" />
</shape>
</item>
<item android:top="2dp" android:left="10dp" android:right="10dp">
<shape android:shape="rectangle">
<solid android:color="#color/toggle_button_checked" />
</shape>
</item>
<item android:top="2dp" android:bottom="2dp" android:left="10dp" android:right="10dp">
<shape android:shape="rectangle">
<solid android:color="#color/toggle_button_pressed" />
</shape>
</item>
</layer-list>
</item>
<item android:state_pressed="true">
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="2dp">
<shape android:shape="rectangle">
<solid android:color="#color/toggle_button_pressed" />
</shape>
</item>
<item android:top="2dp" android:left="10dp" android:right="10dp">
<shape android:shape="rectangle">
<solid android:color="#color/toggle_button_unchecked" />
</shape>
</item>
<item android:top="2dp" android:bottom="2dp" android:left="10dp" android:right="10dp">
<shape android:shape="rectangle">
<solid android:color="#color/toggle_button_pressed" />
</shape>
</item>
</layer-list>
</item>
<item android:state_checked="true">
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<solid android:color="#color/toggle_button_shadow" />
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#color/toggle_button_unpressed" />
</shape>
</item>
<item android:bottom="2dp" android:left="10dp" android:right="10dp">
<shape android:shape="rectangle">
<solid android:color="#color/toggle_button_checked" />
</shape>
</item>
<item android:bottom="4dp" android:left="10dp" android:right="10dp">
<shape android:shape="rectangle">
<solid android:color="#color/toggle_button_unpressed" />
</shape>
</item>
</layer-list>
</item>
<item>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<solid android:color="#color/toggle_button_shadow" />
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#color/toggle_button_unpressed" />
</shape>
</item>
<item android:bottom="2dp" android:left="10dp" android:right="10dp">
<shape android:shape="rectangle">
<solid android:color="#color/toggle_button_unchecked" />
</shape>
</item>
<item android:bottom="4dp" android:left="10dp" android:right="10dp">
<shape android:shape="rectangle">
<solid android:color="#color/toggle_button_unpressed" />
</shape>
</item>
</layer-list>
</item>
</selector>
I haven't checked it so I don't know if it works. Please let me know if I made any errors.