how to customize thumb of seek bar - android

I want to display a TextView just above thumb of the SeekBar that will display the current progress of seek bar. As we move the thumb forward and backward the TextView will also move with thumb (the TextView should also be above the thumb).
Please provide any clue, code snippet are always welcome.

Moving the text can even more easily done by setting the padding for the TextView as:
int xPos = ((SeekbarInstance.getRight() - SeekbarInstance.getLeft()) * SeekbarInstance.getProgress()) / SeekbarInstance.getMax();
textViewInstance.setPadding(xPos, 0, 0, 0);

Layout of your activity
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<!-- Main context -->
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<SeekBar android:id="#+id/skbSample"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:max="35">
</SeekBar>
</LinearLayout>
<!-- For display value -->
<AbsoluteLayout android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView android:text="0"
android:id="#+id/txvSeekBarValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFFFFFFF"
android:background="#FF777777"
android:visibility = "invisible">
</TextView>
</AbsoluteLayout>
</FrameLayout>
Initialize your controls on create:
mTxvSeekBarValue = (TextView) this.findViewById(R.id.txvSeekBarValue);
mSkbSample = (SeekBar) this.findViewById(R.id.skbSample);
mSkbSample.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
if(event.getAction() == MotionEvent.ACTION_DOWN)
{
ShowSeekValue((int)event.getX(), mTxvSeekBarValue.getTop());
mTxvSeekBarValue.setVisibility(View.VISIBLE);
}
else if(event.getAction() == MotionEvent.ACTION_MOVE)
{
ShowSeekValue((int)event.getX(), mTxvSeekBarValue.getTop());
}
else if(event.getAction() == MotionEvent.ACTION_UP)
{
mTxvSeekBarValue.setVisibility(View.INVISIBLE);
}
return false;
}
});
Function will move your value:
private void ShowSeekValue(int x, int y)
{
if(x > 0 && x < mSkbSample.getWidth())
{
AbsoluteLayout.LayoutParams lp = new AbsoluteLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT, x, y);
mTxvSeekBarValue.setLayoutParams(lp);
}
}

Found a better way. Derived from the sample:
mTxvSeekBarValue = (TextView) this.findViewById(R.id.txvSeekBarValue);
mSkbSample = (SeekBar) this.findViewById(R.id.skbSample);
mSkbSample.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
if(event.getAction() == MotionEvent.ACTION_DOWN)
{
int progress = mSkbSample.getProgress();
mTxvSeekBarValue.setText(String.valueOf(progress).toCharArray(), 0, String.valueOf(progress).length());
}
else if(event.getAction() == MotionEvent.ACTION_MOVE)
{
int progress = mSkbSample.getProgress();
mTxvSeekBarValue.setText(String.valueOf(progress).toCharArray(), 0, String.valueOf(progress).length());
}
return false;
}
});
There you don't need any additional method and the ACTION_UP event has no important effect on the result.

Related

Click event on EditText's drawableRight not working properly?

