Why does my fragment shows additional bar below the toolbar? - android

I have added the corresponding content and activity.xml as well. When I run the app in android studio on my phone, I don't see this additional bar there. But still I am wondering why am I seeing this when I open it in my editor ?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/content_home"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.a.a2.HomeFragment"
tools:showIn="#layout/activity_home">
</RelativeLayout>
activity_home.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="com.a.a2.Home">
<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_home" />
</android.support.design.widget.CoordinatorLayout>
content_home.xml
<fragment 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/fragment"
android:name="com.a.a2.HomeFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:layout="#layout/fragment_home" />
home.java
public class Home extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_snd_number_home);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_snd_number_home,menu);
return true;
}
}
styles.xml
<resources xmlns:android="http://schemas.android.com/tools" xmlns:app="urn:oasis:names:tc:xliff:document:1.2">
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/actionMenuTextColor</item>
<item name="#android:windowLightStatusBar">true</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="MyToolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:textColorPrimary">#000000</item>
</style>
<style name="ToolbarTitle" parent="#style/TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">20sp</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
<style name="onOffSwitch" parent="Theme.AppCompat.Light">
<!-- active thumb & track color (30% transparency) -->
<item name="colorControlActivated">#000000</item>
<item name="colorControlNormal">#9E9E9E</item>
<!-- inactive thumb color -->
<item name="colorSwitchThumbNormal">#9E9E9E</item>
<!-- inactive track color (30% transparency) -->
<item name="android:colorForeground">#42221f1f</item>
</style>
</resources>

Change your theme in the editor same as that of your manifest for the activity that you are working on and that should fix your problem.

Use Below Style, This is working for me :
<!-- Base application theme. -->
<style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorPrimary</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>

Edit your styles.xml as
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

Related

How to change navigation drawer menu background?

How to change menu background of android Navigation Drawer?
I tried many ways on stackoverflow but failed.
http://stackoverflow.com/questions/8167531/change-option-menu-background-dynamically
It did not work.
activity_main_drawer.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:showIn="navigation_view">
<item
android:id="#+id/nav_home"
android:icon="#drawable/ic_home_white_24dp"
android:title="#string/menu_home"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:itemBackground="#drawable/homedr"
/>
</menu>
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/cardview_dark_background</item>
<item name="colorPrimaryDark">#color/cardview_dark_background</item>
<item name="colorAccent">#color/cardview_dark_background</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"
You have to do this in the NavigationView
android:background="#color/color_navigation_view_background"
or with Java
mNavigationView.setBackgroundColor(getResources().getColor(R.color.colorPrimaryDark));
I'm assuming you're using AndroidX so here's it.
<com.google.android.material.navigation.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/navigation_header"
android:background="#color/color_navigation_view_background"
app:itemIconTint="?colorAccent"
app:menu="#menu/drawer_menu">
</com.google.android.material.navigation.NavigationView>

Status bar overlaps action bar in android

I have tried many ways to make action bar place in bottom of status bar but still not working, I am using API 17,I have added android:fitsSystemWindows="true" in CoordinatorLayout but still not working
Here is my code:
the main_activity:
<net.aparteman.apartemanapp.viewHolder.SlidingMenuLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.NavigationView
android:id="#+id/nvView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="end"
android:background="#color/dark_purple"
android:fitsSystemWindows="true"
android:layoutDirection="rtl"
android:textDirection="rtl"
app:elevation="0dp"
app:headerLayout="#layout/dashboard_nav_header"
app:itemTextColor="#color/white"
app:menu="#menu/dashboard_drawer_view"
app:theme="#style/ApartemanStyle" />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<include
android:id="#+id/actionbar"
layout="#layout/dashboard_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#+id/dashboard_fragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
the dashboard_bar.xml :
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
app:popupTheme="#style/AppTheme" />
</android.support.design.widget.AppBarLayout>
style.xml:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="actionMenuTextColor">#color/white</item>
<item name="android:actionMenuTextColor">#color/white</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="ApartemanStyle" parent="Theme.AppCompat.Light">
<item name="android:textSize">16sp</item>
<item name="actionMenuTextColor">#color/white</item>
<item name="android:actionMenuTextColor">#color/white</item>
<item name="contentInsetStart">0dp</item>
<item name="contentInsetEnd">0dp</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="ApartemanStyle.NoActionBar">
<item name="actionMenuTextColor">#color/white</item>
<item name="android:actionMenuTextColor">#color/white</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="ApartemanStyle.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="ApartemanStyle.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
It looks like this:
Can anyone help me on this?

Android DrawerLayout (with NavigationView) behind status bar

