how to make layouts transparent on click - android

I have two layouts and one imageView. The parent layout linearLayout1 have image background and its child layout relativeLayout1 have dark background. So when i move imageView on screen it display a selective area of linearLayout1 image . I applied touch motion but no idea how to display selective area. the code is here
public class MainActivity extends Activity {
// RelativeLayout viewRelative;
ImageButton imgBtnTarget;
Animation aniRotate, aniZoom;
PointF downPoint = new PointF();// Record Mouse Position When Pressed Down
PointF strtPointImg = new PointF(); // Record Start Position of 'img'
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imgBtnTarget = (ImageButton) findViewById(R.id.imageButtontTarget);
imgBtnTarget.setOnTouchListener( new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
// for moving image
switch (event.getAction()) {
case MotionEvent.ACTION_MOVE:
PointF mv = new PointF(event.getX() - downPoint.x, event
.getY() - downPoint.y);
imgBtnTarget.setX((int) (strtPointImg.x + mv.x));
imgBtnTarget.setY((int) (strtPointImg.y + mv.y));
strtPointImg = new PointF(imgBtnTarget.getX(), imgBtnTarget.getY());
break;
}
return false;
}
});
}
}
and here is xml resource
<LinearLayout 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:background="#drawable/back" >
<RelativeLayout
android:id="#+id/relativeViewBlack"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/black" >
<ImageButton
android:id="#+id/imageButtontTarget"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#android:color/transparent"
android:scaleType="fitCenter"
android:src="#drawable/target" />
</RelativeLayout>

In Java code:
LinearLayout ll = (LinearLayout) findViewById(R.id.your_ll_id);
ll.setAlpha(TRANSPARENT_VALUE);
Or:
ll.setBackgroundColor(Color.TRANSPARENT);
If you want transparent all from the begining add to your Layout in XML:
android:background="#00ffffff"
EDIT:
#Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
v.setAlpha(0.5f);
break;
case MotionEvent.ACTION_UP:
v.setAlpha(1.0f);
break;
case MotionEvent.ACTION_MOVE:
//your code...
break;
}
return true;
}

Related

View in Constraint Layout moves to top on changing width and height in Java

When I modify the width and height of button in java (Constraint Layout) then the button automatically moves to the top on click. Please check the code below and let me know what the issue is. PS - I am new to constraint layout
Layout File
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageButton
android:id="#+id/ibEgg"
android:layout_width="250dp"
android:layout_height="350dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#null"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/egg" />
</android.support.constraint.ConstraintLayout>
Java Code
ibEgg.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View view, MotionEvent motionEvent) {
switch (motionEvent.getAction()) {
case MotionEvent.ACTION_DOWN:
ConstraintLayout.LayoutParams layoutParams = new ConstraintLayout.LayoutParams(250,350);
ibEgg.setLayoutParams(layoutParams);
return true; // if you want to handle the touch event
case MotionEvent.ACTION_UP:
ConstraintLayout.LayoutParams layoutParams1 = new ConstraintLayout.LayoutParams(300,400);
ibEgg.setLayoutParams(layoutParams1);
return true; // if you want to handle the touch event
}
return false;
}
});
You are creating new LayoutParams, So you will need to set constraint programatically, this is the way:
ibEgg.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View view, MotionEvent motionEvent) {
switch (motionEvent.getAction()) {
case MotionEvent.ACTION_DOWN:
ConstraintLayout.LayoutParams layoutParams = new ConstraintLayout.LayoutParams(250, 350);
layoutParams.topToTop = ConstraintLayout.LayoutParams.PARENT_ID;
layoutParams.bottomToBottom = ConstraintLayout.LayoutParams.PARENT_ID;
layoutParams.startToStart = ConstraintLayout.LayoutParams.PARENT_ID;
layoutParams.endToEnd = ConstraintLayout.LayoutParams.PARENT_ID;
ibEgg.setLayoutParams(layoutParams);
return true; // if you want to handle the touch event
case MotionEvent.ACTION_UP:
ConstraintLayout.LayoutParams layoutParams1 = new ConstraintLayout.LayoutParams(300, 400);
layoutParams1.topToTop = ConstraintLayout.LayoutParams.PARENT_ID;
layoutParams1.bottomToBottom = ConstraintLayout.LayoutParams.PARENT_ID;
layoutParams1.startToStart = ConstraintLayout.LayoutParams.PARENT_ID;
layoutParams1.endToEnd = ConstraintLayout.LayoutParams.PARENT_ID;
ibEgg.setLayoutParams(layoutParams1);
return true; // if you want to handle the touch event
}
return false;
}
});

