Develop Reference

How to change color of homeAsUpIndicator in android?

I am developing an app in which I have one activity known as "AboutPreference" which extends PreferenceActivity and I had added a toolbar in postCreate() method. Problem is that I want to change "homeAsUpIndicator" color from black to white. How do i do that
code:-
protected void onPostCreate(Bundle savedInstanceState) {
super.onPostCreate(savedInstanceState);
LinearLayout root = (LinearLayout)findViewById(android.R.id.list).getParent().getParent().getParent();
Toolbar bar = (Toolbar) LayoutInflater.from(this).inflate(R.layout.about_toolbar, root, false);
root.addView(bar, 0); // insert at top
bar.setNavigationOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
finish();
}
});
}
toolbar
<android.support.v7.widget.Toolbar
android:id="#+id/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:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
app:navigationIcon="?attr/homeAsUpIndicator"
android:minHeight="?attr/actionBarSize"
app:navigationContentDescription="#string/abc_action_bar_up_description"
app:theme="#style/ToolTheme"
app:title="About Us"
tools:ignore="PrivateResource"/>
and here is style
<style name="ToolTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:textStyle">bold</item>
<item name="android:textColor">#color/white</item>
<item name="android:textColorSecondary">#color/white</item>
<item name="android:textColorPrimaryInverse">#color/white</item>
<item name="android:textSize">20sp</item>
<item name="android:homeAsUpIndicator">#color/White</item>
<item name="colorPrimary">#F5560A</item>
<item name="colorPrimaryDark">#color/accent</item>
<item name="android:navigationBarColor">#color/accent</item>
<item name="colorAccent">#color/accent</item>
</style>

By accessing navigation icon from toolbar we can change color
toolbar.getNavigationIcon().setColorFilter(color, PorterDuff.Mode.SRC_IN);
if its not working try this
toolbar.getNavigationIcon().mutate().setColorFilter(color, PorterDuff.Mode.SRC_IN);

You can use a custom image and specify the same in styles as below
<item name="homeAsUpIndicator">#drawable/ic_back</item>
<item name="android:homeAsUpIndicator">#drawable/ic_back</item>

How to add an customized button on the actionbar?

I want to make an action bar with a button on the right with a margin_right. like this
And I use the action button to do it. But the button was on the right without margin_right.
android:layout_marginRight doesn't work here.
here is my styles.xml:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<item name="android:actionBarSize">50dp</item>
<item name="android:actionBarStyle">#style/my_actionbar_style</item>
<item name="android:actionButtonStyle">#style/my_action_button</item>
</style>
<style name="my_actionbar_style" parent="android:Widget.ActionBar">
<item name="android:background">#color/actionbar_backgroud</item>
<item name="android:titleTextStyle">#style/myTitleStyle</item>
<item name="android:displayOptions">showTitle</item>
</style>
<style name="myTitleStyle">
<item name="android:textColor">#ffffff</item>
<item name="android:textSize">20sp</item>
</style>
<style name="my_action_button">
<item name="android:background">#drawable/button_selector</item>
<item name="android:width">70dp</item>
<item name="android:textSize">13sp</item>
<item name="android:layout_marginTop">10dp</item>
<item name="android:layout_marginBottom">10dp</item>
<item name="android:layout_marginRight">10dp</item>
</style>
and this is my menu.xml:
<menu xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
tools:ignore="AppCompatResource">
<item
android:id="#+id/action_search"
android:title="submit"
android:showAsAction="always" /></menu>

Another quick and clean way to go about this is specifying your own layout for that menu button. something like this
<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"
tools:context="com.example.MainActivity">
<item
android:id="#+id/action_custom_button"
android:title="Custom Button"
android:icon="#drawable/ic_custom_button"
app:actionLayout="#layout/layout_to_custom_button"
app:showAsAction="always" />
</menu>
there should be
layout_to_custom_button.xml
layout file which contains the padding and style you wanted.
and also do this in your activity for the click event
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_product_detail, menu);
final Menu mMenu = menu;
final MenuItem item = menu.findItem(R.id.action_custom_button);
item.getActionView().setOnClickListener(new View.OnClickListener(){
#Override
public void onClick(View v) {
mMenu.performIdentifierAction(item.getItemId(), 0);
}
});
return true;
}

