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 LawlorGithub 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>
======
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>
<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);
}
}
}
|
==========
LinkScreenShots==========
No comments:
Post a Comment