Set a fixed value for the Seekbar slider and customize the Seekbar,progressbar style

Source: Internet
Author: User

Seekbar and ProgressBar were recently used in the project and must be set as designed, as shown in the following illustration. To achieve this effect, you must customize both of these controls.

One, SeekBar

In the beginning to achieve this effect reference online custom method can not achieve this effect, there is no way to only opportunistic.

1, the background scale of the picture I used a imageview, and then put a seekbar on the ImageView. Because it is a customized flat-panel application, the resolution is a limited 1280*768, so I am using absolutelayout so that ImageView and Seekbar positions and sizes are fixed, and it is estimated that this use may be problematic in other layouts.

2, the code in the layout file is as follows:[HTML] View Plain copy print?    <ImageView       android:layout_width= "400dip"        android:layout_height= "95dip"        android:layout_x= " 830dip "       android:layout_y=" 484dip "        android:src= "@drawable/seekbar_background_5"  //scale pictures        android:scaletype= "Centercrop"        android:background= "@null"         />             <SeekBar        android:id= "@+id/sensor_sensitivity"        android:layout_width= " 360dip "       android:layout_height=" 64dip "        android:layout_x= "850dip"        android:layout_y= "498dip"        android:progressdrawable= "@drawable/suretouch_seekbar_img"         android:thumb= "@drawable/suretouch_seekbar_thumb"        style= "? Android: Attr/progressbarstylehorizontal "       android:paddingleft=" 5dip "       android:paddingright= "5dip"        android:paddingbottom= " 2dip "       android:maxheight=" 1dip   //Note: You must set the height of the progress bar, otherwise the progress bar will be very high.        android:minheight= "1dip"             android:max= "android:progress="    "0"                />  

    <imageview
 	android:layout_width= "400dip"
    	android:layout_height= "95dip"
    	android:layout_x= "830dip "
    	android:layout_y=" 484dip "
    	android:src=" @drawable/seekbar_background_5 "//Tick picture
    	android:scaletype=" Centercrop "
    	android:background=" @null "
 	/>
 	
    <seekbar
    	android:id=" @+id/sensor_sensitivity "
    	android:layout_width= "360dip"
    	android:layout_height= "64dip"
    	android:layout_x= "850dip"
    	Android:layout_y= "498dip"
    	android:progressdrawable= "@drawable/suretouch_seekbar_img"
    	android:thumb= " @drawable/suretouch_seekbar_thumb "
    	style="? Android:attr/progressbarstylehorizontal "
    	android: paddingleft= "5dip"
    	android:paddingright= "5dip"
    	android:paddingbottom= "2dip"
    	android:maxheight= " 1dip "  //Note: The height of the progress bar must be set, otherwise the progress bar will be very high.
    	android:minheight= "1dip"
         android:max= "android:progress="
	0 "    	
    />


3, customize the slider and add the custom XML file to the drawable file. [HTML] View Plain copy print? <?xml version= "1.0"  encoding= "Utf-8"?>   <selector xmlns:android= "http://" Schemas.android.com/apk/res/android ">               <!--  pressed state  -->           <item                   android: State_pressed= "true"                    android:drawable= "@drawable/seekbar_block"  />                                  <!--  General no focus  -->            <item          &NBSP;&NBSP;&NBSP;&NBSP;&NBsp;   android:state_focused= "false"                   android:state_pressed= "false"                  android:drawable= "@drawable/seekbar_block"  / >           </selector>   

<?xml version= "1.0" encoding= "Utf-8"?> <selector xmlns:android=
"http://schemas.android.com/apk/res/" Android ">       
    <!--pressed status-->    
    <item       
        android:state_pressed=" true "       
        android:drawable=" @ Drawable/seekbar_block "/>      
                
    <!--normal no focus-->    
    <item       
        android:state_focused=" false "       
        Android:state_pressed= "false"     
        android:drawable= "@drawable/seekbar_block"/>   
  


4, customize the color of the progress bar, also add the custom required XML file to the drawable.

[HTML] View Plain copy print? <?xml version= "1.0"  encoding= "UTF-8"?>        <layer-list      xmlns:android= "Http://schemas.android.com/apk/res/android" >         <item android:id= "@android: id/progress" >               <clip>                   <shape>                       <gradient                                android:startcolor= "@color/big_title"                      &nbsP;        android:centercolor= "@color/big_title"                                 android:endcolor= "@color/big_title"                       />                   </ shape>              </clip>           </item>     </layer-list>   

<?xml version= "1.0" encoding= "UTF-8"?> <layer-list xmlns:android=
  "http://schemas.android.com/" Apk/res/android ">
     <item android:id=" @android: id/progress ">  
         <clip>  
             <shape>  
                 <gradient  
                         android:startcolor= "@color/big_title"  
                         android:centercolor= "@color/big_title"  
                         android: Endcolor= "@color/big_title"  
                 />  
             </shape>  
         </clip>  
     </item>  
</ Layer-list>


5, set the position of the slider, that is, when the slider is only allowed to stop on the scale, to reality this effect I used the method is when the slider stopped to determine the current value, such as the second scale is 25, here in 0 to 25 in the middle number, such as 13, That is, when the slider slides to an intermediate number greater than 13 or less than 25 to 50, it setprogress (25), which is set to the position of 25, which is the second tick position. The back and so on. There is a onstoptrackingtouch in the Seekbar event, and the code is as follows:[Java] View Plain copy print? Public void onstoptrackingtouch (Seekbar seekbar)  {            // todo auto-generated method stub             int seekprogress = mseekbar.getprogress ();            if (seekprogress<13) {                mseekbar.setprogress (0);            }else if (seekprogress>=13 && seekprogress<38) {               mseekbar.setprogress (;  )         }else if (seekprogress>=38 &&  seekprogress<63) {                mseekbar.seTprogress (m);           }else if (seekProgress>=63  && seekprogress<88) {                mseekbar.setprogress (;           }else)  if (seekprogress>=88) {                mseekbar.setprogress (;  )         }       }  

	public void Onstoptrackingtouch (SeekBar SeekBar) {
			//TODO auto-generated method stub
			int seekprogress = Mseekbar . getprogress ();
			if (seekprogress<13) {
				mseekbar.setprogress (0);
			} else if (seekprogress>=13 && seekprogress<38) {
				mseekbar.setprogress;
			} else if (seekprogress>=38 && seekprogress<63) {
				mseekbar.setprogress;
			} else if (seekprogress>=63 && seekprogress<88) {
				mseekbar.setprogress;
			} else if (seekprogress>=88) {
				mseekbar.setprogress;
			}
		}

The same is true for ProgressBar settings with a imageview background (a black box on the periphery), a ProgressBar control on the ImageView, and a custom progress bar color. It's just a bit more time-consuming to adjust the position and size between them, but it has achieved the desired results anyway.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.