I have an app with a DrawerLayout that contains a NavigationView:
activity_layout.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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/drawer_layout"
android:fitsSystemWindows="true">
<android.support.constraint.ConstraintLayout
android:id="#+id/activity_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.exmaple.appname.activityname">
<android.support.v7.widget.Toolbar
android:id="#+id/actionbar_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/Theme.AppCompat"/>
[…]
</android.support.constraint.ConstraintLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/nav_drawer"
android:fitsSystemWindows="true"/>
</android.support.v4.widget.DrawerLayout>
I have added the following styles as well:
styles.xml:
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
[…]
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
</style>
values-21/styles.xml:
<style name="AppTheme.NoActionBar" parent="AppTheme">
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
All of this code is based on the Google I/O Schedule App, however the DrawerLayout still does not render behind the status bar. Any ideas as to why this combination of solutions isn't working and what solutions might? I've found that drawing behind the status bar is never a one-size-fits-all solution, but after trying every combination of solutions on Stack Overflow that I can think of, I still can't get it.
Current drawer image:
Just add <item name="android:windowTranslucentStatus">true</item> in values-21/styles.xml and remove this <item name="android:statusBarColor">#android:color/transparent</item>
add android:fitsSystemWindows="true" to your NavigationView in xml
Working example!
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
Result
Edited (main layout)
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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" <--This is mandatory
tools:context=".ui.activities.MainActivity">
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white" />
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/colorPrimary"
android:fitsSystemWindows="true" /><--This is mandatory
</android.support.v4.widget.DrawerLayout>
Current Result
Update: I lookup your style-v21 and found below
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme.NoActionBar" parent="AppTheme">
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
</resources>
Please replace it with this
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowTranslucentStatus">true</item>
</style>

Android Studio - Transparent Action Bar - Navigation Drawer

I have a navigation drawer template. I have modified the action bar so I don't see the title. And I know how to change the colors, but I do not know how to get this effect:
This is my current status:
This is my styles.xml (what teme I'm using):
<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" />
You can use Toolbar with transparent background.
activity_main.xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/your_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#4BAE4F"
android:orientation="vertical">
<!--Place your content here-->
</LinearLayout>
<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:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
</android.support.v7.widget.Toolbar>
</RelativeLayout>
MainActivity.java:
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
setSupportActionBar((Toolbar) findViewById(R.id.toolbar));
}
}
styles.xml:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
From API 19 you can set parameter <item name="android:windowTranslucentStatus">true</item> in your styles.xml to make status bar transparent as well.

Background color of Toolbar in Lollipop is normal but in Kitkat is white

In Lollipop, The background color of toolbar was shown normally, but in KitKat, it was shown as white color.
I don't know why.
activity_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"
android:fitsSystemWindows="true"
tools:context=".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>
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>
styles.xml-v21
<resources>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
</resources>
Try putting your AppBarLayout at the end of you code. Apparently your included layout is overlapping the ToolBar. That happened to me and I fixed it doing that, it just came to my mind. Like 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"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<include layout="#layout/content_main"/>
<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>
</android.support.design.widget.CoordinatorLayout>
Create a base theme in styles.xml with primary colors and other colors colors then set it as parent in styles.xml-v21 for your style name="AppTheme.NoActionBar".
Below is my example :
in styles.xml
<style name="AppBase" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primary_color</item>
<item name="colorPrimaryDark">#color/primary_color_dark</item>
<item name="colorAccent">#color/primary_yellow_bright</item>
<item name="colorControlNormal">#color/primary_yellow</item>
<item name="colorControlHighlight">#color/primary_color_light_100</item>
<item name="colorControlActivated">#color/primary_yellow_bright</item>
<item name="colorButtonNormal">#color/primary_yellow_bright</item>
<item name="android:windowBackground">#color/primary_white</item>
<item name="android:textColorPrimary">#color/primary_color</item>
<item name="android:textColorSecondary">#color/primary_color_light</item>
<item name="android:textColor">#color/primary_white</item>
<item name="android:buttonStyle">#style/ButtonAppTheme</item>
</style>
<style name="AppTheme" parent="AppBase" />
in styles.xml-v21
<style name="AppTheme" parent="AppBase">
<item name="android:navigationBarColor">#color/primary_light_gray</item>
<item name="android:windowContentTransitions">true</item>
<item name="android:windowAllowEnterTransitionOverlap">true</item>
<item name="android:windowAllowReturnTransitionOverlap">true</item>
<item name="android:windowSharedElementEnterTransition">#android:transition/move</item>
<item name="android:windowSharedElementExitTransition">#android:transition/move</item>
</style>
in AndroidManifest.xml
android:theme="#style/AppTheme"
should work.

Categories

Resources