CoordinatorLayout blank space under toolbar - android

When I start my application on a virtual device it is like an ekstra toolbar appears on my activity.
It is an activity with nested scrollview and collapsing toolbar. All the animations and all the buttons works perfectly, but it seems like it adds ekstra space and it is exactly the size of a collapsed/regular toolbar.
If I change the coordinatorLayout layout_height to "wrap_content" the extra space will go to the bottom of the screen instead of being right under the correct toolbar.
Can anyone see what the problem is? I have tried a plethora of different settings now.
Non collapsed toolbar with imageview
Collapsed toolbar
Heres the code for the activity:
public class algorithms_abcde extends AppCompatActivity {
CollapsingToolbarLayout collapsingToolbarLayout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_algorithms_abcde);
setSupportActionBar((Toolbar) findViewById(R.id.toolbar));
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(true);
collapsingToolbarLayout = findViewById(R.id.collapsingToolbar);
collapsingToolbarLayout.setTitle(getString(R.string.btn_txt_abcde));
collapsingToolbarLayout.setExpandedTitleColor(getResources().getColor(android.R.color.transparent));
}
#Override
public boolean onCreateOptionsMenu(Menu menu){
//Inflate the menu; This adds it to the actionba
getMenuInflater().inflate(R.menu.menu_other, menu);
return true;
}
// Determines which button has been pressed.
#Override
public boolean onOptionsItemSelected(MenuItem item){
//Switch case to handle item presses on the action bar
switch (item.getItemId()) {
case android.R.id.home:
this.finish();
return true;
case R.id.action_home:
Intent intent = new Intent(this, MainActivity.class);
intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
startActivity(intent);
return true;
}
return super.onOptionsItemSelected(item);
}
}
Here is the xml of the activity:
<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=".algorithms_abcde"
android:layout_gravity="bottom">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
app:contentScrim="#color/colorVeryLight"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
android:fitsSystemWindows="true"
>
<ImageView
android:id="#+id/headLine"
android:layout_width="match_parent"
android:layout_height="120dp"
android:layout_marginLeft="60dp"
android:layout_marginRight="60dp"
android:fitsSystemWindows="true"
android:src="#drawable/img_abcde_headline"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#android:color/white">
<TextView
android:id="#+id/scrollAbleTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:padding="10dp"
android:text="#string/stringtest"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Heres the xml of the themes.xml
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="windowActionBar">false</item>
<item name="android:buttonStyle">#style/button</item>
<!-- Base application theme. -->
<!-- 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:background">#color/colorVeryLight</item>
</style>
</resources>
and and lastly the manifest:
<application
android:allowBackup="true"
android:icon="#mipmap/ic_launcher"
android:label="#string/app_name"
android:roundIcon="#mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="#style/AppTheme">
<activity android:name=".algorithms_opqrst"></activity>
<activity android:name=".algorithms_abcde" />
<activity android:name=".algorithms_activity" />
<activity
android:name=".MainActivity"
android:label="#string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>

I found the answer.
I had to remove all the "android:fitsSystemWindows="true"" and add it to the CoordinatorLayout.
Then I also had to remove the "android:layout_gravity="bottom"" from both the CoordinatorLayout and the NestedScrollView.

Related

Material Components version 1.1.0 flicker when hiding fab/showing menu item in BottomAppBar