I need to open phone's contact book on the click of EditText's drawableRight. Click event on drawableRight is working fine But the problem is, when I click/touch on anywhere on EditText it is also execute click event and open contact list.
I take help for manage click event on drawableRight from here Please check this link.
I don't want to open contact list when I click on EditText, I only want to open it when I click drawableRight (image). So how solve this problem?
Here is my code:
EditText mobile_number;
mobile_number = (EditText)view.findViewById(R.id.mobile_number1);
mobile_number.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
final int DRAWABLE_LEFT = 0;
final int DRAWABLE_TOP = 1;
final int DRAWABLE_RIGHT = 2;
final int DRAWABLE_BOTTOM = 3;
if(event.getAction()==MotionEvent.ACTION_UP){
if(event.getRawX()>=(mobile_number.getRight()-mobile_number.getCompoundDrawables()[DRAWABLE_RIGHT].getBounds().width()));
{
Intent intent = new Intent(Intent.ACTION_PICK, ContactsContract.Contacts.CONTENT_URI);
startActivityForResult(intent,PICK_CONTACT);
return true;
}
}
return true;
}
});
Here is my layout code:
<LinearLayout
android:layout_width="fill_parent"
android:id="#+id/linearlayout_two1"
android:layout_below="#+id/linearlayout_one1"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_marginTop="20dp"
android:orientation="vertical"
>
<EditText
android:layout_width="300dp"
android:hint="Enter Your Mobile Number"
android:textSize="15sp"
android:id="#+id/mobile_number1"
android:paddingLeft="30dp"
android:layout_height="wrap_content"
android:drawableRight="#drawable/editbox_icon"
/>
</LinearLayout>
Instead of using getRawX(), try replacing that line with
if (event.getX() >= (mobile_number.getWidth() - mobile_number
.getCompoundDrawables()[DRAWABLE_RIGHT].getBounds().width())) {
EDIT: I believe View.getRight() returns the position of the right edge of the View relative to its parent, while TouchEvent.getRawX() returns the absolute X position on the screen.
EDIT AGAIN TO DEMONSTRATE MY POINT:
MainActivity.xml
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.meremammal.www.edittextdrawable.MainActivity">
<!-- This layout is only here to demonstrate a situation that breaks the usage of getRawX() -->
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true">
<EditText
android:id="#+id/edit_text"
android:layout_width="400dp"
android:layout_height="wrap_content"
android:text="Hello World!"
android:drawableRight="#android:drawable/ic_input_add"/>
</RelativeLayout>
</RelativeLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity {
EditText mEditText;
Context mContext;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mContext = this;
mEditText = (EditText) findViewById(R.id.edit_text);
mEditText.setOnTouchListener(new View.OnTouchListener() {
private float touchX = 0;
#Override
public boolean onTouch(View v, MotionEvent event) {
int drawableLeft = mEditText.getRight() - mEditText
.getCompoundDrawables()[2].getBounds().width();
// This detects the location of touch on ACTION_DOWN, but because it is
// using getRawX() and getRight() and the EditText's parent is not at the
// left of the screen, it will respond when clicked in the middle of the
// EditText. Instead, use getX() and EditText.getWidth()
if (event.getAction() == MotionEvent.ACTION_DOWN && event.getRawX() >= drawableLeft) {
touchX = event.getRawX();
return true;
} else if (event.getAction() == MotionEvent.ACTION_UP && touchX >= drawableLeft) {
Toast.makeText(mContext, "Clicked Button", Toast.LENGTH_SHORT).show();
touchX = 0;
return true;
} else {
return mEditText.onTouchEvent(event);
}
}
});
}
}
You don't have access to the right image as far my knowledge, unless you create custom EditText class. I suggest to use a RelativeLayout, with one editText and one imageView, and set OnClickListener over the image view as below:
<RelativeLayout
android:id="#+id/rlSearch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:drawable/edit_text"
android:padding="5dip" >
<EditText
android:id="#+id/txtSearch"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/imgSearch"
android:background="#00000000"
android:ems="10"/>
<ImageView
android:id="#+id/imgSearch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/btnsearch" />
</RelativeLayout>
Make a Linear layout with horizontal orientation and add a edit-text and image-view with proper weight..
Then Give on click for each item separately.....
Just chage the last return to false. Also you have to remove the comma ; at the end of if statement.

Click ImageView on Specific Location