How to highlight the selected item in linear layout in android

I am having linear layout, in which it has one imageview and one textview, when i touch the linear layout, it should highlight the image as well as text inside the linear layout with different color. I have tried using set background for the linear layout when it is pressed since i have used ontouch-listener it doesn't shows the color even i tried to change the colors programmatically but it didn't works.
Can anyone tell me how i can change the imageview and textview color when a linear layout is touched.
Xml:
<LinearLayout
android:id="#+id/linear_otherexpense"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:background="#drawable/linearlayout_check"
android:gravity="center"
android:orientation="vertical"
android:weightSum="1">
<ImageView
android:id="#+id/img_otherexpense"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.7"
android:scaleType="centerInside"
android:src="#mipmap/expense"
android:tint="#6666FF" />
<TextView
android:id="#+id/tv_otherexpense"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:gravity="center"
android:text="#string/dayexpense"
android:tint="#color/colorPrimary" />
</LinearLayout>
Selector:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#android:drawable/list_selector_background" />
Code:
li_otherexpense.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View view, MotionEvent motionEvent) {
startActivity(new Intent(NewDaybook_Activity.this, AddingNewExpense.class));
NewDaybook_Activity.this.finish();
return false;
}
});
You can use this code. this is working fine for me .May be it will helpfull
findViewById(R.id.linear_otherexpense).setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View view, MotionEvent motionEvent) {
switch (motionEvent.getAction()) {
case MotionEvent.ACTION_DOWN:
// When you Touch Down
// U can change Text and Image As per your Functionality
break;
case MotionEvent.ACTION_UP:
//When you Release the touch
// U can change Text and Image As per your Functionality
break;
}
return true;
}
});
Try this,
linearLayout = (LinearLayout) findViewById(R.id.linear_otherexpense);
imageView=(ImageView)findViewById(R.id.img_otherexpense);
linearLayout.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View view, MotionEvent motionEvent) {
linearLayout.setBackgroundColor(getResources().getColor(R.color.colorAccent));
imageView.setBackgroundColor(getResources().getColor(R.color.colorPrimaryDark));
return true;
}
});

Scale and position in bitmap overlay

