Android: How to customise App bar (action bar) like this? - android

I need exactly like this, i saw some example to customise toolbar but could not design, how to use those gradients and all?

Create a drawable something like this drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:centerColor="#color/app_blue_color"
android:endColor="#color/app_dark_blue_color"
android:startColor="#color/app_dark_blue_color" />
<!--<corners-->
<!--android:bottomLeftRadius="5dp"-->
<!--android:bottomRightRadius="5dp"-->
<!--android:topLeftRadius="5dp"-->
<!--android:topRightRadius="5dp" />-->
<stroke
android:width="0.7dp"
android:color="#color/app_blue_color" />
set this as the background of your customize toolbar
create a ToolbarLayout
<?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="#drawable/toolbarDrawable"
android:gravity="top"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme"
app:theme="#style/ToolbarColoredBackArrow">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="center_vertical">
<ImageView
android:id="#+id/RefreshButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:adjustViewBounds="true"
android:padding="8dp"
android:src="#drawable/plus_icon"
android:visibility="gone" />
<TextView
android:id="#+id/toolbarName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginRight="#dimen/margin_10"
android:gravity="center"
android:text=""
android:textColor="#color/white"
android:textSize="13sp"
android:textStyle="bold|italic"
android:visibility="visible" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
In your Activity include layout using
<include
android:id="#+id/toolbar"
layout="#layout/toolbar_title" />
// toolbar_tile is my toolbar layout name

Related

android -constraintLayout how to add elevation to sticky toolbar?

I have created a constraintLayout but the toolbar i am using does not have shadow elevation. i dont see any shadow. here is an image of what i have so far:
i want the green part to be elevated and a bit of a shadow. you know the material header way. so when i scroll the recyclerview it looks lke its oging under the header. pretty standard nowadays.
here is my code so far:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/gl_start"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="76dp" />
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:contentInsetEnd="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
app:contentInsetStart="0dp"
app:elevation="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintBottom_toTopOf="#id/gl_start"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary">
<ImageView
android:id="#+id/iv"
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#android:drawable/btn_star"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.appcompat.widget.Toolbar>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/gl_start"
tools:itemCount="10"
tools:listitem="#layout/list_item" />
note that the tool bar is meant to be sticky so it should not move, but ti just need it elevated, i tried setting elevation in xml on the toolbar but as you can see its not that pretty. how to put shadow and elevation ?
Either wrap you Toolbar inside AppBarLayout
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar_layout"
...>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
.../>
</com.google.android.material.appbar.AppBarLayout>
Or use android:elevation with Toolbar, which require min API Level 21
android:elevation="10dp"
try like below -
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:orientation="vertical">
<android.support.v7.widget.Toolbar android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/shadow"
android:titleTextAppearance="#color/White"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<FrameLayout android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- your components -->
<View android:layout_width="match_parent"
android:layout_height="5dp"
android:background="#drawable/toolbar_shadow"/>
</FrameLayout>
</LinearLayout>
#drawable/toolbar_shadow:
<?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>
#color/shadow
<color name="shadow">#e74c3c</color>

Cannot set the toolbar in android