I have an imageView and when I need to let the user click only on a specific location (the white space) as shown in the image below, any suggestion?
here is my xml
<RelativeLayout
android:id="#+id/lockRelativeLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginStart="5dp"
>
<ImageView
android:id="#+id/imageView"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#drawable/image" />
</RelativeLayout>
and here is the code
private View.OnTouchListener imageViewOnClickListener = new View.OnTouchListener() {
#Override
public boolean onTouch(View view, MotionEvent event) {
int x = (int)event.getX();
int y = (int)event.getY();
if (event.getAction() == MotionEvent.ACTION_DOWN){
//here i want if he clicked on specific location to go to another activity
Intent intent = new Intent(context, ViewerActivity.class);
context.startActivity(intent);
}
return true;
}
};
I don't know if i should use onClick or onTouchClick!!
You could implement the OnTouchListener.
anImageView.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
if(event.getAction() == MotionEvent.ACTION_DOWN){
//Check between +- 10px jsu tto have some are to hit
int centerX = (v.getWidth() /2);
if(event.getX() > centerX - 10)
&& event.getX() < centerX + 10)){
//Do your magic
}
}
return true;
}
});
The event contains the coordinates for the event.
Then you can compare that either to the the boundaries you set up or get the correct pixel from the image an check if it is white.
I would advise to put another transparent control in your relative layout on top of ImageView with paddings you need, and subscribe to its onClick event. This way you can be sure only proper area was clicked.
What i did is I used two images One for Show your Image and Secound is show only Some Part of that where you want to click
Please Note My Secound Image is my transparent image. So use one1 as a transparent image. And use its Click Event.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#xml/shape"
android:gravity="center" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/one1" />
</LinearLayout>
now create xml and create shape.xml file which is give to Linearlayout
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:radius="20dip" />
<stroke
android:width="100dip"
android:color="#A0ffffff" />
i found a solution by myself: thanks all for replying:
private View.OnTouchListener imageViewOnClickListener = new View.OnTouchListener() {
#Override
public boolean onTouch(View view, MotionEvent event) {
int x = (int) event.getX();
if (173 <= x && x <= 671) {
Intent intent = new Intent(context, NextActivity.class);
context.startActivity(intent);
}
return true;
}
};

Custom view clipped when moved

I have a custom view that gets clipped to its original bounds after it's moved. On a 4.4.4 KitKat device, the view draws just fine outside its bound, but on a 4.1.2 device, it gets clipped. I've tried using android:clipChildren with no success. Any ideas?
Code and layout below:
#Override
public boolean onTouchEvent(MotionEvent event) {
if(event.getAction() == MotionEvent.ACTION_DOWN){
mIsDown = true;
return true;
}
if(mIsDown && event.getAction() == MotionEvent.ACTION_MOVE){
PointF pointF = new PointF(event.getRawX(), event.getRawY());
setX(pointF.x - getWidth() / 2);
setY(pointF.y - getHeight() / 2);
return true;
}
if(event.getAction() == MotionEvent.ACTION_UP){
mIsDown = false;
return true;
}
return super.onTouchEvent(event);
}
Layout:
<FrameLayout
android:clipChildren="false"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="#+id/control_panel">
<FrameLayout
android:id="#+id/preview_holder"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
<com.example.CustomView
android:id="#+id/target_view"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_gravity="center"
android:background="#null"
/>
</FrameLayout>

Change positions of View inside LinearLayout

