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)
Related
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>
I am trying the change the color of the indeterminate progress bar using styles. Added the following changes
in values/styles-v21
<style name="CustomHorizontalProgress" >
<item name="android:indeterminateTint">#FF00FF</item>
<item name="android:indeterminateTintMode">src_in</item>
</style>
and in values/styles
<style name="CustomHorizontalProgress" >
<item name="colorAccent">#FF00FF</item>
</style>
and set these styles in progressbar as below
<ProgressBar
android:id="#+id/progress"
style="#style/Base.Widget.AppCompat.ProgressBar.Horizontal"
android:theme="#style/CustomHorizontalProgress"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:indeterminate="true"/>
For api>=21 everything this is working fine but colorAccent is not set as progress bar color in pre lollipop devices.
Note: I wanted to achieve this only using style.
Test it
<style name="CustomHorizontalProgress" parent="android:Widget.ProgressBar.Horizontal" >
<item name="android:indeterminateTint">#FF00FF</item>
<item name="android:indeterminateTintMode">src_in</item>
<style name="CustomHorizontalProgress" parent="android:Widget.ProgressBar.Horizontal">
<item name="colorAccent">#FF00FF</item></style>
layout xml
<ProgressBar
android:id="#+id/progress"
style="#style/CustomHorizontalProgress"
android:theme="#style/CustomHorizontalProgress"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:indeterminate="true"/>
</style>
progress.getProgressDrawable().setColorFilter(color, PorterDuff.Mode.SRC_IN);
I want to give the user the opportunity to select wich color skin will have the app. For example, i whould implement a black skin with black colours with different tonalities and also a white skin with withe tonalities.
Which whould be the best approach to achieve this?
For example i know that there is a colors.xml file in Android that should contain the colours of your app. Whould be a way to have two colors files or something and to use one or other depending of user selection? Maybe a styles.xml file?
Please tell me your opinion about which whould be the best approach to achieve this
Thank you
MY LAYOUT:
<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">
<!-- The main content view -->
<RelativeLayout
android:id="#+id/main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.PagerTitleStrip
android:id="#+id/pager_title_strip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:paddingTop="4dp"
android:paddingBottom="4dp"
style="#style/CustomPagerTitleStrip"/>
</android.support.v4.view.ViewPager>
</RelativeLayout>
<!-- The navigation drawer -->
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/drawer_header"
app:menu="#menu/drawer_menu"
style="#style/NavigationDrawerStyle"/>
</android.support.v4.widget.DrawerLayout>
My styles.xml file:
<resources>
<style name="AppTheme" parent="Theme.AppCompat">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="actionBarTheme">#style/CustomActionBar</item>
<item name="android:textColor">#color/colorFontMenus</item>
<item name="itemTextColor">#color/colorFontMenus</item>
<item name="itemIconTint">#color/colorFontMenus</item>
</style>
<style name="CustomActionBar">
<!-- title text color -->
<item name="android:textColorPrimary">#color/colorFontMenus</item>
<!-- subtitle text color -->
<item name="android:textColorSecondary">?android:textColorPrimary</item>
<!-- action menu item text color -->
<item name="actionMenuTextColor">?android:textColorPrimary</item>
<!-- action menu item icon color - only applies to appcompat-v7 icons :( -->
<item name="colorControlNormal">?android:textColorPrimary</item>
</style>
<style name="CustomPagerTitleStrip">
<item name="android:background">#color/mainColorWithAlpha</item>
</style>
<style name="CustomTextView">
<item name="android:textColor">#color/colorFontContent</item>
</style>
<style name="CustomScrollBar">
<item name="android:scrollbarThumbVertical">#drawable/scrollbar_green</item>
</style>
<style name="CustomDrawerHeader">
<item name="android:background">#drawable/drawer_header_background_green</item>
</style>
<style name="NavigationDrawerStyle">
<item name="android:background">#color/colorPrimaryDark</item>
</style>
</resources>
Regarding to #Joaquim Ley's answer we can change Theme before super.onCreate() .
In my app(at work) my styles.xml :
This is my default theme
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="android:colorAccent">#color/colorPrimary</item>
<item name="android:statusBarColor">#color/colorPrimaryDark</item>
<item name="android:colorFocusedHighlight">#color/colorPrimary</item>
<item name="android:colorControlNormal">#color/amber_300</item>
<item name="android:colorControlActivated">#color/amber_300</item>
<item name="android:colorControlHighlight">#color/colorControlHighlight</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="android:windowTranslucentStatus">false</item>
<item name="actionBarItemBackground">?attr/selectableItemBackground</item>
<item name="colorControlHighlight">#color/colorControlHighlight</item>
<item name="android:windowContentTransitions">true</item>
<!-- Customize your theme here. -->
</style>
And this is my Green Theme :
<style name="AppTheme.Green" parent="AppTheme">
<item name="colorPrimary">#color/green_500</item>
<item name="colorPrimaryDark">#color/green_700</item>
<item name="android:colorAccent">#color/green_300</item>
<item name="android:statusBarColor">#color/green_700</item>
<item name="android:colorFocusedHighlight">#color/green_500</item>
<item name="android:colorControlNormal">#color/green_300</item>
<item name="android:colorControlActivated">#color/green_300</item>
</style>
When changing theme :
#Override
protected void onCreate(Bundle savedInstanceState) {
mPrefs=getSharedPreferences(getResources().getString(R.string.preference_name),MODE_PRIVATE);
mEditor=mPrefs.edit();
mEditor.apply();
defaultColor=mPrefs.getInt(getResources().getString(R.string.default_color),0);
//you can do some switch case or if else of defaultColor and change theme
setTheme(R.style.AppTheme_Green);
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_add_voice_record);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
This is my first app in work, but in my personal app i created a BaseActivity and created a method handleColor(int color,int darkcolor). But this won't change entire theme just Toolbar, StatusBar, NavigationBar and EditText marker and underline colors:
public class BaseActivity extends AppCompatActivity {
public void handleColor(int color,int darkcolor){
//changing toolbar color
if(getSupportActionBar()!=null){
getSupportActionBar().setBackgroundDrawable(new ColorDrawable(color));
}
//if bigger than Api 21 change status bar color
if(isLolipop()){
Window window = getWindow();
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.setStatusBarColor(darkcolor);
}
}
public boolean isLolipop(){
return Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP;
}
}
When changing color i am using Material Dialogs Color Picker. Sample apk : sample.apk and Github: material-dialogs. If you want to see how it looks like i can give you a video of my app.
Colors from : Material Color Palette
Anyways i know 2 different approach , if you like one of them i can explain more.
#Edit : Good news for you, I found this Github repo : app-theme-engine and its working good. You can try sample apk. If you can't import it via gradle try this : compile 'com.github.naman14:app-theme-engine:0.5.1#aar'
This should be done in the styles/AppTheme.xml
It’s only possible to change the theme of an Activity in the onCreate() method and that to only before super() has been called. Changing the theme is fairly straight forward, something like below should do it:
setTheme(someBooleanFlag ? R.style.AppThemeOne : R.style.AppThemeTwo);
Read more here:
Ali Muzaffar's Medium post on this
Styles and Themes
Material Theme
I want to use a Toolbar instead of an Actionbar with translucent status bar, but a thin bar(the same as the status bar in width) appears at bottom of the screen only if I'm using the NoAcitionbar theme.
And the color of the bar is the same as the 'windowBackgroud' I set. So I guess there's a margin or something.
I tried to reset all the margins but it didn't work.
And when I use the 'Android Device Monitor' in Android Studio to check the hierarchy of the UI the bar disappears, but re-disapear when I restart the app.
I'm using AppCompat v22 support lib and my Activity is AppCompat Activity.
I override this function in MainAcitivity:
#Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
if(hasFocus){
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT){
// translucent status bar
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
// translucent navigation bar
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
}
}
}
In MainAcitvity there's only a fragment :
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:id="#+id/main_fragment"
android:name="org.bitoo.abit.ui.MainActivityFragment"
tools:layout="#layout/fragment_mission_list" android:layout_width="match_parent"
android:layout_height="match_parent" />
and the layout of fragment is here:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:materialdesign="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/light_primary_color"
tools:context="org.bitoo.abit.ui.DetailedMissionActivityFragment">
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_mission_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"/>
<com.gc.materialdesign.views.ButtonFloat
android:id="#+id/bt_add"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_margin="15dp"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:background="#color/accent_color"
materialdesign:animate="false"
materialdesign:iconDrawable="#drawable/ic_action_new" />
</RelativeLayout>
Style of theme :
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="actionBarStyle">#style/my_actionbar_style</item>
<item name="colorPrimary">#color/primary_color</item>
<item name="colorPrimaryDark">#color/dark_primary_color</item>
</style>
<style name="my_actionbar_style" parent="Widget.AppCompat.ActionBar">
<item name="background">#color/dark_primary_color</item>
<item name="backgroundStacked">#color/dark_primary_color</item>
<item name="backgroundSplit">#color/dark_primary_color</item>
<item name="titleTextStyle">#style/my_actionbar_text_style</item>
</style>
<style name="my_actionbar_text_style" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/title_text_color</item>
</style>
I've read a bunch of different posts regarding this issue but have not found anything that works. I want my app to be compatible with Android 5.0 and older versions.
For Android 5.0 I am trying to implement the status bar color change. I know this won't work for older versions though. But when I run my app on the GenyMotion VM supporting 5.0, the status bar color doesn't change to the colorPrimaryDark. It also doesn't change color in the xml preview section of Android Studio.
Here are the relevant files:
res\values\styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="AppTheme.Base">
<!-- Customize your theme here. -->
</style>
<style name="AppTheme.Base" parent="Theme.AppCompat.NoActionBar">
<item name="colorPrimary">#color/primaryColor</item>
<item name="colorPrimaryDark">#color/primaryColorDark</item>
<item name="colorAccent">#color/accentColor</item>
</style>
</resources>
res\values-v21\styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="AppTheme.Base">
<item name="android:colorPrimary">#color/primaryColor</item>
<item name="android:colorPrimaryDark">#color/primaryColorDark</item>
<item name="android:colorAccent">#color/accentColor</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:statusBarColor">#color/primaryColorDark</item>
</style>
</resources>
res\layout\toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primaryColor"
>
</android.support.v7.widget.Toolbar>
res\layout\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:orientation="vertical">
<include
android:id="#+id/tBar"
layout="#layout/toolbar"></include>
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
MainActivity.java
public class MainActivity extends ActionBarActivity
{
private Toolbar toolbar;
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar=(Toolbar)findViewById(R.id.tBar);
setSupportActionBar(toolbar);
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setTitle("Login");
}
...
...
}
Possible issues:
I think I may have added some unnecessary items in res\values-v21\styles.xml.
Plus I thought I was supposed to make the parent = "#android:style/Theme.Material.Light.DarkActionBar" but other tutorials have it as Base.AppTheme. Also possible that I need to add more code in MainActivity.java
Can someone please help? This whole topic has me very confused.
Thanks
You could also try changing the status bar color programmatically: https://developer.android.com/reference/android/view/Window.html#setStatusBarColor(int)
Very simple program. you can do it programatically
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
Window window = getWindow();
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.setStatusBarColor(Color.BLUE);
}
maybe you can find very stupid but in my code i had that experience and your v-21 style.xml should be like this
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="AppTheme.Base">
<item name="colorPrimary">#color/primaryColor</item>
<item name="colorPrimaryDark">#color/primaryColorDark</item>
<item name="colorAccent">#color/accentColor</item>
</style>
</resources>
also you have to didn't define status bar color in lollipop automatically its created from Dark Primary Color. You can try this code
It'll not change status bar color if you have
<item name="android:windowTranslucentStatus">true</item>
removing this line from your app theme is the only i have found yet to change status bar color t runtime using setStausbarColor().
And still if you want to change color with android:windowTranslucentStatus then this tutorial i found useful so far link.