Collapsing toolbar title overlaps with my menu icons - android

I am using the collapsing Toolbar in a project that I am working on currently. I am setting the title of the collapsing toolbar from my code but the problem is if the title is too big then it overlaps with my menu icons in the toolbar. So how can I fix this issue?
Title OverLaps with menu Icon:
My xml code:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="205dp"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/agent_profile_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginBottom="87dp"
app:expandedTitleMarginStart="130dp"
app:expandedTitleTextAppearance="#style/expandedappbar"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="170dp"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/back" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="170dp"
android:background="#66000000">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="8dp"
android:layout_marginLeft="130dp"
android:orientation="vertical">
<TextView
android:id="#+id/lbl_agent_profile_position"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/lbl_agent_profile_Name"
android:layout_marginBottom="5dp"
android:ellipsize="end"
android:maxLines="1"
android:text="Real Estate Professional at Exit Alliance Realty"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#fff"
android:textSize="12sp"
android:typeface="sans" />
<TextView
android:id="#+id/lbl_agent_profile_ibaaxid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#33ffffff"
android:paddingBottom="1dp"
android:paddingEnd="3dp"
android:paddingLeft="3dp"
android:paddingRight="3dp"
android:paddingStart="3dp"
android:paddingTop="1dp"
android:text="iBaax ID : 123456789"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#fff"
android:textSize="12sp"
android:typeface="sans" />
</LinearLayout>
</RelativeLayout>
<LinearLayout
android:id="#+id/lnr_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="2dp"
android:background="#fff"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<ImageView
android:id="#+id/img_agent_profile_image"
android:layout_width="110dp"
android:layout_height="110dp"
android:scaleType="centerCrop"
android:src="#drawable/no_profile" />
</LinearLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="22dp"
android:layout_below="#+id/backdrop"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_toRightOf="#+id/lnr_img"
android:background="#4d6088"
android:paddingEnd="3dp"
android:paddingLeft="3dp"
android:paddingRight="3dp"
android:paddingStart="3dp"
android:text="Write Review"
android:textAllCaps="false"
android:textSize="12sp" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
And the code in my activity's OnCreate Method:
setContentView(R.layout.activity_agent_profile2);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
//getSupportActionBar().setTitle("Name");
agent = (Agent) getIntent().getSerializableExtra("Agent");
CollapsingToolbarLayout collapsingToolbar =
(CollapsingToolbarLayout) findViewById(R.id.agent_profile_toolbar);
collapsingToolbar.setTitle(agent.name);

I fixed it somehow. I don't why it work though. I had to give separate styles for expandedTitle and collapseTitle with different textSizes. If they were the same textSizes then it would work. Here are my styles below,
<style name="expandedappbar" parent="#android:style/TextAppearance.Medium">
<item name="android:textSize">20sp</item>
<item name="android:textStyle">bold</item>
<item name="android:ellipsize">end</item>
<item name="android:maxLines">1</item>
<item name="android:width">100dp</item>
</style>
<style name="collapseappbar" parent="#android:style/TextAppearance.Medium">
<item name="android:textSize">18sp</item>
<item name="android:textStyle">bold</item>
</style>
and the layout:
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/agent_profile_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginBottom="87dp"
app:expandedTitleMarginStart="130dp"
app:expandedTitleTextAppearance="#style/expandedappbar"
app:collapsedTitleTextAppearance="#style/collapseappbar"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
And screenshot to prove that it works,

Please add option menu for menu items, overlapping issue will not be there
#Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.option_menu, menu);
return true;
}
And set actionBar in activity onCreate:
setSupportActionBar(toolbar)
option_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/bt_share"
android:icon="#drawable/ic_send"
android:title="#string/share"
app:showAsAction="always" />
<item
android:id="#+id/bt_suggest_edit"
android:icon="#drawable/ic_menu"
android:title="#string/suggest_an_edit"
app:showAsAction="always" />
</menu>
Collapsed toolbar screenshot
Expanded toolbar screenshot