I am trying to show a MenuItem when the application's fab is hidden in the BottomAppBar, and make it visible again when I show the fab. When I am hiding the fab and making the MenuItem visible, however, the former flickers shortly (appears, disappears, and then appears again and stays). In the dependencies of my Manifest I have added: implementation 'com.google.android.material:material:1.1.0'.
For this example, I have created a button that shows/hides the fab.
My MainActivity looks like:
public class MainActivity extends AppCompatActivity {
private FloatingActionButton fab;
private MenuItem menuItm;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
BottomAppBar toolbar = findViewById(R.id.bottom_app_bar);
setSupportActionBar(toolbar);
fab = findViewById(R.id.fab);
}
public void showHideFab(View view) {
if (fab.isOrWillBeHidden()) {
fab.show();
menuItm.setVisible(false);
} else {
fab.hide();
menuItm.setVisible(true);
}
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
#Override
public boolean onPrepareOptionsMenu(Menu menu) {
menuItm = menu.findItem(R.id.menu_itm);
return super.onPrepareOptionsMenu(menu);
}
}
The layout file activity_main.xml:
<?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"
tools:context=".MainActivity">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/coord"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottom_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="#color/colorPrimary"
app:fabAlignmentMode="end" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="#id/bottom_app_bar"
app:srcCompat="#android:drawable/ic_dialog_alert" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:onClick="showHideFab"
android:text="Show/Hide Fab" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
My menu/menu_main.xml:
<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="com.teka.loulis.print.MainActivity">
<item
android:id="#+id/menu_itm"
android:icon="#android:drawable/ic_dialog_alert"
android:visible="false"
app:showAsAction="always" />
</menu>
My styles.xml:
<resources>
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorSecondary">#color/colorAccent</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
</resources>
and the declaration of the MainActivity in the Manifest:
<activity android:name=".MainActivity"
android:theme="#style/AppTheme.NoActionBar">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
In the version 1.0.0, this issue did not exist. Am I doing something wrong, or is it a bug/feature of the library? Thank you!
EDIT: I noticed that when the fab is aligned in the centre (by removing app:fabAlignmentMode="end" from the activity_main layout file), this problem is gone. When aligning in the end, other issues exist, for example, if I make the fab and the menu item visible at the same time, the menu item is sometimes drawn on top of the fab! Seems more like a bug to me.
With 1.3.0-alpha02 setFabAlignmentModeAndReplaceMenu() has been added.
bottomAppBar.setFabAlignmentModeAndReplaceMenu(BottomAppBar.FAB_ALIGNMENT_MODE_END, R.menu.sample)
Using this, I am no longer experiencing the flickering effect.
Here is the commit:d4a5702 on GitHub: material-components-android for further information.

Toolbar disappears immediately after launching Activity

