Develop Reference

How to add back button to custom toolbar layout on AppCompatActivity?

I'm developing an android app. I'm using AppCompatActivity and would like to add back button to my custom toolbar. Here is the code of the toolbar:
<?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="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="54dp"
android:layout_gravity="center_horizontal"
android:src="#drawable/logo" />
<TextView android:id="#+id/title" android:layout_width="wrap_content"
android:gravity="center_vertical" android:textSize="24px"
android:textColor="#000000"
android:layout_height="wrap_content"
android:padding="9dip"
android:layout_marginLeft="7dip"
android:layout_marginRight="7dip"
android:layout_marginStart="28dp"
android:layout_centerVertical="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
Here is my activity code:
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_bookmarks);
ActionBar actionBar = getSupportActionBar();
actionBar.setHomeButtonEnabled(true);
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setIcon(R.mipmap.ic_logo);
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
actionBar.setCustomView(R.layout.abs_layout);
actionBar.setIcon(R.drawable.logo);
//actionBar.setDisplayOptions(0, ActionBar.DISPLAY_SHOW_TITLE);
((TextView)findViewById(R.id.title)).setText(R.string.bookmarks);
What do I have to add that the back button will be displayed?
Best,
B.

in your activity just add this code:
mToolBar = (Toolbar) findViewById(R.id.your_tool_bar_id);
setSupportActionBar(mToolBar);
Drawable upArrow = ResUtils.getDrawable(this, R.drawable.abc_ic_ab_back_material, null);
upArrow.setColorFilter(ResUtils.getColor(this, R.color.colorPrimaryLightText), PorterDuff.Mode.SRC_IN);
getSupportActionBar().setHomeAsUpIndicator(upArrow);
You can change the color of your back button

add this code to your layout (activity_main.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="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/white"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
in onCreate method add this code:
Toolbar toolbar= (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
Drawable drawable= ResourcesCompat.getDrawable(this.getResources(), R.drawable.abc_ic_ab_back_material, null);
//custom color
//drawable.setColorFilter(ResourcesCompat.getColor(this.getResources(), R.color.colorPrimaryLightText, null), PorterDuff.Mode.SRC_IN);
ActionBar actionBar = getSupportActionBar();
actionBar.setHomeButtonEnabled(true);
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setHomeAsUpIndicator(drawable);
change your root layout to LinearLayout

Tollbar with a notification count

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);

Transparent bottom sheet layout in Android

I am trying to make a transparent bottom sheet layout, that would allow me to see the contents of the view below it. The bottom sheet is working as expected, however when I set the background to either #null or #android:color/transparent, the layout's view is white, as opposed to transparent. My layout is as follows:
app_bar_main.xml:
<android.support.design.widget.CoordinatorLayout 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"
android:id="#+id/coordinatorLayout"
android:background="#android:color/transparent"
android:fitsSystemWindows="true"
tools:context=".core.activities.MainActivity">
<!-- stuff here -->
<LinearLayout
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:background="#null"
android:orientation="vertical"
app:layout_behavior="#string/bottom_sheet_behavior">
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
The linear layout with id bottom_sheet holds, well, my bottom sheet. The sheet itself is defined as follows:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:background="#null"
android:layout_height="match_parent">
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#null"
android:orientation="vertical">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/bottom_sheet_placeholder_layout"
android:layout_weight="0.6"
android:layout_width="match_parent"
android:background="#null"
android:layout_height="50dp"
android:orientation="horizontal">
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/bottom_sheet_layout"
android:layout_margin="0dp"
android:layout_weight="0.4"
android:layout_width="match_parent"
android:background="#color/my_background"
android:layout_height="wrap_content"
android:orientation="vertical">
<ProgressBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:id="#+id/my_progress_bar" />
<TextView
android:layout_marginTop="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Large Text"
android:textColor="#color/my_text"
android:id="#+id/txt_my_info"
android:layout_gravity="center_horizontal"
android:visibility="gone"
android:textSize="48px" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Medium Text"
android:id="#+id/txt_my_address"
android:textColor="#color/my_secondary_text"
android:visibility="gone"
android:layout_gravity="center_horizontal" />
</LinearLayout>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/btn_edit_tree_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:layout_marginTop="-62dp"
android:elevation="100dp"
android:src="#drawable/ic_create_black_24dp"
app:layout_anchor="#id/bottom_sheet_layout"
app:layout_anchorGravity="top|end|right"
app:useCompatPadding="true"/>
</android.support.design.widget.CoordinatorLayout>

The answer is much more easier: just add this line
myDialog
.getWindow()
.findViewById(R.id.design_bottom_sheet)
.setBackgroundResource(android.R.color.transparent);
And don't change standard ids (R.id.design_bottom_sheet and android.R.color.transparent). It makes background of Bottom Sheet Dialog transparent

private void setupDialogBackground() {
getDialog().setOnShowListener(new DialogInterface.OnShowListener() {
#Override
public void onShow(DialogInterface dialog) {
BottomSheetDialog d = (BottomSheetDialog) dialog;
FrameLayout bottomSheet = (FrameLayout) d.findViewById(R.id.design_bottom_sheet);
if (bottomSheet == null)
return;
bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);
bottomSheet.setBackground(null);
}
});
}

