Develop Reference

Distributing menu items evenly on Actionbar in AppCompat theme

I want my action bar to display 5 icons. Since I don't have enough space for displaying main content. So I couldn't use two tabs instead of one. I want the actionbar look like this.
But Instead it looks something like this taking un-necessary space.
I'm not interested in displaying the Appname or app icon. I tried doing several things from stackoverflow but most of them are not working probably because I'm using appcompat theme but android has deprecated the ActionBarActivity so I am bound to use the AppCompat. And most of the answers on stackoverflow works with ActionBarActivity. So, I'm stuck with this problem for last two days
Here's the main Activity
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import com.navdrawer.SimpleSideDrawer;
public class MainActivity extends AppCompatActivity {
private SimpleSideDrawer mNav;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mNav = new SimpleSideDrawer(this);
mNav.setRightBehindContentView(R.layout.activity_behind_left_simple);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
// Inflate the menu items for use in the action bar
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.menu_main, menu);
return super.onCreateOptionsMenu(menu);
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
switch (item.getItemId()) {
case R.id.action_map:
return true;
case R.id.action_transport:
return true;
case R.id.action_hotel_food:
return true;
case R.id.action_travel_more:
return true;
case R.id.action_logo:
mNav.toggleRightDrawer();
default:
return super.onOptionsItemSelected(item);
}
}
}
Menu xml code
<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"
xmlns:Journey="http://schemas.android.com/apk/res-auto"
tools:context=".MainActivity">
<item android:id="#+id/action_map"
android:icon="#drawable/ic_action_map"
android:title="#string/action_map"
Journey:showAsAction="always"/>
<item android:id="#+id/action_transport"
android:icon="#drawable/ic_action_transport"
android:title="#string/action_transport"
Journey:showAsAction="always"/>
<item android:id="#+id/action_hotel_food"
android:icon="#drawable/ic_action_hotel_food"
android:title="#string/action_hotel_food"
Journey:showAsAction="always"/>
<item android:id="#+id/action_travel_more"
android:icon="#drawable/ic_action_travel_more"
android:title="#string/action_travel_more"
Journey:showAsAction="always"/>
<item android:id="#+id/action_logo"
android:icon="#drawable/ic_action_logo"
android:title="#string/action_logo"
Journey:showAsAction="always"/>
</menu>
styles.xml file
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- Customize your theme here. -->
</style>
</resources>
Manifest File
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="********" >
<application
android:allowBackup="true"
android:icon="#mipmap/ic_launcher"
android:label="#string/app_name"
android:theme="#style/AppTheme" >
<activity
android:name=".MainActivity"
android:icon="#mipmap/ic_launcher">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
I'm new to programming and I have a design background. So if the answer is explained with proper codes then that will be very useful. Thanks a lot for help.

Actionbar not showing with PagerSlidingTabStrip