i am trying to add a custom tool bar
this is my toolbar.xml
<?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"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
app:subtitleTextColor="#color/sub_text_color"
app:navigationContentDescription="#string/abc_action_bar_up_description"
android:background="#color/sub_text_color"
app:navigationIcon="?attr/homeAsUpIndicator"
/>
this is my style
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
i have included it in my activity main
<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"
tools:context="com.example.myproj.activities.RegisterActivity">
<include layout="#layout/toolbar"/>
in my main activity class i called
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_register);
toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
toolbar.setTitle(R.string.create_account);
}
but still i am not able to see the toolbar in my class.
Can some one help me to figure out the error
Use LinearLayout as parent , the child layout might be hiding the toolBar
<LinearLayout 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"
tools:context="com.example.myproj.activities.RegisterActivity">
<include layout="#layout/toolbar"/>
//other childs
</LinearLayout>
To set title to tool bar use getSupportActionBar().setTitle(title);
toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle(title);
Quite a number of things could be responsible for this.
Firstly, It is possible that the views placed after the custom toolbar are overlayed on it, hence blocking it from view. Remenber that you are using RelativeLayout as your root element. So you'll want to ensure that views after the toolbar have android:layout_below="#+id/toolbar" attribute.
Secondly, I'll advice you to use a coordinator layout as your rootview and wrap your custom toolbar in AppBarLayout view. So that your layout file resembles this:
<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"
tools:context="ng.shoppi.lafarge_app.MainActivity">
<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="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include
android:id="#+id/content_main"
layout="#layout/content_main" />
This will keep the toolbar at the top and ensure other views are below the toolbar.
Goodluck.
Try this,
<?xml version="1.0" encoding="utf-8"?>
<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/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="?actionBarSize"
android:background="?attr/colorPrimary"
app:contentInsetStartWithNavigation="0dp"
app:popupTheme="#style/AppTheme.PopupOverlay">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<com.itc.classmate.utils.FontTextView
android:id="#+id/textview_toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="#dimen/gap_btn_logo"
android:layout_toLeftOf="#+id/rel_toolbar_options"
android:ellipsize="marquee"
android:paddingRight="5dp"
android:singleLine="true"
android:text=""
android:textColor="#color/colorWhite"
android:textSize="#dimen/comm_text_size_normal" />
<LinearLayout
android:id="#+id/rel_toolbar_options"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/rel_toolbar_right_cornor_item"
android:gravity="center_vertical">
<ImageView
android:id="#+id/imgview_toolbar_share"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="#dimen/toolbar_notification_right_margin"
android:layout_toLeftOf="#+id/imgview_toolbar_choose_class"
android:padding="#dimen/inc_toolbar_icon_padding"
android:src="#drawable/ic_menu_share"
android:visibility="gone" />
<ImageView
android:id="#+id/imgview_toolbar_choose_class"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="#dimen/toolbar_notification_right_margin"
android:layout_toLeftOf="#+id/imgview_toolbar_edit"
android:padding="#dimen/inc_toolbar_icon_padding"
android:src="#drawable/selectclass"
android:visibility="gone" />
<ImageView
android:id="#+id/imgview_toolbar_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="#dimen/toolbar_notification_right_margin"
android:layout_toLeftOf="#+id/imgview_toolbar_done"
android:padding="#dimen/inc_toolbar_icon_padding"
android:src="#drawable/profile_edit_icon"
android:visibility="gone" />
<ImageView
android:id="#+id/imgview_toolbar_done"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="14dp"
android:layout_toLeftOf="#+id/textview_toolbar_delete_bookmark"
android:padding="#dimen/inc_toolbar_icon_padding"
android:src="#drawable/done"
android:visibility="gone" />
<com.itc.classmate.utils.FontTextView
android:id="#+id/textview_toolbar_delete_bookmark"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="14dp"
android:layout_toLeftOf="#+id/imageview_toolbar_delete"
android:padding="#dimen/inc_toolbar_icon_padding"
android:text="#string/clear_all"
android:textColor="#color/colorWhite"
android:textSize="#dimen/comm_text_size_mediam"
android:visibility="gone" />
<ImageView
android:id="#+id/imageview_toolbar_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="14dp"
android:layout_toLeftOf="#+id/textview_toolbar_done"
android:padding="#dimen/inc_toolbar_icon_padding"
android:src="#drawable/delete"
android:visibility="gone" />
<com.itc.classmate.utils.FontTextView
android:id="#+id/textview_toolbar_done"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="#dimen/toolbar_notification_right_margin"
android:layout_toLeftOf="#+id/imgview_toolbar_notification"
android:padding="#dimen/inc_toolbar_icon_padding"
android:text="Done"
android:textColor="#color/colorWhite"
android:textSize="#dimen/comm_text_size_normal"
android:visibility="gone"
app:textAllCaps="true" />
<RelativeLayout
android:id="#+id/rl_notification"
android:layout_width="wrap_content"
android:layout_height="?actionBarSize"
android:layout_marginRight="#dimen/toolbar_notification_right_margin"
>
<ImageView
android:id="#+id/imgview_toolbar_notification"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:padding="#dimen/inc_toolbar_icon_padding"
android:src="#drawable/bell"
android:visibility="gone" />
<TextView
android:id="#+id/txtview_toolbar_notification"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/colorWhite"
android:background="#drawable/shape_notification_dot"
android:textSize="#dimen/comm_text_size_very_small"
android:padding="2dp"
android:gravity="center"
android:visibility="gone"
android:layout_marginTop="10dp"
android:layout_marginStart="10dp"/>
</RelativeLayout>
</LinearLayout>
<RelativeLayout
android:id="#+id/rel_toolbar_right_cornor_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:layout_marginRight="#dimen/toolbar_notification_right_margin"
android:padding="#dimen/inc_toolbar_icon_padding"
android:visibility="visible">
<com.itc.classmate.utils.CircularImage
android:id="#+id/imgview_toolbar_profile"
android:layout_width="#dimen/toolbar_profile_width_height"
android:layout_height="#dimen/toolbar_profile_width_height"
android:layout_centerInParent="true"
android:src="#drawable/profile_icon"
android:visibility="invisible" />
<com.itc.classmate.utils.FontTextView
android:id="#+id/textview_toolbar_save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/save"
android:textColor="#color/colorWhite"
android:textSize="#dimen/comm_text_size_mediam"
android:visibility="gone"
app:textAllCaps="true" />
<ImageView
android:id="#+id/imgview_toolbar_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginRight="#dimen/toolbar_notification_right_margin"
android:padding="#dimen/inc_toolbar_icon_padding"
android:src="#drawable/profile_delete_icon"
android:visibility="gone" />
</RelativeLayout>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
Try to remove theme in your custom toolbar:
<?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"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" //REMOVE THIS
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
app:subtitleTextColor="#color/sub_text_color"
app:navigationContentDescription="#string/abc_action_bar_up_description"
android:background="#color/sub_text_color"
app:navigationIcon="?attr/homeAsUpIndicator"
/>
i think the theme is influential....
Please update your code a bit:
Style:
<style name="AppTheme" parent="Theme.AppCompat.Light">
XML file:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<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/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>

