I was doing final touches on my app and noticed strange behavior on my toolbar on devices running 5.0 and above. On devices that are below 5.0 there is no strange line below my image which I setup as a backgroundDrawablefor toolbar but on devices 5.0 and above seems like toolbar is visible behind the image. I tried many approaches that I found mostly here on stackoverflow but nothing seems to work. I tried with transparent background but that didn't work. I created custom theme with also with transparent background but that didn't work too. Here are the images:
Code:
<?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"
android:orientation="vertical"
android:layout_width="match_parent"
android:background="?attr/colorPrimary"
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:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolBar"
android:layout_width="match_parent"
android:layout_height="100dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:background="#android:color/transparent"
app:layout_scrollFlags="scroll|enterAlways">
<ImageView
android:id="#+id/icon"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ic_logo_final"
android:layout_gravity="center"
android:gravity="center"
android:layout_marginRight="50dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="15dp"
/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/recyclerView">
</android.support.v7.widget.RecyclerView>
</android.support.design.widget.CoordinatorLayout>
Thanks in advance.
try this to remove shadow from toolbar:
<style name="MyAppTheme" parent="android:Theme.Holo.Light">
<item name="android:windowContentOverlay">#null</item>
</style>
Also set app:elevation="0dp" in AppBarLayout for hiding shadow in appbar
It's due to the shadow feature of Toolbar.. so hide it..
Try..applying "app:elevation="0dp" in the "android.support.design.widget.AppBarLayout" to resolve this issue.
Related
im new to android studio and im having torouble understanding views and layouts, the this is, im using a drawerLayout to add a toolbar, but when I added it, my button jumped to the topleft corner and I cant move it from there.
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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"
tools:context=".MainScreen"
tools:ignore="ExtraText"
android:id="#+id/drawer_layout">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/logout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="313dp"
android:layout_marginBottom="798dp"
android:text="Log Out"
app:layout_anchor="#+id/appBarLayout"
app:layout_anchorGravity="bottom|center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.003"
app:layout_constraintStart_toStartOf="parent" />
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/mainToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/holo_orange_light"/>
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.material.navigation.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent">
</com.google.android.material.navigation.NavigationView>
</androidx.drawerlayout.widget.DrawerLayout>
This is my code
Thanks in advance
Try removing the margins from the button.
The design view in Android Studio can be helpful to get a layout started, but you almost always have go go in and manually adjust each element.
I need to change the font size, the font itself, and center the text in the ToolBar.
I took a template from Bottom Navigation Activity studio.
I was trying setting the text size in themes.xml (I was able to change the background color and text color there)
<style name="CustomToolBarStyle" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="titleTextColor">#color/black</item>
<item name="android:background">#color/white</item>
I was trying to use this option in themes.xml:
<item name="android:gravity">center</item>
It didnt help. I tried to follow this instruction:
https: //stackoverflow.com/questions/26533510/android-toolbar-center-title-and-custom-font Throws android.support.v7.widget.Toolbar into an error and get a crash.
ToolBar
NavbarTemplate
For API level 21+ you can use app:titleTextAppearance property of toolbar
<android.support.v7.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="?actionBarSize"
android:id="#+id/toolbar"
app:titleTextAppearance="#style/yourstyle" />
and override the default title size in a custom style:
<style name="yourstyle" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">18sp</item>
<item name="android:fontFamily">yourFont</item>
</style>
For centering, you should follow this answer and if this and none of the other answer works for you from the same post https://stackoverflow.com/a/38175403/9917400, than just use a linear layout inside Toolbar.
You can set constraint-layout inside the toolbar
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
app:layout_collapseMode="pin">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:textColor="#color/blue"
android:textSize="16sp"
app:fontPath="fonts/xxx" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.appcompat.widget.Toolbar>
If you're using androidx don't use android.support.v7.widget.Toolbar.
You have to use androidx.appcompat.widget.Toolbar.
Create toolbar.xml in res/layout.
Put this code:
<?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"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="yourToolBarBackgroundColor"
>
<TextView
android:id="#+id/toolbar_title"
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="TestToolBar"
android:fontFamily="yourFont"
android:textSize="yourSizeOfText"
android:textColor="yourTextColor" />
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/activity_main" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Disable ActionBar in themes.xml:
<style name="Theme.YourProject" parent="Theme.MaterialComponents.DayNight.NoActionBar">
For night theme you have to do same thing in themes.xml(night)
Then in MainActivity.java in onCreate:
setContentView(R.layout.toolbar);
I'm trying to remove that default menu button that appears on the left of my toolbar, so I can replace it with a custom button.
Here is the XML file for my toolbar:
<?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="?android:attr/actionBarSize"
tools:context="MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/AppBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#color/colorPrimary">
<TextView
android:id="#+id/appBarTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:letterSpacing="0.5"
android:text="#string/toolbar_title"
android:textColor="#color/black"
android:textSize="24sp"
tools:ignore="MissingPrefix" />
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/content_main" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
And here is the content_main.xml file:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="MainActivity"
tools:showIn="#layout/toolbar">
</androidx.constraintlayout.widget.ConstraintLayout>
you might want to check https://stackoverflow.com/a/28291205/9891833 this link. I believe that this link is a good example of what you want to achieve. If you want a shortcut;
toolbar.getMenu().clear();
this might help you to remove the button. I hope these work for your case. Best of luck! :)
If you want a toolbar based design with customizable option you can go ahead with AppBarLayout wrapping a relativelayout or any other as per your interest. Handling is much easier in this case
What is the default height of the android toolbar if it contains a menu with icons?
If I use
<android.support.v7.widget.Toolbar android:layout_height="?android:attr/actionBarSize" />
then it looks cut-off like this
If I use
<android.support.v7.widget.Toolbar android:layout_height="wrap_content" />
it works correctly. But it flickers for a moment when initializing the Activity, because it starts smaller and gets adjusted a few miliseconds later.
How to set the correct height right from the beginning?
Update
The full XML looks like this
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:fitsSystemWindows="true"
tools:context=".MyActivity" >
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay"
android:fitsSystemWindows="true" >
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/myToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"
android:elevation="#dimen/elevation"
android:fitsSystemWindows="true" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
The menu file looks like this
<menu 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"
tools:context=".MyActivity" >
<item
android:id="#+id/action_save"
android:orderInCategory="100"
android:icon="#drawable/ic_save"
app:showAsAction="always" />
</menu>
In my Activity onCreate() method I do this
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_mine);
Toolbar toolbar = (Toolbar) findViewById(R.id.myToolbar);
setSupportActionBar(toolbar);
}
The actionBarSize is correct approach but it looks like your Toolbar is under StatusBar.
To avoid drawing under the Android StatusBar you should disable fitsSystemWindows for your root layout (CoordinatorLayout). If you want to read more, check out this article.
For others, if android:fitsSystemWindows="false" doesn't help you can check if the problem is connected with a transparency of status bar - look for android:windowTranslucentStatus, android:statusBarColor in the project.
Even if you didn't set any of these settings by yourself, these could come from default Android Studio template.
I'm creating a fragment with a collapsing Toolbar Layout using a ViewPager. This is the XML for the Layout:
<?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:id="#+id/htab_maincontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".activities.AppActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/htab_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
android:backgroundTint="#color/completeWhite">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/htab_collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="420dp"
android:fitsSystemWindows="true"
app:contentScrim="#color/completeWhite"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:titleEnabled="false">
<RelativeLayout
android:id="#+id/brand_page"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax"
android:paddingTop="24dp"
android:layout_marginTop="?attr/actionBarSize">
//Lots of images and texts that are collapsed
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/htab_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top"
android:layout_marginBottom="75dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<android.support.design.widget.TabLayout
android:id="#+id/htab_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:tabIndicatorColor="#android:color/white"
app:tabSelectedTextColor="#color/lightGreen"
app:tabTextColor="#color/grey"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<io.brandie.brandie.custom.NoSwipeViewPager
android:id="#+id/htab_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_marginBottom="#dimen/spacing_giant"
android:background="#color/white"/>
</android.support.design.widget.CoordinatorLayout>
The viewPager is filled with fragments that use a gridview to display different cards, this is the xml for the Fragment of the first tab:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
android:id="#+id/NestedScroll"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:fillViewport="true"
android:fitsSystemWindows="true"
android:layout_gravity="fill_vertical"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/all_campaigns_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="io.brandie.brandie.fragments.AllCampaignsFragment">
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/all_campaigns_grid"
android:descendantFocusability="blocksDescendants"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numColumns="2"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center" />
</FrameLayout>
</android.support.v4.widget.NestedScrollView>
With this I can scroll down anywhere on the screen to make the toolbar collapse and the view-pager expand. The problem is, when the tool-bar is completely collapsed and only the tabs are showing, I can't scroll the viewPager anymore. Since it holds a gridView with a lot of items, it results in that I can't scroll through them all, since the scroll just "stops".
I want it to look like this
But instead, when the toolbar is collapsed, I can't scroll the viewPager down anymore. I can however scroll it up to reveal the toolbar again, that works without issues. I am using Android API 16, is that an issue?
How do I fix this very irritating problem?
EDIT:
If I remove the NestedScrollView from the fragment XML, the collapsed Toolbar only collapses if I scroll on the toolbar. If I scroll the ViewPager, I can scroll through all content correctly, but the toolbar doesn't collapse.
Answer for your EDIT: Try using setNestedScrollingEnabled(false) on your GridView