BottomSlider like Uber

I really like uber's Bottom Slider a lot and i want to create a view like that.After searching, I found a great library do it easily. Here is the screenshot of the sample.

Step: 1
======

Add below line to build.gradle file under app folder and sync

compile 'com.github.lawloretienne:discreteslider:0.0.9'

Credits to the Author of the Library.
Etienne Lawlor
Github Link 


Step: 2
======
create a layout like below

activity_main.xml
=============

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@color/grey_500"
        android:orientation="vertical">

    </FrameLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@color/grey_100"
        android:orientation="vertical">

        <RelativeLayout
            android:id="@+id/tick_mark_labels_rl"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingTop="8dp" />

        <com.etiennelawlor.discreteslider.library.ui.DiscreteSlider
            android:id="@+id/discrete_slider"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:layout_marginBottom="4dp"
            android:background="@color/grey_100"
            android:paddingLeft="8dp"
            android:paddingRight="8dp"
            app:backdropFillColor="@color/grey_200"
            app:backdropStrokeColor="@color/grey_300"
            app:backdropStrokeWidth="1dp"
            app:horizontalBarThickness="4dp"
            app:position="0"
            app:progressDrawable="@drawable/transparent_progress_drawable"
            app:tickMarkCount="4"

            app:tickMarkRadius="8dp" />

    </LinearLayout>

</LinearLayout>

Step: 3
======
create a drawable with an image like below. I have created four files like this. please see source code for reference.

ubergo.xml
=========

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>

        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="oval">

            <size
                android:width="40dp"
                android:height="40dp" />
            <stroke
                android:width="8dp"
                android:color="@color/fifty_percent_transparency_primary" />

            <solid android:color="@color/colorPrimary" />

            <corners android:radius="1dp" />

        </shape>
    </item>

    <item>

        <bitmap
            android:gravity="center"
            android:src="@drawable/ic_directions_car_black_24dp" />
    </item>


</layer-list>

Add all icons are added as an array in strings.xml file and we can use in MainActivity class.

<array name="icons">
    <item>@drawable/uber_pool</item>
    <item>@drawable/uber_moto</item>
    <item>@drawable/uber_go</item>
    <item>@drawable/uber_suv</item>
</array>

Step: 4
======
Create an Activity class and

MainActivity.java
==============

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119

package com.pratap.discreteslider; import android.content.res.Resources; import android.content.res.TypedArray; import android.os.Bundle; import android.support.v4.content.ContextCompat; import android.support.v7.app.AppCompatActivity; import android.view.Gravity; import android.view.ViewTreeObserver; import android.widget.RelativeLayout; import android.widget.TextView; import android.widget.Toast; import com.etiennelawlor.discreteslider.library.ui.DiscreteSlider; import com.etiennelawlor.discreteslider.library.utilities.DisplayUtility; public class MainActivity extends AppCompatActivity { DiscreteSlider discreteSlider; RelativeLayout tickMarkLabelsRelativeLayout; TypedArray icons; String[] tickMarkLabels = {"POOL", "uberMOTO", "uberGo", "uberSUV"}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); tickMarkLabelsRelativeLayout = (RelativeLayout) findViewById(R.id.tick_mark_labels_rl); discreteSlider = (DiscreteSlider) findViewById(R.id.discrete_slider); Resources res = getResources(); icons = res.obtainTypedArray(R.array.icons); // Detect when slider position changes discreteSlider.setOnDiscreteSliderChangeListener(new DiscreteSlider.OnDiscreteSliderChangeListener() { @Override public void onPositionChanged(int position) { int childCount = tickMarkLabelsRelativeLayout.getChildCount(); for (int i = 0; i < childCount; i++) { TextView tv = (TextView) tickMarkLabelsRelativeLayout.getChildAt(i); if (i == position) { tv.setTextColor(ContextCompat.getColor(MainActivity.this, R.color.colorPrimary)); discreteSlider.setThumb(icons.getDrawable(position)); // show selected item Toast toast = Toast.makeText(MainActivity.this, tickMarkLabels[i], Toast.LENGTH_SHORT); toast.setGravity(Gravity.CENTER, 0, 0); toast.show(); } else tv.setTextColor(ContextCompat.getColor(MainActivity.this, R.color.grey_700)); } } }); tickMarkLabelsRelativeLayout.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() { @Override public void onGlobalLayout() { tickMarkLabelsRelativeLayout.getViewTreeObserver().removeGlobalOnLayoutListener(this); addTickMarkTextLabels(); } }); } private void addTickMarkTextLabels() { int tickMarkCount = discreteSlider.getTickMarkCount(); float tickMarkRadius = discreteSlider.getTickMarkRadius(); int width = tickMarkLabelsRelativeLayout.getMeasuredWidth(); int discreteSliderBackdropLeftMargin = DisplayUtility.dp2px(this, 32); int discreteSliderBackdropRightMargin = DisplayUtility.dp2px(this, 32); float firstTickMarkRadius = tickMarkRadius; float lastTickMarkRadius = tickMarkRadius; int interval = (width - (discreteSliderBackdropLeftMargin + discreteSliderBackdropRightMargin) - ((int) (firstTickMarkRadius + lastTickMarkRadius))) / (tickMarkCount - 1); int tickMarkLabelWidth = DisplayUtility.dp2px(this, 40); for (int i = 0; i < tickMarkCount; i++) { TextView tv = new TextView(this); RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams( RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT); tv.setText(tickMarkLabels[i]); tv.setGravity(Gravity.CENTER); if (i == discreteSlider.getPosition()) { tv.setTextColor(ContextCompat.getColor(MainActivity.this, R.color.colorPrimary)); discreteSlider.setThumb(icons.getDrawable(i)); } else tv.setTextColor(ContextCompat.getColor(MainActivity.this, R.color.grey_700)); // tv.setBackgroundColor(getResources().getColor(android.R.color.holo_blue_dark)); int left = discreteSliderBackdropLeftMargin + (int) firstTickMarkRadius + (i * interval) - (tickMarkLabelWidth / 2); layoutParams.setMargins(left, 0, 0, 0); tv.setLayoutParams(layoutParams); tickMarkLabelsRelativeLayout.addView(tv); } } }

Source Code
==========
Link

ScreenShots
==========