I have created a sliding tab by using PagerSlidingTabStrip. it is created correctly but the action bar get lost it is showing like this :
Is any help me on this why action bar is disabled.
import com.astuetz.PagerSlidingTabStrip;
public class SMainTabActivity extends FragmentActivity implements ETabFragment.OnFragmentInteractionListener,
MTabFragment.OnFragmentInteractionListener{
public String classSelected;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_INDETERMINATE_PROGRESS);
setProgressBarIndeterminateVisibility(true);
setProgressBarIndeterminateVisibility(false);
setContentView(R.layout.activity_subject_main_tab);
Bundle b = getIntent().getExtras();
classSelected = b.getString("classId");
// Get the ViewPager and set it's PagerAdapter so that it can display items
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
viewPager.setAdapter(new TabFragmentPagerAdapter(getSupportFragmentManager()));
// Give the PagerSlidingTabStrip the ViewPager
PagerSlidingTabStrip tabsStrip = (PagerSlidingTabStrip) findViewById(R.id.tabs);
// Attach the view pager to the tab strip
tabsStrip.setViewPager(viewPager);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.activity_main_actionsbar, menu);
return super.onCreateOptionsMenu(menu);
// getMenuInflater().inflate(R.menu.activity_main_actionsbar, menu);
//return true;
}
xml (activity_subject_main_tab):
<LinearLayout 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:orientation="vertical">
<com.astuetz.PagerSlidingTabStrip
android:id="#+id/tabs"
app:pstsShouldExpand="true"
app:pstsTextAllCaps="true"
android:layout_width="match_parent"
android:layout_height="48dp"
android:textSize="14sp"
android:textColor="#000000"
app:pstsDividerColor="#color/color1"
app:pstsIndicatorColor="#color/color2"
app:pstsUnderlineColor="#color/color3"
app:pstsTabPaddingLeftRight="14dp">
</com.astuetz.PagerSlidingTabStrip>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white" />
manifest:
<application
android:allowBackup="true"
android:icon="#mipmap/ic_launcher"
android:label="#string/app_name"
android:theme="#style/AppTheme" >
<activity
android:name=".MainActivity"
android:label="#string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name=".SubjectMainTabActivity"
android:label="#string/title_activity_subject_main_tab" >
</activity>
</application>
Expected is :

It could simply be that in your xml file, you made you Actionbar 0dp. Another issue could be that you are not using the right theme for the App. The theme that gets the action bar would be set in your style.xml like so:
<style name="MyMaterialTheme" parent="MyMaterialTheme.Base">
</style>
<style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">true</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
Then to call it in your AndroidManifest.xml, like so:
android:theme="#style/MyMaterialTheme"
NOTE: You would need to add the colors in the styles.xml to your choosing.
Also, If you are completely stuck, use this example for a better more Android supported Material Design Guide http://www.android4devs.com/2014/12/how-to-make-material-design-app.html

I had the same problem, to solve it just extend ActionBarActivity instead of FragmentActivity and it will work.

How to change Viewpager tab colour dynamically?

How to change colour of Tabs like this? When I click/swipe to green or any other tab, the tab colour should change to that appropriate colour and rest of other tabs colour should change to black. How can I do this? Im using Viewpager.
I tried this code inside onpagelistener:
if(position == 0) {
viewpager.getChildAt(position).setBackgroundColour(getResources().getcolor(R.color.red);
}
else if(position == 1) {
viewpager.getChildAt(position).setBackgroundColour(getResources().getcolor(R.color.green);
}
But above code has no effect.
And Im using this code : Android Viewpager tutorial Androidhive

Finally I solved it. Thanks to #Xcihnegn for his idea. This is the solution:
/* For setting default selected tab */
actionBar.setSelectedNavigationItem(0);
actionBar.getTabAt(0).setCustomView(R.layout.fragmnt_red);
/**
* on swiping the viewpager make respective tab selected
* */
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageSelected(int position) {
/*on changing the page make respected tab selected */
actionBar.setSelectedNavigationItem(position);
if(position == 0)
{
actionBar.getSelectedTab().setCustomView(R.layout.fragmnt_red);
}else if(position == 1)
{
actionBar.getSelectedTab().setCustomView(R.layout.fragmnt_orange);
}else if(position == 2)
{
actionBar.getSelectedTab().setCustomView(R.layout.fragmnt_green);
}
}
}
#Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
#Override
public void onPageScrollStateChanged(int arg0) {
}
});
}
#Override
public void onTabSelected(ActionBar.Tab tab, android.support.v4.app.FragmentTransaction fragmentTransaction) {
viewPager.setCurrentItem(tab.getPosition());
}
When one tab gets unselected, setCustomView(null) changes its layout back to its original black colour. So only selected tabs will change colour. Unselecting the tabs will change its layout to original form.
#Override
public void onTabUnselected(ActionBar.Tab tab, android.support.v4.app.FragmentTransaction fragmentTransaction) {
if(tab.getPosition() == 0)
{
actionBar.getTabAt(0).setCustomView(null);
}else if(tab.getPosition() == 1)
{
actionBar.getTabAt(1).setCustomView(null);
}else if(tab.getPosition() == 2)
{
actionBar.getTabAt(2).setCustomView(null);
}
}
}
To remove unnecessary padding appear when setting the custom view we should use this code in styles.xml.
<style name="Custom.ActionBar.TabView.Empty" parent="#android:style/Widget.ActionBar.TabView">
<item name="android:paddingLeft">0dp</item>
<item name="android:paddingRight">0dp</item>
<item name="android:background">#000000</item>
</style>
<style name="CustomActionbartab" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="actionBarTabStyle">#style/Custom.ActionBar.TabView.Empty</item>
<item name="android:actionBarTabStyle">#style/Custom.ActionBar.TabView.Empty</item>
</style>
Dont forget to add the this code just above setcontentview in your activity.
settheme(R.styles.CustomActionbartab);
Custom layout for tabs.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/red">
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="RED"
android:textStyle="bold"
android:gravity="center"
android:textColor="#ffffff"/>
</RelativeLayout>

