I have the following style for my the ActionBar in my project
<style name="Theme.MyTheme" parent="Theme.Sherlock.Light">
<item name="actionBarStyle">#style/Widget.MyTheme.ActionBar</item>
<item name="android:actionBarStyle">#style/Widget.MyTheme.ActionBar</item>
<item name="homeAsUpIndicator">#drawable/icon_back</item>
<item name="android:homeAsUpIndicator">#drawable/icon_back</item>
</style>
<style name="Widget.MyTheme.ActionBar" parent="Widget.Sherlock.ActionBar">
<item name="android:background">#0099CC</item>
<item name="android:height">?android:attr/actionBarSize</item>
<item name="background">#0099CC</item>
<item name="android:titleTextStyle">#style/Theme.ActionBar.TitleTextStyle</item>
<item name="titleTextStyle">#style/Theme.ActionBar.TitleTextStyle</item>
<item name="android:displayOptions">useLogo|showTitle|homeAsUp</item>
<item name="displayOptions">useLogo|showTitle|homeAsUp</item>
</style>
<style name="Theme.ActionBar.TitleTextStyle" parent="TextAppearance.Sherlock.Widget.ActionBar.Title">
<item name="android:textColor">#color/white</item>
<item name="android:padding">10dp</item>
</style>
Now the text in the title bar is 0dp aligned to the left. The TextColor attribute works fine but the padding seems to be ignored. As a result, the title of the Activity is stuck to the left hand of the screen that is not very pleasing to look at. How can i add padding to the text ?
Kind Regards,
To archive haveing a centered title in the ABS, without having the home button, you could just do this:
In your Activity, in your oncreate methode:
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
getSupportActionBar().setCustomView(R.layout.abs_layout);
abs_layout:
<?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="wrap_content"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="my Title"
android:textColor="#ffffff"
android:id="#+id/mytext"
android:textSize="25dp" />
</LinearLayout>
Now you should have a Actionbar wih just a Title. If you want to set a custom background, set it in the Layout above(but then don't forget to set android:layout_height="match_parent")
or with:
getSupportActionBar().setBackgroundDrawable(getResources().getDrawable(R.drawable.yourimage));
This is how I was able to set the padding between the home icon and the title.
ImageView view = (ImageView)findViewById(android.R.id.home);
view.setPadding(left, top, right, bottom);
I couldn't find a way to customize this via the ActionBar xml styles though. That is, the following XML doesn't work:
<style name="ActionBar" parent="android:style/Widget.Holo.Light.ActionBar">
<item name="android:titleTextStyle">#style/ActionBarTitle</item>
<item name="android:icon">#drawable/ic_action_home</item>
</style>
<style name="ActionBarTitle" parent="android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textSize">18sp</item>
<item name="android:paddingLeft">12dp</item> <!-- Can't get this padding to work :( -->
</style>
from here:
Padding between ActionBar's home icon and title
Related
I have one button and letterspacing is not working with it. Please check my following snippet code
<style name="ButtonText_v2" parent="TextAppearance.AppCompat">
<item name="fontFamily">#font/silka_regular</item>
<item name="android:letterSpacing">0.1</item>
<item name="android:textSize">#dimen/dimen_14dp</item>
</style>
<style name="PrimaryButton_v2" parent="Widget.AppCompat.Button">
<item name="android:background">#drawable/button_selector_primary</item>
<item name="android:textColor">#color/white</item>
<item name="textAllCaps">true</item>
<item name="textAppearance">#style/ButtonText_v2</item>
</style>
layout.xml File
<Button
android:text="Button"
android:layout_height="56dp"
android:layout_width="200dp"
style="#style/PrimaryButton_v2"
android:layout_margin="15dp"
/>
You can't apply letter spacing in button/custom button because their is some limitation in button component in which you can't make text appearance and background customization and more limitation
the solution for this is instead of button you can use text view and make custom text view it will also work similar to button and customize it according to requirement.
for example :-
https://stackoverflow.com/questions/9477336/how-to-make-a-custom-textview#:~:text=Create%20a%20Custom%20View%20for%20Textview.%20Make%20the,values%20Make%20entries%20of%20all%20fonts%20in%20strings.xml
Add android:letterSpacing in PrimaryButton_v2 it will work perfectly.
<style name="ButtonText_v2" parent="TextAppearance.AppCompat">
<item name="fontFamily">#font/silka_regular</item>
<item name="android:textSize">#dimen/dimen_14dp</item>
</style>
<style name="PrimaryButton_v2" parent="Widget.AppCompat.Button">
<item name="android:background">#drawable/button_selector_primary</item>
<item name="android:textColor">#color/white</item>
<item name="textAllCaps">true</item>
<item name="textAppearance">#style/ButtonText_v2</item>
<item name="android:letterSpacing">0.1</item>
</style>
layout.xml File
<Button
android:text="Button"
android:layout_height="56dp"
android:layout_width="200dp"
style="#style/PrimaryButton_v2"
android:layout_margin="15dp"
/>
I need to change color of materials flat/borderless button when the user clicks on it. My current setup works for raised buttons, but doesn't work for the borderless button.
Style I use, the colorControlHighlight should change the color when pressed?:
<style name="PrimaryFlatButton" parent="Widget.AppCompat.Button.Borderless.Colored">
<item name="colorButtonNormal">#color/primary_color</item>
<item name="colorControlHighlight">#color/primary_color_dark</item>
<item name="colorAccent">#color/primary_color</item>
<item name="android:textColor">#color/white_color</item>
Layout item:
<Button
android:id="#+id/Btn_SignUp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:theme="#style/PrimaryFlatButton" />
Why does raised buttons work but not borderless?
What you need to change is something similar to this
In styles.xml put this
<style name="ButtonTheme" parent="Theme.AppCompat.Light">
<item name="colorControlHighlight">#color/button_highlight</item>
<item name="colorButtonNormal">#color/colorPrimaryDark</item>
<item name="colorControlActivated">#color/button_highlight</item>
</style>
and in xml layout for Button add this as the button theme
<Button
android:id="#+id/sign_in_button"
android:theme="#style/ButtonTheme"
//Other parameters as usual
/>
Change the parent name as follow : (without the "Borderless.Colored")
<style name="PrimaryFlatButton" parent="Widget.AppCompat.Button">
<item name="colorButtonNormal">#color/primary_color</item>
<item name="colorControlHighlight">#color/primary_color_dark</item>
<item name="colorAccent">#color/primary_color</item>
<item name="android:textColor">#color/white_color</item>
</style>
and then set it as "android:theme" like you just did.
I am trying to use a SearchView in my layout (not inside of a ToolBar or ActionBar).
<FrameLayout android:layout_width="0dp" android:layout_weight="50" android:layout_height="wrap_content" >
<android.support.v7.widget.SearchView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|left" style="#style/MySearchViewStyle" />
</FrameLayout>
I am using AppCompat, but it looks different on pre-lollipop. The EditText is missing the bottom border in pre-lollipop devices.
Lollipop Search displays border correctly:
Pre-lollipop Search displays NO border:
My theme is basic:
<style name="Theme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- TOOLBAR -->
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<!-- Search -->
<item name="searchViewStyle">#style/MySearchViewStyle</item>
<item name="android:searchViewStyle">#style/MySearchViewStyle</item>
<!-- COLOURS -->
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/accent</item>
</style>
<style name="MySearchViewStyle" parent="Widget.AppCompat.SearchView">
<item name="android:editTextStyle">#style/EditText</item>
<item name="editTextStyle">#style/EditText</item>
</style>
<style name="EditText">
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:inputType">text</item>
<item name="android:cursorVisible">true</item>
<item name="android:maxLength">1000</item>
<item name="android:selectAllOnFocus">true</item>
<item name="android:paddingTop">4dp</item>
</style>
Any help to get my styles consistent would be great thanks.
As per Source code at https://github.com/android/platform_frameworks_support/blob/master/v7/appcompat/res/layout/abc_search_view.xml
search_src_text view has background set to #null
To get bottom line i used
searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text).setBackgroundResource(R.drawable.abc_textfield_search_default_mtrl_alpha);
UPDATE: For Kotlin + Androidx
searchView.findViewById<EditText>(androidx.appcompat.R.id.search_src_text).setBackgroundResource(R.drawable.abc_textfield_search_default_mtrl_alpha)
I have got the following action menu:
As you can see all of these action menu items are having a
background. i guess it is the same background like the parent.
How can i remove this background?
My style.xml is the following:
<resources xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">
<style name="AppTheme" parent="AppTheme.Base"></style>
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimaryDark">#color/primaryColorDark</item>
<item name="colorPrimary">#color/primaryColor</item>
<item name="colorAccent">#color/accentColor</item>
<item name="android:textColorPrimary">#color/textcolorsecundary</item>
<item name="android:textColorSecondary">#color/textcolorsecundary</item>
<item name="android:actionModeBackground">#color/primaryColor</item>
<item name="android:windowActionModeOverlay">true</item>
<item name="android:activatedBackgroundIndicator">#drawable/custom_background_listview_item</item>
</style>
<style name="AppTheme.Toolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:textColorPrimary">#color/textcolorsecundary</item>
<item name="actionMenuTextColor">#color/textcolorsecundary</item>
<item name="android:textColorSecondary">#color/textcolorsecundary</item>
<item name="android:showDividers">beginning</item>
<item name="android:divider">#color/primaryColorDark</item>
<item name="android:background">#drawable/custom_background_blue</item>
</style>
<style name="AppTheme.Toolbar.PopupMenu" parent="ThemeOverlay.AppCompat.Dark">
<item name="android:popupBackground">#color/primaryColor</item>
</style>
</resources>
My Toolbar:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:elevation="2dp"
android:focusable="false"
app:popupTheme="#style/AppTheme.Toolbar.PopupMenu"
app:theme="#style/AppTheme.Toolbar" >
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:background="#null"
android:textColor="#color/white"
android:textSize="20sp"
android:textStyle="bold" />
</android.support.v7.widget.Toolbar>
The following line is the problem
<style name="AppTheme.Toolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:background">#drawable/custom_background_blue</item>
</style>
Since the above is applied not as style but as a theme (presumably via popupTheme attribute on your Toolbar element), all the widgets inside the toolbar inherit these settings. What you want is android:popupBackground instead of android:background.
Edit: OP stated the above is not sufficient. For styling toolbar's popup menu (not the toolbar itself) use the app:popupTheme attribute. The theme is going to be similar to this:
<style name="AppTheme.Toolbar.PopupMenu" parent="ThemeOverlay.AppCompat.Dark">
<item name="android:popupBackground">#drawable/custom_background_blue</item>
</style>
You're setting the action background color explicitly in your style.xml same as the primary color.
<item name="android:actionModeBackground">#color/primaryColor</item>
Try removing this from your XML or changing it to a color that seems appropriate for your UI and it should work. If you don't choose to manually specify a color for the android:actionModeBackground, it will simple derive it's default value from the parent theme (in your case, Theme.AppCompat.Light.NoActionBar).
I would like to set my spinner drop down color to white, whilst keeping the other elements in my theme the default color. Here is the situation:
<android.support.v7.widget.Toolbar
android:layout_height="#dimen/action_bar_height"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="#style/ToolbarTheme.Base"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"/>
</android.support.v7.widget.Toolbar>
And the style is:
<!-- My base app theme -->
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/theme_tint</item>
<!-- <item name="colorControlNormal">#FFFFFF</item> -->
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="android:typeface">sans</item>
<item name="android:windowBackground">#color/background_primary</item>
</style>
<!-- My Toolbar theme -->
<style name="ToolbarTheme.Base" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="colorControlNormal">#FFFFFF</item>
</style>
If I was to put <item name="colorControlNormal">#FFFFFF</item> in the App theme (commented out above) then the spinner drop down will do to white BUT the checkbox will also turn white. So how can I get the spinner ONLY to go white?
Finally, I have found a solution on how to change arrow color of Spinner to white.
1) In styles.xml, add the following style:
<style name="ActionBarThemeOverlay" parent="">
<item name="android:textColorPrimary">#ffffff</item>
<item name="colorControlNormal">#ffffff</item>
<item name="colorControlHighlight">#ff33b5e5</item>
</style>
<style name="Widget.MyTheme.HeaderBar.Spinner" parent="Widget.AppCompat.Light.Spinner.DropDown.ActionBar">
<item name="android:theme">#style/ActionBarThemeOverlay</item>
</style>
2) In the layout, where you use the Spinner (in your case with Toolbar), add the style to your spinner:
<Spinner
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/my_spinner"
style="#style/Widget.MyTheme.HeaderBar.Spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
Just stumbled across this questions. Even though it has been asked some time ago I just wanted to leave an answer that should work:
Toolbar *.xml
<android.support.v7.widget.Toolbar
<!-- leave the theme stuff out of here -->
style="#style/MyToolbarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content">
Styles / Themes
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- your other attributes -->
<!-- following is used to tint the checkbox - purple for demo purpose -->
<item name="colorControlNormal">#2196F3</item>
</style>
<style name="MyToolbarStyle">
<item name="android:minHeight">?actionBarSize</item>
<item name="android:background">?colorPrimary</item>
<item name="popupTheme">#style/ThemeOverlay.AppCompat.Light</item>
<item name="theme">#style/MyToolbarTheme</item>
</style>
<style name="MyToolbarTheme">
<!-- Used to tint the back arrow, menu and spinner arrow -->
<item name="colorControlNormal">#FFF</item>
</style>
Result
Note: I made the checkbox purple for demo purpose