xml – Android | Add line on the navbar-ThrowExceptions

Exception or error:

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:
YouTube App

How to solve:

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>

enter image description here

###

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>

enter image description here

Leave a Reply

Your email address will not be published. Required fields are marked *