I recently added a CoordinatorLayout to my Application. How do i remove blue box, which is showing below the other toolbar. I already tried to remove the appbar layout and the navigation view, but they did not result in any changes.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.recyclerviewtutorial.ChatListActivity">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/layout_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="#+id/my_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/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_chats"
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="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#drawable/ic_info_black_24dp"/>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
/>
</LinearLayout>
Edit Styles.xml was added.
<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>
Just some random text to meet the posting requirements
Edit Problem is solved ty
I added an ID to the AppBarLayout
android:id="#+id/appbar_nav"
and disabled it in the onCreate Method of the Activity.
AppBarLayout mAppBarLayout = findViewById(R.id.appbar_nav);
mAppBarLayout.setVisibility(View.GONE);
Set this theme to your styles.xml file.
<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="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
You can do this in style.xml
<style name="AppTheme.NoActionBar">
<!-- <item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>-->
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:navigationBarColor">#android:color/transparent</item>
<item name="android:windowTranslucentNavigation">true</item>
</style>
and give this style to activity in manifest like,
<activity
android:name=".MainActivity"
android:theme="#style/AppTheme.NoActionBar"
android:label="#string/app_name">
</activity>
EXTRA :
if you want transparent status bar than add java code like,
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
Window w = getWindow(); // in Activity's onCreate() for instance
w.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
}
setContentView(R.layout.activity_login);
}
You should set below theme as your application theme or as an Activity theme
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<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>
Related
I write on a Guild App for Android with Android Studio.
And here is my problem,
In my MainActivity is the title color and menu opener black:
And in my SettingsActivity is the template from Android Studio is the title color And arrow white:
Where can I edit what both have always the same colors?
Edit 1
#Sodiq
here is my Code:
here my settings_toolbar.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"
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.design.widget.AppBarLayout>
<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.CoordinatorLayout>
Here my the code in My SettingsActivity page:
private void setupActionBar() {
ViewGroup rootView = (ViewGroup)findViewById(R.id.action_bar_root); //id from appcompat
if (rootView != null) {
View view = getLayoutInflater().inflate(R.layout.app_bar_settings1, rootView, false);
rootView.addView(view, 0);
Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
SharedPreferences settings = PreferenceManager.getDefaultSharedPreferences(this);
int color_one = settings.getInt("color_one", 0);
toolbar.setBackgroundColor(color_one);
}
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
// Show the Up button in the action bar.
actionBar.setDisplayHomeAsUpEnabled(true);
}
}
This is my color.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#ff0000</color>
<color name="colorPrimaryDark">#363636</color>
<color name="colorAccent">#FF4081</color>
<color name="white">#FFFFFF</color>
</resources>
My style.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="titleTextColor">#android:color/black</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>
and this in my Manifest:
<activity
android:name=".settings.SettingsActivity"
android:label="#string/title_activity_settings"
android:theme="#style/AppTheme.NoActionBar"></activity>
Edit 2
By Change to a Toolbar from Actionbar
have help me this for easy way from Sodiq
for a colored Statusbar
Code from Sodiq
Change Manifest entry from SettingsActivity
android:theme="#style/AppTheme.NoActionBar"
To
android:theme="#style/AppTheme"
And Change Style.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
to
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
Thanks Sodiq for your Help
Try to remove android:theme="#style/AppTheme.NoActionBar" on your activity and only useandroid:theme="#style/AppTheme"` on your application on manifest
And changes your theme style <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> to <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
This have help me now
i have my create new Style in Style.xml
<style name="AppTheme.Settings" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here.-->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="titleTextColor">#android:color/black</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
and edit in my Manifest
<activity
android:name=".settings.SettingsActivity"
android:label="#string/title_activity_settings"
android:theme="#style/AppTheme.Settings"></activity>
I am developing application which have multi screen support. I have completed all remain layout as per device size but I am unable to increase Actionbar/Toolbar size for same. its looking small in 10inch tablet. How can I increase size of toolbar text ?
My Style XML is like below
<resources>
<!--
Base application theme, dependent on API level. This theme is replaced
by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
-->
<style name="AppBaseTheme" parent="android:Theme.Light">
</style>
<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.FullScreen" parent="noActionBar">
<item name="android:windowFullscreen">true</item>
</style>
<style name="noActionBar" parent="Theme.AppCompat.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="OptionDialog" parent="Theme.AppCompat.Dialog.Alert">
<item name="colorAccent">#C5CAE9</item>
<item name="android:background">#3F51B5</item>
<item name="android:textColor">?android:attr/textColorPrimaryInverseDisableOnly</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
<style name="SelectableItemTheme">
<item name="colorControlHighlight">#888888</item>
</style>
<style name="SelectableItemBackground">
<item name="android:theme">#style/SelectableItemTheme</item>
<item name="android:background">?attr/selectableItemBackground</item>
</style>
<style name="HomeTabTextStyle"
parent="TextAppearance.Design.Tab">
<item name="android:textSize">35sp</item>
<item name="android:textStyle">bold</item>
</style>
<!-- Action Bar Style -->
and my layout xml which including toolbar is like below
<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="110dp"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
app:tabTextAppearance="#style/HomeTabTextStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
My Java Code is like below
setContentView(R.layout.activity_home);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
setTitle("My App Name");
Toolbar is like any other layout; that means you can add elements inside it like this:
<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">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="25sp"
android:textColor="#color/colorText"
android:gravity="center|center_horizontal"
android:text="#string/title_activity_my_activity"/>
</android.support.v7.widget.Toolbar>
This will change the title size of your toolbar title; as you wish.
I hope this helps you achieve your goal! Good luck.
UPDATE
If you want to manually set the activity title, you can set an id for the text view like this:
<TextView
android:id="#+id/title_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="25sp"
android:textColor="#color/colorText"
android:gravity="center|center_horizontal"
android:text="#string/title_activity_my_activity"/>
Then like usual,
TextView title = (TextView) toolbar.findViewById(R.id.title_text);
title.setText("New Title");
I hope this helps!
I have applied the following. So when the navigation drawer is opened, the status bar color looks black.But where is my problem? It is coloring the whole width of the status bar, I want him to color just until the part the navigation drawer is open.How can I work this out?
<style name="AppBaseTheme2" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:colorAccent">#color/pink</item>
<item name="android:colorPrimaryDark">#color/pink</item>
<item name="android:colorPrimary">#color/pink</item>
<item name="colorPrimary">#color/pink</item>
<item name="colorPrimaryDark">#color/pink</item>
<item name="colorAccent">#color/pink</item>
<item name="android:dialogTheme">#style/DialogTheme</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<!-- We will be using the toolbar so no need to show ActionBar -->
<item name="android:windowActionBar">false</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/black</item>
</style>
<?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"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<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="wrap_content"
android:background="#color/purple"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleTextAppearance="#style/ToolbarTitle"></android.support.v7.widget.Toolbar>
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:id="#+id/line1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
android:orientation="vertical">
<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" />
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
Try this theme
<!-- Base application theme. -->
<style name="Base.MyTheme" 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="windowActionBar">false</item>
<item name="windowActionBarOverlay">true</item>
<item name="windowNoTitle">true</item>
<item name="android:windowBackground">#color/colorPrimary</item>
</style>
My app is working perfectly but I have this problem that my toolbar button colour changes in version 21-22 to black.Here is the example how it looks normal:
And here is the problematic part on 21-22:
Here is my Toolbar and my style:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="AppTheme.Base">
</style>
<style name="AppTheme.Base" 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/white</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
<style name="CustomToolBarTheme" parent="ThemeOverlay.AppCompat.Light">
<item name="android:textColorPrimary">#color/white</item>
<item name="android:textColorSecondary">#color/white</item>
<item name="colorAccent">#color/white</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
<style name="Toolbar.TitleText" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">18sp</item>
</style>
</resources>
The 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:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:paddingTop="#dimen/app_bar_top_padding"
app:theme="#style/CustomToolBarTheme">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:maxLines="1"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:textSize="19dp" />
</android.support.v7.widget.Toolbar>
I have tried to change the colour with SpannableString but it's not working.
Have you tried <item name="colorControlNormal">#color/colorwhatever</item> in your styles? (It should be in ToolBar text style)
I found the answer,it's in the toolbar just add the theme and the popupTheme like in my code and it will work.And you don't need that style andy more:
<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:background="#color/colorPrimary"
android:paddingTop="#dimen/app_bar_top_padding"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
I've tried many things to change the text color when i click the "three dot" menu button but it always reverts back to the toolbar (android:theme) theme and not the android:popupTheme. I want the text to be black but it always shows up white.
styles.xml
<!-- Base application theme. -->
<style name="AppTheme" parent="AppTheme.Base">
<!-- Customize your theme here. -->
</style>
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/primaryColor</item>
<item name="colorPrimaryDark">#color/primaryColorDark</item>
<item name="colorAccent">#color/accentColor</item>
</style>
<style name="MaterialWorkout_theme" parent="ThemeOverlay.AppCompat.Light">
<item name="android:textColorPrimary">#FFFFFF</item>
<item name="android:textColorSecondary">#48FFFFFF</item>
</style>
<style name="Popup_theme" parent="ThemeOverlay.AppCompat.Light">
<item name="android:textColorPrimary">#000000</item>
<item name="android:textColorSecondary">#38000000</item>
</style>
app_bar.xml
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/primaryColor"
android:id="#+id/app_bar"
android:theme="#style/MaterialWorkout_theme"
android:popupTheme="#style/Popup_theme"
>
Here is what it looks like:
http://imgur.com/svRuuHK
Solved it. changed my toolbar.xml file to this:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/primaryColor"
android:id="#+id/tool_bar"
android:theme="#style/MaterialWorkout_theme"
app:popupTheme="#style/Popup_theme">
notice the implementation of:
xmlns:app="http://schemas.android.com/apk/res-auto"
and
app:popupTheme="#style/Popup_theme"
these two lines solved my problem!
You need to define your popup menu theme in your style, not you Toolbar.
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/primaryColor</item>
<item name="colorPrimaryDark">#color/primaryColorDark</item>
<item name="colorAccent">#color/accentColor</item>
<item name="popupMenuStyle">#style/Popup_theme</item>
</style>
Use below code .I hope this will solve your problem.You can change both background color and textcolor.
<style name="AppFullScreenThemeNight" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowFullscreen">false</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:popupMenuStyle">#style/PopupMenu</item>
<!-- if using android.support.v7.widget.PopupMenu -->
<item name="popupMenuStyle">#style/PopupMenu</item>
<item name="android:itemTextAppearance">#style/TextAppearance</item>
</style>
<style name="PopupMenu" parent="ThemeOverlay.AppCompat.ActionBar">
<item name="android:popupBackground">#color/button_color</item>
</style>
<style name="TextAppearance">
<item name="android:textColor">#android:color/holo_red_dark</item>
</style>