I found the easiest way to do this was to just create your own action bar in a layout file. You can then use it by having your activities inherit from a common activity that overrides setContentView, where you just stick the view you're given into a parent view containing that and your action bar. You can mimick the overflowing menu behavior by using ActionMenuView (5.0+).
For example, assume you have an action_bar.xml with an ActionMenuView in it named menuView:
class BaseActivity extends Activity {
...
ActionMenuView mMenuView;
...
#Override
protected void setContentView(int resId) {
LayoutInflater inflater = getLayoutInflater();
View actionBar = inflater.inflate(R.layout.action_bar, null);
View contentView = inflater.inflate(resId);
mMenuView = (ActionMenuView)actionBar.findViewById(R.id.menuView);
RelativeLayout parentLayout = new RelativeLayout(this);
LayoutParams actionBarLayout = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
actionBar.setLayoutParams(actionBarLayout);
parentLayout.addView(actionBar);
actionBar.setId(R.id.actionBar);
LayoutParams contentLayout = new LayoutParams(LayoutParams.MATCH_PARENT, 0);
contentLayout.addRule(RelativeLayout.BELOW, actionBar.getId());
contentLayout.addRule(RelativeLayout.ALIGN_WITH_PARENT_BOTTOM);
contentView.setLayoutParams(contentLayout);
parentLayout.addView(contentView);
setContentView(parentLayout);
}
}

Android transparent status bar and actionbar

I've done a few researches on this topic and I couldn't find a complete solution so, step by step and with some trial and error, I finally find out how can we achieve these results: having a transparent or coloured Actionbar and Statusbar. See my answer bellow.

I'm developing an app that needs to look similar in all devices with >= API14 when it comes to actionbar and statusbar customization. I've finally found a solution and since it took a bit of my time I'll share it to save some of yours.
We start by using an appcompat-21 dependency.
Transparent Actionbar:
values/styles.xml:
<style name="AppTheme" parent="Theme.AppCompat.Light">
...
</style>
<style name="AppTheme.ActionBar.Transparent" parent="AppTheme">
<item name="android:windowContentOverlay">#null</item>
<item name="windowActionBarOverlay">true</item>
<item name="colorPrimary">#android:color/transparent</item>
</style>
<style name="AppTheme.ActionBar" parent="AppTheme">
<item name="windowActionBarOverlay">false</item>
<item name="colorPrimary">#color/default_yellow</item>
</style>
**values-v21/styles.xml**:
<style name="AppTheme" parent="Theme.AppCompat.Light">
...
</style>
<style name="AppTheme.ActionBar.Transparent" parent="AppTheme">
<item name="colorPrimary">#android:color/transparent</item>
</style>
<style name="AppTheme.ActionBar" parent="AppTheme">
<item name="colorPrimaryDark">#color/bg_colorPrimaryDark</item>
<item name="colorPrimary">#color/default_yellow</item>
</style>
Now you can use these themes in your AndroidManifest.xml to specify which activities will have a transparent or colored ActionBar:
<activity
android:name=".MyTransparentActionbarActivity"
android:theme="#style/AppTheme.ActionBar.Transparent"/>
<activity
android:name=".MyColoredActionbarActivity"
android:theme="#style/AppTheme.ActionBar"/>
Note: in API>=21 to get the Actionbar transparent you need to get the Statusbar transparent too, otherwise will not respect your colour styles and will stay light-grey.
Transparent Statusbar (only works with API>=19):
This one it's pretty simple just use the following code:
protected void setStatusBarTranslucent(boolean makeTranslucent) {
if (makeTranslucent) {
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
} else {
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
}
}
But you'll notice a funky result:
This happens because when the Statusbar is transparent the layout will use its height. To prevent this we just need to:
SOLUTION ONE:
Add this line android:fitsSystemWindows="true" in your layout view container of whatever you want to be placed bellow the Actionbar:
...
<LinearLayout
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
...
</LinearLayout>
...
SOLUTION TWO:
Add a few lines to our previous method:
protected void setStatusBarTranslucent(boolean makeTranslucent) {
View v = findViewById(R.id.bellow_actionbar);
if (v != null) {
int paddingTop = Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT ? MyScreenUtils.getStatusBarHeight(this) : 0;
TypedValue tv = new TypedValue();
getTheme().resolveAttribute(android.support.v7.appcompat.R.attr.actionBarSize, tv, true);
paddingTop += TypedValue.complexToDimensionPixelSize(tv.data, getResources().getDisplayMetrics());
v.setPadding(0, makeTranslucent ? paddingTop : 0, 0, 0);
}
if (makeTranslucent) {
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
} else {
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
}
}
Where R.id.bellow_actionbar will be the layout container view id of whatever we want to be placed bellow the Actionbar:
...
<LinearLayout
android:id="#+id/bellow_actionbar"
android:layout_width="match_parent"
android:layout_height="match_parent">
...
</LinearLayout>
...
So this is it, it think I'm not forgetting something.
In this example I didn't use a Toolbar but I think it'll have the same result. This is how I customize my Actionbar:
#Override
protected void onCreate(Bundle savedInstanceState) {
View vg = getActionBarView();
getWindow().requestFeature(vg != null ? Window.FEATURE_ACTION_BAR : Window.FEATURE_NO_TITLE);
super.onCreate(savedInstanceState);
setContentView(getContentView());
if (vg != null) {
getSupportActionBar().setCustomView(vg, new ActionBar.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
getSupportActionBar().setDisplayShowCustomEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(false);
getSupportActionBar().setDisplayShowTitleEnabled(false);
getSupportActionBar().setDisplayUseLogoEnabled(false);
}
setStatusBarTranslucent(true);
}
Note: this is an abstract class that extends ActionBarActivity.

It supports after KITKAT. Just add following code inside onCreate method of your Activity. No need any modifications to Manifest file.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
Window w = getWindow(); // in Activity's onCreate() for instance
w.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
}

