I'm trying to update my apps ActionBar into toolbar but I encountered some problem on customizing my Toolbar to display a custom drawable.
What I tried so far is to set my xml drawable into the Toolbar but it destroys the whole toolbar and moved the menu button down where I cannot properly see it:
Here's the drawable first:
bg_actionbar.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/bg_gradient" />
<item android:drawable="#drawable/icon_logo" />
</layer-list>
bg_gradient is just a 9patch image gradient and same with the icon_logo.
And for my 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:id="#+id/actionBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/bg_actionbar"
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp">
</android.support.v7.widget.Toolbar>
this one pushes my menu button below and has a spacing of about 300dp on left with the icon shrinked in height.
Now I just tried to directly changed the background straight into just the png image (bg_gradient) and same thing happens. I've also tried adding an ImageView inside the Toolbar but same thing it just destroys the whole ToolBar and once again I'm lost on how I can customize this Toolbar further. Anyone has the idea? TIA.
UPDATE:
I tried adding a linear layout on the toolbar to contain the background but still it doesn't display properly on my end:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/actionBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/cherry_red"
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg_actionbar"/>
</android.support.v7.widget.Toolbar>
Here's what happened:
Additionally here's what I expected it to be:
Icon should be on center, and 9patch image as gradient since I'm having trouble on XML to have a percentage on the start mid and end colors and the navigationIcon should be on top of the gradient.
Hey i think this will helps because i have an app with something similar
My xml is so:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/custom_toolbar" android:layout_width="match_parent" android:layout_height="56dp"
android:background="#drawable/actionbar_bg" >
<RelativeLayout android:id="#+id/toolbar_logo"
android:layout_width="140dp" android:layout_height="40dp"
android:background="#drawable/ic_logo"
android:layout_gravity="left|center_vertical"
android:clickable="true">
</RelativeLayout>
</android.support.v7.widget.Toolbar>
While the drawable/actionbar_bg is so:
<?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:startColor="#FFFFFF"
android:endColor="#4093A3"
android:angle="90" />
</shape>
</item>
</layer-list>
Hope this helps you.
Use the below sample xml for your layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/toolbar_home"
android:id="#+id/tool_bar" />
</LinearLayout>
toolbar_home.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/actionbar_icon_bg"/>
<ImageView android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/ic_launcher"
android:layout_centerInParent="true"/>
</RelativeLayout>
In your Activity,
toolbar = (Toolbar) findViewById(R.id.tool_bar);
setSupportActionBar(toolbar); //or setActionBar(toolbar)
To get navigation icon and stuff
toolbar.setNavigationIcon(R.drawable.btn_main_nav_selector);
getSupportActionBar().setDisplayHomeAsUpEnabled(true); // or getActionBar().setDisplayHomeAsUpEnabled(true);
.Use
Gravity on your inner View
hope it helps
Related
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 need to make transparent toolbar with buttons, but AppBarLayout adds white background to toolbar. Is there any way I can make toolbar which is in AppBarLayout to be transparent.
<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="?attr/activityBackgroundColor"
>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
app:elevation="0dp"
app:theme="#style/AppTheme.Overlay"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:theme="#style/Toolbar.Translucent"
/>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
Most of the times we want the toolbar to be translucent because we want to show content behind it. The problem is that the colors of the content behind the toolbar can collide with the color of the toolbar elements/text (up/back arrow for example).
For that reason you'll see in a lot of implementations that the toolbar is actually not transparent but translucent with a gradient.
You can obtain this with the next code
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
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/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/background_toolbar_translucent" />
background_toolbar_translucent.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="270"
android:endColor="#android:color/transparent"
android:startColor="#color/black_alpha_40"/>
colors.xml
<color name="black_alpha_40">#66000000</color>
You can play with different values on the gradient, what I've found is that for white elements, the black 40% works fine.
Another thing that you might want to do is to hide the title of the toolbar.
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
And show the up affordance...
getSupportActionBar().setDisplayShowTitleEnabled(false);
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>
LIKE THIS SCREENSHOT - the SearchBar outside/below-toolbar in snapdeal, flipkart app...
How to add searchbar below or outside the toolbar.. Please suggest with a layout...
This is most likely a custom component, you can use a button and switch it to an EditText with the icons you prefer or use a button directly to launch the search view:
For example to achieve this you can:
1) Have a drawable with radius of 2dp and use it as the background of your component
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#android:color/white" />
<corners android:radius="2dp" />
</shape>
2)Use it within your Button/EditText along with your two icons/mipmaps
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.jsosa.myapplication.MainActivity">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/corners"
android:drawableBottom="12dp"
android:drawableEnd="#mipmap/ic_camera_alt_black_24dp"
android:drawablePadding="22dp"
android:drawableStart="#mipmap/ic_search_black_24dp"
android:gravity="left|center"
android:hint="Find your dil ki deal!"
android:padding="16dp" />
</RelativeLayout>
And you will get:
Then implement your business flow/logic on onClickListener etc
Hope it helps.
See if this works,
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.v7.widget.Toolbar>
If it is over the toolbar then add margin top to your edittext to keep it below the toolbar title.
Iam not able to show the shadow effect in child activity as like parent activity.
In Parent activity iam using CustomView
In Child coordinator layout is using.
Please help me to solve this issue.
Thanks
add this view below toolbar or appbar or where you want to show shadow.
<View
android:id="#+id/shadow_layout"
android:layout_width="match_parent"
android:layout_height="5dp"
android:background="#drawable/toolbar_dropshadow" />
------- toolbar_dropshadow.xml------
<?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="#88333333"
android:angle="90"/>
</shape>
Set android:elevation to the Toolbar if your targeting Android 5.0 and above or for pre-lollipop do the following.
Toolbar.xml
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_height"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<View
android:id="#+id/shadow"
android:layout_width="match_parent"
android:layout_height="4dp"
android:background="#drawable/shadow" />
</LinearLayout>
shadow.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#color/no_color"
android:endColor="#color/shadow_normal"
android:angle="90" />
</shape>
color.xml
<color name="shadow_normal">#55000000</color>
<color name="no_color">#00000000</color>
you can simply use elevation property android:elevation
<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="wrap_content"
android:elevation="8dp"
android:minHeight="?attr/actionBarSize"
android:background="#color/colorPrimary"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
</android.support.v7.widget.Toolbar>
if (Build.VERSION.SDK_INT < 21), Use a view with shadow background inside a framelayout below the toolbar
eg given below
<include
android:id="#+id/my_action_bar"
layout="#layout/toolbar" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- activity content here.... -->
<View
android:id="#+id/view_toolbar_shadow"
android:layout_width="match_parent"
android:layout_height="5dp"
android:background="#drawable/toolbar_shadow" />
</FrameLayout>
in the activity code, you can hide the shadow view if sdk version >=21
View mToolbarShadow = findViewById(R.id.view_toolbar_shadow);
if (Build.VERSION.SDK_INT >= 21) {
mToolbarShadow.setVisibility(View.GONE);
}