This doesn't work ?
getSupportActionBar().setTitle("LongTitle");

My solution is listen collapsing progress of CollapsingToolbarLayout. When it totally collapse I disable title of AppBarLayout and set it to activity:
#Override
public void onAppBarOffsetChanged(AppBarLayout appBarLayout, int offset) {
boolean collapsed = offset == appBarLayout.getTotalScrollRange();
collapsingToolbarLayout.setTitleEnabled(!collapsed);
getActivity().setTitle(collapsed ? title : null);
}

Related

Inner fragment with fitsSystemWindows

I am working on the transparent status bar and bottom navigation bar visible. I have achieved the same with my last question: Gradient status bar with BottomNavigationView
But now, I have a fragments in which fitsSystemWindows is not
working. I have layout like Activity -> Viewpager -> Fragments ->
Viewpager -> child Fragments.
I have gone through many attempts from stack overflow but still no luck :
Appbar fitsSystemWindows - Inside a ViewPager
Android - ViewPager fitsSystemWindows (fullscreen) not working
Setting a child view to fit system windows
Android fitsSystemWindows not working when replacing fragments
How to apply gradient to status bar in android?
I have added this styles :
<item name="android:windowContentOverlay">#null</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowDrawsSystemBarBackgrounds">false</item>
<item name="android:windowTranslucentNavigation">false</item>
<item name="android:navigationBarColor">#000</item>
<item name="colorControlNormal">#FFFFFF</item>
<item name="colorPrimaryDark">#android:color/transparent</item>
In v21/style :
<item name="colorPrimaryDark">#android:color/transparent</item>
In layout, I have added fitsSystemWindows to each fragment as well as activity.
Activity layout:
<?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.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<com.mobile.lendlease.views.WrapContentViewPagerBottomTab
android:id="#+id/viewPagerContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/viewDivider"
android:fitsSystemWindows="true" />
<View
android:id="#+id/viewDivider"
android:layout_width="match_parent"
android:layout_height="1px"
android:layout_above="#+id/bottomNavigation"
android:background="#color/default_border" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottomNavigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:paddingBottom="#dimen/margin_12"
android:paddingEnd="#dimen/margin_12"
android:paddingStart="#dimen/margin_10"
android:paddingTop="#dimen/margin_10"
app:itemBackground="#color/white"
app:menu="#menu/navigation" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
</layout>
One of fragment layout:
<?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.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbarLayout"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorScreenBackground"
android:focusable="true"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_height"
android:layout_marginBottom="#dimen/margin_20"
android:background="#drawable/toolbar"
android:gravity="bottom"
android:fitsSystemWindows="true"
app:layout_scrollFlags="enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingBottom="#dimen/margin_18">
<ImageView
android:id="#+id/ivHome"
android:layout_width="159dp"
android:layout_height="29dp"
android:scaleType="centerInside"
android:src="#drawable/logo" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="end"
android:orientation="horizontal">
<ImageView
android:id="#+id/ivSearch"
android:layout_width="#dimen/margin_47"
android:layout_height="32dp"
android:contentDescription="#string/app_name"
android:scaleType="fitXY"
android:src="#drawable/ic_search" />
<TextView
android:id="#+id/ivMall"
style="#style/notoSansSemiBoldStyle"
android:layout_width="58dp"
android:layout_height="32dp"
android:layout_marginEnd="#dimen/margin_18"
android:layout_marginStart="#dimen/margin_10"
android:background="#drawable/search_bg_shape"
android:gravity="center"
android:text="#string/mall_all"
android:textAllCaps="false"
android:textColor="#color/gradient_card_color1"
android:textSize="#dimen/font_12"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:minHeight="?attr/actionBarSize"
app:tabBackground="#drawable/tab_indicator_line_selected"
app:tabGravity="center"
app:tabIndicatorColor="#android:color/transparent"
app:tabMode="scrollable"
app:tabSelectedTextColor="#color/colorBlackLight"
app:tabTextAppearance="#style/themeTabText"
app:tabTextColor="#color/colorBlackLight" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewPagerContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="false" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
</layout>

