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>
Related
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"
I'm following the steps outlined at https://developer.android.com/training/appbar/index.html to add an action bar to my activity.
However, adding it as described covers my ListView. The list has 2 entries. Before I tried to add the Action Bar, this is what it looked like:
Here I followed the steps and adjusted the manifest and my activity layout:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar" />
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
Now it looks like this:
I tried wrapping the Toolbar with an AppBarLayout object as shown at https://stackoverflow.com/questions/35845629/actionbar-covering-my-activity, but that didn't work.
How do I add an ActionBar to my activity and not cover the ListView. I would like to add a couple of buttons to the activity's action bar (not the overflow menu) so I can give options for adding to the list.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
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:elevation="4dp"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar" />
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar" />
</RelativeLayout>
I think you forget to add android:layout_below="#+id/toolbar" in listview as your layout is relative.
in my Android App I am using android.support.v7.widget.Toolbar and setting background image of Action Bar in MainActivity:
// Custom Action Bar
if(getSupportActionBar() != null){
getSupportActionBar().setDisplayShowTitleEnabled(false);
getSupportActionBar().setBackgroundDrawable(getResources().getDrawable(R.drawable.ic_tug));
}
Problem is that icon is stretching to the width of the action bar and I don't know how to change it into scaling to the height of the action bar, so that icon will not lose quality.
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="top"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:gravity="top"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
Wrong Image
How it should look like
Use an ImageView inside Toolbar and set the background as source in the ImageView
<android.support.v7.widget.Toolbar
style="#style/ToolBarStyle"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="#dimen/abc_action_bar_default_height_material">
<ImageView
android:layout_width="wrap_content"
android:contentDescription="#string/logo"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/ic_launcher"/>
</android.support.v7.widget.Toolbar>
You must have your image in different resolutions, and add each different image in the appropriate folder like this:
I think you want to set the icon in the toolbar, here how you can do it.
getSupportActionBar().setDisplayShowHomeEnabled(true);
getSupportActionBar().setIcon(R.drawable.ic_tug);
Or you can take an ImageView in your toolbar and add left margin to it and set the image from the Activity.
You can add image to the center of the toolbar using xml layout as below.
<android.support.v7.widget.Toolbar
style="#style/ToolBarStyle"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="#dimen/abc_action_bar_default_height_material">
<ImageView
android:layout_width="wrap_content"
android:contentDescription="#string/logo"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/yourDrawable"/>
</android.support.v7.widget.Toolbar>
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 want to use the Toolbar in my app (create with Eclipse IDE) and use this Toolbar on all Activities.
I think this code will be work:
<LinearLayout 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.v7.widget.Toolbar
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:titleTextColor="#android:color/white"
android:background="?attr/colorPrimary">
</android.support.v7.widget.Toolbar>
<!-- Layout for content is here. This can be a RelativeLayout -->
but i dont have any idea for usage
sorry for bad english, i'm iranian.
Thanks for help.
Include Toolbar in each layout.xml of all your Activities.
Just for example:
<LinearLayout
...>
<Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
...
</LinearLayout>