statusbar has a white line?

Question

Here is my layout， Why is there a white line between the status bar and the title? How do I remove this white line。 I made an album, but found white lines in the nested layout. I didn't search for relevant content on Google, so I posted a post for you to look at. Here are my code and screenshots.

    <?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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@color/image_display_color">

    <FrameLayout
        android:id="@+id/surface_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">
        <com.github.chrisbanes.photoview.PhotoView
            android:id="@+id/big_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </FrameLayout>


    <!-- toolbar -->
    <LinearLayout
        android:id="@+id/layout_top"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_marginTop="30dp"
        android:visibility="visible"
        android:background="#80000000">

        <ImageView
            android:id="@+id/back"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:contentDescription="TODO"
            android:paddingLeft="10dp"
            android:src="@drawable/video_back" />

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="48dp"
            android:paddingLeft="10dp"
            android:textColor="@android:color/white"
            android:textSize="18sp" />
    </LinearLayout>

    <!-- 播放进度-->
    <LinearLayout
        android:background="#80000000"
        android:id="@+id/layout_bottom"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:alpha="0.9"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="20dp"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:weightSum="5"
        android:visibility="visible">

        <Button
            android:id="@+id/btn_share"
            android:background="@android:color/transparent"
            android:layout_width="wrap_content"
            android:layout_marginStart="10dp"
            android:text="分享"
            android:textColor="@color/white"
            android:drawableTop="@drawable/ic_baseline_share_24"
            android:layout_weight="1"
            android:layout_gravity="center_vertical"
            android:layout_height="wrap_content" />

        <Button
            android:id="@+id/btn_favaite"
            android:background="@android:color/transparent"
            android:layout_weight="1"
            android:text="收藏"
            android:textColor="@color/white"
            android:drawableTop="@drawable/ic_baseline_favorite_24"
            android:layout_width="wrap_content"
            android:layout_marginStart="10dp"
            android:layout_gravity="center_vertical"
            android:layout_height="wrap_content" />
        <Button
            android:id="@+id/btn_copy"
            android:background="@android:color/transparent"
            android:layout_weight="1"
            android:textColor="@color/white"
            android:text="复制"
            android:drawableTop="@drawable/ic_copy_white"
            android:layout_width="wrap_content"
            android:layout_marginStart="10dp"
            android:layout_gravity="center_vertical"
            android:layout_height="wrap_content" />
        <Button
            android:id="@+id/btn_delete"
            android:textColor="@color/white"
            android:background="@android:color/transparent"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_marginStart="10dp"
            android:text="删除"
            android:drawableTop="@drawable/ic_baseline_delete_24"
            android:layout_gravity="center_vertical"
            android:layout_height="wrap_content" />
        <Button
            android:id="@+id/btn_more"
            android:background="@android:color/transparent"
            android:layout_weight="1"
            android:textColor="@color/white"
            android:layout_width="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginRight="10dp"
            android:layout_marginStart="10dp"
            android:drawableTop="@drawable/ic_baseline_more_vert_24"
            android:text="更多"
            android:layout_height="wrap_content" />
    </LinearLayout>

</RelativeLayout>

Here is my screenshot。

image1 image2

Answer 1

The "line" is because your dark overlay doesn't exactly line up with the top of your content/bottom of the status bar. There's a gap where the content shows through:

You can see the photos through that gap. I'm assuming this layout is overlaid on the entire screen, and you're using layout_marginTop="30dp" to try and move it below the status bar? That's going to have problems - the size of the bar depends on the device. On stock Android (following Material Design guidelines) the status bar is 24dp. On your device, it's obviously close to 30dp - but not exactly! That's why it doesn't line up.

---

I think making this work perfectly is going to be difficult. If I were you, I wouldn't try to overlay the entire screen. If you use a NoActionBar theme, and add a Toolbar into your layout instead, then you can add your overlay in the same layout. You can cover the Toolbar if you like, and the top of the Activity/Fragment will be below the status bar.

But it looks like you're making some kind of overlay over other apps - in that case, have a look at this thread for some ideas about getting the current device's status bar height (if any): Height of status bar in Android