Reduce space between app logo and app name on action bar in android

I have action bar along with app logo and app name.
So I want to reduce space between app logo and app name.
Below I have attached some screenshot.
A) Action bar I have
B) Action bar I want
Use Toolbar for this, it will provide greater customization.
Here is the sample example.
toolbar.xml
<?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"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways"
app:layout_collapseMode="pin">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- This is a centered logo -->
<ImageView
android:id="#+id/toolbar_logo"
android:src="#drawable/logo"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="?attr/actionBarSize"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp"
android:layout_gravity="center" />
<!-- This is a centered title -->
<!--
<TextView
android:id="#+id/toolbar_title"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="?attr/actionBarSize"
android:layout_gravity="center"
android:gravity="center_vertical"
android:visibility="gone"
android:text="#string/app_name"
android:textColor="#color/white"
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
/>
-->
<!-- This is a custom left side button -->
<!--
<ImageButton
android:id="#+id/btn_settings"
android:layout_width="?attr/actionBarSize"
android:layout_height="?attr/actionBarSize"
android:layout_marginRight="?attr/actionBarSize"
android:layout_gravity="start|center_vertical"
android:visibility="invisible"
android:src="#drawable/ic_settings_white_24dp"
style="#style/Widget.AppCompat.ActionButton" />
-->
<!-- This is a custom right side button -->
<!--
<ImageButton
android:id="#+id/btn_search"
android:layout_width="?attr/actionBarSize"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="end"
android:src="#drawable/ic_magnify_white_24dp"
style="#style/Widget.AppCompat.ActionButton" />
-->
</FrameLayout>
</android.support.v7.widget.Toolbar>
Add any view inside toolbar as it is a viewgroup. Hopw this helps
Try adding these properties to toolBar
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
final toolbar should be something like this
<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="#drawable/paper9patch"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
/>
Use this
getActionBar().setDisplayHomeAsUpEnabled(false)
Try this
<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="?android:attr/actionBarSize"
android:supportsRtl="false"
app:popupTheme="#style/AppTheme.PopupOverlay">
<include layout="#layout/header_with_back"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
header_with_back.xml code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#color/colorPrimary"
android:orientation="vertical">
<ImageView
android:id="#+id/image_back_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/threedp"
android:padding="#dimen/tendp"
android:layout_marginRight="-20dp"
android:src="#drawable/ic_arrow_back_black_24dp"/>
<TextView
android:id="#+id/txt_title_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/image_back_header"
android:layout_centerVertical="true"
android:ellipsize="end"
android:paddingTop="#dimen/tendp"
android:paddingBottom="#dimen/tendp"
android:layout_marginLeft="#dimen/twentydp"
android:maxLength="26"
android:text="dsdsdsa"
android:gravity="center"
android:maxLines="1"
android:textColor="#color/white"
android:textSize="#dimen/text_18"
android:typeface="normal"/>
<TextView
android:id="#+id/txt_right_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:ellipsize="none"
android:gravity="center"
android:maxLines="1"
android:textColor="#color/white"
android:textSize="#dimen/text_16"
android:layout_alignParentRight="true"
android:paddingTop="#dimen/tendp"
android:paddingBottom="#dimen/tendp"
android:paddingLeft="#dimen/tendp"
android:paddingRight="#dimen/fifteendp"
android:text="#string/save"
android:typeface="normal"/>
</RelativeLayout>
Java code
Toolbar toolbar;
toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setPadding(0, 0, 0, 0);//for tab otherwise give space in tab
toolbar.setContentInsetsAbsolute(0, 0);
setSupportActionBar(toolbar);

