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>
Related
I am trying to create an activity that will match the parent height. When I am testing the application on Pixel XL the application is fine, but when install on Xiaomi Redmi Note 9 Pro I have one part of the screen that it's not covered. This is the part above the camera, and it might be that my question is not only for this phone but I guess for all the others with the same design.
This is how it looks on pixel and it's ok:
And this is how it looks on Xiaomi Redmi Note 9 Pro:
This is my activity code:
<?xml version="1.0" encoding="utf-8"?>
<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:background="#color/main_screen_background"
tools:context=".activty.WelcomeActivity">
<include layout="#layout/toolbar" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/main_menu_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar"
android:layout_marginTop="20dp"
android:layout_marginBottom="60dp" />
</RelativeLayout>
And this is my Toolbar if needed:
<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="wrap_content"
android:background="#color/main_screen_background"
android:theme="#style/AppFullScreenTheme"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<RelativeLayout
android:id="#+id/test_menu_language_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginTop="30dp"
android:layout_marginEnd="30dp">
<ImageView
android:id="#+id/about_dropdown_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_ikonki_potrosuvaci_02" />
<TextView
android:id="#+id/language_dropdown_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:text="MK"
android:textColor="#color/white"
android:textSize="20dp" />
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
What I want to achieve is to have covered also that black part and have the color from the activity, probably an easy thing but I am little rusty with android. I checked the other applications and they are covering that part.
So actually there are only two lines of code needed to be added in your v27/styles.xml:
<item name="android:windowLayoutInDisplayCutoutMode">
shortEdges <!-- default, shortEdges, never -->
</item>
<item name="android:windowTranslucentStatus">true</item>
The first will cover that area and the second will set the color of the activity to that area. This is how my styles.xml looks like:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppFullScreenTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowLayoutInDisplayCutoutMode">
shortEdges <!-- default, shortEdges, never -->
</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:popupMenuStyle">#style/PopupMenu</item>
<item name="android:textAppearanceLargePopupMenu">#style/myPopupMenuTextAppearanceLarge
</item>
<item name="android:textAppearanceSmallPopupMenu">#style/myPopupMenuTextAppearanceSmall
</item>
</style>
</resources>
Finally I have applied this style to every activity that I have.
I've created application with menu and toolbar.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
android:id="#+id/app_bar_menu_coord_layout_included"
layout="#layout/app_bar_menu"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/nav_header_menu"
app:menu="#menu/activity_menu_drawer" />
</android.support.v4.widget.DrawerLayout>
The toolbar (the app_bar_menu_coord_layout_included above):
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/app_bar_menu_coord_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:fitsSystemWindows="true"
android:tag="app_bar_menu_coord_layout"
tools:context="com.magnifi.pennantrace.MenuActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/mybutton"
app:popupTheme="#style/AppTheme.PopupOverlay">
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativelayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--first-->
<TextView
android:id="#+id/toolbar_div_rank"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="4th Place"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#id/guidelineToolbarV1"
app:layout_constraintEnd_toStartOf="#+id/guidelineToolbarH1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
...
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<FrameLayout
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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/content_frame"/>
</LinearLayout>
Now I wanted to adjust text sizes of toolbar elements depending on screen size. What I do is take toolbar width as 100% and set the rest of textview's text sizes to fit the desired rectangle (for example 6% of width and 100% of height).
But it seems like its not working properly.
I've tested on screen size 320 height and 480 width:
As you see on the picture, first of all the width of it is 480, and as I noticed the text adjustment doesn't work, take a look on the last text 37M, it should have fitted into one line. What I think is that the menu button (the red rectangle in image) is taking some place. What would be the best way to identify actual width of toolbar without the menu button?
EDIT 1:
I've tried adding to the app_bar_menu_coord_layout_included this:
android:layout_marginLeft="-64dp"
And here is the result of correct text size adjustment. But I don't want to get rid of the menu button. Instead I want to get correct size of toolbar without menu button.
Android gave us components to make ease implementing components. Not for giving hours to customise it. Why don't you make an custom toolbar instead of wasting hours in managing default toolbar.
<?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"
style="#style/styleToolbar">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/iv_back"
style="#style/styleToolbarIcon"
android:src="#drawable/ic_back" />
<TextView
android:id="#+id/headerTitle"
style="#style/styleToolbarText"
android:text="#string/app_name" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
some styles to be put in res>values>styles.xml.
<style name="styleToolbar" parent="Widget.AppCompat.Toolbar">
<item name="android:layout_width">match_parent</item>
<item name="android:background">#color/colorWhite</item>
<item name="android:layout_height">?attr/actionBarSize</item>
<item name="colorControlNormal">#color/colorWhite</item>
<item name="android:textColorPrimary">#color/colorWhite</item>
<item name="popupTheme">#style/ThemeOverlay.AppCompat.Light</item>
<item name="theme">#style/MyToolbarTheme</item>
<item name="contentInsetEnd">0dp</item>
<item name="contentInsetLeft">0dp</item>
<item name="contentInsetRight">0dp</item>
<item name="contentInsetStart">0dp</item>
<item name="contentInsetStartWithNavigation">0dp</item>
</style>
<style name="MyToolbarTheme">
<!-- Used to tint the back arrow, menu and spinner arrow -->
<item name="colorControlNormal">#FFF</item>
</style>
<style name="styleToolbarIcon">
<item name="android:layout_width">?attr/actionBarSize</item>
<item name="android:layout_height">match_parent</item>
<item name="android:contentDescription">#string/app_name</item>
<item name="android:padding">#dimen/toolbar_icon_padding</item>
<item name="android:gravity">center</item>
</style>
<style name="styleToolbarText">
<item name="android:layout_width">0dp</item>
<item name="android:textStyle">bold</item>
<item name="android:layout_weight">1</item>
<item name="android:layout_height">match_parent</item>
<item name="android:gravity">left|center_vertical</item>
<item name="android:singleLine">true</item>
<item name="android:textColor">#252525</item>
<item name="android:paddingLeft">10dp</item>
<item name="android:scrollHorizontally">true</item>
</style>
You should customize the toolbar layout as per your need. So you will have all controls on its size.
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>
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.
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.