Android Theme style not applying for Button - android

On my application style not applying, It shows like this,
Here is the code I am using,
-----AndroidManifest.xml-----
<application
android:allowBackup="true"
android:icon="#mipmap/ic_launcher"
android:label="#string/app_name"
android:roundIcon="#mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="#style/AppTheme">
----themes.xml-----
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/white</item>
<item name="colorPrimaryVariant">#color/white</item>
<item name="colorOnPrimary">#color/text_gray</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/white</item>
<item name="colorSecondaryVariant">#color/white</item>
<item name="colorOnSecondary">#color/text_gray</item>
<item name="android:textViewStyle">#style/Regular_TextView</item>
<item name="buttonStyle">#style/Rounded_Gray_Button</item>
</style>
<style name="Rounded_Gray_Button" parent="android:Widget.Button">
<item name="android:gravity">center</item>
<item name="android:minWidth">100dp</item>
<item name="minHeight">40dp</item>
<item name="font">#font/sf_ui_display_bold</item>
<item name="android:textSize">16dp</item>
<item name="background">#drawable/rounded_dark_gray_bg</item>
<item name="android:textColor">#color/white</item>
</style>
<style name="Rounded_Gray_Stroke_Button" parent="android:Widget.Button">
<item name="android:gravity">center</item>
<item name="android:minWidth">100dp</item>
<item name="minHeight">40dp</item>
<item name="font">#font/sf_ui_display_bold</item>
<item name="android:textSize">16dp</item>
<item name="background">#drawable/rounded_dark_gray_stroke</item>
<item name="android:textColor">#color/dark_gray</item>
</style>
</resources>
Button Backgrounds
----rounded_dark_gray_bg.xml----
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/dark_gray" />
<solid android:color="#color/dark_gray" />
<corners android:radius="6dp" />
</shape>
</item>
</layer-list>
---rounded_dark_gray_stroke.xml----
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/dark_gray" />
<solid android:color="#color/white" />
<corners android:radius="6dp" />
</shape>
</item>
</layer-list>
I am applying the above button style on the below xml file,
<?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
android:gravity="center"
android:padding="10dp">
<Button
android:id="#+id/btnSignin"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:theme="#style/Rounded_Gray_Button"
android:text="#string/Sign_in"/>
<Button
android:id="#+id/btnRegister"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:theme="#style/Rounded_Gray_Stroke_Button"
android:text="#string/Register"/>
</LinearLayout>
</RelativeLayout>

To apply background we need to replace <item name="background">#drawable/rounded_dark_gray_bg</item> with <item name="android:background">#drawable/rounded_dark_gray_bg</item> on themes.xml
Also to apply we need to use like,
style="#style/Rounded_Gray_Button"
style="#style/Rounded_Gray_Stroke_Button"

You shouldn't set the theme on individual components. You should set the themed attribute you defined: buttonStyle, as the style of the component:
style="?buttonStyle"
... or you can reference the style directly, but then it can't change with the theme (unless the attributes within the style reference themed attributes)
style="#style/Rounded_Gray_Button"

Related

How do I make the rounded corners of the menu in the toolbar?

This is my toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar
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:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/_40sdp"
android:background="#android:color/holo_red_dark"
android:gravity="center_vertical"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:popupTheme="#style/PopUpTheme"/>
This is how I customized the popup menu in style.xml
<resources>
<!-- 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>
<style name="PopUpTheme" parent="ThemeOverlay.AppCompat.Light">
<item name="android:popupBackground">#drawable/background_popup_menu</item>
</style>
</resources>
background_popup_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#android:color/white" />
<corners android:radius="5dp" />
</shape>
That's what I get in the end.
But I need to do like this
You can change the background of the overflow menu defining in your app theme the actionOverflowMenuStyle attribute.
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
<item name="actionOverflowMenuStyle">#style/popupOverflowMenu</item>
</style>
With:
<style name="popupOverflowMenu" parent="#style/Widget.MaterialComponents.PopupMenu.Overflow">
<item name="android:popupBackground">#drawable/my_mtrl_popupmenu_background</item>
</style>
Then define the drawable/my_mtrl_popupmenu_background.xml with something like:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="?attr/colorSurface"/>
<corners
android:bottomLeftRadius="8dp"
android:bottomRightRadius="8dp"
android:topLeftRadius="8dp"
android:topRightRadius="8dp"/>
</shape>
But you have rounded corners :) Just try to increase a value of radius like <corners android:radius="25dp" />.