I am using following layout
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/lnrLayout_cVideo_LB"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/relative_cVideo_LB"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight=".15" >
<VideoView
android:id="#+id/cVideo_LB"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:tag="2" />
</RelativeLayout>
<TextView
android:id="#+id/txtVw_cVideo_LB"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight=".85"
android:background="#FFFFFF"
android:gravity="center"
android:text=""/>
</LinearLayout>
So when I click on VideoView position of TextView should go to top of VideoView when I click again, I should restore.
For that I am using following code,
video.setOnTouchListener(new OnTouchListener() {
#Override
public void onTouch(View v) {
// TODO Auto-generated method stub
if(flag_video==0)
{
textview.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT,(float).85);
relative_LB.setLayoutParams(new LayoutParams(android.widget.RelativeLayout.LayoutParams.MATCH_PARENT,android.widget.RelativeLayout.LayoutParams.MATCH_PARENT,(float).15);
flag_video=1;
v.invalidate();
}
else
{
relative_LB.setLayoutParams(new LayoutParams(android.widget.RelativeLayout.LayoutParams.MATCH_PARENT,android.widget.RelativeLayout.LayoutParams.MATCH_PARENT,(float).15));
lb.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT,(float).85));
flag_video=0;
v.invalidate();
}
}
});
But it is not changing its position. I explored solution, I found that I can do it by View.removeView() and View.addView() method. But for my application purpose I can't use those methods. So anybody suggest me an alternate way??
Please dont suggest me View.removeView() and view.addView() methods
You have two problems:
You are using onTouch(View v) method instead of onTouch(View v, MotionEvent event) method. onTouch() method should have tow parameter. 2. Return type of onTouch() should be boolean type but you are using void.
Another problem is that you are setting LayoutParams to lb instead to textview in the else condition.
Now, replace the following listener code snippet with yours...I think, you will get it right.
video.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
// TODO Auto-generated method stub
if (flag_video == 0) {
textview.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,
LayoutParams.MATCH_PARENT, (float) .85));
relative_LB.setLayoutParams(new LayoutParams(
android.widget.RelativeLayout.LayoutParams.MATCH_PARENT,
android.widget.RelativeLayout.LayoutParams.MATCH_PARENT, (float) .15));
flag_video = 1;
v.invalidate();
} else {
relative_LB.setLayoutParams(new LayoutParams(
android.widget.RelativeLayout.LayoutParams.MATCH_PARENT,
android.widget.RelativeLayout.LayoutParams.MATCH_PARENT, (float) .85));
textview.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,
LayoutParams.MATCH_PARENT, (float) .15));
flag_video = 0;
v.invalidate();
}
return true;
}
});
You can set the visibility of the RelativeLayout to GONE, it should disappear and the textview go upside, like the following method (when the flag_video == 0 the textview go up):
video.setOnTouchListener(new OnTouchListener() {
#Override
public void onTouch(View v) {
// TODO Auto-generated method stub
if(flag_video==0)
{
//textview should go upside
relative_LB.setVisibility(RelativeLayout.GONE);
flag_video=1;
}
else
{
relative_LB.setVisibility(RelativeLayout.VISIBLE);
flag_video=0;
}
}
});
Hope it helps!

onTouch on a view not triggered when touching its ScrollView child

I can't get onTouch event triggered on a container when clicking on its ScrollView child.
I'm using API 12 on a Galaxy tab 10.1.
Anybody can help?
Thanks
Activity
public class TestActivity extends Activity{
#Override
public void onCreate(Bundle bundle) {
super.onCreate(bundle);
setContentView(R.layout.dude);
LinearLayout mylayout = (LinearLayout) findViewById(R.id.mylayout);
mylayout.setOnTouchListener(new OnTouchListener () {
public boolean onTouch(View view, MotionEvent event) {
// Only called when touched outside the ScrollView
if (event.getAction() == android.view.MotionEvent.ACTION_DOWN) {
/* do stuff */
} else if (event.getAction() == android.view.MotionEvent.ACTION_UP) {
/* do stuff */
}
return true;
}
});
}
}
Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mylayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:gravity="center"
android:text="Touch here trigger parent&apos;s onTouch"
android:textColor="#000000"
android:textSize="40sp" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:layout_width="match_parent"
android:layout_height="1000dp"
android:background="#b00000"
android:gravity="center"
android:text="Touch here DOES NOT trigger parent&apos;s onTouch"
android:textColor="#000000"
android:textSize="40sp" />
</RelativeLayout>
</ScrollView>
</LinearLayout>
mylayout.setOnTouchListener(new OnTouchListener () {
public boolean onTouch(View view, MotionEvent event) {
// Only called when touched outside the ScrollView
if (event.getAction() == android.view.MotionEvent.ACTION_DOWN) {
/* do stuff */
return true;
} else if (event.getAction() == android.view.MotionEvent.ACTION_UP) {
/* do stuff */
return true;
}
return false;
}
});
this should work... but you no longer have auto-scroll when you fling it hard... it'll be a sticky scroll moving only as much as you drag.
Did u try to create ONE OnClickListener and add it to all childs?
Maybe this could solve your
As the ScrollView makes it childs scrollable it wouldn't have an own area to click in.
(Correct me if I'm wrong ^^)
You probably need this code
#Override
public boolean onInterceptTouchEvent(MotionEvent ev)
{
onTouchEvent(ev);
return false;
}

Categories

Resources