Home sliding button BottomSlider like Uber
BottomSlider like Uber
24365onlineservices
01:09
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 ==========
';
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();