Custom search

Question

I am trying to create a regular search form as shown below. image

For this, I made the code below
I created a drawable for seekbar progressDrawable, let me know if the code is needed, I will post it here.

<?xml version="1.0" encoding="utf-8"?> <LinearLayout android:id="@+id/llScale" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:orientation="vertical" android:paddingBottom="5dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/white" android:orientation="vertical" android:padding="5dp"> <TextView android:id="@+id/sliderText" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="5dp" android:text="Bernard" android:textColor="@color/blue"/> <FrameLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <FrameLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginLeft="5dp" android:layout_marginRight="5dp" android:background="@drawable/slider_background" android:padding="3dp"> <SeekBar android:id="@+id/ratingBar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:max="10" android:maxHeight="100dp" android:thumbTintMode="multiply" android:progressDrawable="@drawable/progressbar" android:thumb="@drawable/ic_slider_secondary"/> <TextView android:id="@+id/seekBarHint" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:gravity="center" android:text="Drag slider across" android:textColor="@color/dark_gray"/> </FrameLayout> <TextView android:id="@+id/progressText" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/ic_slider_progress" android:gravity="center" android:textColor="@color/white" android:textStyle="bold"/> </FrameLayout> </LinearLayout> 

but with the code above, what I get is as follows: the light red color does not fill completely, it leaves some space, and at the end the circle goes out of bounds.

Gradle

 compileSdkVersion 23 buildToolsVersion "23.0.2" defaultConfig { applicationId "com.myapp" minSdkVersion 16 targetSdkVersion 23 multiDexEnabled true versionCode 1 versionName "1.0" testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner" } 

can anyone help me with this

Answer 1

I used your code and created a demo in which I made 2 changes, as shown below:

• Set the thumbOffset parameter with the appropriate value for me 16.5dp.

• Add another android property: splitTrack = "false", which will help remove this space around the thumb.

    <SeekBar android:id="@+id/ratingBar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:maxHeight="100dp" android:progressDrawable="@drawable/progressbar" android:thumb="@drawable/ic_slider_secondary" android:splitTrack="false" android:thumbOffset="16.5dp"/> 

Happy coding :)