I have a toolbar inside of an AppBarLayout like this:
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="right"
android:orientation="horizontal">
<ImageButton
android:id="#+id/editButton"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center_vertical"
android:layout_marginRight="16dp"
android:scaleType="fitCenter"
android:background=
"?attr/selectableItemBackgroundBorderless"
android:contentDescription="Post"
android:src="#drawable/ic_mode_edit_24dp"
/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
In my Activity.OnCreate() I try to set the title like this:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("Edit");
(Not sure if this matters but..) After that I inflate a fragment:
MyFragment fragment = new MyFragment();
fragment.setArguments(savedInstanceState);
// Add fragment with tag
getSupportFragmentManager().beginTransaction()
.add(R.id.content_frame, fragment, "my_frag")
.commit();
However, this has no effect. In fact, there is no title at all. Is this because I have a LinearLayout inside of the Toolbar or something? Or because of the AppBarLayout?
you need to add a TextView inside the ToolBar
EDIT: something like this
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:contentInsetEnd="0dp"
android:contentInsetLeft="0dp"
android:contentInsetRight="0dp"
android:contentInsetStart="0dp"
android:elevation="2dp"
app:contentInsetEnd="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
app:contentInsetStart="0dp"
app:popupTheme="#style/AppTheme.PopupOverlay">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="#string/beermap"
android:textColor="#color/white"
android:textSize="22sp"
android:textStyle="bold" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
Use getSupportActionBar().setTitle(getString(R.string.title)); within the activity. This can be done in onCreate should be done whenever the locale is changed
If your toolbar is inside a collapsing toolbar layout
public void setToolbarTitle(String s){
Log.d(TAG, "setToolbarTitle: " + s);
CollapsingToolbarLayout collapsingToolbarLayout = findViewById(R.id.collapsingToolbar);
collapsingToolbarLayout.setTitle(s);
}
Here is how to make the textview look exactly like default:
<TextView
android:id="#+id/toolbar_title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="#string/beermap"
android:textColor="#color/white"
android:textSize="20sp"
android:fontFamily="sans-serif-medium" />
The key part being 20sp textsize and android:fontFamily="sans-serif-medium"
Related
I tried setting collapsingToolbarLayout.setCollapsedTitleGravity(Gravity.CENTER);
collapsingToolbarLayout.setExpandedTitleGravity(Gravity.CENTER);
and almost all available links on INTERNET but i am not able to put the title in center of toolbar.
plz help !
make your Toolbar like this
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:contentInsetEnd="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:text="Center">
<TextView
android:layout_marginLeft="-25dp"
android:id="#+id/toolbar_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
in your activity file change like this
toolbar=(Toolbar)findViewById(R.id.tool_bar);
TextView mTitle = (TextView) toolbar.findViewById(R.id.toolbar_title);
mTitle.setText("PREM");
setSupportActionBar(toolbar);
To center the text in the toolbar you need to use a custom toolbar with a textview inside it rather than using android:title=""
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:id="#+id/toolbar"
android:layout_height="?actionBarSize">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textColor="#000000"
android:id="#+id/tvToolbarTitle"
android:layout_gravity="center"
android:textSize="16sp"/>
</android.support.v7.widget.Toolbar>
You can apply the same logic in a collapsible toolbar.
Why image in toolbar not align in center when remove the menu items in android.
If i have hide the menu items the title moved right.that is some spaces added between navigation icon and title.
My code
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetRight="0dp"
app:contentInsetStartWithNavigation="0dp"
android:background="#FFF">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:id="#+id/pg_title"
android:layout_centerHorizontal="true"
android:src="#drawable/logo"
/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
try this add this toolbar in your layout xml file
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay">
<include layout="#layout/actionbar_layout" />
</android.support.v7.widget.Toolbar>
create a new actionbar_layout for your toolbar like this
<?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="match_parent"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_bike" />
</LinearLayout>
now in your activity file just add below code
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("");
ask me in case of any query
I am trying to get the title of the Collapsed Toolbar to the center. But there seems to be some bug in the basic layout itself. The title has an offset for some reason.
Unable to figure out how to fix this. Also there seems to be no property to apply negative margin/padding to the collapsedTitle.
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator_layout"
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="true"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/XXXXAppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:collapsedTitleGravity="center"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleGravity="top|center_horizontal"
app:expandedTitleMarginTop="-10dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:title="REGISTER">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/XXXXAppTheme.PopupOverlay"/>
<ImageView
android:id="#+id/ivContent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/white_background"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_collapseMode="parallax"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<FrameLayout
android:id="#+id/flContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
Try this within your "Toolbar"
<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/color"
app:theme="#style/ToolBarTheme" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Register"
android:layout_gravity="center"
android:id="#+id/toolbar_title" />
</android.support.v7.widget.Toolbar>
To make it centered, please follow the steps:
To use a custom title in your Toolbar all you need to do is remember
is that Toolbar is just a fancy ViewGroup so you can add a custom
title like so:
<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:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Toolbar Title"
android:layout_gravity="center"
android:id="#+id/toolbar_title" />
</android.support.v7.widget.Toolbar>
This means that you can style the TextView however you would like
because it's just a regular TextView. So in your activity you can
access the title like so:
Toolbar toolbarTop = (Toolbar) findViewById(R.id.toolbar_top);
TextView mTitle = (TextView) toolbarTop.findViewById(R.id.toolbar_title);
From: Android toolbar center title and custom font
To remove the default app name title, do this:
setSupportActionBar(toolbar_top);
getSupportActionBar().setDisplayShowTitleEnabled(false);
Hope it help
You should use this. To add TextView in side Toolbar
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="130dp"
android:id="#+id/toolbar">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name"
android:layout_gravity="center"/>
</android.support.v7.widget.Toolbar>
I want to design a layout like above image with Collapsing toolbar Effect, I have already tried collapsing toolbar with viewpager but with that I can add only Image and viewpgaer, I want to add the below information and then viewpager, please help me here, if anyone have any idea.
Thank you so much in advanced !!!
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="#dimen/collapsing_tool_bar_margin_end"
app:expandedTitleMarginBottom="#dimen/collapsing_tool_bar_margin_bottom"
app:expandedTitleMarginStart="#dimen/collapsing_tool_bar_margin_bottom">
<ImageView
android:id="#+id/coverImage"
android:layout_width="match_parent"
android:layout_height="200dp"
app:layout_collapseMode="parallax"
android:scaleType="centerCrop"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="#style/ActionBarThemeOverlay"
app:popupTheme="#style/ActionBarPopupThemeOverlay"
app:layout_collapseMode="pin"
android:background="#drawable/gradient_bg" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways">
<android.support.design.widget.TabLayout
android:id="#+id/slidingTabs"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
app:tabMode="scrollable"
app:tabGravity="fill"
android:background="#color/transparent"
android:layout_height="wrap_content"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_height="wrap_content">
</android.support.v4.view.ViewPager>
You can add different view inside your collapsing toolbar like:
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content"
android:id="#+id/header_layout"
android:orientation="vertical"
android:layout_marginLeft="20dp"
android:layout_marginBottom="10dp"
android:layout_gravity="bottom|left">
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="Title"
android:textColor="#ffffff"
android:textSize="25dp"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="subtitle"
android:textColor="#ffffff"/>
</LinearLayout>
Adjust the textsize,margin,and the rest as you wish.
But then add a this code to make sure that your added layout fades in when the toolbar collapses
headerLayout=(LinearLayout) findViewById(R.id.header_layout);
AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.app_bar_layout);
appBarLayout.addOnOffsetChangedListener(this);
And make your activity class implement AppBarLayout.OnOffsetChangedListener
Then your onOffsetChanged method should be like this.
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int offset) {
float scaleFactor=1+(offset*0.005f);
if(!(scaleFactor<0)){
headerLayout.setAlpha(scaleFactor);
}
if(scaleFactor<0.3){
headerLayout.setAlpha(0);
}
}
Adjust the float value "0.005f" for the desired effect.
I hope this is helpful
I changed theme to solve this issue:
you should use ThemeOverlay.AppCompat.Light;
Here's how my toolbar currently looks. The text seems completely mislaid.
Here's the code:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="#color/blue_grey_900"
android:gravity="center"
android:minHeight="?android:attr/actionBarSize"
app:popupTheme="#style/ToolbarPopup"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:elevation="5dp"/>
What's causing the misalignment?
change your code to android:layout_height="?attr/actionBarSize
You can use a custom TextView in your XML like:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="#color/blue_grey_900"
android:gravity="center"
android:minHeight="?android:attr/actionBarSize"
app:popupTheme="#style/ToolbarPopup"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:elevation="5dp">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title"
android:layout_gravity="center"/>
</android.support.v7.widget.Toolbar>
Then you can customize it or place the title anywhere you want.