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>
Related
Question 1) How to delete the border line of the tablayout?
Question 2) How to set the padding for the action bar icon?
Here with the code in activity_main.xml:
<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:background="#drawable/bg2"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorTransparent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#android:color/transparent"
app:tabIndicatorHeight="0dp"
app:tabPaddingStart="0dp"
app:tabPaddingEnd="0dp"
app:tabGravity="fill"
app:tabMode="fixed" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Here with the code I wrote in the Main_Activity.kt file:
//Action Bar
val actionBar = supportActionBar
actionBar!!.setDisplayShowHomeEnabled(true)
actionBar.setBackgroundDrawable(ColorDrawable(Color.parseColor("#00FFFFFF")))
actionBar.setIcon(R.drawable.title)
actionBar.setDisplayShowTitleEnabled(false)
You could create a custom layout for your action bar that lets you control how the icon will look. However due to the millions of problems that you will encounter doing that, can I suggest you move from using ActionBar to its successor, the Toolbar, introduced in API 21, which you should be using:
https://guides.codepath.com/android/Using-the-App-ToolBar
You can easily introduced a fully customizable Toolbar within your CoordinatorLayout, and do cool things thanks to the design library.
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/background_light"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentInsetStart="0dp">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/qpon_drawable"
android:layout_margin="20dp"
android:layout_gravity="center"/>
</FrameLayout>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#android:color/transparent"
app:tabIndicatorHeight="0dp"
app:tabPaddingStart="0dp"
app:tabPaddingEnd="0dp"
app:tabGravity="fill"
app:tabMode="fixed" />
</android.support.design.widget.AppBarLayout>
I can add any margins I want, and taking the app:contentInsetStart="0dp" it has no start padding. You can add the toolbar as a support action bar in your code:
// Find the toolbar view inside the activity layout
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
// Sets the Toolbar to act as the ActionBar for this Activity window.
// Make sure the toolbar exists in the activity and is not null
setSupportActionBar(toolbar);
I had the same problem of a border when I set the background color of the AppBarLayout as transparent:
When I set the AppBarLayout's background to the same colour as the background, it seems to draw over the edges and the border disappears. Bear in mind that it automatically gives it a shadow in the bottom since it is above the content of the Viewpager:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
<!-- This is what you want to change !-->
android:background="#android:color/background_light"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
No more border edges on the side. I don't quite know why it does that, it seems to be like it is a card layout in its natural form if you don't color over it.
Hope it helps. No matter your reasoning, do try to change to the Toolbar I think that is the only right answer!
I have a layout which has a toolbar in the top, followed by 2 toolbar sized bars under it and a listview below that. When someone scrolls on the listview, the 2 bars under the toolbar should scroll up and disappear under the toolbar.
I tried putting the app:layout_scrollFlags="scroll|enterAlways" only on those bars and not the toolbar but then they doesn't respond to scroll events.
If I put the same scrollFlags on the toolbar as well, they all respond but I want the toolbar to always display.
If I move the two bars above the toolbar, it works and only the two bars respond, but now the toolbar is below the bars and this is not the display I want.
Try putting the Toolbar you want to stay still at the top below your appBar. Your AppBar contains the views that you actually want to scroll, while the other one will be below it. Make sure to have your app bar have an elevation of 0dp or else it will go and be displayed above it (or change the elevation of your toolbar to be higher than the appbar). Also add the Height of the bar you want to stay at the top as the top margin of the appbar so it starts out below you view.
<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">
<!--Toolbars you want to move-->
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
android:layout_marginTop="?attr/actionBarSize"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/holo_blue_light"
android:layout_gravity="bottom"
app:layout_scrollFlags="scroll|enterAlways"
/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/holo_orange_light"
android:layout_gravity="bottom"
app:layout_scrollFlags="scroll|enterAlways"
app:elevation="2dp"
/>
</android.support.design.widget.AppBarLayout>
<!--Toolbar you don't want to move-->
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top"
android:background="#color/wallet_bright_foreground_holo_light"
app:popupTheme="#style/AppTheme.PopupOverlay"
/>
<!--Your content here -->
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include layout="#layout/item_list" />
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
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'm trying to utilize the CoordinatorLayout, AppBarLayout, CollapsingToolbarLayout, Toolbar and a parallax'ed ImageView. It looks like the ripple effect of the toolbar menu items is cropped. The following image displays the ripple effect of the back button in expanded and in partially collapsed mode. In complete collapsed mode the ripple effect is not shown at all. I think this is caused by the parallax'ed ImageView that is positioned there.
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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v4.view.ViewPager>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="224dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:weightSum="1.0">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="56dp"
android:layout_weight="1.0"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="48dp"
android:scaleType="centerInside"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.4"/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:tabGravity="fill"
app:tabMode="fixed"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
The ImageView displays a 9-patch'ed Image. Is there something wrong with the layout or is it a bug/inability in the design support library to draw the ripple ontop of the ImageView?
I think your solution is here.
You can try to add this line:
<item name="actionBarItemBackground">?attr/selectableItemBackground</item>
in the theme/style of your Toolbar.
If it doesn't work, add this in your Toolbar attributes:
android:background="#android:color/transparent"
I'm using Android Design Library components, and I would like to have an image behind my ToolBar and TabLayout. The image must be cropped and not fit to the size. I'm actually setting my image as android:background="#drawable/AppBarBg" in AppBarLayout which doesn't crop (of course) my image. How can I crop my background image ?
<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/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="100dp"
android:background="#drawable/AppBarBg"
android:scaleType="centerCrop"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
style="#style/ToolBarStyle"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
android:orientation="horizontal"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
AppBarLayout is basically just a LinearLayout so setting a background will strech it...
I think that you're looking for CollapsingToolbarLayout...
Your layout structure should be like this:
AppBarLayout
CollapsingToolbarLayout
ImageView (this is the background which you want to centerCrop)
ToolBar
TabLayout
etc...
check it out here: CollapsingToolbarLayout and TabLayout