This question already has answers here:
How to set the ActionBar title in middle instead of the default left aligned position?
(5 answers)
Closed 4 years ago.
I'm developing a little Android app written in Kotlin with the use of Jetpack.
I'm facing a little issue, I wanted to center my toolbar title but I didn't manage to figure out how. I saw that some recommend using a custom toolbar layout, but doing that isn't possible for me as I want my first page to be named "Grateful", and the second page named "Details" without having any code like
toolbar.setTitle("Details")
I already tried to set layout_gravity and gravity and all those things on the toolbar layout or even the appbar. But without any success.
Here is my actual layout for my main_Activity
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
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="#color/primary"
android:theme="#style/AppTheme.PopupOverlay"
app:layout_scrollFlags="scroll|snap"
app:titleTextAppearance="#style/TextAppearanceH5"/>
</com.google.android.material.appbar.AppBarLayout>
<fragment
android:id="#+id/main_notes_nav_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:navGraph="#navigation/main_nav_notes"/>
</LinearLayout>
I'm using the Navigation library shipped by Google with their Jetpack Dev kit.
Thanks!
In your XML you can use custom 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">
<RelativeLayout
android:id="#+id/toolbarlin"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/toolbarTittle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:maxWidth="150dp"
android:singleLine="true"
android:text="#string/app_name"
android:textColor="#color/white" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
And dont forget to change your activity theme to parent="Theme.AppCompat.Light.NoActionBar"
Related
I need image witch partly in toolbar and partly in view. I does not find good examples of it, maybe someone know how to do it? I currently work in Xamarin, but examples for Android Studio will be helpful to.
Use a CoordinatorLayout and a layout_anchor:
<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">
<android.support.design.widget.AppBarLayout android:id="#+id/app_bar"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar">
<android.support.v7.widget.Toolbar android:id="#+id/toolbar"
android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.AppBarLayout>
<ImageView android:id="#+id/image_anchored"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_margin="16dp" android:src="#drawable/image_anchor"
app:layout_anchor="#id/app_bar" app:layout_anchorGravity="bottom|start|left"/>
</android.support.design.widget.CoordinatorLayout>
Maybe create a custom view for the ActionBar?
And also you can set custom height for the ActionBar.
Then I think your content can go behind the ActionBar. And you can use transparency on the ActionBar too.
I need to show buttons below toolbar while scroll down like below video. Any samples? I have tried lot but confused.
https://www.youtube.com/watch?v=enWVNP3Gifg
You can use two toolbar one with search view and one with widgets.
You design be like below.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar2"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"/>
<ImageButton
android:id="#+id/fabButton"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_gravity="bottom|right"
android:layout_marginBottom="16dp"
android:layout_marginRight="16dp"
android:background="#drawable/fab_background"
android:src="#drawable/ic_favorite_outline_white_24dp"
android:contentDescription="#null"/>
</FrameLayout>
then you can hide one on scroll like below
Complete Demo of hide toolbar on scroll.
You need to use CoordinatorLayout which you can find a good tutorial in here:
Tutorial
Simply put, you need to have a CoordinatorLayout which contains a AppBarLayout (which must be the first child) and the AppBarLayout must contain two chilren like this:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
.../>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
The line app:layout_scrollFlags="scroll|enterAlways" makes it like you want it.
I'm having a very strange issue using MaterialDesign toolbar and I haven't been able to figure out what's causing it.
I have a toolbar with a custom menu icons which I use in different layouts using <include> I wanted to use the toolbar in another layout without all the icons and menus so I included this in the xml:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar2"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
But the toolbar that shows when on this activity view is the same one I use across other activities. I even tried using a different id name but it still uses the other toolbar and not the one I have included.
The other issue is that, I want to use material design scrolling by using the coordinator layout. While the scrolling works on every other layout, it doesn't work on this particular one when I have the toolbar set. If I remove the toolbar then the scroll works for the view below it. The scroll property app:layout_scrollFlags="scroll|exitUntilCollapsed"on both the toolbar and the view below it. Here's the full code for this layout:
<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:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Yourtime.NonSwipeableViewpager
android:id="#+id/profileviewpager"
android:layout_width="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_height="wrap_content" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:id="#+id/appbar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar2"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
<FrameLayout
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:id="#+id/profile_container"
android:layout_height="wrap_content"
android:layout_width="match_parent" />
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="#dimen/profile_tabs_height"
app:tabMode="fixed"
style="#style/MyCustomTabLayout"
app:tabGravity="center"
android:id="#+id/profiletabs" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
I will really appreciate if someone can help with either of the questions.
I have just made the app using android studio template of Navigation view. Its all working fine but I have the following two requirements
I want to center the toolbar title.
I want to put the image beside the title.
Here is my xml:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.abdulsalam.lahoreqalander.MainActivity">
<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"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
<!--<android.support.design.widget.FloatingActionButton-->
<!--android:id="#+id/fab"-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content"-->
<!--android:layout_gravity="bottom|end"-->
<!--android:layout_margin="#dimen/fab_margin"-->
<!--android:src="#android:drawable/ic_dialog_email" />-->
Problem :
I do not know where the title string is saved, I have checked the string.xml and there is the app name and that is exactly showing on the toolbar title.
So Any suggestion where can I change the title string without changing the app name , In fact I want to change it custom and also how to put the image beside it.
Note I am using the template made by Android studio
.
You can implement like this in XML.
<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="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center">
<ImageView
android:src="#mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
style="#style/TextAppearance.Widget.AppCompat.Toolbar.Title"
android:text="#string/app_name"
android:background="?attr/selectableItemBackground"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
in you activity class do this on create
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
toolbar.setTitle("example");
toolbar.setLogo(R.drawable.icon);
or edit the string resourse and change the title value and icon
First of all from the documentation:
The use of application icon plus title as a standard layout is discouraged on API 21 devices and newer.
For setting an icon through xml you could use android:navigationIcon inside your Toolbar.
For setting the text I would also go with the Java code approach as I could not find anything with xml in the documentation. The text would not be centered anyway.
If you want to center the text you have to modify your Toolbar. Toolbar is a view and you can put anything inside the Toolbar you want.
<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">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingEnd="#dimen/activity_horizontal_margin"
android:id="#+id/toolbar_content">
// define text and icon here
</RelativeLayout>
</android.support.v7.widget.Toolbar>
Q: How do I make the system bar be the correct color?
I've tried setting this up following the cheesesquare sample app.
When doing that, they use a coordinator layout and an appbar layout which contains a toolbar layout -- it looks like this:
Then I tried removign the coordinator layout, and app bar, and just have a LinearLayout with a toolbar and a nested scroll view inside it -- looks like this:
As you can probably tell it doesn't look like quite right. Using their nav drawer layout worked perfectly fine with the status bar being the same color as the toolbar.
I've also tried messing with fitsSystemWindows to no avail.
Q: How do I make the system bar be the correct color?
I think I heard about this potentially being a bug in the design library, so perhaps there is a workaround for now?
Here is my layout code:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<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.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/fixed_scroll_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="24dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/card_margin">
<LinearLayout
style="#style/Widget.CardContent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Info"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="blank text for now" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
My style-v21 theme contains:
<item name="android:statusBarColor">#android:color/transparent</item>
Removing that fixed the problem.