In the images below,I am trying to bring the ImageView under the StatusBar. But its not happening.
Image Screenshot on Android API 19
Image Screenshot on Android API 22
I went on Android transparent status bar and actionbar (this question) and tried to implement the same but its not working.
The xml layout of the activity is
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:id="#+id/category_layout_top"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:fitsSystemWindows="true"
android:layout_width="390dp"
android:layout_height="390dp"
android:id="#+id/category_Image_View"/>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/def_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#00FFFFFF"
android:layout_alignParentTop="true" />
</FrameLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/category_linearlayout">
<TextView android:layout_width="match_parent"
android:layout_height="match_parent"
android:singleLine="true"
android:id="#+id/category_textView"
/>
</LinearLayout>
</LinearLayout>
</FrameLayout>
I tried the below code in the onCreate() method also
setStatusBarTranslucent(true);
protected void setStatusBarTranslucent(boolean makeTranslucent) {
if (makeTranslucent) {
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
} else {
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
}
}
style.xml
<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>
</style>
style-v21.xml
<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>
AppTheme is the style used in the activity.
EDIT 1
I used a color in the background of FrameLayout to check whether it was under the status bar or not. And it is not.
So the problem is not with Layout, I guess.
EDIT 2
this is the desired result
In style-v21 you are overriding the style AppTheme.NoActionBar, but you said the style you use in your activity is the AppTheme style.
You need to override the AppTheme layout in style-v21 or define AppTheme.NoActionBar in you activity.
Related
I can set my ActionBar height in my styles.xml resource file:
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="actionBarSize">40dp</item>
</style>
This way, my action bar is a bit smaller than the default one. But a white gap appears below the ActionBar. The content starts at the same position as if the ActionBar had the same height.
EDIT:
My layout file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/mainMenuLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="top">
<FrameLayout
android:id="#+id/mmContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/mmBottomNavigation" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/mmBottomNavigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:menu="#menu/bottom_navigation_menu"
app:itemBackground="#color/white"
app:itemIconTint="#color/btn_nav_itam_color"
app:itemTextColor="#color/btn_nav_itam_color" />
</RelativeLayout>
EDIT 2:
I tried it on a blank Application. The actionBarSize attribute works as expected. Also there's no white gap.
My app uses a custom layout for the action bar - custom_action_bar.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="0dp" android:layout_margin="0dp"
android:background="#color/colorPrimary" >
<TextView
android:id="#+id/titleTvLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="#string/app_name"
android:textColor="#color/actionBarText"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/titleTvRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:text="#string/title_bar_loggedin"
android:textColor="#color/actionBarDarkText"
android:textSize="12sp"
android:textStyle="bold" />
</RelativeLayout>
And this layout is set in the Activity:
public static void setCustomTitle(AppCompatActivity apc, String userName) {
if (apc.getSupportActionBar() != null) {
apc.getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
apc.getSupportActionBar().setDisplayShowCustomEnabled(true);
apc.getSupportActionBar().setCustomView(R.layout.custom_action_bar);
View view = apc.getSupportActionBar().getCustomView();
TextView tvLeft = (TextView) view.findViewById(R.id.titleTvLeft);
TextView tvRight = (TextView) view.findViewById(R.id.titleTvRight);
tvLeft.setText(apc.getResources().getString(R.string.app_name));
String rightTitle = apc.getResources().getString(R.string.title_bar_loggedin) + " " + userName;
tvRight.setText(rightTitle);
}
}
Add standard height in your style or layout, example added for style.xml
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
<!-- 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:actionBarStyle">#style/CustomActionBar</item>
</style>
<style name="CustomActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:actionBarSize">40dp</item>
<item name="android:background">#color/colorPrimary</item>
</style>
Set the parent layout height to "match_parent" in your layout resource file.
This is a hack but for the parent container of the content area, you can add a top margin of -8dp.
android:layout_marginTop="-8dp"
This will pull the contents up.
In my v27\style.xml I have the following code to set a white navbar:
<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="android:navigationBarColor">#android:color/white</item>
<item name="android:windowLightNavigationBar">true</item>
</style>
It works, but the white navbar "joins" with the white background. I would to add an horizontal line on the navbar, in each activity. How can I do?
This is what I would (from Youtube), I highlighted it with red rectangle:
I think for cases like these you may need to have a custom toolbar layout so that you can optimise the layout whichever way you like.
Something like this:
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.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="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tvToolBarTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textSize="18sp"
android:text="Toobar"
android:fontFamily="#font/filson_pro_book"
android:textColor="#color/white"
android:visibility="visible"/>
<FrameLayout
android:layout_gravity="center_horizontal"
android:background="#color/white"
android:layout_width="100dp"
android:layout_height="1dp"/>
</LinearLayout>
You would probably want to add an horizontal line each time you open the nav drawer:
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#FF0000FF"
android:layout_gravity = "bottom/>
If you want the line to be on half of the screen (only on the nav)- add it inside the nav.
If you want the line to be on the whole screen (as you marked in the picture)- add it after adding the nav.
Since API 27 there is an attribute in the style called navigationBarDividerColor that allows to do that. You can complement it with the navigationBarColor to make it look like the one in your screenshot.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light">
...
<item name="android:navigationBarColor">#android:color/white</item>
<item name="android:navigationBarDividerColor">#DBDBDB</item>
</style>
</resources>
is it possible to customize the background (and title) of my action bar in a specific activity? What I have done and it's not working:
<style name="AppTheme.BenchTheme"> <!-- style of my activity -->
<item name="android:windowBackground">#android:color/holo_blue_light</item>
<item name="android:actionBarStyle">#style/BenchActionBar</item>
</style>
and
<style name="BenchActionBar">
<item name="android:background">#color/colorBench</item>
</style>
I want to do it in my style.xml. Is it possible? I know I can do it via code (using something like getSupportActionBar().setBackgroundDrawable(myColor);)...
Thanks
First make your Theme extend from Theme.AppCompat.Light.NoActionBar:
<style name="AppTheme.BenchTheme" parent="Theme.AppCompat.Light.NoActionBar">
Then in your layout you can already add the toolbar as you want for example:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/kelly_green"
android:fitsSystemWindows="true"
android:minHeight="?attr/actionBarSize"
style="#style/MyToolbarElevation"
>
<android.support.v7.widget.AppCompatTextView
android:id="#+id/txt_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/_2sdp"
android:gravity="center"
android:textColor="#ffffff"
android:textSize="#dimen/_13sdp"
/>
</android.support.v7.widget.Toolbar>
How do I get rid of the white box at the top of the android view? I cannot see anywhere in my code where I called something that created the toolbar, nor did I code it myself. It also exists above the view, not in it. I'm guessing there is some setting in the design view of the xml file that can toggle it? Thanks in advance!
** I should also include that it is only on this activity, and my other activities do not have this white bar at the top. Furthermore, the actionbar is the thin blue bar above the white car, so any code that involves manipulating the actionbar will not change the white bar's status. **
EDIT: XML Code is below
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bucket"
android:theme="#+id/BucketTheme2"
android:backgroundTint="#70FFFFFF"
android:backgroundTintMode="src_over">
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableRow>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:paddingBottom="5dp"
android:paddingTop="100dp"
android:text="Find a place to go around you!"
android:textColor="#ff000000"
android:textSize="18dp" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:onClick="randomButtonPressed"
android:text="RANDOMIZE"
android:textSize="20dp" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/bucketBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:onClick="bucketButtonPressed"
android:text="Bucket List"
android:textSize="20dp" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/searchLocationBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:onClick="searchButtonPressed"
android:text="Search by Location"
android:textSize="20dp" />
</TableRow>
</TableLayout>
</RelativeLayout>
EDIT 2: style.xml code for BucketTheme2 is below (I did not post it initially because it only sets colors):
<style name="BucketTheme2" parent="android:Theme.Holo.Light.DarkActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
Set theme for application or activity in Manifest.xml to remove action bar:
android:theme="#android:style/Theme.Holo.Light.NoActionBar"
Or add the following code in Activity in the onCreate method and import android.support.v7.app.ActionBar:
ActionBar actionBar = getSupportActionBar();
actionBar.hide();
Add the following theme to the style.xml
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
Then set this theme to the activity in manifest:
<activity
android:name=".MainActivity"
android:theme="#style/AppTheme.NoActionBar"/>
UPDATE: You can also set the theme as below:
<style name="BucketTheme2" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
Hope this helps.
Change your activity theme in manifest to Theme.AppCompat.Light.NoActionBar and you should be sorted
Add NoActionBar style in style.xml
<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="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="android:windowFullscreen">false</item>
<item name="android:windowContentOverlay">#null</item>
</style>
And add this theme to your activity from manifest,
<activity android:name=".YourActivity"
android:theme="#style/AppTheme"
>
</activity>
try
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.main);
it should be before setContentView
Just try this in your style
<style name="BucketTheme2" parent="android:Theme.Holo.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
I ran into this same issue when using a template project that Android studio already set up. I noticed that in the activity_main.xml file there was unnecessary padding at the top once I changed to a theme of *.NoActionBar. If you remove android:paddingTop="?attr/actionBarSize" it should go away.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="?attr/actionBarSize"></androidx.constraintlayout.widget.ConstraintLayout>
I have a SwitchCompat in the action bar (v7.Toolbar) of my activity. I want it be colorStructure when off and colorAccent when on. It works fine on pre-Lollipop, but on Lollipop the activated switch is drawn in a color which I did not define anywhere. It looks like "material_deep_teal_200". Thats my only style definitions:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.Default" 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="android:windowNoTitle">true</item>-->
<item name="windowActionBar">false</item>
<item name="colorSwitchThumbNormal">#color/colorStructure</item>
<item name="colorControlNormal">#color/colorPrimary</item>
<item name="colorControlActivated">#color/colorAccent</item>
<item name="colorControlHighlight">#color/colorAccent</item>
<!--<item name="selectBarStyle">#style/DefaultSelectBar</item>-->
</style>
</resources>
And that's the begin of the activity xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
app:theme="#style/Widget.AppCompat.Toolbar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:background="#color/colorPrimary"
android:paddingRight="#dimen/abc_dropdownitem_text_padding_right">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingRight="#dimen/abc_action_bar_icon_vertical_padding_material">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/helpButton"
android:src="#drawable/ic_help_large"
android:background="#00000000"
android:layout_gravity="center"/>
<android.support.v7.widget.SwitchCompat
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/master_switch"
android:clickable="true"
android:checked="true"
android:gravity="center"
android:layout_gravity="right"
/>
</FrameLayout>
</android.support.v7.widget.Toolbar>
So what do I need to change to make the switch have the same custom colors on KitKat and Lollipop?
Thanks
Actually the code as presented above works fine - also on Lollipop. I must have done a mistake during validation after cleaning up the problematic code.
Originally the problem was when I also had a configuration in values-v21. I assume that there was a typo or something like that which got lost when I was simplifying all into the default xml file.
So in short, the code as presented works, and I assume that having configurations in values-v21 would not cause a problem either.