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>
Related
I am looking for a way to make the rounded pill/ rounded corner selected tab indicator based on Google's latest Material Design. I have made a drawable with the desired results and implemented it as "app:tabIndicator", but it's not working properly.
This is what I want to achieve
rounded_tab_indicator.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:bottom="5dp"
android:end="5dp"
android:start="5dp">
<shape
android:shape="rectangle"
app:tabIndicatorFullWidth="false"
app:tabIndicatorHeight="5dp">
<corners android:radius="8dp" />
<solid android:color="#color/colorPrimary" />
</shape>
</item>
</layer-list>
activity_main.xml
<?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="com.example.android.tourguideapp.MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/htab_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/htab_collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:titleEnabled="false">
<ImageView
android:id="#+id/tour_image_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/dscn0585"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.80" />
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0.3"
android:background="#android:color/black"
android:fitsSystemWindows="true" />
<androidx.appcompat.widget.Toolbar
android:id="#+id/htab_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top"
android:layout_marginBottom="40dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
style="#style/CategoryTab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:tabIndicatorHeight="5dp"
app:tabIndicator="#drawable/rounded_tab_indicator"
app:layout_collapseMode="pin"
app:tabMode="scrollable" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
tab indicator drawable:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size
android:width="100dp"
android:height="2dp" />
<corners
android:topLeftRadius="8dp"
android:topRightRadius="8dp">
</corners>
<solid
android:color="#1475e7">
</solid>
</shape>
tab layout:
<com.google.android.material.tabs.TabLayout
...
app:tabIndicatorFullWidth="false"
app:tabIndicator="#drawable/tab_indicator"
... />
When you check the source code of the TabLayout, you can see that it draws the indicator drawable you provide with bounds whose size is calculated according to size of the tab. In order to achieve a tab layout like you shared, you should give a padding to your drawable. However, the size of the tabs varies so you have to provide the padding in percentage style. I don't know whether you can such a padding operation in the xml file but you can do that in a custom drawable class extending Drawable.
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.
So I've added Navigation Drawer and because of it I have to use Toolbar in my layout xml file (instead of using theme with action bar Theme.AppCompat.Light.DarkActionBar, and now it's Theme.AppCompat.Light.NoActionBar)
<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="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"/>
</com.google.android.material.appbar.AppBarLayout>
I found this answer to add shadow below toolbar (AppBarLayout) https://stackoverflow.com/a/31026359/9766649
But it only works for Android 21+
With Theme.AppCompat.Light.DarkActionBar shadow is working for older Android
So the only solution is to use custom shadow like https://stackoverflow.com/a/26904102/9766649 ?
I decided to use different implementation for older and newer Android
For Android 21+ (layout-v21/activity_main.xml):
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<include layout="#layout/toolbar_view"/>
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/content"/>
</LinearLayout>
For older Android (layout/activity_main.xml):
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/toolbar_view"/>
<FrameLayout android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/content"/>
<View android:layout_width="match_parent"
android:layout_height="5dp"
android:background="#drawable/drop_shadow"/>
</FrameLayout>
</LinearLayout>
toolbar_view.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppTheme.ActionBar"
xmlns:android="http://schemas.android.com/apk/res/android"/>
drawable/drop_shadow.xml (to add elevation below toolbar for older Android):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#android:color/transparent"
android:endColor="#88666666"
android:angle="90"/>
</shape>
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
How can I add a divider so that it appears underneath the action bar and above the master/detail panes? I've already defined the vertical divider but don't know how to define the horizontal divider also.
<LinearLayout 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"
android:orientation="horizontal"
android:divider="#drawable/divider_vertical"
android:showDividers="middle"
android:baselineAligned="false"
tools:context=".MainActivity" >
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="#+id/master_container"/>
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:id="#+id/detail_container"/>
</LinearLayout>
divider_vertical.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<size android:width="1dp"/>
<solid android:color="#FFFFFF"/>
</shape>
divider_horizontal.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<size android:height="1dp"/>
<solid android:color="#FFFFFF"/>
</shape>
I do not see the code for the toolbar, so in my sense there should be a view below the toolbar as follows. I have used material design toolbar, you may use any toolbar.
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="0dp"
android:theme="#style/Base.ThemeOverlay.AppCompat.Dark">
</android.support.v7.widget.Toolbar>
<View android:layout_height="0dp"
android:layout_width="fill_parent"
android:id="#+id/stripBelowToolbar"/>
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp"
android:theme="#style/Theme.Insider.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:titleTextColor="#color/black"
android:elevation="0dp"
android:theme="#style/ToolbarColoredBackArrow"
android:background="#color/background_tint"
app:popupTheme="#style/Theme.Insider.PopupOverlay" />
<View
android:background="#color/lighter_color"
android:layout_width="match_parent"
android:layout_height="2dp"
/>
</com.google.android.material.appbar.AppBarLayout>
This worked for me