I originally had an ActionBar atop my Google Map Activity, but I needed to add multiple elements inside it, so it was suggested to me that I use a Toolbar instead.
Well, I've managed to successfully get it setup, but the Toolbar disappears immediately after launching.
I don't understand why this is happening since there are no errors, and I don't know where I would try to add a breakpoint in my code.
Here's the code in my onCreate method of my MapActivity.java:
/*
CODE FOR DISTANCE TEXT AND SHARE BUTTON
*/
if(getSupportActionBar() != null) {
getSupportActionBar().setDisplayShowTitleEnabled(false);
}
Toolbar toolbar = findViewById(R.id.toolbar);
mDrawerLayout = findViewById(R.id.nav_drawer);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);
mToggle = new ActionBarDrawerToggle(this,mDrawerLayout,toolbar,R.string.open, R.string.close);
mDrawerLayout.addDrawerListener(mToggle);
mToggle.syncState();
mNavigationView = findViewById(R.id.navigation_view);
if(mNavigationView != null) {
mNavigationView.setNavigationItemSelectedListener(this);
}
Here are the activities in my AndroidManifest.xml
<application
android:allowBackup="true"
android:icon="#drawable/wheres_my_ride_icon"
android:label="#string/app_name"
android:roundIcon="#mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="#style/AppTheme">
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="***************************" />
<meta-data
android:name="com.google.android.gms.version"
android:value="#integer/google_play_services_version" />
<activity
android:name=".MapActivity"
android:screenOrientation="portrait"
android:theme="#style/AppTheme">
</activity>
<activity
android:name=".StartActivity"
android:screenOrientation="portrait">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name=".TutorialActivity"
android:label="#string/title_activity_tutorial"
android:theme="#style/AppTheme.NoActionBar">
</activity>
</application>
Here is my styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<!-- Customize theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:textColorSecondary">#android:color/white</item>
</style>
<!-- Action Bar Custom Style -->
<style name="MyActionBar" parent="Theme.AppCompat.Light">
<item name="android:background">#2a363b</item>
<item name="drawerArrowStyle">#style/DrawerHamburgerStyle</item>
<item name="android:textColorSecondary">#android:color/white</item>
</style>
<!-- Action Bar Icon Style -->
<style name="DrawerHamburgerStyle" parent="#style/Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">#android:color/white</item>
</style>
<!-- Custom Alert Dialog Theme -->
<style name="CustomAlertDialog" parent="#android:style/Theme.Dialog">
<item name="android:textColor">#FFFFFF</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
Here is my toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<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="#color/minimalist_grey"
android:gravity="center"
app:popupTheme="#style/AppTheme.PopupOverlay">
<TextView
android:id="#+id/toolbarDistanceText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="start|center_vertical"
android:textSize="20sp"
android:text="Distance (Just for testing)" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_share_white"
android:background="#android:color/transparent"
android:layout_gravity="end"
android:layout_marginEnd="20dp"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</LinearLayout>
And here is where I include the toolbar.xml in my activity_map.xml:
<android.support.v4.widget.DrawerLayout
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:id="#+id/nav_drawer">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- RIGHT HERE IS THE TOOLBAR -->
<include layout="#layout/toolbar"/>
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.christopher_sheridan.wheres_my_ride.MapActivity"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp" />
After reading about layouts, I realized I forgot about z-ordering!
I changed my code from this:
<android.support.v4.widget.DrawerLayout
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:id="#+id/nav_drawer">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- THIS WAS MY OOPSIE -->
<include layout="#layout/toolbar"/>
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.christopher_sheridan.wheres_my_ride.MapActivity"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp" />
to this:
<android.support.v4.widget.DrawerLayout
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:id="#+id/nav_drawer">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.christopher_sheridan.wheres_my_ride.MapActivity"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp" />
<!-- PLACED IT UNDER THE FRAGMENT -->
<include layout="#layout/toolbar"/>
Now the toolbar is there. :-)

ScrollView scrolling stops once toolbar.setVisibility(View.GONE) and I have to scroll again

ScrollView scrolling stops on toolbar.setVisibility(View.GONE). I have to again scroll to continue scrolling but there's no problem with View.INVISIBLE but Only text of AppBar goes Invisible. I have also tried getSupportActionBar().hide(); but same result Below is my code.
scrollView.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() {
#Override
public void onScrollChanged() {
int scrollY=scrollView.getScrollY();
if (scrollY>0){
fab.setVisibility(View.INVISIBLE);
if (scrollY>350){
//Here When scrolling reached to 350 scrolling Stops. I have to Scroll Again.
toolbar.setVisibility(View.GONE);
}
Log.d("scrollPosition"," "+scrollY);
}else {
fab.setVisibility(View.VISIBLE);
toolbar.setVisibility(View.VISIBLE);
// I have no problem while scrolling to top.
}
}
});
app_bar_main.xml
<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="com.queendevelopers.appalamusicplayer.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 layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
activity_main.xml
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<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:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
Styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>
Manifest.xml
android:roundIcon="#mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="#style/AppTheme">
<activity
android:name=".MainActivity"
android:label="#string/app_name"
android:theme="#style/AppTheme.NoActionBar">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
I am using Android default templete Android Activity With Navigation Drawer

How to get a button image into the Action bar

