I want to create a profile activity which toolbar should look somehow like this:
So far I have this:
Also I don't understand how to get rid of this shadow or overlay effect, maybe this would already solve my problem.
activity_activity_profil.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.appmac.ron.app_newsfeed.ActivityProfil">
<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="#drawable/toolbar_color"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_activity_profil" />
<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" />
</android.support.design.widget.CoordinatorLayout>
toolbar_color.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="90"
android:centerColor="#7b7b7b"
android:endColor="#2b2b2b"
android:startColor="#ffffff"
android:type="linear" />
</shape>
UPDATE:
The Shadow is gone, now i would like to make my Toolbar transparent, like this:
I have this right now:
If more code is needed just tell me and I'll update it.
Thankful for any help!
Set the elevation to 0dp on your AppBarLayout:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp"
android:theme="#style/AppTheme.AppBarOverlay">
You might want to move the background to the AppBarLayout as well.
Related
I was trying to add a faded border to my ImageView which is present in CollapsingToolbarLayout, but I failed.
What I achieved is present in Image below
What I want to Achieve is
The code I've tried is just a simple collapsing toolbar
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_detail_buddhism"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:title=""
app:expandedTitleMarginStart="10dp"
app:expandedTitleMarginBottom="20dp"
app:expandedTitleMarginTop="20dp"
app:expandedTitleTextAppearance="#style/Base.TextAppearance.AppCompat.Display1">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/main_image"
android:layout_width="match_parent"
android:layout_height="220dp"
android:src="#drawable/buddha"
android:scaleType="centerCrop"
android:foreground="#drawable/drawable_bottom_effect"
/>
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_detail_buddhism"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
Drawable code
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<gradient
android:angle="270"
android:endColor="#000000"
android:startColor="#00000000"
android:type="linear" />
</shape>
</item>
</layer-list>
To achieve the fading of the ImageView, you can add a library called FadingEdgeLayout to your layout.
Add FadingEdgeLayout to your project in build.gradle
implementation
'com.github.bosphere.android-fadingedgelayout:fadingedgelayout:1.0.0'
After doing that, add the FadingEdgeLayout to your layout as follows:
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_detail_buddhism"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:title=""
app:expandedTitleMarginStart="10dp"
app:expandedTitleMarginBottom="20dp"
app:expandedTitleMarginTop="20dp"
app:expandedTitleTextAppearance="#style/Base.TextAppearance.AppCompat.Display1"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/colorPrimaryDark"
>
<com.bosphere.fadingedgelayout.FadingEdgeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:fel_edge="bottom"
>
<ImageView
android:id="#+id/main_image"
android:layout_width="match_parent"
android:layout_height="220dp"
android:src="#drawable/stories_background"
android:scaleType="centerCrop"
/>
</com.bosphere.fadingedgelayout.FadingEdgeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_detail_buddhism"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
app:layout_collapseMode="pin"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
Changing your layout to above will add fading edge to your ImageView.
But keep in mind, FadingEdgeLayout takes the color of the background as color of the faded edge, so I've added android:background="#color/colorPrimaryDark" so you'll notice what color it takes for it's edges.
You can also add more edges(bottom,left,top,right), control the size of the fade, etc. Go on the link mentioned on the top of the answer.
I have Toolbar inside AppBarLayout and CoordinatorLayout. The designer wants to change elevation shadow to 1dp, but I can not change it for some reason.
If I add this on AppBarLayout then it removes shadow:
app:elevation="2dp"
If I remove it, then I have default 4dp elevation shadow.
I want to change it to 1dp.
Here is my code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/activityCategoryAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stateListAnimator="#null"
app:elevation="#dimen/elevationSize"
>
<android.support.v7.widget.Toolbar
android:id="#+id/activityCategoryToolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#android:color/white"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/Widget.MyApp.ActionBar"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/activityCategorySrl"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
<android.support.v7.widget.RecyclerView
android:id="#+id/activityCategoryRvPosts"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</android.support.v4.widget.SwipeRefreshLayout>
Change your AppBarLayout code to:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stateListAnimator="#animator/appbar_always_elevated"
android:theme="#style/AppTheme.AppBarOverlay">
And add appbar_always_elevated.xml in animator directory with this content:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<objectAnimator android:propertyName="elevation"
android:valueTo="1dp"
android:valueType="floatType"
android:duration="1"/>
</item>
</selector>
It should work now.
You can change android:valueTo value to set shadow. Also, app:elevation is not working on new APIs.
#deprecated target elevation is now deprecated.
Source: https://chromium.googlesource.com/android_tools/+/refs/heads/master/sdk/sources/android-25/android/support/design/widget/AppBarLayout.java?autodive=0%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F
I am attempting to set a logo as background in an Android toolbar. I've tried to put the image as a layer directly in the toolbar but this results in the logo not being centered. Here is the code I've got right now:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="#drawable/Toolbar_background"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
</android.support.v7.widget.Toolbar>
And for the drawable Toolbar_background:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<item>
<shape android:shape="rectangle">
<solid android:color="?attr/colorPrimary" />
</shape>
</item>
<item>
<bitmap
android:contentDescription="Unleashed logo"
android:src="#drawable/unleashed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:paddingBottom="10dp" />
</item>
</layer-list>
This works but the logo is stretched in width and no padding is aplied, the bitmap takes up all spaces it can get.
https://www.imgdumper.nl/uploads9/5a796ede6c77c/5a796ede6bd4d-Capture.PNG
You can create custom toolbar.
Check below code.
toolbar_bg_image.xml
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#color/colorAccent"
app:contentInsetEnd="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
app:contentInsetStart="0dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/toolbarTheme">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/_4sdp"
android:paddingRight="#dimen/_4sdp"
android:paddingStart="#dimen/_4sdp"
android:paddingEnd="#dimen/_4sdp"
android:layout_marginLeft="#dimen/_20sdp"
android:layout_marginRight="#dimen/_20sdp"
android:scaleType="fitXY"
app:srcCompat="#drawable/unlashed"/>
</android.support.v7.widget.Toolbar>
</layout>
I suggest you to take your image without background and set background color as per your requirement in android:background="#color/colorAccent" property of toolbar.
You can also set margin and padding in ImageView as per your requirement.
Now you can include this toolbar in your layout file as below.
fragment_or_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:orientation="vertical">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar_bg_image" />
</LinearLayout>
</layout>
You can try setting logo as below:
<Toolbar
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:id="#+id/atc_toolbar"
android:background="?android:attr/colorPrimaryDark"
android:elevation="4dp"
android:navigationIcon="#android:drawable/ic_menu_compass"
android:logo="#android:drawable/ic_menu_view"
android:title="My application">
</Toolbar>
CollapsingToolbarLayout from appcompat shows shadow in collapsed state, but when expanded (or expanding in process) shadow disappear
My example code https://github.com/NaikSoftware/CollapsingToolbarWithImageAndTabs/tree/master/app
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/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="ua.naiksoftware.hidetabs.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_plus_tabs"
app:contentScrim="#android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap|enterAlways"
app:titleEnabled="false"
app:toolbarId="#+id/toolbar_wrapper">
<ImageView
android:id="#+id/appbar_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/header_back"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#android:color/transparent"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_wrapper"
android:layout_width="match_parent"
android:layout_gravity="bottom"
android:background="#android:color/transparent"
android:layout_height="wrap_content"
android:minHeight="#dimen/tab_layout_height">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
app:tabGravity="fill"
app:tabIndicatorColor="#android:color/white"
app:tabMode="scrollable"
app:tabSelectedTextColor="#android:color/white" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_add_black_24dp"
android:layout_margin="#dimen/fab_margin"
android:tint="#android:color/white"
android:layout_gravity="bottom|end"
app:elevation="#dimen/fab_elevation"
app:layout_behavior="ua.naiksoftware.hidetabs.FabSlidingBehavior"/>
</android.support.design.widget.CoordinatorLayout>
Collapsed
Expanded
I had the same issue and found a solution:
First you have to update to the latest Support Library (I use 24.1.0)
Then apply the stateListAnimator to your AppBarLayout:
example:
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="320dp"
android:stateListAnimator="#drawable/appbar_always_elevated"
android:fitsSystemWindows="true">
and use this xml as animator:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<objectAnimator android:propertyName="elevation"
android:valueTo="8dp"
android:valueType="floatType"
android:duration="1"/>
</item>
</selector>
You can find official stateListAnimator for AppBarLayout here
1. Put this appbar_elevation.xml into resources directory named animator-v21
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
tools:ignore="PrivateResource">
<item>
<objectAnimator
android:propertyName="elevation"
android:valueTo="#dimen/design_appbar_elevation"
android:valueType="floatType" />
</item>
</selector>
2. On AppBarLayout set android:stateListAnimator="#animator/appbar_elevation"
Just use
app:liftOnScroll="false"
on the AppBarLayout
I'am working on an Android app with material design. I have a detail view with a CollapsingToolbarLayout and a ImageView (works fine so far). Unfortunately the title is not readable if there is a bright image.
So far I tried to add a gradient (Add gradient to imageview) but this solution didn't work for me because of the CollapsingToolbarLayout.
Here you can see my code:
<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:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_height="256dp"
android:layout_width="match_parent"
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"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="#color/primary"
android:fitsSystemWindows="true"
app:expandedTitleMarginEnd="50dp"
app:expandedTitleMarginStart="50dp"
>
<!--<View
android:background="#drawable/actionbar_gradient_dark"
/>-->
<ImageView
android:id="#+id/backimg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
android:scaleType="centerCrop"
app:layout_scrollFlags="scroll|enterAlways"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/detailToolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
app:layout_collapseMode="pin"
app:layout_collapseParallaxMultiplier="0.7"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.CollapsingToolbarLayout>
Does anyone know a solution for this issue?
Wrap your ImageView in a FrameLayout and add a View with a background:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/backimg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
android:scaleType="centerCrop"
android:src="#drawable/image"
app:layout_scrollFlags="scroll|enterAlways" />
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/actionbar_gradient_dark" />
</FrameLayout>
Make sure your gradient is something like this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="90"
android:endColor="#android:color/transparent"
android:startColor="#android:color/black" />
<corners android:radius="0dp" />
</shape>