I am working on a screen that allows user to drag and drop one image onto another. After that the code should be able to redisplay the resulting image. I am having a hard time making the reddit image normal size. More details about it is in bold next to screen 3 below.
Note: all of my images so far are in the res/drawable folder.
Screen 1: Initial screen:
Screen 2: After the reddit image was dragged and dropped onto another image:
Screen 3: Here is what the screen looks like after I create an overlay bitmap with 2 bitmaps combined (notice the reddit image that is now smaller than the original dimensions). NOTE: If I create a temporary bitmap for the reddit image alone (instead of combining it into an overlay with the other bitmap), the reddit icon has correct width and height. This question is only about the dimensions of reddit not about the placement of the icon within the overlay.
Here is my layout file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:weightSum="1"
android:orientation="vertical"
tools:context=".LobbyActivity">
<FrameLayout
android:id="#+id/source_layout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".5">
<ImageView
android:id="#+id/flatStanleyImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/reddit" />
<ImageView
android:id="#+id/postcardImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="50dp"
android:visibility="gone" />
</FrameLayout>
<FrameLayout
android:id="#+id/target_layout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".5">
<ImageView
android:id="#+id/attractionImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/attraction"
android:layout_marginBottom="50dp" />
<Button
android:id="#+id/resetButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="reset"
android:layout_gravity="bottom|left"/>
<Button
android:id="#+id/doneButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="done"
android:layout_gravity="bottom|right"/>
</FrameLayout>
</LinearLayout>
And here is the Java code:
public class LobbyActivity extends AppCompatActivity {
private static final String TAG = "LobbyActivity";
#BindView(R.id.flatStanleyImage)
protected ImageView flatStanleyImageView;
#BindView(R.id.postcardImage)
protected ImageView postcardImageView;
#BindView(R.id.target_layout)
protected FrameLayout targetLayout;
#BindView(R.id.source_layout)
protected FrameLayout sourceLayout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_lobby);
ButterKnife.bind(this);
View.OnLongClickListener longClickListener = new View.OnLongClickListener() {
#Override
public boolean onLongClick(View v) {
ClipData clipData = ClipData.newPlainText("", "");
View.DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(v);
v.startDrag(clipData, shadowBuilder, v, 0);
v.setVisibility(View.INVISIBLE); // we are dragging the shadow
return true;
}
};
flatStanleyImageView.setOnLongClickListener(longClickListener);
View.OnDragListener dragListener = new View.OnDragListener() {
#Override
public boolean onDrag(View v, DragEvent event) {
switch(event.getAction())
{
case DragEvent.ACTION_DRAG_STARTED:
Log.d(TAG, "Action is DragEvent.ACTION_DRAG_STARTED");
case DragEvent.ACTION_DRAG_ENTERED:
Log.d(TAG, "Action is DragEvent.ACTION_DRAG_ENTERED");
case DragEvent.ACTION_DRAG_EXITED:
Log.d(TAG, "Action is DragEvent.ACTION_DRAG_EXITED");
case DragEvent.ACTION_DRAG_LOCATION:
Log.d(TAG, "Action is DragEvent.ACTION_DRAG_LOCATION");
case DragEvent.ACTION_DRAG_ENDED:
Log.d(TAG, "Action is DragEvent.ACTION_DRAG_ENDED. DragEvent.getResult() " + event.getResult());
if (!event.getResult()) {
Log.d(TAG, "Drag was not successful.");
flatStanleyImageView.setVisibility(View.VISIBLE);
}
return true;
case DragEvent.ACTION_DROP:
Log.d(TAG, "Action is DragEvent.ACTION_DROP");
FrameLayout draggedImageParentViewLayout = (FrameLayout) flatStanleyImageView.getParent();
Log.d(TAG, "draggedImageParentViewLayout: " + draggedImageParentViewLayout.getId());
Log.d(TAG, "targetLayout: " + targetLayout.getId());
View view = (View) event.getLocalState();
float x = event.getX();
float y = event.getY();
view.setX(x-(view.getWidth()/2));
view.setY(y-(view.getWidth()/2));
if (draggedImageParentViewLayout != targetLayout) {
draggedImageParentViewLayout.removeView(flatStanleyImageView);
targetLayout.addView(flatStanleyImageView);
}
sourceLayout.invalidate();
targetLayout.invalidate();
return true;
default:
break;
}
return false;
}
};
targetLayout.setOnDragListener(dragListener);
}
#OnClick(R.id.resetButton)
protected void handleResetButtonClick() {
Log.d(TAG, "Begin handleResetButtonClick");
Intent intent = getIntent();
finish();
startActivity(intent);
Log.d(TAG, "End handleResetButtonClick");
}
#OnClick(R.id.doneButton)
protected void handleDoneButtonClick() {
Log.d(TAG, "Begin handleDoneButtonClick");
Bitmap attractionBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.attraction);
Bitmap flatStanleyBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.reddit);
Bitmap bitmapOverlay = Bitmap.createBitmap(attractionBitmap.getWidth(), attractionBitmap.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmapOverlay);
canvas.drawBitmap(attractionBitmap, new Matrix(), null);
canvas.drawBitmap(flatStanleyBitmap, new Matrix(), null);
postcardImageView.setImageBitmap(bitmapOverlay);
postcardImageView.setVisibility(View.VISIBLE);
Log.d(TAG, "End handleDoneButtonClick");
}
}

Slide image from left to right and right to left

