Round Corner is not working in Material Button - android

I have button like this in my login activity layout.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:weightSum="2">
<com.google.android.material.button.MaterialButton
android:id="#+id/button_login_activity"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1"
android:text="Login"
app:cornerRadius="20dp"
android:background="#color/colorPrimaryDark"
android:textColor="#color/toolbar_text"
android:textStyle="bold" />
<com.google.android.material.button.MaterialButton
android:id="#+id/button_skip_login_activity"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_marginStart="10dp"
android:layout_weight="1"
app:cornerRadius="20dp"
android:background="#color/colorPrimaryDark"
android:textColor="#color/toolbar_text"
android:text="Skip"
android:textStyle="bold"
android:layout_marginLeft="10dp" />
</LinearLayout>
My Style is like this
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<!--Common Color-->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:alertDialogTheme">#style/AlertDialogTheme</item>
<item name="windowActionBar">true</item>
<item name="windowNoTitle">true</item>
<item name="colorSwitchThumbNormal">#color/switch_normal</item>
<item name="colorControlNormal">#color/switch_normal</item>
<item name="android:textColorSecondary">#color/switch_normal</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="android:windowDisablePreview">true</item>
</style>
I have dependency like below
implementation 'com.google.android.material:material:1.2.1'
I have tried many things but unable to make it working for round corner, same thing is working for my another project. Let me know if anyone can help me for come out from the issue.
Thanks!

You have to remove the background:
android:background="#color/colorPrimaryDark"
Using it the MaterialButton doesn't use its own MaterialShapeDrawable for the background. This means that features like shape appearance, stroke and rounded corners are ignored.
In your case use the app:backgroundTint attribute:
<com.google.android.material.button.MaterialButton
app:backgroundTint="#color/colorPrimaryDark"

Related

Radio Button set custom drawable not working

I have used the radio button and set a custom drawable for a check/uncheck
I want to this
but my current output is this
Radio button XML code
<RadioGroup
android:id="#+id/segmented2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_margin="6dp"
android:layout_weight="1"
android:baselineAligned="false"
android:orientation="horizontal">
<RadioButton
android:id="#+id/colorRadioButton"
style="#style/RadioButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:checked="true"
android:text="#string/color_color" />
<RadioButton
android:id="#+id/gradientRadioButton"
style="#style/RadioButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:checked="false"
android:text="#string/color_gradient"
android:visibility="visible" />
</RadioGroup>
style/RadioButton
<style name="RadioButton" parent="Base.Widget.AppCompat.CompoundButton.RadioButton">
<item name="android:gravity">center_vertical|center</item>
<item name="android:paddingLeft">10dp</item>
<item name="android:paddingRight">20dp</item>
<item name="android:background">#null</item>
<item name="android:button">#drawable/radio_checked_unchecked</item>
<item name="android:minWidth">70dp</item>
<item name="android:minHeight">35dp</item>
</style>
drawable/radio_checked_unchecked.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/radio_checked" android:state_checked="true"/>
<item android:drawable="#drawable/radio_unchecked"/>
</selector>
Firstly, you need to change the android:orientation from horizontal to vertical. You can also use fixed layout width and height if you use larger or unscalable custom drawables.
So, your updated RadioGroup codebase will be like below:
<RadioGroup
android:id="#+id/segmented2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center_vertical"
android:layout_margin="6dp"
android:layout_weight="1"
android:baselineAligned="false"
android:orientation="vertical">
<RadioButton
android:id="#+id/colorRadioButton"
style="#style/RadioButton"
android:layout_width="40dp"
android:layout_height="40dp"
android:checked="true"
android:text="#string/color_color" />
<RadioButton
android:id="#+id/gradientRadioButton"
style="#style/RadioButton"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginTop="10dp"
android:checked="false"
android:text="#string/color_gradient"
android:visibility="visible" />
</RadioGroup>
Also, button should be set to #null, and the radioGroup background should be your custom drawable.
So, your updated style codebase will be like below:
<style name="RadioButton" parent="Base.Widget.AppCompat.CompoundButton.RadioButton">
<item name="android:gravity">center_vertical|center</item>
<item name="android:paddingLeft">10dp</item>
<item name="android:paddingRight">20dp</item>
<item name="android:background">#drawable/radio_checked_unchecked</item>
<item name="android:button">#null</item>
<item name="android:minWidth">70dp</item>
<item name="android:minHeight">35dp</item>
</style>
I think you need to use this:
<item name="android:background">#drawable/radio_checked_unchecked</item>
<item name="android:button">#null</item>
instead of this:
<item name="android:background">#null</item>
<item name="android:button">#drawable/radio_checked_unchecked</item>
in your style.
I got an idea from the given answer and I found a solution to my question
Change
<RadioButton
android:id="#+id/colorRadioButton"
style="#style/RadioButton"
android:layout_width="40dp"
android:layout_height="40dp"
android:checked="true"
android:text="#string/color_color" />
To
<RadioButton
android:id="#+id/autoRadioButton"
style="#style/RadioButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:checked="false"
android:text="#string/auto"
android:drawablePadding="#dimen/_10sdp"
android:drawableStart="#drawable/radio_checked_unchecked"/>
set android:drawableStart to set custom drawable and set button="#null"
style
<style name="RadioButton" parent="Base.Widget.AppCompat.CompoundButton.RadioButton">
<item name="android:textColor">#color/bvc_sticker_button_text_color</item>
<item name="android:gravity">center_vertical|center</item>
<item name="android:paddingLeft">10dp</item>
<item name="android:paddingRight">20dp</item>
<item name="android:background">#null</item>
<item name="android:button">#null</item>
<item name="android:minWidth">70dp</item>
<item name="android:minHeight">35dp</item>
<item name="fontFamily">#font/inter_medium</item>
</style>
use the above code and get output like this