Support ActionMenuView change popupTheme

I implemented Toolbar with custom view and ActionMenuView and i can't change popup Theme for ActionMenuView.
My Toolbar Layout:
<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:elevation="4dp"
app:contentInsetEnd="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
app:contentInsetStart="0dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<include layout="#layout/toolbar_view"/>
</android.support.v7.widget.Toolbar>
toolbar_view layout that contains the ActionMenuView:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<ImageView
android:id="#+id/iv_toolbar_home"
android:layout_width="#dimen/ldrawer_drawableSize"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:background="#drawable/selector_toggle" />
<LinearLayout
android:id="#+id/ll_menu"
android:layout_alignParentRight="true"
android:gravity="right"
android:layout_width="wrap_content"
android:layout_height="match_parent">
<android.support.v7.widget.ActionMenuView
android:id="#+id/amvMenu"
android:layout_width="wrap_content"
android:layout_height="?attr/actionBarSize" />
</LinearLayout>
<TextView
android:id="#+id/tv_toolbar_title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:ellipsize="end"
android:layout_toRightOf="#id/iv_toolbar_home"
android:layout_toLeftOf="#id/ll_menu"
android:gravity="center_vertical|left"
android:maxLines="1"
android:padding="#dimen/toolbar_title_padding"
android:textSize="#dimen/toolbar_title_font_size"
android:textColor="#color/white" />
</RelativeLayout>
And the result is:
The question is, How i can change the drop down menu background to be white?
just make your android:textColorPrimaryin your theme to be white

Listview overlaps with ToolBar

