How to position subtitle above title in Android Toolbar? - android

I am using
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?android:attr/actionBarSize"
app:contentInsetStartWithNavigation="0dp" />
with
Toolbar toolbar = findViewById(R.id.toolbar);
toolbar.setTitle(myTitle);
toolbar.setSubtitle(mySubtitle);
to set the title and subtitle in my Toolbar. They are displayed with the subtitle beneath the title.
However, how can I make the subtitle appear above the title?
To get the desired effect, I could make the title look like a subtitle (and vice versa), but is there a better, non-hacky solution?


If you want subtitle textview above title then use linear layout with vertical orientation or if you want it on top of the title use a relative layout and remove orientation:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.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:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/white"
app:elevation="0dp"
android:contentInsetLeft="0dp"
android:contentInsetStart="0dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:contentInsetRight="0dp"
android:contentInsetEnd="0dp"
app:contentInsetRight="0dp"
app:contentInsetEnd="0dp"
app:layout_scrollFlags="scroll|enterAlways">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Textview
android:id="#+id/Subtitle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Subtitle"
/>
<Textview
android:id="#+id/Title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Title"
/>
</LinearLayout>
</android.support.v7.widget.Toolbar>

Related

SearchView search_plate not extending to full width

I have a SearchView in my toolbar that i created like this:
<RelativeLayout
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:id="#+id/root_layout"
tools:context=".ui.search.SearchActivity"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/profile_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/topbar_gradient"
android:theme="#style/AppTheme.Dark"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/topbar_gradient"
android:contentInsetEnd="0dp"
android:contentInsetLeft="-16dp"
android:contentInsetRight="0dp"
android:contentInsetStart="0dp"
android:fitsSystemWindows="true"
android:minHeight="?android:attr/actionBarSize"
app:contentInsetEnd="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
app:contentInsetStart="0dp"
app:layout_scrollFlags="scroll|enterAlways">
<android.support.v7.widget.SearchView
android:gravity="left"
android:maxWidth="1000dp"
android:id="#+id/search_view"
android:background="#drawable/bg_search"
app:iconifiedByDefault="false"
app:goIcon="#null"
app:voiceIcon="#null"
app:commitIcon="#null"
android:layout_marginEnd="#dimen/double_spacing"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.SearchView>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
(...)
</RelativeLayout>
This shows up like this:
So the SearchView does expand to full width, but not the textview within it, which by using the Layout Inspector I found out is within a LinearLayout called search_plate, which is in a LinearLayout called search_edit_frame that is not expanding:
Now as much as I try I cant get the Search bar to start closer to the back button nor the Search Edit Text to expand to full width.
I tried this based off other answers:
var findViewById = searchView.findViewById<LinearLayout>(searchView.context.resources.getIdentifier("android:id/search_edit_frame", null, null))
findViewById?.layoutParams?.width = LinearLayout.LayoutParams.MATCH_PARENT
But it cant ever find a view with this id.
Any ideas?

The following does the trick:
searchView.setMaxWidth( Integer.MAX_VALUE );
or use this
<?xml version="1.0" encoding="utf-8"?>
<SearchView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

Tile not getting center in Collapsed toolbar

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.

Android Changing Shape of The Back Button

The back button on the action bar of my app seems a little large. When I hold my finger on it on my phone the button highlights and I can see the right side of it is rounded out pushing over the text.
How can I make the button square and move the text closer to the left side of the action bar instead of being more out to the middle?

Try setting a custom drawable for your Toolbar's back navigation icon
ActionBar ab = getSupportActionBar();
ab.setHomeAsUpIndicator(R.drawable.ic_back);
ab.setDisplayShowHomeEnabled(true);
ab.setDisplayHomeAsUpEnabled(true);
Or if you want precise decoration use a custom toolbar layout,
<?xml version="1.0" encoding="utf-8"?>
<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="?android:attr/actionBarSize"
android:minHeight="?android:attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:theme="#style/ToolbarStyle">
<!-- Left side layout-->
<LinearLayout
android:id="#+id/layout_left_container"
android:layout_width="wrap_content"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="start|center"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:gravity="center|start"
android:orientation="horizontal">
<ImageButton
android:id="#+id/iv_left_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/txt_left_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLength="30"
android:singleLine="true"
android:text="#string/app_name"
android:textColor="#color/white"
android:textSize="14sp" />
</LinearLayout>
</android.support.v7.widget.Toolbar>

you can use toolbar property for this
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
like this use in toolbar
<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"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp" />

Title image alignment in toolbar android

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

CollapsingToolbarLayout center TextView in Toolbar

I want toolbar_title layout center in toolbar, but itlooks like there is some margin on left, if I remove CollapsingToolbarLayout it is ok.
Inorder to center toolbar_title text I set toolbar_title's margin right manualy in code, but the only after the fragment resumed I toolbar_title.getX() can get the correct value, so I postDelayed 50 ms to do this.
now ther is the question:
how to center toolbar_title in CoordinatorLayout on a better way?
<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:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:expandedTitleMarginStart="?attr/actionBarSize"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<LinearLayout
android:id="#+id/layout_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#f5f5f5"
android:orientation="vertical"
app:layout_collapseMode="parallax">
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/AppTheme.ToolBar"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay">
<TextView
android:id="#+id/toolbar_title"
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#android:color/white"
android:textSize="18sp"
tools:text="title"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/swipe_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>

You just need to add below attributes in your Toolbar.
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
See similar thread on stackoverflow: Android API 21 Toolbar Padding
See title textview position before and after attributes adding in toolbar.
Before adding attributes:
After adding attributes:

Categories

Resources