textColor override textColorPrimary and textColorPrimaryDark

I have applied a theme to my app but when I use textColor properties it override all other properties like textColorPrimary.
<style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowBackground">#color/windowBackground</item>
<item name="android:textColorPrimary">#FF4081</item>
<item name="android:textColorSecondary">#186925</item>
<item name="colorControlActivated">#FF0000</item> <!-- for check box when checked -->
<item name="colorControlNormal">#bbc40c</item> <!-- for check box when normal -->
<item name="colorButtonNormal">#325289</item>
<!--<item name="android:textColor">#084fe9</item>-->
<item name="android:windowAnimationStyle">#style/WindowAnimationTransition</item>
<!--<item name="android:windowActivityTransitions">true</item>
<item name="android:windowEnterTransition">#android:transition/slide_right</item>
<item name="android:windowExitTransition">#android:transition/slide_left</item>-->
</style>
<style name="AppTheme.NoActionBar">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
</style>
<style name="HeaderText" parent="#android:style/TextAppearance.Large">
<item name="android:textColor">#ffffffff</item>
<item name="android:textSize">12dp</item>
</style>
<style name="WindowAnimationTransition">
<item name="android:windowEnterAnimation">#android:anim/fade_in</item>
<item name="android:windowExitAnimation">#android:anim/fade_out</item>
</style>
my Layout file
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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">
<TextView
android:id="#+id/questionNumberTv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="TextView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/scoreTv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="17dp"
android:layout_marginEnd="16dp"
android:text="Score : 20"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/iconIv"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toStartOf="#+id/scoreTv"
app:layout_constraintStart_toEndOf="#+id/questionNumberTv"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#tools:sample/avatars[11]" />
<TextView
android:id="#+id/questionTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="8dp"
android:text="TextView"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/iconIv" />
<Button
android:id="#+id/fiftyfiftyBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/radioGroup2" />
<RadioGroup
android:id="#+id/radioGroup2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/questionTitle">
<RadioButton
android:id="#+id/option1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="RadioButton" />
<RadioButton
android:id="#+id/option2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="RadioButton" />
<RadioButton
android:id="#+id/option3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="RadioButton" />
<RadioButton
android:id="#+id/option4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="RadioButton" />
</RadioGroup>
<TextView
android:id="#+id/votesTv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="10dp"
android:drawableLeft="#drawable/ic_expand_less_green_24dp"
android:text="20"
android:textSize="16sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/fiftyfiftyBtn" />
<TextView
android:id="#+id/commentCountTv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:drawableLeft="#drawable/ic_expand_less_green_24dp"
android:text="35"
android:textSize="16sp"
app:layout_constraintStart_toEndOf="#+id/votesTv"
app:layout_constraintTop_toBottomOf="#+id/fiftyfiftyBtn" />
</android.support.constraint.ConstraintLayout>
when I Uncomment android:textColor , android:textColorPrimary color is override by android:textColor. I want my title/large text to use textColorPrimary and for medium and small I wanna use textColorPrimaryDark as said in their documentation.
before that the button text color is set by the textColorPrimary.
How could I use two text Color scheme for whole my app. using textColorPrimary and textColorPrimaryDark.
Or I have to create two textStyle and set them to each View. Is there a better approach to achieve what I want.
You need to define two styles and set your desired attributes there. It is cleaner to read and understandable. And also good behaviour to set your own style in textview.
Here is a sample you should do:
<style name="textStyle1" parent="android:TextAppearance">
<item name="android:textColor">#color/textColorPrimary</item>
<item name="android:textStyle">bold</item>
<item name="android:textAppearance">?android:attr/textAppearanceLarge</item>
<item name="android:gravity">start</item>
<item name="android:textSize">22sp</item>
</style>
<style name="textStyle2" parent="android:TextAppearance">
<item name="android:textColor">#color/textColorPrimaryDark</item>
<item name="android:textStyle">normal</item>
<item name="android:textAppearance">?android:attr/textAppearanceMedium</item>
<item name="android:gravity">start</item>
<item name="android:textSize">18sp</item>
</style>
Then use this style on your expected textview like this:
<TextView
android:id="#+id/tv_name"
style="#style/textStyleMedium"
........ />
Remove the below tags on your app theme:
<item name="android:textColorPrimary">#FF4081</item>
<item name="android:textColorSecondary">#186925</item>
<!-- <item name="android:textColor">#084fe9</item> -->
Purpose of different color:
TextColor is just the xml attribute to set a color to the text of any given view.
TextColorPrimary is the default text color for enabled buttons and Large Textviews.
TextColorSecondary is the default text color for Medium and Small Textviews.
colorPrimaryDark is the color of the status bar.
In order to achieve this you should remove textColor that override other colors.
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
inside your textView in xml . Then it will apply it to all your View. In this manner you don't have to set style to all ..

