I'm developing Android app for 4.0 version, and all checkboxes have got a black background for tick, but I need white. If I use "background" xml attribute as "white" then all checkbox (with text) is white; I need only white place for tick.
The most simple way - emulate CheckBox using ImageView with 3 background states (stateSelected=true, stateSelected=false, statePressed = true). Just create appropriate xml file with 3 backgrounds and set it to ImageView background. Then in code, when click on ImageView just switch ImageView.setSelected = !ImageView.isSelected. Hope its help
I dont know if i am extremely late or what, but here is the solution
Code snippet:
say this selector is name "checkbox_selector"
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"
android:drawable="#drawable/cbchk_blue"
android:state_focused="false">
</item>
<item android:state_checked="true"
android:drawable="#drawable/cbchk_blue"
android:state_focused="true">
</item>
<item android:state_checked="false"
android:drawable="#drawable/cbunchk_blue"
android:state_focused="false">
</item>
<item android:state_checked="false"
android:drawable="#drawable/cbunchk_blue"
android:state_focused="true">
</item>
in order to set it just for the checkbox and not the entire text also, you could have it as:
<CheckBox
android:layout_width="45dip"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:button="#drawable/checkbox_selector"
android:text="#string/text_here" />
Maybe my solution is not very elegant, but it works for me:
I simplily create another layout with the dimensions of the checkbox rectangle (15x15) and with white background. Then I add this layout to a RelativeLayout, where I also put the checkbox. With a margin of 9dp, I put the white layout-rectangle below the checkbox, so it seems that the checkbox bacground color is white.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/login_large_margin"
android:layout_marginTop="#dimen/login_medium_margin" >
<RelativeLayout
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_margin="9dp"
android:background="#color/white" >
</RelativeLayout>
<CheckBox
android:id="#+id/login_check"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-light"
android:text="#string/login_check"
android:textColor="#color/white" >
</CheckBox>
</RelativeLayout>
Related
This question already has answers here:
Android button background is taking the primary color
(6 answers)
Closed 10 months ago.
I have set it up to where my button's style is borderless and I'm using a drawable for the button background android:background="#drawable/circle"
This is the code for the #drawable/circle file
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape = "rectangle">
<corners android:radius="1000dp"/>
<solid android:color="#263238"/>
</shape>
</item>
</selector>
and that color (#26338) does not appear on the button instead the button looks like this
what it looks like in design mode
In case you're wondering heres the XML code for the button
<Button
android:id="#+id/clearBTN"
style="#style/Widget.AppCompat.Button.Borderless"
android:layout_width="0dp"
android:layout_height="70dp"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#drawable/circle"
android:backgroundTint="#color/red"
android:fontFamily="#font/oswald_medium"
android:text="#string/clear"
android:textColor="#FFFFFF"
android:textSize="24sp" />
When in reality it should be more like this color
this is the color I'm looking for
Some more additional info is that my button is in a TableRow inside of a tableLayout. Also when I try applying a backgroundTint it also does not work. Am using the latest version of android studio and I'm pretty sure everything else is up to date.
How can I fix this? Thanks.
That is Button bug.
change Button
to androidx.appcompat.widget.AppCompatButton
use bellow xml for create button background.
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="1000dp"/>
<solid android:color="#263238"/>
</shape>
this code for use drawable with button.#drawable/circle is your background drawable name.
<Button
android:id="#+id/clearBTN"
android:layout_width="0dp"
android:layout_height="70dp"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#drawable/circle"
android:fontFamily="#font/oswald_medium"
android:text="#string/clear"
android:textColor="#FFFFFF"
android:textSize="24sp" />
I had the same problem with Buttons.
use AppCompatButton instead using Button.
package : androidx.appcompat.widget.AppCompatButton
I want to make an a bit circular button with a drawableStart (without padding).
I added this to the button background:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#CC232323"/>
<corners android:radius="50sp"/>
</shape>
The button is:
<Button
android:id="#+id/btn_play"
android:layout_width="match_parent"
android:layout_height="50sp"
android:layout_marginStart="25sp"
android:layout_marginEnd="25sp"
android:layout_weight="1"
android:background="#drawable/btn_bg"
android:drawableStart="#drawable/icon_layer_list"
android:text="#string/sample_text"
android:textAlignment="textStart"
android:textAllCaps="false"
android:textColor="#color/colorWhite" />
The layer-list is:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/background_design"
android:height="50sp"
android:width="50sp"
/>
</layer-list>
the corner does work on the button it self but the drawableStart is not affected by them, so I get a button that on one side is with circular border and on the other side a square border of the drawableStart.
View (or Button in your case) is always rectangle. When you apply background with rounded corners, it is only background image rounded, not the View itself. If you need to have rounded corners in drawableStart, you need to have rounded corners in drawable you set for drawableStart.
I found a simple and easy solution, the idea of it is to wrap the button with a CardView and set it's cardCornersRadius to the wanted radius.
like so:
<androidx.cardview.widget.CardView
android:layout_width="150dp"
android:layout_height="150dp"
app:cardCornerRadius="250dp"
android:layout_gravity="center">
<Button
android:id="#+id/btn_play"
android:layout_width="match_parent"
android:layout_height="50sp"
android:layout_marginStart="25sp"
android:layout_marginEnd="25sp"
android:layout_weight="1"
android:background="#drawable/btn_bg"
android:drawableStart="#drawable/icon_layer_list"
android:text="#string/sample_text"
android:textAlignment="textStart"
android:textAllCaps="false"
android:textColor="#color/colorWhite"/>
</androidx.cardview.widget.CardView>
it is without a doubt the simplest way I've found in order to get the view act withthin the borderd, the CardView will not let the button or anything within it to draw outside of its borders / corners.
For more information about CardView (it's properties, dependency, etc...), go to This link.
I want to make color like example image. but I found a problem when changing icons and text using the color gradient because the attributes in the bottom navigation only accept color.
Please Help me god bless you.
https://imgur.com/aGKHhwW
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/nav_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:theme="#style/Widget.BottomNavigationView"
android:background="#drawable/bg_bottom_nav"
app:itemIconTint="#drawable/bottom_nav_icon_color_selector"
app:itemTextColor="#drawable/bottom_nav_icon_color_selector"
app:labelVisibilityMode="labeled"
app:layout_constraintBottom_toBottomOf="parent"
app:itemIconSize="22dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/bottom_nav_menu" />
After many hours of trying to make the text gradient, I was finally able to achieve this effect. The point is to reach the MaterialTextView inside BottomNavigationItemView. This is the code I use in onCreate() method of the activity (Kotlin):
for (bottomNavigationItem in binding.bottomNavigation[0] as BottomNavigationMenuView) {
(((bottomNavigationItem as BottomNavigationItemView)
.getChildAt(1) as BaselineLayout)
.getChildAt(1) as MaterialTextView)
.setGradientText()
}
setGradientText() method simply decorates text. In your case you need to add third color and setup angle:
fun MaterialTextView.setGradientText() {
paint.shader = LinearGradient(
0f,
0f,
paint.measureText(text.toString()),
textSize,
intArrayOf(
ContextCompat.getColor(context, R.color.main_gradient_start),
ContextCompat.getColor(context, R.color.main_gradient_end)
),
null, Shader.TileMode.CLAMP
)
}
This code will decorate every element in bottom navigation and they only will be gradient when the element is selected. I'm not sure if it is possible to make gradient work on active and inactive elements at the same time.
Also, if you need code of my BottomNavigationView:
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/black"
app:itemTextColor="#drawable/bottom_menu_selector"
app:labelVisibilityMode="labeled"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_menu" />
In conclusion, this is the best result I've reached now:
Gradient text
About icons: you need to create selectors for your icons and add them to your menu file like this:
Sample selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Icon active gradient -->
<item android:drawable="#drawable/ic_home_color" android:state_pressed="true"/>
<item android:drawable="#drawable/ic_home_color" android:state_checked="true"/>
<!-- Icon default -->
<item android:drawable="#drawable/ic_home"/>
</selector>
Menu file
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/home"
android:icon="#drawable/home_selector"
android:title="#string/home" />
<item
android:id="#+id/catalogue"
android:icon="#drawable/catalogue_selector"
android:title="#string/catalogue" />
<item
android:id="#+id/collections"
android:icon="#drawable/collections_selector"
android:title="#string/collections" />
<item
android:id="#+id/profile"
android:icon="#drawable/profile_selector"
android:title="#string/profile" />
</menu>
I am also doing this, for the gradient icon, I use 2 images. As for the text gradient, I'm still looking for a way.
Icon Gradient:
drawable/ic_home.xml: icon
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Icon active gradient -->
<item android:drawable="#drawable/icon_home_active" android:state_pressed="true"/>
<item android:drawable="#drawable/icon_home_active" android:state_checked="true"/>
<!-- Icon default -->
<item android:drawable="#drawable/icon_home"/>
</selector>
menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/navigation_home"
android:icon="#drawable/ic_home"
android:title="#string/title_home" />
....
</menu>
And in Activity, add the following code:
bottomNavView.setItemIconTintList(null);
This is the code in the layout
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
app:passwordToggleEnabled="true"
app:passwordToggleDrawable="#drawable/selector_password_icon">
<android.support.design.widget.TextInputEditText
android:id="#+id/et_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/activity_login_password_text_value"
android:inputType="textPassword"/>
</android.support.design.widget.TextInputLayout>
And this is the code in the Selector
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/ic_eye_active" />
<item android:drawable="#drawable/ic_eye_inactive" />
The Icons have different colors (Gray and Black) but the same shape and size. The problem is that both icons show the same color, therefore stays the same if its active or inactive.
Edit: I want to use XML because it will be used in multiple pages
Update your color values, use color values directly, follow this link:
https://www.codevscolor.com/android-material-design-tutorial-10-password-visibility-toggle/
It there any ways to customize the RatingBar to look like the image below? Default RatingBar is just stars. For now i managed to change the star and color to rectangle but failed to put number inside the RatingBar.
You'll have to customize your RatingBar. In XML
<RatingBar
android:id="#+id/rating"
android:layout_width="wrap_content"
android:layout_height="#dimen/rating_bar_height"
android:layout_gravity="center"
android:clickable="false"
android:focusable="false"
android:isIndicator="true"
android:numStars="5"
android:progressDrawable="#drawable/custom_star_rating" />
Use images of filled numbers and blank numbers in drawable as:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background" android:drawable="#drawable/notfill_star" />
<item android:id="#android:id/secondaryProgress" android:drawable="#drawable/notfill_star" />
<item android:id="#android:id/progress" android:drawable="#drawable/fill_star" />
You can try this library too