Toolbar Background Image Size

I am working in android application. Actually there I have to set an image in place of toolbar. But I don't know what the exact sizes of that image.
I am not asking about actionbar size. I googled it a lot but unable to find the solution.
here is my requirement
You can create a custom toolbar and add it to your activity
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:theme="#style/AppTheme.AppBarOverlay"
xmlns:android="http://schemas.android.com/apk/res/android">
<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" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<ImageView
android:id="#+id/ivUser"
android:layout_width="20dp"
android:layout_height="20dp"
android:background="#drawable/ic_profile"
android:layout_centerVertical="true"
/>
<ImageView
android:id="#+id/tvTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_logo_light"
android:layout_centerInParent="true"
android:padding="15dp"
/>
<ImageView
android:id="#+id/ivLogout"
android:layout_width="20dp"
android:layout_height="20dp"
android:background="#drawable/ic_logout"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_margin="10dp"
android:visibility="gone"
/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
You can add this toolbar xml to your activity
<include
layout="#layout/toolbar.xml">
Use this toolbar in activity using below code in your activity
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
TextView tvTitle = (TextView) toolbar.findViewById(R.id.tvTitle);
ImageView ivUser = (ImageView) toolbar.findViewById(R.id.ivUser);
ImageView ivLogout = (ImageView) toolbar.findViewById(R.id.ivLogout);
getSupportActionBar().setDisplayShowTitleEnabled(false);
Note: Use NoActionBar theme for the activity. To disable the default toolbar
<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>
<item name="android:windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
</style>
please try this code in your xml file;
<android.support.constraint.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"
tools:context="com.example.kolektif_merta.testapp.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/layout_home_appBarLayout_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="56dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize">
</android.support.v7.widget.Toolbar>
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
And in your java class inside onCreate method(assuming you are in activity);
toolbar = findViewById(R.id.toolbar);
toolbar.setBackground(ContextCompat.getDrawable(this,R.drawable.test));
Here is the test drawable is 1200x640 as you asked.
Also don't forget the update styles.xml file with:
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
Here is the result :
custom toolbar background witm image

build an actionbar with a justified menu

I would like to make a menu to justify. the menu consists of 3 items as in the following photo
here is the content of my file res/menu/menuab.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/home"
android:title=""
android:icon="#drawable/home"
android:visible="true"
android:orderInCategory="1"
app:showAsAction="ifRoom"/>
<item
android:id="#+id/quit"
app:showAsAction="always"
android:title=""
android:visible="true"
android:orderInCategory="100"
android:icon="#drawable/logout"/>
and here is the java code
android.support.v7.app.ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setIcon(R.drawable.back);
Thk..
I finally found a solution to my problem, in the end I use a toolBar instead of an actionBa. For those it can help, here is the xml code of my toolbar
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:background="#ff6d7fe2"
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp"
android:layout_alignParentTop="true"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
android:layout_width="match_parent">
<ImageView
android:id="#+id/back"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp"
android:layout_gravity="left"
android:src="#drawable/back" />
<ImageView
android:id="#+id/home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:srcCompat="#drawable/home" />
<ImageView
android:id="#+id/logout"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp"
android:layout_gravity="right"
app:srcCompat="#drawable/logout" />
</android.support.v7.widget.Toolbar>
Here is my java code
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
Thank u #Mike M

Bottom toolbar layout