There is tutorial Styling tabs in the Android action bar. You can choose your parent theme as Theme.Holo for API>=3, or Theme.AppCompat for support library V7, etc.
And besides, for <item name="android:background">, you could set it to a selector you create for tab state change:
android:background="#drawable/selector_tab"
For selector_tab can be like:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/pressed_color"
android:state_pressed="true" />
<item android:color="#color/selected_color"
android:state_selected="true" />
<item android:color="#color/normal_color" />
</selector>
[UPDATE]
For change tab color dynamically, suggest to use custom view with tab:
//your_custom_tab.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="wrap_content"
>
<TextView
android:id="#+id/tab_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:maxLines="1" />
</LinearLayout>
LinearLayout customView = (LinearLayout) getLayoutInflater().inflate(R.layout.your_custom_tab, null);
then setCustomeView(customView) when add tab to ActionBar. And in your tab/page change listener:
Tab selectedTab = yourActionBar.getSelectedTab();
View tabView = selectedTab.getCustomView();
tabView.setBackgroundColor(your_select_color);
To remove possible gap around tab caused by custom view, you can set tab style:
<style name="ActionBarTabStyle" parent="#android:style/Widget.AppCompat.Light.ActionBar.TabView">
<item name="android:paddingLeft">0dp</item>
<item name="android:paddingRight">0dp</item>
<item name="android:paddingTop">0dp</item>
<item name="android:paddingBottom">0dp</item>
</style>
and use your theme parent accordingly.
Hope this help!

I had a similar problem. In my case, I wanted to change the color of the action bar whenever the user clicked on one of the fragments in the navigation drawer.
Here is the code I used to resolve this issue.
Since you can't access the Action bar from a fragment, you have to create it in your main menu. Here is the method I used.
public void restoreActionBar(int parsedColor) {
this.parsedColor = parsedColor;
ActionBar actionBar = getSupportActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
actionBar.setDisplayShowTitleEnabled(true);
actionBar.setTitle(mTitle);
actionBar.setBackgroundDrawable(new ColorDrawable(parsedColor));
}
public boolean onCreateOptionsMenu(Menu menu) {
if (!mNavigationDrawerFragment.isDrawerOpen()) {
// Only show items in the action bar relevant to this screen
// if the drawer is not showing. Otherwise, let the drawer
// decide what to show in the action bar.
getMenuInflater().inflate(R.menu.main_activity_trekkly, menu);
restoreActionBar(parsedColor);
return true;
}
return super.onCreateOptionsMenu(menu);
}
Now in your class that extends fragment:
public void onAttach(Activity activity) {
super.onAttach(activity);
((MainActivityTrekkly)activity).onSectionAttached(4);
MainActivityTrekkly mA = ((MainActivityTrekkly)getActivity());
mA.restoreActionBar(Color.parseColor("#028482"));
}
I got this working with the Navigation drawer so you might have to adapt this code.
Did this help?

