I'm new in Android development and I need to increase the hit area for two buttons grouped inside a LinearLayout
<LinearLayout
android:id="#+id/buttonsLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="5sp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="20dp">
<ImageButton
android:id="#+id/backButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/button_close_animation"
android:onClick="closeActivity"
android:layout_weight="1"/>
<ImageButton
android:id="#+id/sendButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/sendbutton_inactive"
android:onClick="onSendMessage"
android:layout_weight="1"
android:layout_marginLeft="30sp"/>
</LinearLayout>
I want to increase the hit area for the back button in the left and for send button in the right.
I've tried by adding padding to each button but the image stretched and I don't want that... Also I've tried to use TouchDelegate starting with the back button
Rect delegateAreaBack = new Rect();
ImageButton delegateBack = (ImageButton) findViewById(R.id.backButton);
delegateBack.getHitRect(delegateAreaBack);
delegateAreaBack.left -= 2600;
TouchDelegate expandedAreaBack = new TouchDelegate(delegateAreaBack, delegateBack);
if(View.class.isInstance(delegateBack.getParent()))
((View) delegateBack.getParent()).setTouchDelegate(expandedAreaBack);
but the hit area didn't increased... What am I doing wrong?
ImageButton button = (ImageButton) findViewById(R.id.backButton);
button .post( new Runnable() {
public void run() {
final Rect rect = new Rect();
button.getHitRect(rect);
rect.top -= 100; // increase top hit area
rect.left -= 100; // increase left hit area
rect.bottom += 100; // increase bottom hit area
rect.right += 100; // increase right hit area
button .setTouchDelegate( new TouchDelegate( rect , button));
}
});
Dana, it seems like you need to increase the size of the LinearLayout.
Here is how it looked like: https://image.prntscr.com/image/mG6IHwS4Tw25kb_6CY5Tqw.png
Here is how I made it look like https://image.prntscr.com/image/v8Hl0CrJQ3qwZOQoZMdvLg.png by changing the height to 200dp for experiment purposes.
So in all here is how made your XML look like:
<LinearLayout
android:id="#+id/buttonsLayout"
android:layout_width="wrap_content"
android:layout_height="200dp"
android:paddingTop="5sp"
android:layout_marginTop="152dp"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="114dp"
android:layout_marginStart="114dp">
<ImageButton
android:id="#+id/backButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#mipmap/ic_launcher"
android:onClick="closeActivity"
android:layout_weight="1"/>
<ImageButton
android:id="#+id/sendButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#mipmap/ic_launcher"
android:onClick="onSendMessage"
android:layout_weight="1"
android:layout_marginLeft="30sp"/>
</LinearLayout>
Afterwards, I used this simple code to experiment a bit with the problem and if you notice, the clickable area beneath the send button has increased.
public class MainActivity extends AppCompatActivity {
ImageButton button1, button2;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
button1 = (ImageButton) findViewById(R.id.backButton);
button2 = (ImageButton) findViewById(R.id.sendButton);
View parent = findViewById(R.id.root); //Your Layout ID
parent.post(new Runnable() {
#Override
public void run() {
Rect delegateArea = new Rect();
ImageButton delegate = button2;
delegate.getHitRect(delegateArea);
delegateArea.bottom += 260;
TouchDelegate expandedArea = new TouchDelegate(delegateArea, delegate);
// give the delegate to an ancestor of the view we're
// delegating the
// area to
if (View.class.isInstance(delegate.getParent())) {
((View) delegate.getParent())
.setTouchDelegate(expandedArea);
}
}
});
}
}
Now if you notice on my second screenshot, I have increased the gap of the liner layout on the bottom and on the top therefore that means if you want this to work you need to increase the area of the layout around the buttons.
In all I did these changes to your code just to experiment with what works and which direction you should take to solve your problem. Hope this will help you.
Credit goes to #Strider as well from his post on Increase the clickable area of the button
Related
I am working on an android project where I have a custom view. When the custom view is clicked, I want a to put a view (a circle) at each corner of the view.
At the moment I'm just trying to get it work in the top left corner but it ends up in the middle.
Below is my click function for adding the view.
View view = LayoutInflater.from(getContext()).inflate(R.layout.view, this, false);
TextView textItem = view.findViewById(R.id.lblItemText);
textItem.setText("View: " + counter);
view.setOnClickListener(new OnClickListener()
{
#Override
public void onClick(View v)
{
Anchor anchor1 = new Anchor(getContext());
anchor1.setLeft(v.getLeft());
anchor1.setTop(CustomView.this.getTop());
CustomView.this.addView(anchor1);
}
});
The custom view is hosted inside a relative layout. The custom view extends RelativeLayout and the anchor view which is supposed to go into the top left corner of the custom view extends button.
The anchor constructor contains the following:
public Anchor(Context context)
{
super(context);
this.setBackgroundResource(R.drawable.anchor);
this.setPadding(0,0,0,0);
this.setWidth(1);
this.setHeight(1);
}
For some reason the anchor is appearing in the middle instead of being on the corner as shown below
Below is kind of expecting.
UPDATE
After a couple of days made some progress and I do have it working, except its using hardcoded values to get it in the right position, which doesn't seem right. I'm guessing this will only work on the specific device I'm testing on, another device with another resolution will be positioned wrong.
Below is the code I have that hopefully shows what is I am trying to achieve along with a screenshot as to what I have now.
private void createAnchorPoints()
{
//Main View
ViewGroup mainView = activity.findViewById(android.R.id.content);
int[] viewToBeResizedLoc = new int[2];
viewToBeResized.getLocationOnScreen(viewToBeResizedLoc);
//Add top left anchor
Anchor topLeftAnchor = new Anchor(context, Anchor.ResizeMode.TOP_LEFT);
FrameLayout.LayoutParams topLeftParms = new FrameLayout.LayoutParams(150,150);
topLeftParms.leftMargin = viewToBeResizedLoc[0] - 50;
topLeftParms.topMargin = viewToBeResizedLoc[1] - viewToBeResized.getHeight() - 30;
topLeftAnchor.setLayoutParams(topLeftParms);
mainView.addView(topLeftAnchor);
//Add top right anchor
Anchor topRightAnchor = new Anchor(context, Anchor.ResizeMode.TOP_RIGHT);
FrameLayout.LayoutParams topRightParms = new FrameLayout.LayoutParams(150, 150);
topRightParms.leftMargin = topLeftParms.leftMargin + viewToBeResized.getWidth() - 40;
topRightParms.topMargin = topLeftParms.topMargin;
topRightAnchor.setLayoutParams(topRightParms);
mainView.addView(topRightAnchor);
//Add bottom left anchor
Anchor bottomLeftAnchor = new Anchor(context, Anchor.ResizeMode.BOTTOM_LEFT);
FrameLayout.LayoutParams bottomLeftParms = new FrameLayout.LayoutParams(150, 150);
bottomLeftParms.leftMargin = topLeftParms.leftMargin;
bottomLeftParms.topMargin = topLeftParms.topMargin + viewToBeResized.getHeight() - 40;
bottomLeftAnchor.setLayoutParams(bottomLeftParms);
mainView.addView(bottomLeftAnchor);
//Add bottom right anchor
Anchor bottomRightAnchor = new Anchor(context, Anchor.ResizeMode.BOTTOM_RIGHT);
FrameLayout.LayoutParams bottomRightParms = new FrameLayout.LayoutParams(150, 150);
bottomRightParms.leftMargin = topRightParms.leftMargin;
bottomRightParms.topMargin = bottomLeftParms.topMargin;
bottomRightAnchor.setLayoutParams(bottomRightParms);
mainView.addView(bottomRightAnchor);
}
Since the top-level layout is a RelativeLayout, you will need to use the view positioning that is available to RelativeLayout to achieve what you want. (See the documentation.)
Here is a mock-up of what you want to achieve in XML. This mock-up will demonstrate how we can approach the actual solution. I am using standard views, but it shouldn't matter. The technique will apply to your custom views. The image is from Android Studio's designer, so no code was used to create the image.
activity_main.xml
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<RelativeLayout
android:id="#+id/customView"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_centerInParent="true"
android:background="#android:color/holo_green_light" />
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignStart="#id/customView"
android:layout_alignTop="#id/customView"
android:src="#drawable/circle"
android:translationX="-10dp"
android:translationY="-10dp" />
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignEnd="#id/customView"
android:layout_alignTop="#id/customView"
android:src="#drawable/circle"
android:translationX="10dp"
android:translationY="-10dp" />
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignBottom="#id/customView"
android:layout_alignStart="#id/customView"
android:src="#drawable/circle"
android:translationX="-10dp"
android:translationY="10dp" />
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignBottom="#id/customView"
android:layout_alignEnd="#id/customView"
android:src="#drawable/circle"
android:translationX="10dp"
android:translationY="10dp" />
</RelativeLayout>
circle.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<!-- fill color -->
<solid android:color="#android:color/holo_red_light" />
<size
android:width="20dp"
android:height="20dp" />
</shape>
The Actual Solution
Now that we have demonstrated that the mocked-up approach works, we now have to reproduce the effect in code. We will have to add the circle view and position it within the parent RelativeLayout using RelativeLayout view positioning and translations. The following code shows just the top left circle positioned, but the other circles will be positioned in a similar way.
activity_main.java
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Drawable circle = ContextCompat.getDrawable(this, R.drawable.circle);
ImageView imageView = new ImageView(this);
imageView.setImageDrawable(circle);
int circleSize = dpToPx(CIRCLE_SIZE_DP);
RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(circleSize, circleSize);
// Position top left circle within the custom view.
lp.addRule(RelativeLayout.ALIGN_START, R.id.customView);
lp.addRule(RelativeLayout.ALIGN_TOP, R.id.customView);
// Uncomment these 2 lines to position the top left circle with translation.
imageView.setTranslationX(-circleSize / 2);
imageView.setTranslationY(-circleSize / 2);
// Uncomment these 3 lines to position the top left circle with margins.
// View customView = findViewById(R.id.customView);
// lp.leftMargin = customView.getLeft() - circleSize / 2;
// lp.topMargin = customView.getTop() - circleSize / 2;
((RelativeLayout) findViewById(R.id.relativeLayout)).addView(imageView, lp);
}
private int dpToPx(int dp) {
return (int) (dp * getResources().getDisplayMetrics().density);
}
private static final int CIRCLE_SIZE_DP = 20;
}
The code above uses a shortened layout:
activity_main.xml
<RelativeLayout
android:id="#+id/relativeLayout"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<RelativeLayout
android:id="#+id/customView"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_centerInParent="true"
android:background="#android:color/holo_green_light" />
</RelativeLayout>
It is also possible to produce the same positioning using margins. The code to use margins is commented out but will work. (I think that negative margins may also work, but I have read that they are not officially supported, so I try to avoid them.)
I have a simple button in my layout. Setting leftMargin to the view actually showing different results.
my_layout.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/left_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="hello pandora"/>
</RelativeLayout>
In my activity, I'm setting the leftMargin property to the Button.
Button leftBtn = (Button) findViewById(R.id.left_btn);
LayoutParams params = (LayoutParams) leftBtn.getLayoutParams();
params.leftMargin = 550;
If I set leftMargin as negative value or 0, its working fine, but If I set the value greater than the width of screen, it just resizing/compressing the button. I am expecting the button to go out of bounds like negative value.
I am expecting the button in the 3rd image to go out of bounds like the button in 1st image.
Please don't say to set the button layout_alignParentRight="true" in layout and rightMargin = -50in activity(this works) because I want to move the button from left to right.
I assume assigning a specific width larger than the screen size (eg. 1000 dp) to the parent RelativeLayout should solve your problem.
Also why do you want to make out-of-screen UI elements? What is the desired behaviour? Perhaps a transition animation would be better?
EDIT
I've tried the animation + storing the measured width of the Button. It seems to work.
Can you try this on GB?
MainActivity.java
public class MainActivity extends Activity {
final Context context = this;
Button mButton;
int mButtonWidth; // Measured width of Button
int amountToMove; // Amount to move the button in the x direction
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
amountToMove = 600;
mButton = (Button) findViewById(R.id.button);
// Measure Button's width
mButton.measure(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED);
mButtonWidth = mButton.getMeasuredWidth();
// Simple onClick listener showing a Toast
mButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Toast.makeText(context,"Hello Pandora clicked!",Toast.LENGTH_SHORT).show();
}
});
// Onclick listener for the other button
Button toggle = (Button) findViewById(R.id.toggle);
toggle.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// Animate the other button
TranslateAnimation a = new TranslateAnimation(0, amountToMove, 0, 0);
a.setDuration(1000);
// Finalize movement when animation ends
a.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationEnd(Animation animation) {
LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams)mButton.getLayoutParams();
// Restore measured width and change left margin
lp.width = mButtonWidth;
lp.leftMargin = lp.leftMargin + amountToMove;
mButton.setLayoutParams(lp);
amountToMove = -amountToMove;
}
#Override
public void onAnimationStart(Animation animation) { /* Do nothing */ }
#Override
public void onAnimationRepeat(Animation animation) { /* Do nothing */ }
});
mButton.startAnimation(a);
}
});
}
}
activity_main.xml
<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:orientation="vertical"
tools:context=".MainActivity">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello Pandora"
android:id="#+id/button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Move the other button"
android:id="#+id/toggle"/>
</LinearLayout>
EDIT 2
It works on a GB Emulator too (the Button gets clipped, is clickable).
u can use max line=1 to show complete text in one line on button when you use leftMargin = 550;
try this
<Button
android:id="#+id/left_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:maxLines="1"
android:text="hello pandora"/>
Hello Edit your button property like this,
android:layout_gravity="center_horizontal"
android:singleLine="true"
and change parent layout to frameLayout
In this project, I want to move TextView's clone from top TextView place to bottom TextView place when button is click.
I got a problem in using Translate Animation. I want to move a view to exact position(Like in Zapya).
In Zapya, when user select item and choose "send", the gridview item's clone move to user icon.
So, I use Translate Animation to move view. And I created a view dynamically to show item's clone.
Using Translate Animation works with view that is initially created in xml but not with view that is dynamically created.
The code is here
top = (TextView) findViewById(R.id.textviewtop);
bottom = (TextView) findViewById(R.id.textviewbottom);
button = (Button) findViewById(R.id.button);
button.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
int []from = new int[2];
int []to = new int[2];
from[0] = (int) top.getX();
from[1] = (int) top.getY();
to[0] = (int) bottom.getX();
to[1] = (int) bottom.getY();
ViewGroup vg = (ViewGroup) top.getParent();
view = new TextView(getApplicationContext());
view.setWidth(top.getWidth());
view.setHeight(top.getHeight());
view.setX(from[0]);
view.setY(from[1]);
view.setText(top.getText());
view.setVisibility(View.VISIBLE);
view.setTextColor(Color.BLACK);
view.setId(0x23454657);
vg.addView(view);
TranslateAnimation anim = new TranslateAnimation( 0, 0 , from[1], to[1] );
anim.setDuration(1000);
anim.setFillAfter( true );
view.startAnimation(anim);
}
});
and xml file
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/rl"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<TextView
android:id="#+id/textviewtop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"
android:text="#string/hello_world" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Move"/>
<TextView
android:id="#+id/textviewbottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:text="#string/hello_world" />
</RelativeLayout>
"view" show only starting and ending time. But not in between. How can I solve that.
Please tell if there's any other way. I will thanks a ton.
Increase the duration Time, may be that is a problem
anim.setDuration(4000);
I am new to Android Programming, what I am trying to do in this Android Application is to create a xml page filled with buttons.
When I click the button, the button would change to light green color and when I click it again, it would change to light grey
The error: I am getting is when I click the button, it increases in size and overlaps with the other buttons, please help me out here, it is not user friendly in this case
attached below is the code:
lockerbooking.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:id="#+id/sisButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="16dp"
android:layout_marginTop="28dp"
android:text="#string/sis"
/>
<Button
android:id="#+id/solButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/soeButton"
android:layout_alignBottom="#+id/soeButton"
android:layout_alignParentRight="true"
android:text="#string/sol" />
<Button
android:id="#+id/soeButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/sisButton"
android:layout_alignBottom="#+id/sisButton"
android:layout_centerHorizontal="true"
android:text="#string/soe" />
</RelativeLayout>
Code:
makeBooking.java
public class makeBooking extends Activity {
Button sisButton;
Button solButton;
Button soeButton;
Button sobButton;
super.onCreate(savedInstanceState);
// Get the message from the intent
setContentView(R.layout.lockerbookpage);
Intent intent = getIntent();
// Initialize TextViews
sisButton = (Button) findViewById(R.id.sisButton);
solButton = (Button) findViewById(R.id.solButton);
soeButton = (Button) findViewById(R.id.soeButton);
sobButton = (Button) findViewById(R.id.sobButton);
}
public OnClickListener solButtonListener = new OnClickListener(){
boolean flag = true;
public void onClick(View arg0) {
// TODO Auto-generated method stub
if(flag){
solButton.setBackgroundColor(Color.GREEN);
}
else{
solButton.setBackgroundColor(Color.LTGRAY);
}
flag=!flag;
}
};
...The code goes on
Please help me out here, I am eager to learn
to avoid overlapping of buttons, use fixed width and height for buttons:
change this:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
to some this like this:
android:layout_width="100dp" //what ever size suits your layout
android:layout_height="50dp" //fixing this,will not overlap the buttons
I have a transparent button image with white border and without label. I want to create a button which will have its label, its background transparent image and want to set a background color to button dynamically.
The transparent button image:
The Button should look like this after setting its button image with label and background color :
I have tried to implement this by using FrameLayout, TextView and Button. As in framelayout the first child will be textview and second will be button. Setting a transparent btn image to button and textview will have label and background color which has to set dynamically. I am almost able to do this but textview size should be little smaller than button image, this thing i have to calculate dynamically. currently textview background color sometimes goes outside the button and also round shape is not coming.
The xml:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="15dip" >
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textSize="20sp"
android:textColor="#FFFFFFFF"
android:id="#+id/btn_bacground"
android:gravity="center"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dip"
android:layout_marginRight="1dip"
android:layout_marginLeft="0dip" />
<Button
android:id="#+id/button_img"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#drawable/btn_transparent_img"/>
</FrameLayout>
Edit:
Setting the background color, size and label to Textview. background image to Button.
buttonClick = (Button) buttonClickFrame.findViewById(R.id.button_img);
buttonBg = (TextView) buttonClickFrame.findViewById(R.id.btn_bacground);
buttonBg.setBackgroundColor(Color.parseColor(BG_COLOR));
buttonBg.setText("Click");
buttonPhone.setBackgroundDrawable(getResources().getDrawable(R.drawable.btn_transparent_img));
setBackgroundDimentions(buttonClick, buttonBg);
buttonClick.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
onPhoneClick(v);
}
});
private void setBackgroundDimentions(Button btn, TextView bckView) {
final Button mBtn = btw;
final TextView mBckView = bckView;
ViewTreeObserver vto = mBtn.getViewTreeObserver();
vto.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
public boolean onPreDraw() {
int finalHeight = mBtn.getMeasuredHeight();
int finalWidth = mBtn.getMeasuredWidth();
mBckView.setWidth(finalWidth - 14);
mBckView.setHeight(finalHeight - 15);
return true;
}
});
}
Please suggest me how can i achieve this.
why don't you use Image Button.!
like this:
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/btn_transparent_img"
android:background="#000000"
/>
use imageButton
add your transparent image as src
change background colour according to your need
Refer this link for further help: