Layout background messing on margin

Question

I'm trying to make a trimmerbar to my video player

trimmer_bar.xml

 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <RelativeLayout
        android:id="@+id/thumbsBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="40dp"
        tools:background="@color/trimmerBarSelected">


        <ImageView
            android:id="@+id/leftThumb"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription=""
            android:scaleType="fitStart"
            android:src="@drawable/ic_left_thumb" />


        <ImageView
            android:id="@+id/rightThumb"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:contentDescription=""
            android:scaleType="fitEnd"
            android:src="@drawable/ic_right_thumb" />


    </RelativeLayout>
    <ImageView
        android:id="@+id/progressIndicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginStart="60dp"
        android:layout_marginTop="3dp"
        android:contentDescription=""
        android:scaleType="centerCrop"
        android:src="@android:drawable/btn_star_big_on" />

</FrameLayout>

activity_video_viewer:

 <?xml version="1.0" encoding="utf-8"?>
    <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"
        android:orientation="vertical"
        android:background="#a8c71c"
        tools:context=".activities.VideoTrimmerActivity">

        <com.tomatedigital.instagram.longstories.ui.TrimmerBar
            android:id="@+id/trimmerBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/trimmerBarSelected"
            />
    </FrameLayout>

it's logic is working great: when the user touches, i detect if it was on the any of the thumbs and case on the left thumb I adjust the left margin of the thumbsBar , case on the right I adjust the right margin...

As the two imageview are aligned to the edges this behavior makes them to move... but what is actually moving is the whole RelativeLayout

The problem is even adjuting the margins and moving the imageviews the relative layout is still showing the background in the margin area

ignoring the whole calculation i set the margins using:

this.thumbsBar= (RelativeLayout) findViewById(R.id.thumbsBar);
this.thumbsBarLayout = (LayoutParams) this.thumbsBar.getLayoutParams();
this.thumbsBarLayout.leftMargin = this.leftMargin;
this.thumbsBarLayout.rightMargin = this.rightMargin;
this.thumbsBar.setLayoutParams(this.thumbsBarLayout);

===============================================================

UPDATE:

to make it easier to understand

I've this:

I should have:

Answer 1

com.tomatedigital.instagram.longstories.ui.TrimmerBar has the same background as your RelativeLayout and has a width of match_parent. You don't really specify how your layout is being loaded and I assume it is in your custom view.

For a test, change the color of the background of the custom view to see if the background you are seeing in the margins is coming from the RelativeLayout or the custom view. My guess is that it's coming from the custom view and changing the background color in the custom view will solve your problem.