add this in styles.xml
<style name="TransparentDialog" parent="Theme.Design.Light.BottomSheetDialog">
<item name="android:windowCloseOnTouchOutside">false</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:colorBackground"> #android:color/transparent</item>
<item name="android:backgroundDimEnabled">true</item>
<item name="android:backgroundDimAmount">0.3</item>
<item name="android:windowFrame">#null</item>
<item name="android:windowIsFloating">true</item>
</style>
BottomSheetDialog bsDialog = new BottomSheetDialog(this,R.style.TransparentDialog);
bsDialog.setContentView(R.layout.bottomsheet_dialog);
bsDialog.show();
and voila it works

I had to wait until after setContentView was called in onActivityCreated in order to access the container. Also while getDialog().getWindow().findViewById(R.id.design_bottom_sheet) did successfully find the FrameLayout, I decided to avoid explicitly calling out the internally defined id by using getView().getParent().
#Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState); // setContentView called here
((View) getView().getParent()).setBackgroundColor(Color.TRANSPARENT);
}

Add this in your bottomSheet setupDialog(final Dialog dialog, int style)
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
and also add android:background="#android:color/transparent" to root view

Just need to use this style:
<style name="BaseBottomSheetDialogThem" parent="#style/Theme.Design.Light.BottomSheetDialog">
<item name="android:windowIsFloating">true</item>
<item name="android:backgroundDimEnabled">false</item>
</style>
and set your style to BaseBottomSheetDialogThem.

Here is the kotlin version thanks to kolorszczak . Hope it save someones time converting .
val dialog = BottomSheetDialog(activity!!)
dialog.setOnShowListener {
var dialogTmp: BottomSheetDialog = it as BottomSheetDialog
var bottomSheet: FrameLayout? =
dialogTmp.findViewById(R.id.design_bottom_sheet) as FrameLayout?
?: return#setOnShowListener
bottomSheet?.background = null
}

Create in your color.xml : <color name="colorTransparent">#00000000</color>
and use android:background="#color/colorTransparent"

change color background
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/bottom_sheet_placeholder_layout"
android:layout_weight="0.6"
android:layout_width="match_parent"
android:background="#00FFFFFF"
android:layout_height="50dp"
android:orientation="horizontal">
</LinearLayout>
Try it!!

Android Transparent status bar and toolbar implementation

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);

Android 4.4 Kitkat custom view actionbar not filling the whole width

I am trying to have a Simple actionbar with a custom view, but I get the following result:
For demonstration I created a simple xml with a yellow background color which is supposed to take the whole width.
Here is the xml:
<?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/yellow"
android:orientation="vertical" >
<TextView
android:visibility="gone"
android:id="#+id/action_save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/action_save"
android:gravity="center"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:textStyle="bold"
android:layout_marginLeft="10dp"
android:textColor="#android:color/white"
android:text="#string/save" />
<ImageView
android:visibility="gone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#drawable/ic_actionbar_logo" />
</RelativeLayout>
And I use the following theme for my Application:
<style name="AppBaseTheme" parent="#style/Theme.AppCompat.Light"></style>
This is the actionbar initialization code:
actionBar = getSupportActionBar();
actionBar.setDisplayShowHomeEnabled(false);
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setCustomView(R.layout.actionbar);

The solution is adding :
actionBar.setDisplayShowTitleEnabled(false);
The code should look something like:
actionBar = getSupportActionBar();
actionBar.setDisplayShowHomeEnabled(false);
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setCustomView(R.layout.actionbar);//set the custom view

#NemesisDoom: Please make sure that you use ActionBar from the support.v7 library rather that one from the Android API (this second one will not work certainly). If still doesn't work, add the further changes:
styles.xml (your action bar style section):
<item name="android:homeAsUpIndicator">#drawable/_pixel</item>
<item name="homeAsUpIndicator">#drawable/_pixel</item>
_pixel is 1x1.png image, transparent.
your activity:
actionBar.setDisplayHomeAsUpEnabled(true);