A button with a given image shall appear in the action bar. The Image below illustrates what I need:
In order to isolate the problem, I used the template from Android Studio which has an action bar and added an item to the menu list pointing to my png file in the drawable resource folder.
Here the Code:
MainActivity:
package com.pm.pmactionbaricon;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
}
The menu Definition:
<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="com.pm.pmactionbaricon.MainActivity">
<item
android:id="#+id/action_settings"
android:orderInCategory="100"
android:title="#string/action_settings"
app:showAsAction="never" />
<item
android:id="#+id/distance_button"
android:icon="#drawable/distance_waiting"
android:title="#string/Distance"
android:orderInCategory="100"
android:showAsAction="ifRoom"/>
</menu>
The main layout file:
<?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="com.pm.pmactionbaricon.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 layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
The manifest file:
<?xml version="1.0" encoding="utf-8"?>
<application
android:allowBackup="true"
android:icon="#mipmap/ic_launcher"
android:label="#string/app_name"
android:supportsRtl="true"
android:theme="#style/AppTheme">
<activity
android:name=".MainActivity"
android:label="#string/app_name"
android:theme="#style/AppTheme.NoActionBar">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
What I get from this is an Action bar without icon even though there is sufficient room:
The relevant menu item instead appears in the overflow menu:
Perhaps I have a fundamental misunderstanding about this. Any explanation would be welcome. Is it not possible to achieve this trivial task in Android? Which method do I have to apply to make a custom image visable as button and to control ist appearance and size in the action bar?
Make a custom_toolbar.xml and include it in your layout.()
<?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"
app:layout_collapseMode="pin"
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:padding="0dp"
android:layout_width="match_parent"
android:background="#android:color/transparent"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="left">
//define your own layout here ,whatever you want to include
</RelativeLayout>
</android.support.v7.widget.Toolbar>

How do you change the color of collapsing toolbar when it's collapsed?

I have a collapsing toolbar, but I cannot for the love of god figure out why its not changing to the color i want it to as it collapses...Here is my xml code the collapsing toolbar.
<?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"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/FrontierTheme">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:src="#drawable/background"
android:id="#+id/profileView_imageView"/>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:id="#+id/toolbarProfileViewID"
android:minHeight="?attr/actionBarSize"
app:theme="#style/FrontierTheme"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:background="#color/mainColor"
app:tabMode="scrollable"
app:tabTextColor="#color/white"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/tab_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Here is my styles.v21 (i dont have have anything in the regular styles.xml file)
<style name="FrontierTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:colorPrimary">#5F021F</item>
<item name="android:colorPrimaryDark">#5E152C</item>
<item name="android:colorAccent">#BCBCBC</item>
<item name="android:textColor">#FFFFFF</item>
</style>
And here is my android manifest.
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
package="com.daprlabs.swipedeck" >
<uses-sdk
android:minSdkVersion="7"
android:targetSdkVersion="23" />
<application
android:allowBackup="true"
android:icon="#mipmap/ic_launcher"
android:label="#string/app_name"
android:largeHeap="true"
android:supportsRtl="true"
android:theme="#style/FrontierTheme"
android:name=".ApplicationEnvironment">
<activity
android:name=".ActivityCenter"> <!--android:theme="#style/TestTheme" -->
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".ProfileView.ProfileView"
android:label="Frontier" />
</application>
</manifest>
Currently, when it collapses, the color is white...But i want it to be this hexidecimal: #5F021F
add a addOnOffsetChangedListener listener in the AppBarLayout to know if it's collapse or not, and change the color using setBackgroundColor. Like this:
//Set a listener to know the current visible state of CollapseLayout
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
int scrollRange = -1;
#Override
public void onOffsetChanged(final AppBarLayout appBarLayout, int verticalOffset) {
//Initialize the size of the scroll
if (scrollRange == -1) {
scrollRange = appBarLayout.getTotalScrollRange();
}
//Check if the view is collapsed
if (scrollRange + verticalOffset == 0) {
toolbar.setBackgroundColor(ContextCompat.getColor(mContext, R.color.YOUR_COLLAPSED_COLOR));
}else{
toolbar.setBackgroundColor(ContextCompat.getColor(mContext, R.color.OTHER_COLOR));
}
}
});
The selected answer doesn´t work for me, looks terrible in my case when the color changes when verticalOffset == 0, so I tried this:
collapsingToolbarLayout.setContentScrimColor(Color.parseColor("#000000")); // #000000 is black color hex (for example)
And now changing color when collapsed looks smooth and clean,
Hope it helps somebody,

Categories

Resources