Nothing is showing up in the action bar

I have made a custom theme for my app which uses action bar.Now when i run my app the actionbar is visible but button in it is not visible.I dont know what went wrong.
The button is visible when i click on menu button (the 3 hardware button) but not displaying on the action bar
Style.Xml
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
</style>
<style name="TripLoggerTheme" parent="android:Theme.Holo.Light">
<item name="android:actionBarStyle">#style/TripLoggerActionBar</item>
<!--<item name="android:homeAsUpIndicator">#drawable/test</item>-->
</style>
<!--use to style the actionbar-->
<style name="TripLoggerActionBar" parent="android:Widget.ActionBar">
<item name="android:background">#6e784c</item>
<item name="android:showAsAction">ifRoom|always|collapseActionView|never|withText</item>
<item name="android:displayOptions">homeAsUp|showHome|showTitle</item>
</style>
Menu.Xml
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/action_settings"
android:title="#string/action_settings"
android:icon="#drawable/images"
app:showAsAction="always" />
</menu>
Code
public class MainActivity extends Activity {
private int[] images = {R.drawable.images, R.drawable.images_2, R.drawable.images_1, R.drawable.images_4, R.drawable.images, R.drawable.images_2};
private GridView gridView;
private LinearLayout linearLayout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.base_activity);
linearLayout = (LinearLayout) findViewById(R.id.root);
getActionBar();
// gridView = (GridView) findViewById(R.id.grid);
// gridView.setAdapter(new CustomAdapter(MainActivity.this, images));
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.menu_main, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.action_settings:
linearLayout.setVisibility(View.VISIBLE);
break;
}
return true;
}
As the screenshots shows,when i click on the 3 dots from below test is visible but it should be visible on the top where i have marked a cross
I tried finding out what could be the problem but all in vain.

I believe what you are experiencing is the standard Android behaviour. You may want to read the following text on the official docs on Action Overflow:
The overflow icon only appears on phones that have no menu hardware keys. Phones with menu keys display the action overflow when the user presses the key.
First, from snapshot, it seems that you are testing in emulator. Check if same happens on the device.

Remove action bar shadow programmatically

How can i remove the drop shadow of action bar from java code ?.
If i remove from the style it is working fine.
<style name="MyTheme" parent="Theme.Sherlock">
....
<item name="windowContentOverlay">#null</item>
<item name="android:windowContentOverlay">#null</item>
....
</style>
But i need to remove and add it dynamically from java code.

There is no way to set value for windowContentOverlay attribute programmatically. But you can define two different themes, one for Activities with a visible ActionBar shadow and one for others:
<!-- Your main theme with ActionBar shadow. -->
<style name="MyTheme" parent="Theme.Sherlock">
....
</style>
<!-- Theme without ActionBar shadow (inherits main theme) -->
<style name="MyNoActionBarShadowTheme" parent="MyTheme">
<item name="windowContentOverlay">#null</item>
<item name="android:windowContentOverlay">#null</item>
</style>
Now you can set them to activities in AndroidManifest.xml:
<!-- Activity with ActionBar shadow -->
<activity
android:name=".ShadowActivity"
android:theme="#style/MyTheme"/>
<!-- Activity without ActionBar shadow -->
<activity
android:name=".NoShadowActivity"
android:theme="#style/MyNoActionBarShadowTheme"/>
Or you can set the right theme programmatically in onCreate() method:
#Override
protected void onCreate(Bundle savedInstanceState) {
setTheme(R.style.MyNoActionBarShadowTheme);
super.onCreate(savedInstanceState);
//...
}

