I have take custom layout inside the toolbar and perform action according to it.
but in some case i want make toolbar transparent so when i have set app:elevation="0dp" than it will hide my custom layout but still action will performed when click on that area.
I have used following layout inside toolbar.
Edited
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarMain"
app:elevation="0dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:background="#null"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/iv_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:contentDescription="#null"
android:padding="#dimen/activity_vertical_margin"
android:src="#drawable/ic_menu" />
<FrameLayout
android:id="#+id/frmNotification"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#+id/iv_menu"
android:layout_toRightOf="#+id/iv_menu"
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:padding="#dimen/padding_5">
<ImageView
android:id="#+id/iv_notification"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:contentDescription="#null"
android:padding="#dimen/padding_5"
android:src="#drawable/ic_notification" />
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginTop="#dimen/padding_5"
android:background="#drawable/bg_bage">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/eight"
android:textColor="#android:color/white"
android:textSize="#dimen/font_8" />
</FrameLayout>
</FrameLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/frmNotification"
android:contentDescription="#null"
android:src="#drawable/logo_header" />
<ImageView
android:id="#+id/ivElasticSearch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:paddingLeft="#dimen/padding_10"
android:paddingRight="#dimen/padding_15"
android:src="#drawable/ic_search" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
How to overcome this issue because in some scenario we want transparent toolbar but icon inside it should be display.
Here I have attached image how actually look like.
Your idea of app:elevation="someValue" is wrong, it does not hide the toolbar.The attribute app:elevation is used to show how much you want to make the toolbar or any other view that supports that attribute raised above the surface. Consider the surface as the floor on which the views are placed, now if you want to show some view like toolbar raised to other views you use that attribute.
if you want to make it transparent do it like this.
According to Material Design Guidelines, the elevation for appbar should be 4dp. So you should not set it to 0dp.
Use android:background="#null" instead of app:elevation="0dp".
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarMain"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null">
EDIT
You want to remove the shadow of the toolbar. To do that use app:elevation="0dp" only for appbar layout. Your code before revision shows you used for both toolbar and appbar. Remove it for toolbar.
UPDATE
I tested the code and the following code seemed to do the work.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:background="#drawable/testbg">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarMain"
app:elevation="0dp"
android:background="#null"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:background="#null"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<!-- Rest of the code -->
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</RelativeLayout>
OUTPUT IMAGE
Related
Hi I have a fab button in my layout "addfab" which is showing correctly in most phones but in android 4.4 kitkat hides under a Relative layout that is defined under it in xml.They both are defined to be below one object Here is my xml.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:fbutton="http://schemas.android.com/tools"
android:weightSum="1">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/bar1"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:textAlignment="center"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/addfab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#id/bar1"
android:layout_marginRight="20dp"
android:layout_marginTop="130dp"
android:clickable="true"
android:elevation="2dp"
android:src="#drawable/logo_green"
app:fabSize="normal"
/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/pic"
android:layout_below="#id/bar1"
android:background="#color/colorPrimary">
<com.mikhaellopez.circularimageview.CircularImageView
android:layout_width="150dp"
android:layout_height="150dp"
android:id="#+id/image_gol"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
app:civ_border_color="#color/colorPrimary"
app:civ_border_width="5dp"
app:civ_shadow="false"
app:civ_shadow_radius="5"
app:civ_shadow_color="#9e9e9e"/>
</RelativeLayout>
What should I do? Why androids act differently?
Instead of RelativeLayout, use CoordinatorLayout:
<android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.AppBarLayout>
//Toolbar here
</android.support.design.widget.AppBarLayout>
// your fab and relativelayout here
</android.support.design.widget.CoordinatorLayout>
As the root level tag. You'll be able to anchor it(The FloatingActionButton) to the views you want by using:
app:layout_anchor="#id/viewpager"
app:layout_anchorGravity="bottom|right|end"
Attributes. This also allows you to have more functionality like hiding Toolbar or etc in future. You'll also need to change-remove old RelativeLayout's attributes later in order to use CoordinatorLayout.
Take a look: https://guides.codepath.com/android/floating-action-buttons
Problem 1:
I have made my toolbar transparent but There is some sort of overlay effect which I don't want. How can I remove that effect? I have marked that place(1) in a sample image.
code for ToolBar:
<android.support.design.widget.AppBarLayout
android:id="#+id/cvSlider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp"
android:layout_marginTop="20dp"
app:theme="#style/CustomActionBar"
android:background="#android:color/transparent">
<include layout="#layout/toolbar_layout" />
</android.support.design.widget.AppBarLayout>
ToolBarLayOut:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp"
android:background="#color/transparent"
android:minHeight="?attr/actionBarSize"
>
<RelativeLayout
android:layout_width="match_parent"
android:gravity="center"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/location_ic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_location"
/>
<TextView
android:layout_toRightOf="#id/location_ic"
android:id="#+id/toolbar_title"
android:padding="6dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fontFamily="#font/custom_font"
android:text="서울 서초구 강남역 주변"
android:textColor="#color/colorWhite" />
<ImageView
android:layout_width="wrap_content"
android:src="#drawable/ic_arrow_drop_down"
android:layout_toRightOf="#id/toolbar_title"
android:layout_height="wrap_content" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
Problem 2: I am using a scroll view with a child list view in my app. but the problem is when I am taping any white space(marked 2) o list item parent scroll is not working but when taping on images then the parent scroll works (Marked 3). only the child list view scroll is working which I don't want I want the parent scroll to work here.
AppBarLayout has StateListAnimator by default try setting it to null using below code
<android.support.design.widget.AppBarLayout
android:id="#+id/cvSlider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp"
android:layout_marginTop="20dp"
android:stateListAnimator="#null"
app:theme="#style/CustomActionBar"
android:background="#android:color/transparent">
<include layout="#layout/toolbar_layout" />
</android.support.design.widget.AppBarLayout>
I'm trying to implement a toolbar in an app with navigation drawer. Now I'm trying to center the title of my Toolbar for all fragments. My Problem is, that I sometimes have an icon to the right of the hamburger icon from the navigation drawer and i have an app icon on the left side of the toolbar. To make these extra icons visible i have to use a Relative Layout, otherwise the app icon on the left would be missing.
The XML of my Activity with the toolbar looks like this:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
tools:context="app.activities.HomeActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="#+id/home_toolbar"
android:minHeight="?attr/actionBarSize"
android:background="#color/white"
app:contentInsetStartWithNavigation="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/search_toolbar_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:src="#drawable/icon_search_hightlighted" />
<ImageView
android:id="#+id/refresh_toolbar_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:src="#drawable/icon_refresh"
android:visibility="gone"/>
<TextView
android:id="#+id/actionbar_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/action_bar_title_home"
android:gravity="center"
android:textColor="#color/black"
android:textSize="18sp" />
<ImageView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:scaleType="centerCrop"
android:layout_alignParentRight="true"
android:src="#drawable/app_logo" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
<fragment
android:id="#+id/navigation_drawer"
android:name="app.fragments.NavigationDrawerFragment"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_marginTop="?attr/actionBarSize"
android:layout_height="match_parent"
android:layout_gravity="start"
tools:layout="#layout/fragment_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>
I set the visibility of the toolbar icons on the left to gone or visible depending of the chosen fragment.
Does anyone know how it would be possible to center the toolbar title and still have my ImageViews visible in my toolbar?
Thanks in advance.
EDIT
My Toolbar Title isn't centered at the moment. It's positioned like in this question:
ToolBar title doesn't center
I've already read that it would be possible to center it if the the relative Layout would be gone and set the layout gravity of the TextView to center_horizontal but this doesn't work for me because my ImageView of the App wouldn't appear on the right of the toolbar.
I haven't got enough reputation to comment.
Your question is a bit unclear to me. If I understand correctly, you have already managed to center the title, but when you set the imageViews' visibility to gone, the title is no longer centered?
If that is correctly understood, have you tried setting the imageViews' visibility to invisible instead of gone? When doing so, the imageView will still take up the same space in the layout, but will not be visible to the user.
try the following property for toolbar.
<android.support.v7.widget.Toolbar
xmlns:app="schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primaryColor"
android:contentInsetLeft="0dp"
android:contentInsetStart="0dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:contentInsetRight="0dp"
android:contentInsetEnd="0dp"
app:contentInsetRight="0dp"
app:contentInsetEnd="0dp" />
I solved it like that now:
<android.support.v7.widget.Toolbar
android:id="#+id/home_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="center"
android:background="#color/white"
app:contentInsetEnd="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp">
<ImageView
android:id="#+id/search_toolbar_icon"
android:layout_width="36dp"
android:layout_height="36dp"
android:src="#drawable/icon_search_hightlighted" />
<TextView
android:id="#+id/actionbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/action_bar_title_home"
android:textColor="#color/black"
android:textSize="18sp" />
<ImageView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#drawable/nav_icon"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp" />
<ImageView
android:id="#+id/refresh_toolbar_icon"
android:layout_width="36dp"
android:layout_height="36dp"
android:padding="8dp"
android:src="#drawable/icon_refresh"
android:visibility="gone"
tools:visibility="visible" />
</android.support.v7.widget.Toolbar>
The toolbar layout I set android:layout_gravity="center_vertical"
but it not work
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"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#drawable/toolbar_bg"
android:fitsSystemWindows="true"
app:popupTheme="#style/Theme.AppCompat.Light.DarkActionBar"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="#android:drawable/sym_def_app_icon" />
main layout:
<!-- As the main content view, the view below consumes the entire
space available using match_parent in both dimensions. -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/head_tool_bar"
layout="#layout/toolbar" />
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/head_tool_bar" />
</RelativeLayout>
<!-- The drawer is given a fixed width in dp and extends the full height of
the container. -->
<fragment
android:id="#+id/navigation_drawer"
android:name="com.voogolf.helper.home.NavigationDrawerFragment"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
tools:layout="#layout/drawer_new_home" />
</android.support.v4.widget.DrawerLayout>
How can I set drawer icon and logo align top? Why left drawer icon have padding
like this?
you should try setting layout gravity like this.
android:layout_gravity="left|center_vertical"
and make sure padding and margin is 0dp
Android support v7 toolbar is just like other views. You can customize or add whatever the view you are required inside the toolbar.
Your imageView should be inside the toolbar and make imageView aligned whatever you want by gravity or layout_gravity attribute.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/home_button"
android:background="#color/colorToolbarWelcomeBg"
android:scaleType="fitCenter"
android:src="#drawable/back_arrow"
android:layout_gravity="left|centre"/>
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.6"
android:background="#color/colorToolbarWelcomeBg"
android:text="Settings"
android:textColor="#color/colorWhite"
android:textStyle="bold"
android:id="#+id/welcomeToManager"
android:gravity="center"/>
</LinearLayout>
and place this layout inside <toolbar> Above layout </toolbr> This code showing just an idea not actual code :)
add this property attribute to imageView android:layout_gravity="center_vertical"
This is my toolbar with a back button and text in center.You can refer this 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"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:contentInsetLeft="0dp"
android:contentInsetStart="0dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/back_arrow"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_gravity="left|center"
android:visibility="visible"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:src="#drawable/back_arrow" />
<com.indosat.rider.views.CustomTextView
android:id="#+id/toolbar_custom_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="Register Page"
style="#style/roboto_medium"
android:textAllCaps="true"
android:textColor="#color/white"
android:textSize="19sp" />
</FrameLayout>
</android.support.v7.widget.Toolbar>
Let me know if you need any help in arranging your final setup.
if you are trying to customize your toolbar then do something like this.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
...>
<RelativeLayout>
<ImageView
... />
//here you can add more view items
</RelativeLayout>
</android.support.v7.widget.Toolbar>
if you have used toolbar and setting up the action bar using ActionBarDrawerToggle then add this code to your ActionBarDrawerToggle object.
toggle.setDrawerIndicatorEnabled(false); // this will disable your default haburger icon
toggle.setHomeAsUpIndicator(R.drawable.ic_custom_drawer_icon); // this will replace the toggle home indicator
I have a view with some fragments and I created a snackbar with a slide animation on it. The animation works fine, but before it comes up a white window appears where the snackbar is going to appear.
It is happening because I am using setTranslationY on the view. I tried to put the background transparent but it did not work.
How can I solve it?
<RelativeLayout
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:background="#android:color/transparent">
<LinearLayout
android:id="#+id/pager_activity_page"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#android:color/transparent">
<FrameLayout
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#android:color/transparent"
android:layout_weight="1"
/>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#android:color/black"
android:id="#+id/snackbar_container"
android:visibility="gone">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textColor="#android:color/white"
android:textSize="13sp"
android:textStyle="normal"
android:id="#+id/snackbar_text"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center" />
</FrameLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
style="#style/MyCustomTabLayout"
app:tabGravity="fill"
app:tabMode="fixed"
android:background="#android:color/white"
app:tabIndicatorColor="#android:color/white"
app:tabSelectedTextColor="#color/bpBlue"
app:tabTextColor="#929292"
/>
</LinearLayout>
</RelativeLayout>
Did you build your own "snackbar"? Try to use this:
http://www.androidhive.info/2015/09/android-material-design-snackbar-example/
But your problem:
I think the problem is, that your add your "snackbar" in your linear layout! You set the visibility to "gone" and your bar will not use any space. On your animation you set the visibility to "visible". The linear layout will give you the space, which you need for you bar. You need to add the bar above your layout(also the tablayout)