Android Gradient Background drawable does not work

I've created this drawable resource, backgroundactivity, to use as my app's background:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<item
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<shape
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<gradient
android:angle="90"
android:startColor="#BFEFFF"
android:centerColor="#B0E2FF"
android:endColor="#82CFFD"
android:type="linear"/>
</shape>
</item>
</selector>
I want to set this background on all my activity, so I've tried to put this drawable resource in the styles.xml like this:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="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:actionBarStyle">#style/MyActionBar</item>
<item name="android:background">#drawable/backgroundactivity</item>
</style>
<style name="MyActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="#android:background">#color/colorPrimary</item>
</style>
</resources>
But in this way it didn't work: the background still stay white as default. I've also tried to replace android:background with android:windowBackground, but it causes my application to be completely black.
Thanks in advance!
Try to use windowBackground instead of background
<item name="#android:windowBackground">#color/colorPrimary</item>
It worked by simply editing the background activity.xml to the following:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:angle="90"
android:startColor="#BFEFFF"
android:centerColor="#B0E2FF"
android:type="linear" />
</shape>
</item>
</selector>

Android TabLayout how to make two underlines

I'm trying to create TabLayout and it looks like this.
And i want to make one more under line like this.
Here is my own yellow line and i want to make the black one, and when i change tabs yellow line change itself position. Maybe i need to do some background line, but i dont understand how to
XML:
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
style="#style/AppTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
app:tabGravity="fill"
app:tabMaxWidth="0dp"
app:tabMode="fixed" />
<style name="AppTabLayout" parent="Widget.Design.TabLayout">
<item name="tabIndicatorColor">#color/visit_tabs_indicator</item>
<item name="tabIndicatorHeight">4dp</item>
<item name="tabPaddingStart">6dp</item>
<item name="tabPaddingEnd">6dp</item>
<item name="tabBackground">#android:color/white</item>
<item name="tabTextAppearance">#style/AppTabTextAppearance</item>
<item name="tabSelectedTextColor">#color/visit_tabs_text</item>
</style>
create background drawable which having bottom black line.
i.e tab_ract_border.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" >
<solid android:color="#ffffff" />
</shape>
</item>
<item android:top="-2dp" android:right="-2dp" android:left="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:width="2dp"
android:color="#000000" />
</shape>
</item>
</layer-list>
then apply this drawable to background of Tablayout
i.e app:tabBackground="#drawable/tab_ract_border"
<android.support.design.widget.TabLayout
android:id="#+id/content_main_tab_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ffffff"
app:tabIndicatorColor="#F3CD84"
app:tabBackground="#drawable/tab_ract_border"
app:tabMode="scrollable"
app:tabSelectedTextColor="#color/colorAccent"
app:tabTextAppearance="#android:style/TextAppearance.Widget.TabWidget"
app:tabTextColor="#000000" />
njoe it will work for you :)
In you style.xml code:
<style name="AppTabLayout" parent="Widget.Design.TabLayout">
<item name="tabIndicatorColor">#color/visit_tabs_indicator</item>
<item name="tabIndicatorHeight">4dp</item>
<item name="tabPaddingStart">6dp</item>
<item name="tabPaddingEnd">6dp</item>
<item name="tabBackground">#drawable/myTabBackground</item>
<item name="tabTextAppearance">#style/AppTabTextAppearance</item>
<item name="tabSelectedTextColor">#color/visit_tabs_text</item>
</style>
Then create new xml resource file under Drawable folder: myTabBackground.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#android:color/white"
android:state_selected="true"/>
<item android:drawable="#android:color/black"/>
</selector>
Hope that helps! :)

Android cannot set default button style