android:background selectableItemBackground is not working

I try to use selectableItemBackground in recyclerview, I test a simple demo, it's working.
Here is layout and style:
<RelativeLayout 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="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/selectableItemBackground">
<ImageView
android:id="#+id/imageView"
android:layout_width="100dp"
android:layout_height="100dp"
app:srcCompat="#mipmap/ic_launcher" />
</LinearLayout>
</RelativeLayout>
Style:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
When I test another project, it doesn't work, I'm looking for some solutions, one of solutions say may be style.
But the solution style was Theme.AppCompat.Light.NoActionBar, i used it too.
Here is my project layout, is anyone can tell me why?
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/selectableItemBackground">
<ImageView
android:id="#+id/image"
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_marginLeft="5dp"
android:layout_marginTop="0dp"
android:src="#drawable/pink_circle" />
</RelativeLayout>
</RelativeLayout>
Style:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#android:color/holo_blue_dark</item>
</style>
The animation part of background requires your element to be clickable. Set android:clickable="true".
You can take a look, I think it should help: https://yq.aliyun.com/articles/12407

Remove AutoCompleteTextView dropdown list divider

In my application, I'm using AutoCompleteTextView.
One of the requirements is to hide the divider.
I have added AutoCompleteTextView to layout:
<AutoCompleteTextView
android:id="#id/address_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="15dp"
android:layout_marginRight="8dp"
android:layout_toLeftOf="#id/address_operation_btn"
android:background="#null"
android:completionThreshold="1"
android:dropDownAnchor="#id/anchor"
android:dropDownVerticalOffset="13dp"
android:dropDownWidth="wrap_content"
android:ellipsize="end"
android:gravity="center"
android:layout_centerHorizontal="true"
android:hint="#string/address_bar_hint"
android:imeOptions="actionGo"
android:inputType="textUri"
android:maxLines="1"
android:saveEnabled="true"
android:singleLine="true"
android:dropDownListViewStyle="#style/searchResultsList"
android:textColor="#android:color/white"
android:textColorHint="#80FFFFFF"
android:textSize="17sp" />
The style i'm using is
<style name="searchResultsList" parent="#android:style/Widget.ListView">
<item name="android:divider">#android:color/transparent</item>
<item name="android:dividerHeight">0px</item>
</style>
But the divider is still there...
How if can be hidden?
Override it with your application theme. In your themes.xml
<style name="AppTheme" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="android:dropDownListViewStyle">#style/DropDownListViewStyle</item>
</style>
<style name="DropDownListViewStyle" parent="#style/Widget.AppCompat.ListView.DropDown">
<item name="android:divider">#android:color/transparent</item>
<item name="android:dividerHeight">0dp</item>
</style>
Credits to: http://daniel-codes.blogspot.com/2012/11/styling-autocompletetextview.html

Can I disable button text antialiasing

I use custom 8bit font and I'm looking for a way to disable antialias.
I tried the code behind, but It doesn't work:
<!-- main_activity.xml -->
<Button
android:id="#+id/button"
android:textColor="#color/white"
android:textSize="24sp"
android:includeFontPadding="false"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/Button" />
<!-- styles.xml -->
<style name="Button">
<item name="android:antialias">false</item>
<item name="android:textColor">#ff0000</item>
<item name="android:textSize">24sp</item>
<item name="android:shadowColor">#0099cc</item>
<item name="android:shadowDx">0</item>
<item name="android:shadowDy">4</item>
<item name="android:shadowRadius">0.01</item>
</style>
I'm not sure if it's possible to disable antialiasing using xml, but you can try to disable it programmatically button.getPaint().setAntiAlias(false);

Categories

Resources