Android toolbar layout width and height getting changed automatically? - android

I'm new to Android Studio and it is creating a lot of problem to me while setting my toolbar in and activity,the problem is whenever i change it layout width and height to the following
layout_width=match_parent
layout_height=attr/actionBarsize
it is getting back to change to the following
layout_width=368dp
layout_height=56dp
No matter how many times it tried to change it is giving me the same result again and again.

Yeah this was really annoying me too. I presume you are trying to put the toolbar within a ConstraintLayout.
ConstraintLayout doesn't support match_parent and it expects every view to be constrained. When you click in the design mode of the Android Studio, the editor will kick in and try to 'fix' any issues with your xml. In this case it finds your toolbar is not constrained and is incorrectly using match_parent and so tries to fix this for you (and you should see a warning that the toolbar is not constrained).
I think you have 2 options:
1 Constrain the toolbar in your layout and replace 'match_parent' with '0dp'
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="0dp"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:layout_marginLeft="0dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="0dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="0dp" />
2 Put the toolbar within a co-ordinator layout. You used to have to do this for scrolling functionality with the toolbar, but with the new ConstraintLayout I'm not sure if this still applies
<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:fitsSystemWindows="true">
<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.CoordinatorLayout>

XML:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
android:id="#+id/coach_bar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#F4B702"
app:popupTheme="#style/AppTheme.PopupOverlay" >
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<!--<Your Design>-->
</RelativeLayout >
Java
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setLogo(R.drawable.my_icon);
setSupportActionBar(toolbar);
if(getSupportActionBar()!=null)
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
Manifest.xml
<activity
android:name=".MainActivity"
android:label="#string/app_name"
android:screenOrientation="portrait"
android:theme="#style/AppTheme.NoActionBar"/>

I had this problem and finally I found that I didn't saved style.xml after it changed.

Related

removing the shadow or blank space form AppBarLayout +Toolbar [duplicate]

I tried to remove the shadow below the toolbar with the Theme.AppCompat.Light.NoActionBar, using every recommendation of people who have ever answer it before, but no one worked. I tried
<item name="android:windowContentOverlay">#null</item>
and
<item name="android:windowContentOverlay">#drawable/solid_line</item> ....
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle">
<solid android:color="#color/accueil_color" />
<size android:height="15dp" />
</shape>
and with this,
android:elevation="0dp"
the shadow goes from the top of the screen but not disapear.
Have you any idea for totally remove this shadow line ??
I'm not an expert but I run into the same problem just a few hours ago. So the idea here is that with AppCompat we have to manage the library attributes rather than Android attributes. In other words, instead of android:elevation try app:elevation:
<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/appbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
EDIT :
I just tried another option without AppBarLayout. This way works perfectly fine for me, the shadow is completely gone. So I suspect the problem is in your other View. I don't think it's your ToolBar drops the shadow.
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
app:elevation="0dp" />
use app:elevation="0dp" instead of android:elevation
I had the same problem. Applying app:elevation="0dp" on android.support.design.widget.AppBarLayout solves the issue
Add app:elevation="0dp" in AppBarLayout and shadow will be hide.
I had the same problem.
If your Toolbar is inside android.support.design.widget.AppBarLayout
Adding app:elevation="0dp" on android.support.design.widget.AppBarLayoutwill solve your problem.
Else add app:elevation="0dp" on Toolbar.
<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/appbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
Hope it helps :)
Just use after the super.onCreate(savedInstanceState);
if(getSupportActionBar() != null)
{
getSupportActionBar().setElevation(0);
}
Just put your AppBarLayout inside of a LinearLayout on a separated XML file, and then, include this XML to your main XML.
#DmitryO
Hum my xml is like this, i don't have android.support.design.widget.AppBarLayout, just the toolbar widget,
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fab="http://schemas.android.com/apk/res-auto"
xmlns:materialdesign="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:theme="#style/AppThemeAccueil">
<View xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="#dimen/statusBarHeight"
android:background="#color/accueil_colorDark"
android:elevation="#dimen/statusBarElevation"/>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:popupTheme="#style/AppThemeAccueilToolbar"
android:theme="#style/AppThemeAccueilToolbar"
android:id="#+id/toolbarAccueil"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
materialdesign:elevation="0dp"
android:elevation="0dp"
android:outlineProvider="background"
android:layout_marginTop="#dimen/appBarTopMargin" >
</android.support.v7.widget.Toolbar>
</RelativeLayout>
Have I to had this ? (I think this will not change the result)
If your are not using Toolbar on the Layout and you have the default toolbar from AppCompactActivity this can help you
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getSupportActionBar().setElevation(0);
At least it worked for me.
Regards,
In Kotlin, use:
supportActionBar!!.elevation = 0.0f
Regards!

