I am trying to put a spinner in my Toolbar like the old ActionBar style navigation and my theme is this
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/color_primary</item>
<item name="colorPrimaryDark">#color/color_primary_dark</item>
<item name="colorAccent">#color/color_primary</item>
</style>
but my spinner is black while all other icons and overflow menus are white so it looks bad
I tried changing the style of the spinner using this
<style name="ToolbarSpinnerTheme" parent="Theme.AppCompat">
<item name="android:spinnerItemStyle">#style/TextAppearanceSpinnerItem</item>
</style>
<style name="TextAppearanceSpinnerItem">
<item name="android:textColor">#FFFFFF</item>
</style>
this is how my Toolbar is styled
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/modes"
android:minWidth="150dp"
android:gravity="bottom"
style="#style/ToolbarSpinnerTheme"/>
</android.support.v7.widget.Toolbar>
final Spinner mode = (Spinner)findViewById(R.id.modes);
SpinnerAdapter mSpinner = ArrayAdapter.createFromResource(this, R.array.action_bar_spinner, android.R.layout.simple_spinner_dropdown_item);
mode.setAdapter(mSpinner);
but it always stays black. How can I change the spinner arrow and text to white while still keeping the same theme for the dropdown style as you would get with the Light theme?
Update 4.4 arrow fix:
The only way I got the arrow to turn white is to add the spinner programatically and not in xml so it looks something like this
final ArrayAdapter spinnerAdapter = ArrayAdapter.createFromResource(getSupportActionBar().getThemedContext(),
R.array.main_navigation_list, R.layout.spinner_text);
spinnerAdapter.setDropDownViewResource(R.layout.spinner_dropdown_item);
mNavigationTags = getResources().getStringArray(R.array.main_navigation_list);
mNavigationSpinner = new Spinner(getSupportActionBar().getThemedContext());
mNavigationSpinner.setAdapter(spinnerAdapter);
mNavigationSpinner.setOnItemSelectedListener(this);
mToolbar.addView(mNavigationSpinner)
I do it like the following:
navigation_toolbar.xml
<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="fill_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
MainActivity.java
ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this,
R.array.pass_type, R.layout.layout_drop_title);
adapter.setDropDownViewResource(R.layout.layout_drop_list);
Spinner mNavigationSpinner = new Spinner(getSupportActionBar().getThemedContext());
mNavigationSpinner.setAdapter(adapter);
getToolbar().addView(mNavigationSpinner);
You will find I used custom spinner item layout, layout_drop_title and layout_drop_list
layout_drop_title.xml
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/text1"
style="?attr/spinnerDropDownItemStyle"
android:singleLine="true"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:textColor="#color/white"
android:ellipsize="marquee"/>
layout_drop_list.xml
<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/text1"
style="?android:attr/spinnerDropDownItemStyle"
android:singleLine="true"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:ellipsize="marquee"
android:background="#color/nliveo_blue_colorPrimary"
android:textColor="#color/white"/>
Kevin is in the right direction but the real answer is not to use the application context but the already themed context of the action bar itself. This is actually mentioned in the documenation but it doesn't get that much emphasis all along:
When inflating anything to be displayed on the action bar (such as a
SpinnerAdapter for list navigation in the toolbar), make sure you use
the action bar’s themed context, retrieved via
getSupportActionBar().getThemedContext().
When you create the arrayadapter you should do getApplicationContext instead of this:
SpinnerAdapter mSpinner = ArrayAdapter.createFromResource(getApplicationContext(), R.array. action_bar_spinner, android.R.layout.simple_spinner_dropdown_item);
Make a new layout file:
<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/text1"
style="?android:attr/spinnerDropDownItemStyle"
android:singleLine="true"
android:layout_width="match_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:ellipsize="marquee"
android:textColor="#000000"/>
Then change your code to this:
ArrayAdapter mAdapter = ArrayAdapter.createFromResource(getApplicationContext(), R.array. action_bar_spinner, android.R.layout.simple_spinner_dropdown_item);
mAdapter.setDropDownViewResource(R.layout.spinner_dropdown_item);
mode.setAdapter(mAdapter);
Have you tried putting the spinner in the xml file like this:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:background="?attr/colorPrimary">
<Spinner
android:id="#+id/spinner_nav"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.v7.widget.Toolbar>
And also disable the title like this:
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);
Answer is from Chris Banes: https://stackoverflow.com/a/26511653/2767703
Related
Image how the searchView autocomplete is appearing
The searchView AutoComplete is appearing with black border as shown in image and I haven't made any custom layout still it is showing that black border and hiding the text.Below the code is also attached that I have used.`
getMenuInflater().inflate(R.menu.main, menu);
this.menu = menu;
menuItem = menu.findItem(R.id.action_search);
searchView = (SearchView) MenuItemCompat.getActionView(menuItem);
menuItem.setVisible(false);
final SearchView.SearchAutoComplete searchAutoComplete =
searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text);
searchAutoComplete.setDropDownBackgroundResource(android.R.color.white);
searchAutoComplete.setDropDownAnchor(R.id.action_search);
ArrayAdapter<String> searchadapter = new ArrayAdapter<String>(this,
android.R.layout.simple_dropdown_item_1line,
all_products);
searchAutoComplete.setAdapter(searchadapter);
`
Menu Code It is the Item that is used for opening search option.
<item android:id="#+id/action_search"
android:title="#string/action_search"
android:icon="#drawable/ic_search_white_24dp"
app:showAsAction="collapseActionView|ifRoom"
app:actionViewClass="android.support.v7.widget.SearchView"/>
AppBar layout Code It is the code made for Creating the App Action Bar But how this is affecting the search autocomplete to appear black border around it and hiding the search text.
<android.support.design.widget.AppBarLayout
android:id="#+id/main_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="false"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<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/main_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
app:theme="#style/CustomActionBar">
<TextView
android:layout_width="wrap_content"
android:textColor="#FFF"
android:textSize="18sp"
android:textStyle="bold"
android:layout_height="wrap_content"
android:text="Avrutti Electronics"/>
<ProgressBar
android:id="#+id/progressBar4"
style="?android:attr/progressBarStyle"
android:layout_width="match_parent"
android:layout_marginTop="10dp"
android:layout_height="35dp"/>
<requestFocus />
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/main_tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:visibility="visible"
app:tabMode="scrollable"
app:tabSelectedTextColor="#color/colorAccent" />
</android.support.design.widget.AppBarLayout>
I Found my Question answer It is problem because I was trying to override the theme Appcompat.light through
searchAutoComplete.setDropDownBackgroundResource(android.R.color.white);
So as soon as I removed this statement the border was removed.
From my observations, this is caused by the theme you're using ThemeOverlay.AppCompat.Dark.ActionBar. Change your themes to something that have ...Light.ActionBar in its its name Or simply modify your theme in styles.xml and add the following snippet to it.
<item name="android:dropDownItemStyle">#style/myDropDownItemStyle</item>
<item name="android:dropDownListViewStyle">#style/myDropDownListViewStyle</item>
Hello I'm using a Tollbar and inside I added some drawable items in the menu options. What I want is to put a number inside those drawable. Like the image below
View post on imgur.com
I know there are other post related to this but not with a Toolbar and I need to is a Toolbar.
Thank you
The simpliest way is to use TextView with star background:
<TextView
android:id="#+id/notification"
android:layout_width="#dimen/notification_width"
android:layout_height="#dimen/notification_height"
android:background="#drawable/bg_star"
android:gravity="center"
android:textColor="#android:color/white"
tools:text="5" />
You can use obvious TextView's setText() method to set or hide notification text.
To add this layout to your Toolbar use Android menu's app:actionLayout parameter:
<menu 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">
<item
android:id="#+id/action_notifications"
app:actionLayout="#layout/view_notification"
app:showAsAction="always" />
</menu>
And in your Activity inflate menu like this:
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.notification_menu, menu);
return true;
}
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_top"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#color/action_bar_bkgnd"
app:theme="#style/ToolBarTheme" >
<TextView
android:background="#drawable/bg_star"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Toolbar Title"
android:id="#+id/notification"
android:layout_gravity="center"
android:id="#+id/toolbar_title" />
</android.support.v7.widget.Toolbar>
Toolbar toolbarTop = (Toolbar) findViewById(R.id.toolbar_top);
TextView mTitle = (TextView) toolbarTop.findViewById(R.id.toolbar_title);
In my app I've got a theme without an action bar, but for one of my activities I need an action bar with white title. So, here is it's code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:background="#color/color_primary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:title="Title"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<fragment android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/toolbar"
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"/>
</RelativeLayout>
As you see, this activity also contains Google Maps Fragment.
Result:
As you see, title color is not white. Why? I wonder.
After #Raghunandan: Just add this string to you AppBaseTheme in styles.xml:
<item name="android:textColorPrimary">#android:color/white</item>
Try this
toolbar.setTitleTextColor(Color.WHITE);
Hope this helps
if(Build.VERSION.SDK_INT>=11){
android.app.ActionBar ab=getActionBar();
ab.setBackgroundDrawable(new ColorDrawable(0xff3b3f54));//3b3f54 is html color code for purple, you can put any desired color code like ffffff for white
ab.setDisplayHomeAsUpEnabled(true);
}
Hi I have implemented the toolbar with translucent statusbar set to true. The textview in the toolbar is appearing correctly after padding the status bar height in "onCreate" method. However, the menu items are not aligned properly as shown in the image.
It seems the padding shifted the toolbar correctly but somehow it affected the menu items. What could be the cause and how could we align the menu item in the toolbar with transparent statusbar?
Here is the toolbar in the layout:
<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="match_parent"
android:fitsSystemWindows="false"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/main_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:background="#drawable/toolbar_bg">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Toolbar Title"
android:textColor="#color/white"
android:textSize="16dp"
android:layout_gravity="center"
android:id="#+id/toolbar_title" />
</android.support.v7.widget.Toolbar>
In the theme it was set the translucentStatus = true:
<style name="AppThemePink" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:clipToPadding">true</item> ...
In the Activity, onCreate method:
mainToolBar = (Toolbar) findViewById(R.id.main_toolbar);
setSupportActionBar(mainToolBar);
mainToolBar.setPadding(0, Util2.getStatusBarHeight(this), 0, 0);
final ActionBar actionbar = getSupportActionBar();
actionbar.setDisplayShowTitleEnabled(false);
I'm using PagerTabStrip in ViewPager to show the title of each page. Here is my XML code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<android.support.v4.view.PagerTabStrip
android:id="#+id/pager_title_strip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#33b5e5"
android:textColor="#a4c639"
android:paddingTop="4dp"
android:paddingBottom="4dp" />
</android.support.v4.view.ViewPager>
</RelativeLayout>
I want to set the textStyle to bold in PagerTabStrip like this:
android:textStyle="bold". But this is not possible in PagerTabStrip. Seems like it has only textcolor property for text. What is the way by which I can set the style to bold?
What you need to do is create a style for the text, and then use the android:textAppearance attribute...
Perhaps something like this:
<style name="PagerTabStripText">
<item name="android:textSize">14sp</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">#a4c639</item>
</style>
And then in your PagerTabStrip XML do this:
<android.support.v4.view.PagerTabStrip
android:id="#+id/pager_title_strip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#33b5e5"
android:paddingTop="4dp"
android:paddingBottom="4dp"
android:textAppearance="#style/PagerTabStripText"/>
PagerTabStrip doesn't aceppts textAppearance.
Like #Justin said above, but on xml put:
style="#style/PagerTabStripText"
not:
android:textAppearance="#style/PagerTabStripText"
If you'd like to style the center tab title differently from the others, then you'll need to use reflection:
try {
final Class pagerTitleStripClass = PagerTitleStrip.class;
final Field mCurrTextField = pagerTitleStripClass.getDeclaredField("mCurrText");
mCurrTextField.setAccessible(true);
// mTitle is my class's PagerTabStrip member variable
final TextView mCurrText = (TextView) mCurrTextField.get(mTitle);
mCurrText.setTypeface(Typeface.DEFAULT_BOLD);
} catch (final Exception e) {
Log.w(TAG, "Exception when styling currently selected title!", e);
}
Unfortunately, this solution is subject to potentially not working anymore when updates for the Android Support Library are released (as that's where the PagerTitleStrip class is from). In particular, this code sample is working with revision 20.