Toolbar title not showing in Center properly if Back button is enabled - android

I want to show title of a toolbar in center so i am using custom textview to show title like this :
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
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="Title"
android:textColor="#android:color/white"
android:textSize="25sp"
android:textStyle="bold" />
</android.support.v7.widget.Toolbar>
Java Code :
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
TextView title = (TextView) toolbar.findViewById(R.id.toolbar_title);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(true);
title.setText("Title");
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
onBackPressed();
}
});
Result :
Title text not showing in center properly if I am enabling back button of toolbar.
and things are working fine if back button of toolbar is not enabled i.e.
if
getSupportActionBar().setDisplayHomeAsUpEnabled(false);
getSupportActionBar().setDisplayShowHomeEnabled(false);
Result :
Now , I want to show title in center with Back button enabled of toolbar also. How to do this ? Any help

1) You need to remove this
title.setText("Title");
because already in xml file.
2) Use
getSupportActionBar().setDisplayShowTitleEnabled(false);
3) Set layout gravity for TextView
android:layout_gravity="center"
Edit:
Also change height and width of TextView to wrap_content.

I guess the simplest solution to this question is to change both the width and height of your TextView to wrap_content. Hope it helps.

Related

Center icon in Actionbar

I want to insert a centered icon in Actionbar, but i have no idea what code that i need. anyone can help me?
This is my code :
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setIcon(R.mipmap.ic_launcher);
getSupportActionBar().setTitle("");
Thank you
step 1: create a custom layout in R.layout. directory, as you desire and then set the view
to action bar
step 2: Set the custom layout.
ActionBar actionBar = getActionBar();
actionBar.setDisplayShowCustomEnabled(true);
View customView = getLayoutInflater().inflate(R.layout.customActionBar, null);
actionBar.setCustomView(customView );
From your xml add ToolBar as below and set Icon to ImageView inside it.
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#mipmap/ic_launcher"/>
</android.support.v7.widget.Toolbar>
Set toolbar as support action bar as you are doing.

what is the circle at the right of my toolbar

I add toolbar to my layout:
<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="wrap_content"
android:background="#color/gray">
<ProgressBar
android:id="#+id/progress_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:indeterminate="true"
android:visibility="gone" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
and I initialized it in mainActivity:
Toolbar toolbar = findViewById(R.id.toolbar);
toolbar.setVisibility(View.VISIBLE);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowHomeEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayUseLogoEnabled(false);
getSupportActionBar().setDisplayShowTitleEnabled(false);
but at my toolbar was appeared a circle at the right of my toolbar! I also have removed logo and title from toolbar but I still see this circle and it wont be disappear!!
What is it? and how can I remove that?
thank you
Given you said that removing the ProgressBar from the layout doesn't hide it, and because of the position, it could be a menu. Are you overriding onCreateOptionsMenu()?
Also, as I said in my comment, try to use "Layout inspector" to find out what this view is. See developer.android.com/studio/debug/layout-inspector.html
Try with programmatic Progress Bar view visible and gone
Toolbar toolbar = findViewById(R.id.toolbar);
toolbar.setVisibility(View.VISIBLE);
ProgressBar progressBar = (ProgressBar) toolbar.findViewById(R.id.progress_spinner);
progressBar.setVisibility(View.GONE);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowHomeEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayUseLogoEnabled(false);
getSupportActionBar().setDisplayShowTitleEnabled(false);
Can you please add what you have written in this style ??
#style/AppTheme.AppBarOverlay

how to insert both icon as well as back button on action bar (like in whatsapp)

I am making a Chat Application and so wanted to add both icon as well as back button on my actionbar() in chat activity (like it is in WhatsApp) but I'm not able to set both things...
here is the code:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_chat);
initControls();
android.support.v7.app.ActionBar actionBar = getSupportActionBar();
Intent intent = getIntent();
String itemname = intent.getStringExtra("itemname");
actionBar.setTitle(itemname);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
actionBar.setIcon(R.mipmap.ic_launcher);
}
The problem is that both the things are not getting set at the same time with the above code only back button shows up and if I remove code for back button then icon shows up... How to set both things???
You should not use the default action bar, make your custom toolbar and add an imageview in it.
Something 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:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:popupTheme="#style/AppTheme.PopupOverlay"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:id="#+id/imageToolBar"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_centerVertical="true"
android:layout_marginTop="3dp"
android:src="#drawable/profile"
/>
<TextView
android:id="#+id/toolbarText"
style="#style/TextToolBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_centerVertical="true"
android:layout_marginStart="10dp"
android:layout_toEndOf="#id/imageToolBar"
android:layout_toRightOf="#+id/imageToolBar"
android:text="Your text"
/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
Then in your java file do this:
Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowHomeEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
TextView toolbarText = (TextView)toolbar.findViewById(R.id.toolbarText);
ImageView imageView = (ImageView)toolbar.findViewById(R.id.imageToolBar);
//Do your stuff here like set image on imageView
Happy Coding..:)
If you want exactly like WhatsApp then you need to make a custom drawable having both back button and Profile image in same drawable image using Bitmap and Canvas. Then set this drawable image as HomeAsUpIndicator
getSupportActionBar().setHomeAsUpIndicator(R.drawable.custom_back);

How to add TextView in same location of title in Toolbar?

I have a toolbar in my xml file, with no child views defined in it. I want to add a TextView on exact location of default title in toolbar when we call setSupportActionBar(toolbar). On particular events, I like to fade in or out these two views in case of particular events.
I tried to do the following in onCreate() of the activity, but nothing is visible except the default title in toolbar.
TextView tv = new TextView(this);
tv.setLayoutParams(toolbarTitle.getLayoutParams());
tv.setHeight(toolbarTitle.getHeight());
tv.setWidth(toolbarTitle.getWidth());
tv.setText("Other Title");
tv.setLeft(toolbarTitle.getLeft());
toolbar.addView(tv);
I also tried to add a RelativeLayout inside the toolbar with width and height set to match parent, but this time, default title TextView of toolbar disappears.
How can add another TextView on exact location of default title TextView in toolbar?
You can use AppBarLayout as below
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
>
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/aadhaar_sign_up"
android:textColor="#color/white"
android:textSize="18.0sp"
app:fontName="Font-Medium.ttf"
/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
Then you use the textview as below
Toolbar toolbar = (Toolbar) getActivity().findViewById(R.id.toolbar);
((TextView) toolbar.findViewById(R.id.toolbar_title)).setText(title);
I disable title in toolbar using getSupportActionBar().setDisplayShowTitleEnabled(false) in onCreate() method of my activity and put two overlapping textViews encapsulating them with relativeLayout inside toolbar in layout. Then I animate them as I want. While changing text, I used titleTextView.setText() rather then toolbar.setTitle() method.

How to align action bar title in center of screen in fragment?

My action bar has menu, in fragment only set title.
Can not align into center.
What can I do? Default it show left side only. How can I align in CENTER position on action bar in fragment title?
You have to use 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/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);

Categories

Resources