How can I put a SearchView inside of a ToolBar with a height set to wrap_content without it disappearing?

I've noticed that if I place an android.support.v7.widget.SearchView inside of an android.support.v7.widget.Toolbar with its height set to wrap_content that the SearchView behaves very strangely. It appears fine at first but then as soon is it gains focus it disappears and no longer takes up space in a layout. This can be resolved by setting an explicit height to the Toolbar but I'm trying to use wrap_content specifically because my use-case requires the Toolbar to resize dynamically.
It might also be worth mentioning that the SearchView is still functional after it disappears. If I add a SearchView.OnQueryTextListener to the SearchView then I can observe that the query text is indeed being updated as I type. Neither this text nor any other part of the SearchView takes up space in the layout though and if you force it to be unobscured in the layout then it is still not visible.
This kind of seems like a bug in SearchView to me. Does anybody have some more insight into why it's happening or how to work around it?
Here's a working example of the issue:
<?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.me.MyActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
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="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
<android.support.v7.widget.SearchView
android:id="#+id/internalSearchView"
app:queryHint="To..."
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</android.support.v7.widget.SearchView>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
It certainly looks like it should work... I have two suggestions.
If it doesn't interfere with your design goals, set android:minHeight="?attr/actionBarSize" on your toolbar. This may be desired anyway.
Try setting android:layout_height="48dp" on the SearchView.
No No No...
set the search view with these params:
<FrameLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay"
android:animateLayoutChanges="true">
<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"/>
<com.lapism.searchview.widget.SearchView
android:id="#+id/searchView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/search_behavior"
app:search_version="menu_item"
app:search_version_margins="menu_item"/>
</FrameLayout>

Android toolbar issues

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.

How to change the toolbar name and put icon with tool bar

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>

Android: AppBarLayout gradient background

I tried implementing a toolbar with gradient background (from black to transparent). The toolbar is inside an AppBarLayout, which is inside a CoordinatorLayour, because I want the Toolbar to slide off the screen when scrolling the screen (hance the scroll|enterAlways scroll flags). This works perfectly fine for pre-lollipop versions and looks like this:
But on lollipop this is what is displayed:
I tried other combinations of backgrounds on the toolbar and appbarlayout to get the toolbar to have the gradient background, but everything produces the same result. I tried searching for similar problems and found none.
<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:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/gradient">
<android.support.v7.widget.Toolbar
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#android:color/transparent"
app:layout_scrollFlags="scroll|enterAlways">
...
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
AppBarLayout forces an elevation. Since the toolbar is inside AppBarLayout and the toolbar is transparent, the side and bottom shadow of AppBarLayout became obvious.
Include app:elevation="0dp" inside your AppBarLayout. Hope it helps.
Put Toolbar and TabLayout inside the LinearLayout and set background attributes for LinearLayout as below code. It's worked and I used this code for my app.
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="72dp"
android:theme="#style/AppTheme.AppBarOverlay">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/appbar_bg">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="36dp"
android:background="#android:color/transparent"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.design.widget.AppBarLayout>

Categories

Resources