I am using android design support library.
ListView first row overlaps with Toolbar widget.
In my MainActivity i added coordination layout and in first TAB fragment added ListView layout.
But first row of the ListView cut because if Toolbar tabs.
How to fix this problem?
Main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/coordi"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#FFEB3B"
app:tabIndicatorHeight="6dp"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#android:color/white" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"
android:src="#drawable/plus" />
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/layout_drawer_header" />
</android.support.v4.widget.DrawerLayout>
list_view.xml:
-------------
<?xml version="1.0" encoding="utf-8"?>
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="match_parent"></ListView>
I had a similar problem and after following the top answer, I rewrote my code to use RecyclerView and got the same issue. I then added this behavior to my content layout and it worked
app:layout_behavior="#string/appbar_scrolling_view_behavior"
CoordinatorLayout's ScrollingViewBehavior only works with views that support nested scrolling (for example RecyclerView). ListView does not support it by default, so the CoordinatorLayout is not handling the position of the ListView correctly.
If you want all the scrolling behaviours of the design support library, you could try converting your list to a RecyclerView. ListView also gained nested scrolling support in API 21, which you could try to enable with setNestedScrollingEnabled(true), but that will obviously only work on Lollipop and newer versions.
More information here: ScrollingViewBehavior for ListView
I'm getting the same problem where part of my listview is overlapped by toolbar.
I'm able to make it work in android 4.4.4(Kitkat) but the issue could not be resolved in android 5.1(Lolipop)
So, Here is my solution to resolve this issue
layout/activity_main.xml
<include layout="#layout/app_bar_main" android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.NavigationView android:id="#+id/nav_view"
android:layout_width="wrap_content" android:layout_height="match_parent"
android:layout_gravity="start" android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main" app:menu="#menu/activity_main_drawer"
/>
The mistake which I made was that, adding the listview in activity_main.xml which we should not add instated we should add listview in app_bar_main.xml
layout/app_bar_main.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=".MainActivity">
<android.support.design.widget.AppBarLayout android:layout_height="wrap_content"
android:layout_width="match_parent" 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="?attr/colorPrimary" app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/AartilistView"
android:layout_below="#+id/textView"
android:layout_alignParentStart="true"
android:layout_marginTop="?android:attr/actionBarSize"
/>
<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="16dp"
android:src="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
Other files containing the code is
layout/nav_header_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="190dp"
android:background="#drawable/background_material_red"
android:orientation="vertical"
>
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/profile_image"
android:layout_width="70dp"
android:layout_height="70dp"
android:src="#drawable/logo"
app:border_color="#FF000000"
android:layout_marginLeft="24dp"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginStart="24dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name"
android:textSize="14sp"
android:textColor="#FFF"
android:textStyle="bold"
android:gravity="left"
android:paddingBottom="4dp"
android:id="#+id/username"
android:layout_above="#+id/email"
android:layout_alignLeft="#+id/profile_image"
android:layout_alignStart="#+id/profile_image" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/email"
android:id="#+id/email"
android:gravity="left"
android:layout_marginBottom="8dp"
android:textSize="14sp"
android:textColor="#fff"
android:layout_alignParentBottom="true"
android:layout_alignLeft="#+id/username"
android:layout_alignStart="#+id/username" />
</RelativeLayout>
layout/item_view.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/icon_image"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:src="#drawable/img"
android:maxHeight="80dp"
android:maxWidth="80dp"
android:longClickable="false"
android:adjustViewBounds="true" android:paddingTop="10dp" android:paddingBottom="10dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Large Description"
android:id="#+id/icon_text"
android:layout_alignBottom="#+id/icon_image"
android:layout_toEndOf="#+id/icon_image"
android:layout_alignParentEnd="false"
android:layout_alignParentStart="false"
android:paddingBottom="20dp"
android:paddingLeft="20dp" />
</RelativeLayout>
menu/activity_main_drawer.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item android:id="#+id/nav_info_details" android:icon="#drawable/ic_menu_info_details"
android:title="About us" />
<item android:id="#+id/nav_rate" android:icon="#drawable/ic_menu_star"
android:title="Rate App" />
<item android:id="#+id/nav_share" android:icon="#drawable/ic_menu_share"
android:title="Share App" />
<item android:id="#+id/nav_facebook" android:icon="#drawable/ic_menu_fb"
android:title="Follow me on Facebook" />
</group>
<item android:title="Communicate">
<menu>
<item android:id="#+id/nav_whatsapp" android:icon="#drawable/ic_menu_whatsapp"
android:title="Whatsapp us to share your" />
<item android:id="#+id/nav_email" android:icon="#drawable/sym_action_email"
android:title="Tell us how you feel about App" />
</menu>
</item>
</menu>
make sure you build the project and then run it.
Don't add your listview in activity_main.xml instead add it in app_bar_main.xml which you'll include in activity_main.xml anyways.
XML design showing unchecked "Show layout decorations":
XML design showing checked "Show layout decorations":
After checking this option, add your ListView and set default margins (Eg. 8dp). This will NOT hide the first item in list view.
Use layout margin bottom/top property, and adjust your listview not to cover up the space where the toolbar resides.
You could add some padding to the Toolbar using
android:paddingBottom="5dp"
That should add some space between the two elements

Categories

Resources