Just add these lines of code to your activity/fragment java file:
getWindow().setFlags(
WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
);

Fullscreen DialogFragment with translucent StatusBar

I have a DialogFragment which I want to show in fullscreen. I do however still want a StatusBar present, and the hardware buttons at the bottom. I also want to set a background color of the StatusBar (for Lollipop).
My problem is that if I set the following flags in the DialogFragment:
getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
Both the StatusBar and Hardware keyboard becomes translucent, and the DialogFragment stretches behind these.
Here is the code, which has been greatly reduced to become readable:
public class CardDetailsDialog extends DialogFragment {
Setup parameters...
public static CardDetailsDialog newInstance(final long cardId, final long projectId){
CardDetailsDialog frag = new CardDetailsDialog();
frag.setStyle(DialogFragment.STYLE_NORMAL, R.style.CardDetailsDialogStyle);
return frag;
}
#Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
if(getDialog() != null) {
getDialog().getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
getDialog().getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
getDialog().getWindow().getAttributes().windowAnimations = R.style.DialogSlideAnimation;
getDialog().getWindow().setLayout(LinearLayout.LayoutParams.MATCH_PARENT,
LinearLayout.LayoutParams.MATCH_PARENT);
getDialog().getWindow().setStatusBarColor(Color.RED);
}
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setHasOptionsMenu(true);
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
super.onCreateView(inflater, container, savedInstanceState);
View view = inflater.inflate(R.layout.card_details, container, false);
Handle everything that happens inside the view...
return view;
}
}
Here is the referred theme:
<style name="CardDetailsDialogStyle" parent="#style/Theme.AppCompat.Light.Dialog" >
<item name="android:windowBackground">#null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowFrame">#null</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowAnimationStyle">#android:style/Animation.Dialog</item>
<item name="android:windowSoftInputMode">stateUnspecified|adjustPan</item>
</style>
And the style of the fragment:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/pp.whiteBackgroundColor" >
<android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_details_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_alignParentTop="true"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/PopupMenutheme">
</android.support.v7.widget.Toolbar>
<ScrollView
android:id="#+id/details_scrollview"
android:layout_height="wrap_content"
android:layout_width="match_parent">
All subview elements here...
</ScrollView>
</RelativeLayout>
This is the result:
As you can see, the ToolBar extends over the StatusBar and hardware buttons. I don't know if I am approaching this correctly. Am I missing something?
EDIT
This is what the same view look likes when I remove
getDialog().getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);

