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!
Related
I am working with a DrawerLayout and on press of one of the item, I want to show a Toolbar inside a CoordinatorLayout. Because, Android's standard ActionBar creates problems with ToolBar, I decided to use an Activity with Theme.AppCompat.NoActionBar instead and decided to use a ToolBar instead of an ActionBar.
Now, there is one normal Toolbar that serves as an ActionBar and as I click on one of the items from the drawer, I want to display a Fragment with another custom Toolbar replacing the "normal" Toolbar. So, I did that, removing the normal Toolbar but the Toolbar that is displaying now is without the title and overflow menu:
You can see the layout hierarchy here. The Toolbar is buried inside several ViewGroups and its not properly displaying. Although it's displaying like this, the Drawer layout is opening and closing on clicking the Home menu in the Toolbar. Again, the icon doesn't change on Drawer open/close.
I have tried setting the title explicitly with no avail. Does anyone know, what I am doing wrong here.
Here is the code for reference:
// Code for the Fragment 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:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:title="#string/app_name"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_pic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/avatar_boy_2"
app:layout_anchor="#id/main.appbar"
app:layout_anchorGravity="bottom|center"/>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_anchor="#id/profile_pic"
app:layout_anchorGravity="bottom"
>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/user_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:lineSpacingExtra="8dp"
android:padding="#dimen/activity_horizontal_margin"
android:text="#string/account_person_name_label"
android:textAlignment="center"
android:textSize="40sp"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteY="168dp" />
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
I found the answer finally. The title from CollapsibleToolbarLayout interferes with that of Toolbar. So, we disable it and it works fine:
collapsingToolbarLayout.setTitleEnabled(false);
toolbar.setTitle("My Title");
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 trying to tweak the behavior of the CollapsingToolbarLayout element in my Android app.
Using the solution linked below, I have created a collapsing toolbar containing a TabLayout and a background image which disappears when the user scrolls up. Everything works as expected, but I'm wondering if I can change the position at which the CollapsingToolbar transitions from the image to the background color.
When using tabs, the transition from the image to the solid background color happens almost instantaneously when scrolling up. Without tabs, the toolbar transition doesn't occur until the toolbar is almost completely collapsed. I'm wondering if there's a way to delay the transition when using tabs so that it doesn't occur as quickly when scrolling.
Below is the XML code for my toolbar and tab layouts as well as screenshots of current and desired behavior.
Image: Current transition behavior (with tabs)
Image: Desired transition behavior (only achieved without using tabs)
<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="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="235dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
android:fitsSystemWindows="true"
>
<ImageView
android:id="#+id/toolbar_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"/>
<View
android:id="#+id/toolbar_scrim"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#drawable/scrim"
app:layout_collapseMode="pin"
android:fitsSystemWindows="true"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="104dp"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="13dp"
>
<!-- app title -->
<android.support.v7.widget.AppCompatTextView
android:id="#+id/app_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/app_name"
android:textColor="#color/md_white_1000"
android:textSize="20sp"
android:textStyle="bold"
android:paddingBottom="2.5dp"
android:gravity="top"
/>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:tabIndicatorColor="#android:color/white" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
Collapsing toolbar with tabs solution: blog.grafixartist.com/parallax-scrolling-tabs-design-support-library/
Add app:layout_collapseParallaxMultiplier="0.7" to your ImageView
You should be able to change the visibleScrimHeightTrigger() to fit your needs.
scrimVisibleHeightTrigger()
I'm building a toolbar with a map fragment as part of it. The toolbar is fixed in position and is opaque.
Whenever the view's content is scrolled upwards, the map fragment moves with it but it is visible above the toolbar (and therefore between the status bar itself and the statusbar's orange background).
This is the resulting issue:
If I scroll a bit more, the scrim fades in normally, but too late.
Is there a way of not drawing the content when it goes above the toolbar? Or a way of making the status bar background to be drawn in front of the AppBarLayout content?
I've tried drawing a view in front of the AppBarLayout (right below the statusbar), but once the MapFragment is scrolled all the way up, it is then brought to front of that view, making the MapFragment visible during a small instant.
<?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/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/promotion_details_image_height"
android:clickable="true"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/orange"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize">
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="none"
tools:context=".restaurants.stores.StoresFragment" />
<ImageView
android:id="#+id/minimizeBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/stores_details_minimize_margin"
android:clickable="true"
android:contentDescription="#null"
android:paddingTop="#dimen/status_bar_height"
android:src="#drawable/selector_map_minimize_btn"
android:visibility="gone" />
<include
android:id="#+id/cardDetailsLayout"
layout="#layout/store_card_small_detail"
android:layout_width="match_parent"
android:layout_height="#dimen/stores_details_card_height"
android:layout_alignParentBottom="true"
android:layout_margin="10dp"
android:visibility="gone" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<com.app.views.FontTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true"
android:text="#string/store_toolbar_text"
android:textColor="#color/white"
android:textSize="#dimen/toolbar_text_size"
app:font="#string/fontFlamaMedium" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Edit:
In the layout xml the android:layout_behavior attribute associated with my RecyclerView, but the toolbar's content has the correct behaviour, the problem is that it is visible under the statusbar, which I don't want it to.
You should remove your argument:android:fitsSystemWindows="true"
More about this on this blogPost from a google developper :
https://medium.com/google-developers/why-would-i-want-to-fitssystemwindows-4e26d9ce1eec
Remove this attribute from Toolbar
android:background="?attr/colorPrimary"
And add this attribute to CollapsingToolbar
app:contentScrim="?attr/colorPrimary"
The contentScrim will control the color of the Toolbar and ensure the color only appears when the background image has faded out
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>