Add labels above Seekbars steps with different font size, vertically aligned to seekbars thumb

隐身守侯 提交于 2019-12-06 07:44:40

layout for this :

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="android.sample.MainActivity">

<TextView
    android:id="@+id/txtFont_size_hint"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Sizes"/>
<LinearLayout
    android:id="@+id/ll"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:weightSum="5">

        <LinearLayout
    android:id="@+id/ll"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:weightSum="5">

    <TextView
        android:id="@+id/txtSize1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="@string/setting_font_text"
        android:textSize="15sp"/>

    <TextView
        android:id="@+id/txtSize_18"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="@string/setting_font_text"
        android:textSize="20sp"/>

    <TextView
        android:id="@+id/txtSize_24"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:focusable="false"
        android:gravity="center"
        android:text="@string/setting_font_text"
        android:textSize="25sp"/>

    <TextView
        android:id="@+id/textSize_30"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:focusable="false"
        android:gravity="center"
        android:text="@string/setting_font_text"
        android:textSize="30sp"/>

    <TextView
        android:id="@+id/txtSize_36"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:focusable="false"
        android:gravity="center"
        android:text="@string/setting_font_text"
        android:textSize="35sp"/>
</LinearLayout>

<SeekBar
    android:id="@+id/seekBarSetting_font_size"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:max="4"/>

Now what i have done is aligned the width of Seekbar till the center of the last TextView which in this case is txtSize_36 and have set the ems as android:max="4" so there are five possible values(you can change this to as much as you want)

Code for Activity is :

public class MainActivity extends AppCompatActivity {
SeekBar seekBar;

private LinearLayout bar, ll;
TextView txtSize_14, txtSize_36;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    seekBar = (SeekBar) findViewById(R.id.seekBarSetting_font_size);

    txtSize_14 = (TextView) findViewById(R.id.txtSize1);
    txtSize_36 = (TextView) findViewById(R.id.txtSize_36);
    ll = (LinearLayout) findViewById(R.id.ll);

}
    float density;
    @Override
    protected void onResume() {
    super.onResume();

    ViewTreeObserver vto = ll.getViewTreeObserver();
//****old code (may not work on all orientations)****
/*vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
                ll.getViewTreeObserver().removeGlobalOnLayoutListener(this);
            } else {
                ll.getViewTreeObserver().removeOnGlobalLayoutListener(this);
            }
            int width  = ll.getMeasuredWidth();
            int height = ll.getMeasuredHeight();

            ViewGroup.LayoutParams params = seekBar.getLayoutParams();

            density = getResources().getDisplayMetrics().density;
            int newwidth = (int) (txtSize_14.getLeft() / density);
            newwidth = newwidth+ (txtSize_36.getLeft() + txtSize_36.getRight()) / 2;
            params.width = newwidth;
            seekBar.setLayoutParams(params);

        }
    });*/

    //****new code (should work on all orientations)****
vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
                ll.getViewTreeObserver().removeGlobalOnLayoutListener(this);
            } else {
                ll.getViewTreeObserver().removeOnGlobalLayoutListener(this);
            }
            seekBar.setPadding(15, 0, 15, 0);
            seekBar.setX(((txtSize_14.getLeft() + txtSize_14.getRight()) / 2) - 15);

            ViewGroup.LayoutParams params = seekBar.getLayoutParams();

            int centerwidth = ((txtSize_36.getLeft() + txtSize_36.getRight()) / 2) - ((txtSize_14.getLeft() + txtSize_14.getRight()) / 2) + 15;
            params.width = centerwidth;
            seekBar.setLayoutParams(params);
        }
    });

}

}

Here is screenshot for reference (I have clubbed for all positions of seekbar):

Frankly speaking it took me a while to sort this out using XML only. The first and last label are differently positioned than the others.... In case you will change the size of the thumb from 15dp - you must also change the margin of first and last TextView and size of Spaces (margin + Space = thumb size)

preview

               <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:paddingRight="0dp"
                    android:paddingLeft="0dp">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:paddingLeft="0dp">

                        <TextView
                            android:text="7 days"
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:textColor="@color/colorPrimaryBackground"
                            android:gravity="left|center"
                            android:textSize="@dimen/textSize_smallest"
                            android:layout_weight="0.5"
                            android:layout_marginLeft="5dp"/>

                        <Space
                            android:layout_width="10dp"
                            android:layout_height="match_parent"/>

                        <TextView
                            android:text="1 month"
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:textColor="@color/colorPrimaryBackground"
                            android:gravity="center"
                            android:textSize="@dimen/textSize_smallest"
                            android:layout_weight="1"
                            android:layout_marginRight="0dp"
                            android:id="@+id/textView" />

                        <TextView
                            android:text="3 months"
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:textColor="@color/colorPrimaryBackground"
                            android:gravity="center"
                            android:textSize="@dimen/textSize_smallest"
                            android:layout_weight="1"
                            android:layout_marginRight="0dp"/>

                        <TextView
                            android:text="1 year"
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:textColor="@color/colorPrimaryBackground"
                            android:gravity="center"
                            android:textSize="@dimen/textSize_smallest"
                            android:layout_weight="1"
                            android:layout_marginLeft="0dp"/>

                        <TextView
                            android:text="3 years"
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:textColor="@color/colorPrimaryBackground"
                            android:gravity="center"
                            android:textSize="@dimen/textSize_smallest"
                            android:layout_weight="1"
                            android:layout_marginLeft="0dp"/>

                        <Space
                            android:layout_width="10dp"
                            android:layout_height="match_parent"/>

                        <TextView
                            android:text="5 years"
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:textColor="@color/colorPrimaryBackground"
                            android:gravity="right|center"
                            android:textSize="@dimen/textSize_smallest"
                            android:layout_weight="0.5"
                            android:layout_marginRight="5dp"/>

                    </LinearLayout>


                </RelativeLayout>
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!