I am styling a button in my android app but I am on the verge on losing my mind. There is rectangle which appears below the text as you can see in the picture attached:
I can not understand how that's shows up...
Below is my button:
<layout 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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:paddingTop="24dp"
android:paddingBottom="48dp"
android:background="#drawable/bottom_sheet_rounded_corner">
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/ctaButton"
style="#style/AppTheme.ButtonStyleLightness200"
android:textAppearance="#style/SubHead2_bld14"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Button"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
There is nothing really fancy. the Theme is defined as below:
<style name="AppTheme.ButtonStyleLightness200" parent="Widget.MaterialComponents.Button">
<item name="android:textAppearance">#style/SubHead2_bld14</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">#drawable/bottom_button_text_color_selector</item>
<item name="android:background">#drawable/bottom_button_bkg_lightness200_selector</item>
<item name="android:textAllCaps">false</item>
<item name="android:layout_marginStart">24dp</item>
<item name="android:layout_marginEnd">24dp</item>
<item name="android:height">48dp</item>
</style>
and the background is defined as below:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false">
<shape android:shape="rectangle">
<corners android:radius="8dp" />
<solid android:color="#android:color/transparent" />
<stroke android:width="2dp" android:color="#color/lightness200"/>
</shape>
</item>
<item android:state_enabled="true">
<shape android:shape="rectangle">
<corners android:radius="8dp" />
<solid android:color="#color/solidnight" />
</shape>
</item>
</selector>
lightness color are dark color with transparency
Any idea??
Related
Create a login page. but I don't know what problem this code
login button don't work change color when I clicked!
I want to when I click then change color button
why doesn't changed that 'LOGIN' button?
how I can solve this?
activity_login.xml
<?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:orientation="vertical"
android:padding="16dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginBottom="16dp"
android:background="#drawable/btn_login"
android:clickable="true"
android:gravity="center"
android:paddingLeft="32dp"
android:paddingRight="32dp">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="#drawable/icon_user" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="LOGIN"
android:textColor="#fff"
android:textSize="16dp" />
</LinearLayout>
</LinearLayout>
selector xml ->
btn_login.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true">
<shape android:shape="rectangle">
<solid android:color="#4DAEEA" />
<corners android:radius="30dp" />
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="rectangle">
<solid android:color="#00ff00" />
<corners android:radius="30dp" />
</shape>
</item>
<item android:state_enabled="false">
<shape android:shape="rectangle">
<solid android:color="#999" />
<corners android:radius="30dp" />
</shape>
</item>
</selector>
you should make LinearLayout behave like a button by adding style and removing background , follow these steps
<LinearLayout
......
style="#style/btn_stand"
.......
>
</LinearLayout>
My style definition for the button:
<style name="btn_stand" parent="AppBaseTheme">
<item name="android:background">#drawable/btn_stand_sel</item>
<item name="android:textColor">#drawable/btn_stand_text_color</item>
<item name="android:minHeight">48dp</item>
<item name="android:paddingLeft">5dp</item>
<item name="android:paddingRight">5dp</item>
</style>
My #drawable/btn_stan_sel file:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- disabled state -->
<item android:drawable="#drawable/btn_stand_disabled" android:state_enabled="false"/>
<!-- enabled and pressed state -->
<item android:drawable="#drawable/btn_stand_pressed" android:state_enabled="true" android:state_pressed="true"/>
<!-- enabled and focused state -->
<item android:drawable="#drawable/btn_stand_focused" android:state_enabled="true" android:state_focused="true"/>
<!-- enabled state -->
<item android:drawable="#drawable/btn_stand_enabled" android:state_enabled="true"/>
</selector>
My drawable file repeated for each state just with different colors for each state:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<stroke
android:width="1dp"
android:color="#color/stroke" />
<solid android:color="#color/blue" />
<corners android:radius="6dp" />
</shape>
this was an example that works for me , hope you use it and choose the color you want
Add android:focusable="true"to your linear layout xml code.
In the event that that doesn't work, you can try to replace android:background=#drawable/btn_login with android:foreground="?android:attr/selectableItemBackground".
This is my Design of campaign_create.xml
Spinner :
<com.weiwangcn.betterspinner.library.material.MaterialBetterSpinner
android:id="#+id/select_city"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Select Category"
android:background="#drawable/rounded_white"
android:textColorHint="#ffffff"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:layout_alignParentStart="true"
android:layout_marginTop="9dp" />
#drawable/rounded_white.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#f2f2f2"/>
<stroke android:width="0.1dp"
android:color="#color/white"/>
<corners android:radius="40dp"/>
</shape>
</item>
</selector>
I want to set background of spinner.
It is drawable file. i set property
android:background="#drawable/rounded_white"
but it didn't work.
How to set background of spinner?
It must be working, but you won't be able to check in preview.
Try setting values(Adapter) to spinner and run the code.
But as per your layout I guess you should take Linear or Relative Layout as parent and keeping Imageview and Spinner inside.
i am used simple spinner control and set background used below code..
<Spinner
android:id="#+id/mySpinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:entries="#array/name"
android:background="#drawable/button_selector_blue"
/>
and button_selector_blue.xml..
<?xml version="1.0" encoding="utf-8"?>
<item android:state_pressed="false">
<layer-list>
<item>
<shape android:shape="rectangle">
<solid android:color="#color/colorPrimary"/>
<padding android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"/>
<corners android:radius="5dp" />
</shape>
</item>
</layer-list>
</item>
create a style for spinner like this :
<style name="spinner_style" parent="Base.Widget.AppCompat.Spinner">
<item name="android:background">#drawable/spinner_custom</item>
<item name="android:layout_marginLeft">10dp</item>
<item name="android:layout_marginRight">10dp</item>
<item name="android:layout_marginBottom">10dp</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:paddingTop">5dp</item>
<item name="android:paddingBottom">5dp</item>
<item name="android:popupBackground">#848484</item>
<item name="android:textColor">#000000</item>
</style>
add this style in your spinner :
<Spinner
style="#style/spinner_style"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_margin="5dp" />
I can find many rounded-rectangle button but it is not working to me.
What do I miss?
It is layout.xml:
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:background="#ebf1ff"
android:orientation="vertical">
<LinearLayout
style="#style/wrapperWidthWeightSumOne"
android:paddingTop="50dp">
<Button
android:id="#+id/btnTypeAll"
style="#style/ConsentTypeBtn"
android:layout_width="0dp"
android:layout_weight="0.85"
android:text="All"/>
</LinearLayout>
(...)
</LinearLayout>
This is button's style:
<style name="ConsentTypeBtn">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:onClick">onClick</item>
<item name="android:background">#drawable/selector_btn_consent_all</item>
<item name="android:layout_marginBottom">2dp</item>
<item name="android:singleLine">true</item>
<item name="android:layout_gravity">center</item>
<item name="android:textColor">#fff</item>
</style>
...and this is selector_btn_consent_all.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="#drawable/consent_type_on">
<shape android:shape="rectangle">
<corners android:radius="4dp" />
<stroke android:width="2dp" android:color="#1F3259"/>
</shape>
</item>
<item android:state_pressed="true" android:drawable="#drawable/consent_type_on"></item>
<item android:drawable="#drawable/consent_type_off"></item>
your selector_btn_consent_all.xml has status like this: when android:state_selected="true", use android:drawable="#drawable/consent_type_on".
So, find consent_type_on.xml at your drawable folder, and it would be rectangle, add <corners android:radius="4dp" />
EDIT
then, make consent_type_on.xml at your drawable folder. example here
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="5dp" />
<solid android:color="#android:color/holo_blue_bright" />
</shape>
I want to change the color of radio button on being tapped. I am using custom layout with on custom edit text and radio button in it.This is my xml for layout item.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true">
<com.ekcoffee.ekcoffeeapp.widgets.AppTextView
android:id="#+id/textViewCountryCode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:paddingRight="#dimen/dimen_10dp"
android:text="+91 (India)"
android:textColor="#color/color_black_text"
android:textSize="#dimen/dimen_16sp"
app:textStyle="#integer/OPEN_SANS_REGULAR" />
</RelativeLayout>
<RadioButton
android:id="#+id/selector"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:backgroundTint="#color/color_accent"
android:checked="false"
android:clickable="false"
android:focusable="false"
/>
This is my xml for spinner
<android.support.v7.widget.AppCompatSpinner
android:id="#+id/spinnerCountryCode"
style="#style/spinner_style"
android:layout_width="#dimen/dimen_1dp"
android:layout_height="#dimen/dimen_1dp"
android:layout_alignParentBottom="true"
android:hint="+91"
android:spinnerMode="dialog"
android:textColor="#color/color_splash_screen_text"
android:textColorHint="#color/color_white"
android:textSize="#dimen/dimen_25dp" />
i have used style also for spinner
<style name="spinner_style" parent="Widget.AppCompat.Spinner.Underlined">
<item name="android:background">#color/color_primary</item>
<item name="android:layout_marginLeft">#dimen/dimen_48dp</item>
<item name="android:layout_marginRight">#dimen/dimen_24dp</item>
<item name="android:layout_marginBottom">10dp</item>
<item name="android:checkMark">#drawable/ic_radio_checked</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:layout_marginTop">100dp</item>
<item name="android:paddingBottom">5dp</item>
</style>
In your styles.xml put -
<!-- custom style -->
<style name="radionbutton"
parent="Base.Widget.AppCompat.CompoundButton.RadioButton">
<item name="android:button">#drawable/radiobutton_drawable</item>
</style>
Your radio button in xml should look like-
<RadioButton
android:layout_width="wrap_content"
style="#style/radionbutton"
android:checked="false"
android:layout_height="wrap_content"
/>
Now all you need to do is make a radiobutton_drawable.xml in your drawable folder. Here is what you need to put in it-
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/radio_unchecked" android:state_checked="false" android:state_focused="true"/>
<item android:drawable="#drawable/radio_unchecked" android:state_checked="false" android:state_focused="false"/>
<item android:drawable="#drawable/radio_checked" android:state_checked="true" android:state_focused="true"/>
<item android:drawable="#drawable/radio_checked" android:state_checked="true" android:state_focused="false"/>
</selector>
Your radio_unchecked.xml-
<?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"/>
<size android:width="30dp" android:height="30dp"/>
</shape>
Your radio_checked.xml-
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<stroke android:width="1dp" android:color="#color/colorAccent"/>
<size android:width="30dp" android:height="30dp"/>
</shape>
</item>
<item android:top="5dp" android:bottom="5dp" android:left="5dp" android:right="5dp">
<shape android:shape="oval">
<solid android:width="1dp" android:color="#color/colorAccent"/>
<size android:width="10dp" android:height="10dp"/>
</shape>
</item>
</layer-list>
Just replace #color/colorAccent with the color of your choice.
More simple, just set the buttonTint color: (only works on api level 21 or above)
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/radio"
android:checked="true"
android:buttonTint="#color/your_color"/>
in your values/colors.xml put your color in this case a reddish one:
<color name="your_color">#e75748</color>
Result:
int textColor = Color.parseColor(#000000);
yourradiobutton.setButtonTintList(ColorStateList.valueOf(textColor));
put above code inside your button's onClick method
I'm trying to create a style for buttons in my app. In order to do that, I created a drawable file with the corner tag. I also created different styles for different button state (normal and disabled). When I apply the style without setting the background attribute, the button have the correct color. But when I set the background attribute with my drawable file, the text color defined in the style.xml works but not the background color. Here is the code :
values/style.xml :
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:background">#color/background</item>
<item name="android:textColor">#color/text_color</item>
</style>
<style name="ButtonStyle">
<item name="android:background">#color/button_color</item>
</style>
<style name="ButtonDisableStyle">
<item name="android:background">#color/button_color_disabled</item>
<item name="android:textColor">#color/buttonText_color_disabled</item>
</style>
drawable/button_shape.xml :
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:radius="5dp" />
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp" />
</shape>
main_activity :
<Button
android:id="#+id/newButton"
android:text="#string/generate_first"
style="#style/ButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="30"
android:background="#drawable/button_shape"
/>
I saw several post about the same problem and I know that it is possible to define the button's background color in the drawable/button_shape.xml but I'd like to keep the style and make it works (I want the shape and the style to be separated).
Do you have any idea about it ?
Finally and after more research, I found a solution. I created 3 xml shape files for the button corresponding to 3 different states. Then I created a 4th xml shape file which includes the 3 others.
Finally, I put a reference to the 4th shape xml file into the button style (in values/style.xml). Here is the code :
drawable/button_disabled.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/buttonText_color_disabled"/>
<padding android:left="7dp"
android:top="7dp"
android:right="7dp"
android:bottom="7dp" />
<corners android:radius= "5dp" />
</shape>
drawable/button_pressed.xml :
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#color/button_color_pressed"/>
<padding android:left="7dp"
android:top="7dp"
android:right="7dp"
android:bottom="7dp" />
<corners android:radius= "5dp" />
</shape>
drawable/button_enabled.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#color/button_color"/>
<padding android:left="7dp"
android:top="7dp"
android:right="7dp"
android:bottom="7dp" />
<corners android:radius= "5dp" />
</shape>
drawable/button.xml :
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_enabled="false"
android:drawable="#drawable/button_disabled" />
<item
android:state_pressed="true"
android:state_enabled="true"
android:drawable="#drawable/button_pressed" />
<item
android:state_enabled="true"
android:drawable="#drawable/button_enabled" />
</selector>
values/style.xml :
<style name="Custom_button" parent="#android:style/Widget.Button">
<item name="android:gravity">center_vertical|center_horizontal</item>
<item name="android:textColor">#color/text_color</item>
<item name="android:textSize">16dip</item>
<item name="android:textStyle">bold</item>
<item name="android:background">#drawable/button</item>
<item name="android:clickable">true</item>
</style>
main_activity :
<Button
android:id="#+id/newButton"
android:text="#string/generate_first"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_below="#id/app_info"
android:layout_centerHorizontal="true"
android:layout_marginTop="35dp"
android:layout_marginBottom="50dp"
style="#style/Custom_button" />