I am developing an application in which I want to add image which can slide from left to right and from right to left like below image. That inner white play image should be move from left to right and Vice Versa.
What I have did so far is, I am able to move single image from left to right and vice versa but I want set background image as well like above rounded shaped black background.
Here is my code:
imageView.setOnTouchListener(new OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
// TODO Auto-generated method stub
int eid = event.getAction();
switch (eid) {
case MotionEvent.ACTION_MOVE:
RelativeLayout.LayoutParams mParams = (RelativeLayout.LayoutParams) imageView.getLayoutParams();
int x = (int) event.getRawX();
mParams.leftMargin = x - 50;
imageView.setLayoutParams(mParams);
break;
default:
break;
}
return true;
}
});
EDIT
I tried to manage background image by setting my layout xml like below:
<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" >
<RelativeLayout
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="49dp"
android:background="#drawable/set_user_profile_back"
android:paddingLeft="10dp"
android:paddingRight="10dp" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/hello_world"
android:src="#drawable/next" />
</RelativeLayout>
</RelativeLayout>
But now I am facing problem with image size, image size is decreased in right how to solve this and how to fix start and end point for image movement.
Any idea and advice will be apppreciated
Can you please try this piece of code Juned
public class MainActivity extends Activity {
Button b1;
ImageView logo;
float width;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
b1 = (Button) findViewById(R.id.button1);
logo = (ImageView) findViewById(R.id.logo);
Display display = getWindowManager().getDefaultDisplay();
width = display.getWidth();
final Animation posX = new TranslateAnimation(0, width - 50, 0, 0);
posX.setDuration(1000);
posX.setFillAfter(true);
b1.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
logo.startAnimation(posX);
logo.setVisibility(View.VISIBLE);
}
});
}}

Using a Viewflipper with Gridview

I've created a calendar which works fine, using a GridView which has an OnClickListener.
Now I wrapped the two GridViews in a ViewFlipper. The ViewFlipper has an OnTouchListener which also works fine, I can change the view by using ontouch when dragging. The problem is though that I have to drag on the EMTPY space in the Activity in order to use the ViewFlipper. When I drag on the GridView, nothing happends at all. But I can click on the GridView for OnClickListener.
xml:
<ViewFlipper android:id="#+id/details"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<GridView
android:id="#+id/weeks"
android:numColumns="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="8">
</GridView>
<GridView
android:id="#+id/calendar"
android:numColumns="7"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
</GridView>
</LinearLayout>
android code:
#Override
public boolean onTouch(View arg0, MotionEvent arg1) {
// Get the action that was done on this touch event
switch (arg1.getAction())
{
case MotionEvent.ACTION_DOWN:
{
// store the X value when the user's finger was pressed down
downXValue = arg1.getX();
break;
}
case MotionEvent.ACTION_UP:
{
// Get the X value when the user released his/her finger
currentX = arg1.getX();
// going backwards: pushing stuff to the right
if (currentX - downXValue < -(arg0.getWidth()/3))
{
mdh.nextMonth();
calendar.add(Calendar.MONTH, 1);
currentMonth.setText(new SimpleDateFormat("MMMM yyyy").format(calendar.getTime()));
cAdapter.notifyDataSetChanged();
updateWeeks();
// Set the animation
vf.setInAnimation(arg0.getContext(), R.anim.push_left_in);
vf.setOutAnimation(arg0.getContext(), R.anim.push_left_out);
// Flip!
vf.showPrevious();
}
// going forwards: pushing stuff to the left
if (currentX - downXValue > arg0.getWidth()/3)
{
mdh.previousMonth();
calendar.add(Calendar.MONTH, -1);
currentMonth.setText(new SimpleDateFormat("MMMM yyyy").format(calendar.getTime()));
cAdapter.notifyDataSetChanged();
updateWeeks();
// Set the animation
vf.setInAnimation(arg0.getContext(), R.anim.push_right_in);
vf.setOutAnimation(arg0.getContext(), R.anim.push_right_out);
// Flip!
vf.showNext();
}
break;
}
gridview.setOnTouchListener(new OnTouchListener(){
#Override
public boolean onTouch(View v, MotionEvent event) {
return detector.onTouchEvent(event);
}
});
I had the same issue with a ViewFlipper and ScrollViews.
Try adding the onTouchListener to your GridView aswell and it should work.

Categories

Resources