Search code examples
javaandroidxmlandroid-edittextscrollbar

How to add margin to scrollbar in edit text


I am trying to add some margin to the scrollbar inside of an editText but I am not sure how to do that, given the scrollbar is inside of the editText itself ("scrollbars=horizontal"). The way it comes automatically is too close to the text and I need it to be farther away, is there a way to do that?

I have a custom style for the scrollbar and it already looks the way it does in the picture, except for the distance, maybe there's a way to adjust the margins there? So far, only the right margin works, the top and bottom one make the bar disappear. It needs to look like this: enter image description here

XML:

<EditText
           android:id="@+id/edit_text"
           style="@style/Field"
           android:layout_width="0dp"
           android:layout_height="wrap_content"
           android:layout_marginStart="@dimen/size_2"
           android:layout_marginTop="@dimen/size_1"
           android:layout_marginBottom="@dimen/size_1"
           android:autofillHints="@null"
           android:clickable="true"
           android:duplicateParentState="true"
           android:focusable="true"
           android:inputType="text"
           android:scrollbars="horizontal"
           android:scrollbarStyle="outsideOverlay"
           android:scrollbarThumbHorizontal="@drawable/scrollbar"
           android:scrollbarTrackHorizontal="@drawable/scrollbar_track"
           android:gravity="center_vertical"/>

Scrollbar thumb:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:right="16dp"> <!-- Margin -->
       <shape>
           <solid android:color="@color/specific_border_2" />
           <corners android:radius="4dp" />
       </shape>
   </item>
</layer-list>

Scrollbar track:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:right="16dp"> <!-- Margin -->
       <shape>
           <solid android:color="#E2E0EB" />
           <stroke
               android:width="1dp"
               android:color="@color/specific_background_3" />
           <size android:width="15dp" />
           <corners android:radius="4dp" />
       </shape>
   </item>
</layer-list>

Solution

  • You can set android:scrollbarStyle="outsideOverlay" and control the margin of the scrollbar using android:paddingBottom

    Demo:

    <EditText
        android:id="@+id/name_text"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        android:fadeScrollbars="false"
        android:paddingBottom="8dp"
        android:scrollbarAlwaysDrawHorizontalTrack="false"
        android:scrollbarStyle="outsideOverlay"
        android:scrollbarThumbHorizontal="@drawable/scrollview_thumb"
        android:scrollbars="horizontal" />
    

    scrollview_thumb.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <solid android:color="#C2C3C3" />
        <corners android:radius="15dp" />
        <size android:width="5dp" />
    </shape>