I have the following simple app with 3 tabs:
I want to remove the shadow from the appbar and add shadow to the tablayout.
I tried multiple things such as android:elevation or adding <item name="elevation">0dp</item> to the AppTheme, or using <item name="android:windowContentOverlay">#null</item>. Nothing works. I keep having a shadow under the app bar (where is says My App) and no shadow is added under
the tabs (Where is says PAGE 1, PAGE2, PAGE3).
These are my xml files:
style.xml:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="elevation">0dp</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<!-- Style for a tab that displays a category name -->
<style name="CategoryTab" parent="Widget.Design.TabLayout">
<item name="tabIndicatorColor">#android:color/white</item>
<item name="tabSelectedTextColor">#android:color/holo_purple</item>
<item name="tabTextAppearance">#style/CategoryTabTextAppearance</item>
</style>
<!-- Text appearance style for a category tab -->
<style name="CategoryTabTextAppearance" parent="TextAppearance.Design.Tab">
<item name="android:textColor">#000000</item>
</style>
</resources>
this is the activity_main.xml:
<LinearLayout 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"
android:background="#color/primary_color"
android:orientation="vertical"
tools:context="com.example.barebones.barebones.MainActivity">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
style="#style/CategoryTab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="15dp"/>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="10dp"/>
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
add Elevation in AppBarLayout like below
getSupportActionBar().setElevation(0);
Adding shadow to your tablayout just add elevation to your Tablayout. and also for info read
Material-Design.
android:background="?attr/colorPrimary"
android:elevation="15dp"
just need to add
'android:background="#null"' in XML file
Related
I have two screen. First one is main screen. There is no toolbar title which has only NavigationIcon. Second one is the other activity. It has a title and HomeAsUpIndicator. I use below style codes to remove gap between title and HomeAsUpIndicator icon in second activity.
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="actionButtonStyle">#style/ActionButtonStyle</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="toolbarNavigationButtonStyle">#style/homeToolbarNavigationButtonStyle</item>
</style>
<style name="ActionButtonStyle" parent="Widget.AppCompat.ActionButton">
<item name="android:minWidth">0dip</item>
<item name="android:paddingStart">8dip</item>
<item name="android:paddingEnd">8dip</item>
</style>
<style name="homeToolbarNavigationButtonStyle" parent="#style/Widget.AppCompat.Toolbar.Button.Navigation">
<item name="android:minWidth">0dp</item>
<item name="android:paddingLeft">10dp</item>
<item name="android:paddingRight">-20dp</item>
<item name="android:scaleType">centerInside</item>
</style>
Although there is no title in the main screen, NavigationIcon is below title when ı use this style. How can solve this problem? Yo can show in images.
I create a custom toolbar .xml and ı added my second activity .xml;
<androidx.appcompat.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/my_custom_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingLeft="#dimen/general_padding_left"
android:gravity="left"
android:layout_centerVertical="true">
<Button
android:id="#+id/go_back_icon"
android:layout_width="32dp"
android:layout_height="32dp"
android:background="#drawable/ic_go_back_icon"
/>
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20dp"
android:textColor="#color/white"/>
</LinearLayout>
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
Well from your question it seems you want to hide the title in the Second activity. Correct me if I'm wrong
Use windowNoTitle attribute in styles to not show Title in toolbar.
<item name="windowNoTitle">true</item>
Alternatively, you can use setTitle(" ") in onCreate of the activity.
I have a toolbar.xml that is included to all activities
<LinearLayout 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:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ToolBarStyle"
app:popupTheme="#style/ToolBarStyle">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/ToolBarStyle"
app:popupTheme="#style/ToolBarStyle"
app:subtitleTextColor="#color/secondaryTextColor"
app:titleTextAppearance="#style/Toolbar.TitleText"
app:titleTextColor="#color/primaryTextColor" />
</android.support.design.widget.AppBarLayout>
<View
android:id="#+id/toolbar_shadow"
android:layout_width="match_parent"
android:layout_height="4dp"
android:background="#drawable/toolbar_drops_shadow" />
</LinearLayout>
On one of my activities I have back arrow and by default it's dark grey. I'd like to make it white. For this I create a theme
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/primaryColor</item>
<item name="colorPrimaryDark">#color/primaryDarkColor</item>
<item name="colorAccent">#color/secondaryColor</item>
<item name="android:textColorHint">#color/hintTextColor</item>
</style>
<!-- ToolBar -->
<style name="ToolBarStyle" parent="Widget.AppCompat.Toolbar">
<item name="android:gravity">center</item>
<item name="colorControlNormal">#FFF</item>
</style>
The problem is that this theme is not applied in KitKat to my toolbar. If I put <item name="colorControlNormal">#FFF</item> to AppTheme back arrow, menu icon become white. The problem is that it makes white some tints of EditText, everywhere.
Do you have an idea why this one does not work and how I can correctly apply a theme to the toolbar?
I have the following layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
android:fitsSystemWindows="true"
tools:context="com.skillberg.weather.ui.activity.MainActivity">
<android.support.v7.widget.RecyclerView
android:id="#+id/weather_rv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:fitsSystemWindows="true" />
</android.support.design.widget.CoordinatorLayout>
And style:
<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>
<item name="windowActionBarOverlay">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
I want the first item in RecyclerView to be displayed under the status bar (like toolbar), but it's not being displayed there:
However, RecyclerView itself draws under status bar, but it seems that there is some top padding which height = status bar height:
How to fix it?
Expand your AppTheme with windowTranslucentStatus e.g.
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:windowTranslucentStatus">true</item>
// other stuff
</style>
This will allow the StatusBar to be transparent. You don't need to use android:fitsSystemWindows.
In you CoordinatorLayout change this android:fitsSystemWindows="true" to false
You're missing the behavior that works in pair with the CoordinatorLayout.
Simply add it to your RecyclerView as follow :
<android.support.v7.widget.RecyclerView
android:id="#+id/weather_rv"
app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:fitsSystemWindows="true" />
I want to achieve a transparent status bar in pre lollipop and above lollipop as well. My minimumSdkLevel is 19. I have tried the following method to achieve transparent statusbar. But the toolbar is going underneath statusbar.
Here is the screenshot (This is a Full screen Fragment with Toolbar on it):
Layout of the above screenshot:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView 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:clickable="true"
app:cardCornerRadius="3dp"
android:fitsSystemWindows="true"
app:cardElevation="3dp">
<RelativeLayout
android:id="#+id/gamesLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/toolbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/gameToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbarLayout">
<ImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:adjustViewBounds="true"
android:alpha="0.3"
android:scaleType="fitXY"
android:src="#drawable/background_img" />
<ImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:adjustViewBounds="true"
android:alpha="0.3"
android:rotation="180"
android:scaleType="fitXY"
android:src="#drawable/background_img" />
<android.support.v7.widget.RecyclerView
android:id="#+id/gameList"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp" />
</RelativeLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
Here is my styles.xml:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.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:colorBackgroundCacheHint">#null</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:windowAnimationStyle">#android:style/Animation</item>
</style>
Here is my v21/styles.xml :
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:colorPrimary">#color/colorPrimary</item>
<item name="android:colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="android:colorAccent">#color/colorAccent</item>
<item name="android:windowContentTransitions">true</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowTranslucentNavigation">true</item>
</style>
I have even added android:fitsSystemWindows="true" to the root layout of the Activities and Fragments.
I have added this below code as well in the Activities and Fragments:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
Window window = getWindow();
window.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
}
Why I am not getting transparent Statusbar and why Toolbar is going underneath Statusbar?
in default style.xml
<!-- Base application theme. -->
<style name="BGTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
</style>
<style name="BGTheme.ActionBar.Transparent" parent="BGTheme">
<item name="android:windowContentOverlay">#null</item>
<item name="windowActionBarOverlay">true</item>
<item name="windowActionBar">false</item>
<item name="colorPrimary">#android:color/transparent</item>
<item name="android:textColorSecondary">#color/white</item>
</style>
<style name="BGTheme.ActionBar.Transparent.AppBarOverlay"
parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="BGTheme.ActionBar.Transparent.PopupOverlay"
parent="ThemeOverlay.AppCompat.Light" />
and in your v-21 style.xml
<style name="BGTheme.ActionBar.Transparent" parent="BGTheme">
<item name="colorPrimary">#android:color/transparent</item>
</style>
Note: Add this in your root layout android:fitsSystemWindows="true"
remove if statment
not work below 21
getWindow().setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
add flowing lines in your 'style.xml'
<item name="android:windowContentOverlay">#null</item>
<item name="windowActionBarOverlay">true</item>
<item name="windowActionBar">false</item>
<item name="colorPrimary">#android:color/transparent</item>
EDIT:
try Using the following Line in your Base View.
android:fitsSystemWindows="true"
as it is mention also
android:fitsSystemWindows is an
internal attribute to adjust view layout based on system windows such
as the status bar. If true, adjusts the padding of this view to leave
space for the system windows. Will only take effect if this view is in
a non-embedded activity.
Must be a boolean value, either "true" or "false".
This may also be a reference to a resource (in the form
"#[package:]type:name") or theme attribute (in the form
"?[package:][type:]name") containing a value of this type.
This corresponds to the global attribute resource symbol
fitsSystemWindows.
You can also use it globally by using the below line in your theme
<item name="android:fitsSystemWindows">true</item>
I hope it helps. It works in my Project.
I am running an android project. My toolbar and status bar are all green in my activity_main layout. If i change toolbar color to other color the status bar will change to the new one too.
I have an activity with activity_hotel_detail.xml layout. The status bar and toolbar colors are different color which is i need.
Why does the same configuration for Toolbar makes the status bar color are different?
How can i make my main_activity layout is the same one as my activity_hotel_detail layout?
I am new on android, any help thanks!
activity_main.xml
<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"
android:fitsSystemWindows="true"
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=".ViewController.MainActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/red"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
style="#style/ThemeOverlay.AppCompat.Dark"/>
</RelativeLayout>
activity_hotel_detail.xml
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/Blue"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
style="#style/ThemeOverlay.AppCompat.Light"/>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fresco="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
android:fillViewport="true"
android:background="#color/cell">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#color/white"
android:padding="0dp"
android:stretchColumns="1">
<com.facebook.drawee.view.SimpleDraweeView
android:layout_width="match_parent"
android:layout_height="200dp"
android:contentDescription="#string/img_description"
fresco:placeholderImage="#drawable/test_image"
fresco:actualImageScaleType="fitStart"
android:id="#+id/hotel_image_view" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Text"
android:id="#+id/hotel_name"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="200dp"
android:text="New Text New Text New Text New TextNew TextNew TextNew TextNew TextNew TextNew TextNew TextNew TextNew TextNew Text"
android:id="#+id/hotel_description"/>
<fragment
class="com.example.william.willhotel.ViewController.HotelDetailFragment"
android:layout_width="match_parent"
android:layout_height="30dp"
android:id="#+id/fragement">
</fragment>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="back"
android:background="#color/BlueViolet"
android:id="#+id/back_button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="next"
android:background="#color/DarkRed"
android:id="#+id/next_button" />
</LinearLayout>
</ScrollView>
EDIT: styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/DarkRed</item>
<item name="colorPrimaryDark">#color/IndianRed</item>
<item name="colorAccent">#color/yellow</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" />
<style name="AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="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>
EDIT2 replace 'transparent1 by #color/IndianRed in styles.xml(v21) didn't work.
<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">#color/IndianRed</item>
</style>
</resources>
EDIT
my activity extend from AppCompatActivity, i see the source code only sdk version larger than 23 can get the system theme.
public class MainActivity extends AppCompatActivity
So if i run under sdk 23, the status bar appears correct as expect.
if (delegate.applyDayNight() && mThemeId != 0) {
// If DayNight has been applied, we need to re-apply the theme for
// the changes to take effect. On API 23+, we should bypass
// setTheme(), which will no-op if the theme ID is identical to the
// current theme ID.
if (Build.VERSION.SDK_INT >= 23) {
onApplyThemeResource(getTheme(), mThemeId, false);
} else {
setTheme(mThemeId);
}
}
Use following code in your activity's onCreate() method
if (Build.VERSION.SDK_INT >= 21) {
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
getWindow().setStatusBarColor(ContextCompat.getColor(this, R.color.primary_dark));
}
Where primary_dark color is your toolbar's color
Add this in your values-v21/styles.xml.
<item name="android:statusBarColor">#color/IndianRed</item>
Your theme should Look like this remove Transparent.
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#color/IndianRed</item>
</style>
This may help you.
<resources>
<!-- inherit from the material theme -->
<style name="AppTheme" parent="android:Theme.Material">
<!-- Main theme colors -->
<!-- your app branding color for the app bar -->
<item name="android:colorPrimary">#color/primary</item>
<!-- darker variant for the status bar and contextual app bars -->
<item name="android:colorPrimaryDark">#color/primary_dark</item>
<!-- theme UI controls like checkboxes and text fields -->
<item name="android:colorAccent">#color/accent</item>
Reference: https://developer.android.com/training/material/theme.html#StatusBar
Note: as per the google doc"the toolbar uses the 500 version of indigo, while the status bar uses the 700 version." Doc Link: https://www.google.com/design/spec/style/color.html#color-color-schemes
<item name="android:windowBackground">#color/cardview_dark_background</item>
<item name="android:statusBarColor">#color/cardview_dark_background</item>
it works for me if you have multiple theme