I am trying to set a default background for all buttons in my application. The problem is the android:buttonStyle item does not seam to do anything.
If I set a style of #style/Button to any button, then the style is used but I want this to happen to all buttons that have no style explicitly supplied.
My themes.xml file is:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- the theme applied to the application or activity -->
<style
name="BBTheme"
parent="#android:style/Theme.Holo.Light.DarkActionBar">
<item name="android:windowBackground">#drawable/app_background</item>
<item name="android:actionBarStyle">#style/ActionBar</item>
<item name="android:buttonStyle">#style/Button</item>
</style>
</resources>
and my styles.xml file is:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- ActionBar styles -->
<style
name="ActionBar"
parent="#android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
<item name="android:background">#color/action_bar_background</item>
</style>
<!-- Button styles -->
<style
name="Button"
parent="#android:style/Widget.Button">
<item name="android:textColor">#android:color/white</item>
<item name="android:background">#drawable/button_background</item>
</style>
</resources>
Add the buttonstyles.xml inside your drawable folder call From Button, you can modify the style of button.
<Button
android:id="#+id/button6"
style="?android:attr/buttonStyleSmall"
android:layout_width="140dp"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="15dp"
android:background="#drawable/buttonstyles"
android:text="Cancel"
android:textColor="#fff" />
buttonstyles.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#99d9fa"
android:endColor="#99d9fa"
android:angle="45"/>
<padding android:left="3dp"
android:top="3dp"
android:right="3dp"
android:bottom="3dp" />
<corners android:radius="15dp" />
</shape>

Changing button style in the whole application

I'm trying to change all the TextColor of my buttons in my app to white and also trying to make it bold. But that isn't happening, I'm overwriting the android:Widget.Button
I'm developing for Jelly Bean 4.1.2
What am I doing wrong?
Theme definition in manifest
android:theme="#style/spui" >
The theme where I like to
<style name="spui" parent="android:Theme.Holo.Light.DarkActionBar">
<item name="android:buttonStyle">#style/Buttonspui</item>
</style>
The style for the button itself
<style name="Buttonspui" parent="android:Widget.Button">
<item name="android:background">#drawable/btn_default_holo_light</item>
<item name="android:minHeight">48dip</item>
<item name="android:minWidth">64dip</item>
<item name="android:textColor">#ffffff</item>
<item name="android:textStyle">bold</item>
</style>
The button
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:text="#string/edit"
android:id="#+id/btnEdit"
style="#style/Buttonspui"/>
For styling your Button you can use this:
Go to the drawable folder and make an XML (e.g. button.xml) file called "style" which contains the following:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient android:startColor="#449def" android:endColor="#2f6699" android:angle="270" />
<stroke android:width="1px" android:color="#000000" />
<corners android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="8dp"
android:topRightRadius="8dp"/>
<padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />
</shape>
</item>
</selector>
This is my code, you can make the necessary changes you want
Now call it in your layout XML (mainactivity.xml) like this
android:background="#drawable/button.xml"
Now to change the font color and style you can use the following which comes as part of the styles.xml in the values folder
<style name="buttonStyle" parent="#android:style/Widget.Button.Small">
<item name="android:textColor">#FFFFFF</item>
<item name="android:textSize">12sp</item>
<item name="android:textStyle">bold</item>
</style>
Now call this in the layout XML (mainactivity.xml) like this
style="#style/buttonStyle"
The final code is:
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:text="#string/edit"
android:id="#+id/btnEdit"
android:background="#drawable/button.xml"
style="#style/buttonStyle"
/>
Hope this helps :)
This will change the default button style for the entire app, include alert dialog button. Adjust the style based on yours.
res/values/styles.xml
<resources>
<!-- Your base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Other styles -->
<item name="buttonStyle">#style/MyCustomButton</item>
</style>
<style name="MyCustomButton" parent="Widget.AppCompat.Button">
<item name="android:background">#drawable/selector_button</item>
<item name="android:textColor">#color/buttonText</item>
<item name="android:textStyle">bold</item>
<item name="android:paddingLeft">16dp</item>
<item name="android:paddingRight">16dp</item>
</style>
</resources>
res/drawable/selector_button.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_selected" android:state_pressed="true"/>
<item android:drawable="#drawable/button_selected" android:state_focused="true"/>
<item android:drawable="#drawable/button_unselected"/>
</selector>
res/drawable/button_selected.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="1000dp"/>
<solid android:color="#color/buttonSelected"/>
</shape>
res/drawable/button_unselected.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="1000dp"/>
<solid android:color="#color/buttonUnselected"/>
</shape>

Categories

Resources