I have created two toolbars one top and one bottom.
And the result is like this:
My question is, how can i make my bottom toolbar's items centered and their widths span vertically to fit the toolbar?
Here is what i've done:
<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"
tools:context="app.shinobi.org.ssmis.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/container_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include
android:id="#+id/toolbar"
layout="#layout/main_toolbar" />
</LinearLayout>
<app.shinobi.org.util.tab.SlidingTabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="2dp"
android:background="#color/primaryColor"/>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_weight="1">
</android.support.v4.view.ViewPager>
<include
android:id="#+id/stats_toolbar"
layout="#layout/stats_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
/>
</LinearLayout>
These are my two menus:
for the top toolbar:
<menu 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"
tools:context="app.shinobi.org.ssmis.MainActivity">
<item android:id="#+id/search" android:title="#string/search"
android:icon="#drawable/ic_search" android:orderInCategory="1" app:showAsAction="always"/>
<item android:id="#+id/refresh" android:title="#string/action_refressh"
android:icon="#drawable/ic_refresh" android:orderInCategory="2" app:showAsAction="always" />
for the bottom toolbar:
<menu 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"
tools:context="app.shinobi.org.ssmis.MainActivity">
<item android:id="#+id/monthly" android:title="#string/action_monthly"
android:icon="#drawable/ic_refresh" android:orderInCategory="3" app:showAsAction="always" />
<item android:id="#+id/yearly" android:title="#string/action_yearly"
android:icon="#drawable/ic_refresh" android:orderInCategory="4" app:showAsAction="always" />
<item android:id="#+id/drugs" android:title="#string/action_drugs"
android:icon="#drawable/ic_refresh" android:orderInCategory="5" app:showAsAction="always" />
Thanks!
Creating a menu will always put your button to the end of the toolbar.
If you want to center these buttons, you will have to use toolbar.addView(view) where your view can inflate from a xml file like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="3"
>
<ImageButton
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<ImageButton
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<ImageButton
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
</LinearLayout>
Then you just have to:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setContentInsetsRelative(0, 0);
toolbar.addView(
LayoutInflater.from(this).inflate(R.layout.toolbar, null, false),
new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)
);
Actually you can use a ActionMenuView to replace your bottom Toolbar
Or you can try this SplitToolbar implementation
https://gist.github.com/dodgex/7bc81fd2cbb70a8d5117
I can suggest one not very good solution but it works. If i right understand in include layout you have a toolbar view. Its a container so you can use it like relative or linear layout. And put buttons or other views inside it. And write properties like gravity in center. That is all.
Another way - do smth with items in menu layout may be. But i don't know how(
PS: a short example
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#color/primary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="previousActivity"
android:src="#drawable/ic_navigate_before_white_24dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Contact us"
android:textColor="#color/white"
android:textSize="20sp"
android:layout_gravity="center"
android:id="#+id/toolbar_title" />
</android.support.v7.widget.Toolbar>

Problems getting my ActionModeBar(?) to overlap support toolbar

