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.
Related
I have this Theme and want to center the title in the default toolbar. This means that I have no Toolbar in my XML file. This is what I have tried:
<style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="android:textColor">#color/colorWhite</item>
<item name="actionBarTheme">#style/AppBaseTheme.Toolbar</item>
</style>
<style name="AppBaseTheme.Toolbar" parent="Widget.AppCompat.ActionBar.Solid">
<item name="android:textColorPrimary">#color/colorPrimary</item>
<item name="titleCentered">true</item>
</style>
Where <item name="titleCentered">true</item> doesn't center the title. How to solve this?
In your Activity, in your onCreate()
methodgetSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM;
getSupportActionBar().setCustomView(R.layout.main_layout);
main_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/tvTitle"
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#FFFFFF" />
I have set android:textAllCaps="false" in my com.google.android.material.tabs.TabItem thought it is showing the Tab Title in All caps only.
How can I remove all caps?
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<com.google.android.material.tabs.TabItem
android:id="#+id/TabWeekly"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="#string/Weekly"
android:textAllCaps="false"
android:theme="#style/CustomTextAppearanceTab" />
<com.google.android.material.tabs.TabItem
android:id="#+id/TabMonthly"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="#string/Monthly"
android:textAllCaps="false"
android:theme="#style/CustomTextAppearanceTab" />
</com.google.android.material.tabs.TabLayout>
even I have set style for it
<style name="CustomTextAppearanceTab" parent="TextAppearance.Design.Tab">
<item name="textAllCaps">false</item>
<item name="android:textAllCaps">false</item>
</style>
but its not working
custom style
<style name="customTabLayout" parent="Widget.Design.TabLayout">
<item name="tabTextAppearance">#style/TabTextAppearance</item>
</style>
<style name="TabTextAppearance" parent="#android:style/TextAppearance.Widget.TabWidget">
<item name="android:textAllCaps">false</item>
</style>
tab layout xml code
<com.google.android.material.tabs.TabLayout
android:id="#+id/tab"
style="#style/customTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
You can take advantage of the fact that TabLayout is using the same text appearance as Button.
First, add a new text appearance:
<style name="TextAppearance.MyApplication.Button" parent="TextAppearance.MaterialComponents.Button">
<item name="android:textAllCaps">false</item>
</style>
Second, apply it as a textAppearanceButton in the application theme:
<item name="textAppearanceButton">#style/TextAppearance.MyApplication.Button</item>
Of course, this solution works unless you want to keep textAllCaps for Button.
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
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