Friday, 16 December 2016

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

==========






















































on



























Labels:
,
,
,
,
,
,
,
,


















No comments:















Post a Comment


















        

      









Subscribe to:
Post Comments (Atom)