For anyone who's still having this problem, do the following. This just solves half of the problem that is posted i.e. black status bar.
Add following theme to res/value-v21/style
<style name="DialogTheme" parent="#style/Base.Theme.AppCompat.Light.Dialog">
<item name="android:windowTranslucentStatus">true</item>
</style>
And then apply Style on DialogFragment in onCreate
#Override
public void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setStyle(DialogFragment.STYLE_NO_TITLE, R.style.DialogTheme);
}
Edit
if you've problem with your dialog theme then use this style e.g. colorAccent or colorControlHighlight etc
<style name="DialogTheme" parent="#style/ThemeOverlay.AppCompat.Dialog">
<item name="android:windowTranslucentStatus">true</item>
</style>

In my case SYSTEM_UI_FLAG_LAYOUT_STABLE solved problem with overlapping
int width = ViewGroup.LayoutParams.MATCH_PARENT;
int height = ViewGroup.LayoutParams.MATCH_PARENT;
dialog.getWindow().setLayout(width,height);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
dialog.getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
dialog.getWindow().setStatusBarColor(getResources().getColor(R.color.darkGrayTransp));
dialog.getWindow().getDecorView().setSystemUiVisibility(SYSTEM_UI_FLAG_LAYOUT_STABLE);//solves issue with statusbar
dialog.getWindow().setGravity(Gravity.CENTER_HORIZONTAL| Gravity.TOP);
}

Try use the same Style from your App. I tested with simple dialog without fragment and works fine.
Like that:
new Dialog(context, R.style.CardDetailsDialogStyle);

You have to set fitsystemwindows = true. Other way is to add a Space with 0dp and change its height to 25dp when the dialog is going to show.
To change the space size, use layout params, check this post: How to create a RelativeLayout programmatically with two buttons one on top of the other?

<style name="DialogTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowIsFloating">false</item>
</style>

Just apply android:fitsSystemWindows="true" to your root ViewGroup:
`<FrameLayout
android:fitsSystemWindows="true">
<View .../>

Different backgrounds in one Activity

In Android, is it possible to properly have different background color for the views, the empty space and the action bar?
For example I have a PreferenceScreen in a PreferenceFragment. I have these codes:
Style XML:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="MyTheme" parent="android:Theme.Holo">
<item name="android:textColor">#color/blue1</item>
<item name="android:background">#color/bg</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:titleTextStyle">#style/MyActionBar</item>
</style>
<style name="MyActionBar" parent="#android:style/Widget.Holo.ActionBar.Solid">
<item name="android:background">#color/brown1</item>
<item name="android:windowBackground">#color/brown1</item>
</style>
</resources>
my PreferenceFragment class: this already looks like a hack!
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View v=super.onCreateView(inflater, container, savedInstanceState);
((ListView) v.findViewById(android.R.id.list)).setBackgroundColor(getResources().getColor(R.color.blue1));
return v;
}
This already makes the ListView items have bg background color, and the empty space after them blue1 background color (note that I had to set them in the opposite way to make this work!), and the ActionBar has brown1 background but the text on it does not and that's really ugly! Also, what the heck does windowBackground do anyway?
EDIT: I've been able to change the background of the title with this hack:
int actionBarTitleId = Resources.getSystem().getIdentifier("action_bar_title", "id", "android");
if (actionBarTitleId > 0) {
TextView title = (TextView) findViewById(actionBarTitleId);
if (title != null)
title.setBackgroundColor(getResources().getColor(R.color.brown1));
}
Now how do I do this for the logo and the "Up" arrow to the left of the logo?

The solution is to remove the titleTextStyle from the style XML.