I have been trying to get my app to look more material(ized) with the help of app compat v21, I have replaced my regular actionbar with the support toolbar, and changed my theme to Theme.AppCompat.Light.NoActionBar this works great! However, when I longpress an item in my gridview and my actionmode bar (is that what they are called?) shows up for multi select it shows above the toolbar.
I want it to overlap the toolbar, the same way it did with my old regular actionbar. I have tried to find a solution here, and have found multiple sources saying to add true
This does not work for me, i have tried both with the android: prefix and without, but still I get the same result. My activity extends ActionBarActivity and I have put:
Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
In my onCreate. I feel like I have tried anything but I get the same result regardless.
I guess I better show some code:
My main layout
<android.support.v4.widget.DrawerLayout
xmlns:ads="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="?window_bg_default"
>
<!-- The main content view -->
<include layout="#layout/toolbar" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<com.google.android.gms.ads.AdView
android:id="#+id/adView"
ads:adSize="SMART_BANNER"
android:visibility="gone"
android:background="#color/text_darkgray"
android:layout_width="fill_parent"
android:layout_alignParentBottom="true"
android:layout_height="wrap_content" />
<TableLayout
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:id="#+id/main_content"
android:layout_above="#id/adView"
/>
</RelativeLayout>
</LinearLayout>
<!-- The navigation drawer -->
<include layout="#layout/navdrawer" />
My styles
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="colorPrimary">#color/twee_orange_light</item>
<item name="colorPrimaryDark">#color/twee_orange_dark</item>
<item name="colorAccent">#color/twee_blue_light</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowActionModeOverlay">true</item>
<item name="windowActionModeOverlay">true</item>
<item name="android:actionBarStyle">#style/AppTheme.Actionbar</item>
<item name="android:actionModeBackground">#color/twee_orange_dark</item>
<item name="android:actionOverflowButtonStyle">#style/AppTheme.Overflow</item>
<item name="android:homeAsUpIndicator">#drawable/ic_action_home</item>
<item name="card_bg_default">#drawable/img_bg_card</item>
<item name="window_bg_default">#drawable/window_background</item>
<item name="card_episode_name">#color/nextepisodegray</item>
<item name="card_episode_number">#color/twee_black</item>
<item name="button_bg">?android:attr/selectableItemBackground</item>
<item name="button_watched">#drawable/ic_watched_inactive</item>
<item name="text_default">#color/text_slightlydarkgray</item>
<item name="text_default_header">#color/text_darkergray</item>
<item name="text_season_separator">#color/black</item>
<item name="drawer_background">#color/drawer_background</item>
<item name="drawer_list_background">#color/drawer_list_background</item>
<item name="card_bg_default_color">#color/drawer_list_background</item>
<item name="twee_divider">#color/divider_default</item>
<item name="card_header_default">#drawable/img_bg_cardtop_header</item>
<item name="checkbox_watched">#drawable/checkbox_watched</item>
<item name="card_middle_bg">#drawable/background_listitem_default</item>
</style>
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/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#color/twee_orange_light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:elevation="8dp" />
My navdrawer:ยจ
<se.ja1984.twee.Activities.Views.ScrimInsetsScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="fill_parent"
android:layout_gravity="left|start"
android:orientation="vertical"
android:id="#+id/drawer_wrapper"
android:background="?drawer_background"
android:fitsSystemWindows="true"
app:insetForeground="#4000"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="165dp"
android:background="#drawable/img_navdrawer_header"
android:orientation="vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="#dimen/navbar_top"
android:paddingBottom="8dp"
android:id="#+id/lnrProfileChooser"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/layoutImage"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginRight="#dimen/padding_small"
>
<se.ja1984.twee.utils.RoundedImageView
style="#style/Twee_Cast_Photo"
android:layout_height="64dp"
android:layout_width="64dp"
android:id="#+id/imgUser"
android:scaleType="centerCrop"
android:src="#drawable/ic_no_cast"/>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/traktWrapper"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:visibility="gone"
>
<ImageView
android:id="#+id/background"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/trakt_background"
/>
<ImageView
android:layout_gravity="center"
android:id="#+id/imgTraktLogo"
android:layout_width="10dp"
android:layout_height="10dp"
android:src="#drawable/ic_trakt_logo"
/>
</FrameLayout>
</RelativeLayout>
<it.sephiroth.android.library.widget.HListView
android:id="#+id/profiles"
android:layout_width="48dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_gravity="right|top" />
</FrameLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="vertical"
android:layout_gravity="bottom"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" android:orientation="vertical"
android:layout_alignParentBottom="true"
>
<TextView
style="#style/Twee_Profile_Displayname"
android:id="#+id/txtUsername"
android:text="#string/profile_notsignedin_displayname"
android:paddingTop="0dp"
/>
<TextView
android:text="Xxxx hours well spent"
style="#style/Twee_Profile_Timewasted"
android:id="#+id/txtTimeWasted"
android:paddingTop="0dp"
android:layout_below="#+id/txtUsername" />
</LinearLayout>
</RelativeLayout>
</FrameLayout>
<LinearLayout
android:id="#+id/navdrawer_items_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:orientation="vertical" />
</LinearLayout>
</se.ja1984.twee.Activities.Views.ScrimInsetsScrollView>
The trained eyes might see that I have borrowed the ScrimInsetScrollView from the IOSched app, but I don't think that matters.
And here's an image of the monsterosity!
I managed to solve this issue myself!
The problem is that I ran my super.onCreate() to late in my onCreate method.
I moved it to the top of my method, and now it works great!

Categories

Resources