I'm trying to add a gradient to my statusbar , this is my code :
getWindow().addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
it moves up the toolbar on the status bar and also covers up the navigation bar with the activity's content like this . I made my toolbar height bigger and solve the first problem but is there any way to preventing this code covering my navigation bar ?
anyway , is there any better way to add gradient to my statusbar without changing the toolbar height ?
Just follow the following thing it will work for you, in my case its working perfect
Make layout like bellow
main_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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:background="#mipmap/ic_launcher"
android:fitsSystemWindows="true"
tools:context=".SplashActivity">
<androidx.appcompat.widget.AppCompatImageView
android:layout_width="#dimen/_150sdp"
app:layout_constraintEnd_toEndOf="parent"
android:src="#drawable/cell_background"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_height="#dimen/_150sdp" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
and bellow tow flags
getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
Apply bellow theme to your screen
<style name="AppThemeTrans" parent="Theme.AppCompat.DayNight.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#android:color/transparent</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="colorControlNormal">#FFFFFF</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowTranslucentNavigation">false</item>
<item name="android:navigationBarColor">#color/navigationBarColor</item> <!--Change Navigationbar background color here-->
</style>
Related
I want design splash screen like canva app. Like
(This screenshot taken from android API version 26).
I tried this code in Activity.java:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
Window window = getWindow();
window.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR);
}
}
And XML code is:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/gradient_splash_screen">
<FrameLayout
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_centerInParent="true"
android:background="#drawable/icon_splash_screen">
<TextView
android:id="#+id/tv_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="#string/app_name"
android:textColor="#678ee4"
android:textSize="28sp" />
</FrameLayout>
</RelativeLayout>
I referred this question recently but its not enough to change navigation bar icon color to white.
I see there is no action bar in the screenshot.
You can create a screen without an action bar and transparent status bar and transparent navigation bar.
Create styles like below.
<style name="AppTheme.NoActionBar" parent="AppTheme">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.NoActionBar.TranslucentStatus" parent="AppTheme.NoActionBar">
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:navigationBarColor">#android:color/transparent</item>
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>
Apply the above AppTheme.NoActionBar.TranslucentStatus to your activity in the manifest
The above method only works from lollipop (v21)
I have been trying to set the Bottomsheet the way Google is using in their apps such as GOOGLE NEWS etc,
This is how Google's Bottomsheet looks like the following
Where my Bottomsheet looks like the following
Stright away you will notice two things,
There are no rounded corners
The navigation at the bottom is not blended
My code for bottomsheet is the following (i removed the controls for simplicity purposes)
MyBottomSheet.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:id="#+id/bottom_sheet"
android:elevation="10dp"
android:minHeight="300dp"
app:behavior_peekHeight="120dp"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginBottom="30dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--controls here-->
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
And I am calling it in my code as follows
View view = LayoutInflater.Inflate(Resource.Layout.MyBottomSheet, null);
Dialog dialog = new BottomSheetDialog(this);
dialog.SetContentView(view);
How can I get Rounded corners and make sure the bottom navigation does not go transparent?
To get the Google's modal BottomSheet design, implement it the following way. Start by creating a shape drawable which will be used as background for the bottom sheet:
bg_bottomsheet.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:topLeftRadius="#dimen/bottom_sheet_corner_radius"
android:topRightRadius="#dimen/bottom_sheet_corner_radius" />
<padding android:top="#dimen/bottom_sheet_top_padding" />
<solid android:color="#color/white" />
Now create a custom style for the BottomSheet widget.
style-v21.xml
<resources>
<style name="BottomSheetDialogTheme" parent="BaseBottomSheetDialog">
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:navigationBarColor">#color/white</item>
</style>
</resources>
styles.xml
<resources>
<style name="BottomSheet" parent="#style/Widget.Design.BottomSheet.Modal">
<item name="android:background">#drawable/bg_bottom_sheet_dialog_fragment</item>
</style>
<style name="BaseBottomSheetDialog" parent="#style/Theme.Design.Light.BottomSheetDialog">
<item name="android:windowIsFloating">false</item>
<item name="bottomSheetStyle">#style/BottomSheet</item>
</style>
<style name="BottomSheetDialogTheme" parent="BaseBottomSheetDialog" />
</resources>
Now, extend the BottomSheetDialogFragment and set the new theme on it. That's it!
Now, I use this
<!-- Stuff to make the bottom sheet with round top borders -->
<style name="BottomSheetShapeAppearance" parent="ShapeAppearance.MaterialComponents.LargeComponent">
<item name="cornerFamily">rounded</item>
<item name="cornerSizeTopLeft">16dp</item>
<item name="cornerSizeTopRight">16dp</item>
</style>
<style name="BottomSheetModal" parent="Widget.Design.BottomSheet.Modal">
<item name="shapeAppearance">#style/BottomSheetShapeAppearance</item>
<item name="behavior_peekHeight">140dp</item>
<item name="behavior_fitToContents">true</item>
<item name="behavior_halfExpandedRatio">0.5</item>
</style>
<style name="BaseBottomSheetMenu" parent="Theme.MaterialComponents.DayNight.BottomSheetDialog">
<item name="android:windowIsFloating">false</item>
<item name="bottomSheetStyle">#style/BottomSheetModal</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
<style name="BottomSheetMenuTheme" parent="#style/BaseBottomSheetMenu" />
You can change general theme support in Theme.MaterialComponents.DayNight.BottomSheetDialogextend by
Theme.MaterialComponents.DayNight.BottomSheetDialog for Dark Mode
In create BotoomSheet load specific theme
override fun getTheme(): Int = R.style.BottomSheetMenuTheme
Try to Use below code
View view = LayoutInflater.Inflate(Resource.Layout.MyBottomSheet, null);
Dialog dialog = new BottomSheetDialog(this);
dialog.SetContentView(view);
((View) view.getParent()).setBackgroundColor(getContext().getResources().getColor(android.R.color.transparent));
CoordinatorLayout.LayoutParams layoutParams = (CoordinatorLayout.LayoutParams) ((View) view.getParent())
.getLayoutParams();
((View) view.getParent()).setLayoutParams(layoutParams);
Is there any reason why a View is partly hidden (API 16) when the Activity has a status bar?
In this activity, I added a view that has a red border.
The red border on the bottom should be shown. If I added a bottom margin of 24dp (which is the height of the status bar), the bottom border is shown. Which indicates that the view height isn't properly set.
The code is like this :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
android:id="#+id/rootView"
>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/red_border"
/>
</LinearLayout>
And the activity theme is
<?xml version="1.0" encoding="utf-8"?>
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<item name="colorControlHighlight">#0D53CE</item>
<item name="android:windowTranslucentStatus" tools:targetApi="19" >true</item>
<item name="android:fitsSystemWindows">true</item>
<item name="android:windowBackground">#color/windowBackground</item>
<item name="android:popupMenuStyle">#style/MyPopupMenuStyle</item>
</style>
It works when I set:
<item name="android:windowFullscreen">true</item>
But then the status bar isn't there.
This bug only happens in Android 16 that I've tried, in Android >= 21, this doesn't happen.
Thanks :)
When I first start looking over this question I found this question, but the answer didn't work for me. I am working on a KitKat phone, but from what I read, this can be done on a pre-lollipop versions using the AppCompat library. I am using this GitHub repo, and more specificaly this code sample to create nested preference screen.
Here is my AppTheme.SettingsTheme for the SettingActivity in the code sample:
<style name="AppTheme.SettingsTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="titleTextStyle">#android:color/white</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="colorControlNormal">#fff</item>
</style>
This line: <item name="colorControlNormal">#fff</item> changes the Toolbar from having a white text and black back arrow, to having both the text and back arrow appear white (which is good).
The issue is that I have a CheckBoxPreference which is tinted with this line also, so when it in not check, I can barely see it (box color is white).
I tried creating a special theme just for the toolbar (again from this answer) and doing the <item name="colorControlNormal">COLOR</item>, but its just doesn't affect to toolbar.
I also tried to tint the CheckBoxPreference alone, but it seems that in involves creating a custom layout for it, and this brings a lot more work.
Here is my toolbar layout, currently with no specific theme:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout 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="wrap_content"
tools:context=".ui.activities.settingsActivity.SettingsActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="?colorPrimary"
android:minHeight="?actionBarSize"
app:navigationContentDescription="#string/abc_action_bar_up_description"
app:navigationIcon="?homeAsUpIndicator"
app:title="#string/activity_settings_title"
app:titleTextColor="#android:color/white" />
</android.support.design.widget.AppBarLayout>
Can anybody explain how to tint the CheckBoxPreference and Toolbar seperatly? I don't care which one of them I tint using the ActivityTheme and which one I tint on its custom theme. The answers I found didn't work.
Use the theme for your Toolbar specifically, instead of for your entire Activity. This is what the ThemeOverlay styles are meant for (they use the colorControlNormal attribute when necessary). You can also define a separate "popup" theme if you would like light-themed pop-ups from your dark Toolbar:
<style name="SettingsTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="SettingsTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar"/>
<style name="SettingsTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"/>
Then you can apply these styles in your layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout 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="wrap_content"
android:theme="#style/SettingsTheme.AppBarOverlay"
tools:context=".ui.activities.settingsActivity.SettingsActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?colorPrimary"
android:minHeight="?actionBarSize"
app:navigationContentDescription="#string/abc_action_bar_up_description"
app:navigationIcon="?homeAsUpIndicator"
app:title="#string/activity_settings_title"
app:popupTheme="#style/SettingsTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
I have layout with centered Image View.
<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/WHITE">
<ImageView
android:id="#+id/powered_by"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/powered_by" />
<ImageView
android:id="#+id/splash_logo"
android:src="#drawable/logo"
app:layout_widthPercent="70%"
app:layout_heightPercent="70%"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:visibility="invisible" />
</android.support.percent.PercentRelativeLayout>
Here is theme setting for my activity
<style name="SplashTheme" parent="android:Theme.Holo.Light">
<item name="android:windowBackground">#drawable/splash</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowContentOverlay">#null</item>
</style>
When i change parent theme to android:Theme.DeviceDefault.Light, ImageView appears a little bit higher, not in center of the screen. It seems like parent view for my device now starts not from the bottom of the screen, but from the bottom toolbar (i use Nexus 5X with on-screen buttons).
I want to use device default theme for a modern dialog appearance, but i also need to have this image view exactly in center on all devices.
How to do it?
It seems like android:Theme.DeviceDefault.Light is not setting android:windowFullScreen. So you will need to create your own theme with the parent android:Theme.DeviceDefault.Light and change the values for the items you want to change
<style name="TestTheme" parent="android:Theme.DeviceDefault.Light">
<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowContentOverlay">#null</item>
</style>