If you won't make more theme, then try this. This works nicely for me!
public void disableActionbarShadow() {
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) {
View v = getActivity().findViewById(android.R.id.content);
if (v instanceof FrameLayout) {
((FrameLayout) v).setForeground(null);
}
}else {
// kitkat.
// v is ActionBarOverlayLayout. unfortunately this is internal class.
// if u want to check v is desired class, try this
// if(v.getClass().getSimpleName.equals("ActionBarOverlayLayout"))
// (we cant use instanceof caz ActionBarOverlayLayout is internal package)
View v = ((ViewGroup)getActivity().getWindow().getDecorView()).getChildAt(0);
v.setWillNotDraw(true);
}
}
From Kitkat(maybe), ActionBarOverlayLayout is included in activity's view tree.
This shows actionbar shadow (I think XD)
refs: http://grepcode.com/file/repository.grepcode.com/java/ext/com.google.android/android/4.4_r1/com/android/internal/widget/ActionBarOverlayLayout.java#79
Becaraful I don't know whats happen if using support library version.

I know this question is old, but this problem was new for me, so it might help somebody else as well.
Try:
getSupportActionBar().setElevation(0);
Or, if you are not using a custom action bar:
getActionBar().setElevation(0);
I think this is the easiest way to do it programmatically.

Define a new style like this. Notice that there's no parent defined:
<style name="ConOver" > <<== no parent
<item name="android:windowContentOverlay">#null</item>
</style>
Add this above your code:
// Add this line before setContentView() call
// Lets you add new attribute values into the current theme
getTheme().applyStyle(R.style.ConOver, true);
// Rest stays the same

Declare 2 styles ne has a shadow and the other one doesn't. THen in your manifest define each activity's theme with respective one.
e.g
<Activity
android:theme="#style/ThemeShadow" ...>
...
<Activity
android:theme="#style/ThemeNoShadow" ...>

I found this article:
Change Theme of Layout Runtime by Button Click in Android
It allows you to change the theme of an activity, but it does call finish() and restart the activity. So, I am not sure it will work for what you want.
import android.app.Activity;
import android.content.Intent;
public class Utils
{
private static int sTheme;
public final static int THEME_DEFAULT = 0;
public final static int THEME_WHITE = 1;
public final static int THEME_BLUE = 2;
/**
* Set the theme of the Activity, and restart it by creating a new Activity of the same type.
*/
public static void changeToTheme(Activity activity, int theme)
{
sTheme = theme;
activity.finish();
activity.startActivity(new Intent(activity, activity.getClass()));
}
/** Set the theme of the activity, according to the configuration. */
public static void onActivityCreateSetTheme(Activity activity)
{
switch (sTheme)
{
default:
case THEME_DEFAULT:
activity.setTheme(R.style.FirstTheme);
break;
case THEME_WHITE:
activity.setTheme(R.style.SecondTheme);
break;
case THEME_BLUE:
activity.setTheme(R.style.Thirdheme);
break;
}
}
}

If supportActionBar.elevation=0f did not work for you,
You can remove the shadow by setting appBar.targetElevation=0f but this method is deprecated.
The new method is using StateListAnimator.
You have to set the stateListAnimator to AppBarLayout without elevation that can be achieved by the steps below
Create animator resource appbar_animator.xml
<item
android:state_enabled="true"
app:state_collapsed="false"
app:state_collapsible="true">
<objectAnimator
android:duration="150"
android:propertyName="elevation"
android:valueTo="0dp"
android:valueType="floatType" />
</item>
<item android:state_enabled="true">
<objectAnimator
android:duration="150"
android:propertyName="elevation"
android:valueTo="0dp"
android:valueType="floatType" />
</item>
<item>
<objectAnimator
android:duration="0"
android:propertyName="elevation"
android:valueTo="0"
android:valueType="floatType" />
</item>
android.valueTo="0dp" defines the elevation.
Inflate and set the StateListAnimator to appBar
val stateAnimator=AnimatorInflater.loadStateListAnimator(this,R.animator.appbar_animator);
appBar.stateListAnimator=stateAnimator
StateListAnimator was added in api 21 Lollipop