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" />
Related
EDIT: I now have a custom Toolbar in a separate layout (toolbar.xml) from that of my activity_main.xml. The new layout now contains just one TextView for the title. The Toolbar however, has an overflow menu which contains only one item (the settings icon) and it's set to showAsAction="always". However, in the layout preview i can't see the actual settings icon thus i'm not able to align my title TextView with the icon in order to avoid any misalignments (see image). Any ideas?
toolbar.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar 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="70dp"
android:background="#drawable/toolbar_gradient"
android:elevation="4dp"
app:titleTextColor="#android:color/white"
app:layout_scrollFlags="scroll|enterAlways">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/toolbar_title_placeholder"
android:fontFamily="#font/montserrat_semibold"
android:textColor="#android:color/white"
android:textSize="20sp" />
</androidx.appcompat.widget.Toolbar>
As you can see in the image below, my title TextView is misaligned in regards to the overflow menu item (settings icon). Is there a way i can fix that?
70dp is a non-standard height for a toolbar which is the underlying issue with your layout. If you stay with the 70dp toolbar height, you will need to make adjustments to the toolbar layout.
Here is one way that just modifies the XML layout. The 7dp padding in the toolbar will shift the icon down. Corresponding changes to the text view keep it aligned.
<androidx.appcompat.widget.Toolbar 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="70dp"
android:background="#android:color/holo_blue_light"
android:elevation="4dp"
android:paddingTop="7dp"
app:layout_scrollFlags="scroll|enterAlways"
app:titleTextColor="#android:color/white">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="center_horizontal|top"
android:gravity="center"
android:text="#string/toolbar_title_placeholder"
android:textColor="#android:color/white"
android:textSize="20sp" />
</androidx.appcompat.widget.Toolbar>
To understand what is happening, make the changes and run the app. In Android Studio, go to Tools->Layout Inspector and choose your device and the app. What you will see is a dump of the layout that you can examine.
This method works with what you have posted. It may have side effects with the placement of other views so be on the lookout.
An alternatative involves code to retrieve the view that corresponds to the settings icon. If I recall, it's not pretty.
btw, you don't see the settings icon in Android Studio because menu items are added at run time.
Add CoordinatorLayout & AppBarLayout with app:elevation="0dp".
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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"
>
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
app:elevation="0dp">
<androidx.appcompat.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:titleTextAppearance="#style/Toolbar.TitleText"
app:layout_scrollFlags="scroll|enterAlways"
>
//Your work
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
//Your work
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
As we know Android has some specific rules in design pattern like toolbar size, icon size, etc.
Android prefers using actionBarSize in the toolbar.
?android:attr/actionBarSize
In your case, if you need your custom size toolbar then you should create your own custom toolbar like below:
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_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="70dp"
android:background="#color/colorWhite"
android:contentInsetLeft="0dp"
android:contentInsetStart="0dp"
android:elevation="0.1dp"
android:paddingEnd="10dp"
android:paddingStart="10dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:layout_scrollFlags="scroll|enterAlways|snap"
tools:targetApi="lollipop">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/search_layout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="start"
android:orientation="horizontal">
<ImageView
android:id="#+id/toolbar_start_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/ic_search_black_24dp"
/>
</LinearLayout>
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fontFamily="#font/bold"
android:gravity="center"
android:text="Visit Tulsipur"
android:textColor="#color/colorBlack"
android:textSize="18sp" />
<LinearLayout
android:id="#+id/notification_layout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="end"
android:orientation="horizontal">
<ImageView
android:id="#+id/toolbar_end_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/ic_notifications_none_black_24dp"
/>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
Now you can set on click in defined ImageView/Layout.
OUTPUT
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>
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
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.