Develop Reference

Android FloatingActionButton onclick is just on background and not main button

Hey all this is driving me crazy. Been at this for hours without any luck.
What I am trying to do is detect when the user clicks on the main floatingActionButton to open it and of course when they click on it to close.
My XML:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:fab="http://schemas.android.com/apk/res-auto"
android:id="#+id/theVideo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/background_dark"
android:orientation="horizontal">
[More XML here]
<com.github.clans.fab.FloatingActionMenu
android:id="#+id/floatingBtnMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:paddingStart="890dp"
android:paddingLeft="890dp"
android:paddingRight="50dp"
android:paddingBottom="30dp"
android:elevation="3dp"
app:elevation="3dp"
fab:menu_backgroundColor="#ccffffff"
fab:menu_labels_ellipsize="end"
fab:menu_labels_position="left"
fab:menu_labels_singleLine="true">
<com.github.clans.fab.FloatingActionButton
android:id="#+id/floatingBtnCloseVid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:fab_label="Close Video"
fab:fab_size="normal" />
<com.github.clans.fab.FloatingActionButton
android:id="#+id/floatingBtnPausePlay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="center"
app:backgroundTint="#3BFD6A"
app:fab_colorNormal="#3BFD6A"
fab:fab_colorRipple="#faff99"
fab:fab_label="Pause Video"
fab:fab_shadowColor="#66000000"
fab:fab_showShadow="true"
fab:fab_size="normal"
fab:menu_labels_colorRipple="#faff99"
fab:menu_labels_showShadow="true"
fab:menu_labels_singleLine="true" />
<com.github.clans.fab.FloatingActionButton
android:id="#+id/floatingBtnVolumeUp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:fab_label="Skip Forward"
fab:fab_size="normal" />
<com.github.clans.fab.FloatingActionButton
android:id="#+id/floatingBtnVolumeDown"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:fab_label="Skip Back"
fab:fab_size="normal" />
</com.github.clans.fab.FloatingActionMenu>
[More XML here]
</RelativeLayout>
And my Java code:
#Nullable
#Override
public View onCreateView(LayoutInflater inflater, #Nullable ViewGroup container, #Nullable Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout._fragvideoplay, container, false);
vidView = (VideoView)rootView.findViewById(R.id.videoView);
String path = "android.resource://" + BuildConfig.APPLICATION_ID + "/raw/" + passMP4Name;
vidView.setVideoURI(Uri.parse(path));
sBar = (SeekBar) rootView.findViewById(R.id.seekBar);
TextView tw = (TextView) rootView.findViewById(R.id.timeLeft);
final FloatingActionMenu floatingBtnMenu = (FloatingActionMenu) rootView.findViewById(R.id.floatingBtnMain);
final FloatingActionButton closeVid = (FloatingActionButton) rootView.findViewById(R.id.floatingBtnCloseVid);
final FloatingActionButton pausePlayVid = (FloatingActionButton) rootView.findViewById(R.id.floatingBtnPausePlay);
final FloatingActionButton floatingBtnVolumeUp = (FloatingActionButton) rootView.findViewById(R.id.floatingBtnVolumeUp);
final FloatingActionButton floatingBtnVolumeDown = (FloatingActionButton) rootView.findViewById(R.id.floatingBtnVolumeDown);
try {
pausePlayVid.setImageDrawable(Drawable.createFromStream(
getResources().getAssets().open("icons/pause.png"),
null
));
closeVid.setImageDrawable(Drawable.createFromStream(getResources().getAssets()
.open("icons/closeVid.png"),null
));
} catch (IOException e) {
e.printStackTrace();
}
floatingBtnMenu.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
//This only fires if I click anywhere on the screen
Log.d("tesing", "was clicked");
}
});
closeVid.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
_stop();
floatingBtnMenu.toggle(true);
}
});
[more code here]
return rootView;
}
As my comment in my code says, the only time the onClick() fires off is when I click on any part of the screen. When I just click on the main floatingActionButton it never fires off that onClick()). The same goes with clicking it again to close it.
So what am I missing? Why does the onClick() only fire on the whole fragment and not just on the floatingActionButton itself?

The reason this is happening I believe is because of how your XML is set up, let's take a look at this part of the code here.
<com.github.clans.fab.FloatingActionMenu
android:id="#+id/floatingBtnMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:paddingStart="890dp"
android:paddingLeft="890dp"
android:paddingRight="50dp"
android:paddingBottom="30dp"
android:elevation="3dp"
app:elevation="3dp"
fab:menu_backgroundColor="#ccffffff"
fab:menu_labels_ellipsize="end"
fab:menu_labels_position="left"
fab:menu_labels_singleLine="true">
If you focus here, on how the width and height is setup:
android:layout_width="match_parent"
android:layout_height="match_parent"
As you can see your width and height is set to match_parent which in turns means it is covering the full screen.
That is when you click on the full screen, it acts up. I suggest you take another look at this and maybe change it to wrap_content instead or however you want to set it up.

Cannot set a click listener for the button that is first outside of the screen (and then animates inside)

I am trying to recreate the edit behavior of iOS list in Android using a RecyclerView. This is the result I want to get (without the delete button):
I don't need the edit button in this context and I am assuming that the little red circle on the left side is always there. When you click the red round button, a rectangle delete button should slide from the right, pushing the row to the left.
What I tried to do was to have a horizontal LinearLayout that is hosting two children. One is a ConstraintLayout that has the main layout of each row and its width is set to match_parent so that it take all the screen width. The other child is the delete button with the width of 130dp which will be outside the screen by default.
Here's the code to the layout file:
<FrameLayout 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="wrap_content"
android:clipChildren="false">
<LinearLayout
android:id="#+id/root_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:clipChildren="false">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="9dp"
android:layout_marginTop="9dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageButton
android:id="#+id/remove_circle_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_remove_circle"
android:background="#null"/>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/remove_circle_button"
app:layout_constraintTop_toTopOf="parent"
tools:text="some text" />
</android.support.constraint.ConstraintLayout>
<Button
android:id="#+id/remove_main_button"
style="?android:borderlessButtonStyle"
android:layout_width="130dp"
android:layout_height="match_parent"
android:background="#color/red"
android:stateListAnimator="#null"
android:text="Delete"
android:textColor="#color/white" />
</LinearLayout>
</FrameLayout>
My logic is that when the user clicks the circular red button, the linear layout will animate 130dp to the left making the red button visible while the rest of the row is pushed to the left. Visually it looks good enough for the requirement we have.
Here's the code to the RecyclerView adapter that I wrote:
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {
private Context mContext;
private List<String> mStrings;
private SparseBooleanArray mHasDeleteButtonPressed;
public RecyclerViewAdapter(Context context, List<String> strings) {
this.mContext = context;
this.mStrings = strings;
}
#NonNull
#Override
public ViewHolder onCreateViewHolder(#NonNull ViewGroup parent, int viewType) {
View row = LayoutInflater.from(mContext).inflate(R.layout.rv_item, parent, false);
return new ViewHolder(row);
}
#Override
public void onBindViewHolder(#NonNull final ViewHolder holder, int position) {
String value = mStrings.get(position);
holder.textView.setText(value);
holder.smallDeleteButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
holder.rootLayout.animate().translationX(
-1 * holder.mainDeleteButton.getWidth())
.setDuration(300)
.start();
mHasDeleteButtonPressed.put(holder.getAdapterPosition(), false);
}
});
holder.mainDeleteButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Toast.makeText(mContext, "clicked", Toast.LENGTH_LONG).show();
}
});
}
#Override
public int getItemCount() {
return mStrings.size();
}
static class ViewHolder extends RecyclerView.ViewHolder {
LinearLayout rootLayout;
TextView textView;
ImageButton smallDeleteButton;
Button mainDeleteButton;
ViewHolder(View itemView) {
super(itemView);
rootLayout = (LinearLayout) itemView.findViewById(R.id.root_layout);
textView = (TextView) itemView.findViewById(R.id.time_textView);
smallDeleteButton = (ImageButton) itemView.findViewById(R.id.remove_circle_button);
mainDeleteButton = (Button) itemView.findViewById(R.id.remove_main_button);
}
}
}
The boolean array is to know which button of each row was clicked so that we can animate back the delete button if the user decided they didn't want to delete that row.
Theoretically, with this code the delete button should be pressed and a toast should be shown stating that the button was clicked. However, it appears that the OnClickListener is not being set at all and no code inside the onClick method is being called. My suspicion is that since the button is outside the screen at first, and we are forcing the view not to clip it (using android:clipChildren="false" in the xml file), the setOnClickListener method is not working. Because when I rearrange the layout in a way that the Delete button is inside the screen, the adapter code above will work without any changes.
So how can I fix my problem? I don't want to use any external libraries and I want to do this in a RecyclerView.
Thanks in advance

This is an interesting problem. I can't say what is really going on, but the button that you are sliding onto the screen is being defined outside the bounds of the screen and never really gets onto the screen although it appears to. It's hit rectangle is defined off the screen so the button never gets clicked.
My solution is to first simplify the layout for the RecyclerView items as follows:
activity_main.xml
I have changed a few things such as the button color, etc. for my own ease of use, but they have no bearing on the solution.
<android.support.constraint.ConstraintLayout
android:id="#+id/root_layout"
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_marginBottom="9dp"
android:layout_marginTop="9dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageButton
android:id="#+id/remove_circle_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:background="#null"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/circle_button" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:text="some text"
android:textColor="#color/colorPrimary"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/remove_circle_button"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/remove_main_button"
style="?android:borderlessButtonStyle"
android:layout_width="130dp"
android:layout_height="0dp"
android:background="#android:color/holo_blue_light"
android:stateListAnimator="#null"
android:text="Delete"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
This layout will show the button on screen. In the activity, the layout will be given a specified width that is the width of the screen plus the width of the button. This re-dimensioning of the layout will move the button off-screen. Code can then do a translation to move it back onto the screen.
MainActivity.java
public class MainActivity extends AppCompatActivity {
private View rootLayout;
private View mainDeleteButton;
private View circleButton;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
rootLayout = findViewById(R.id.root_layout);
mainDeleteButton = findViewById(R.id.remove_main_button);
circleButton = findViewById(R.id.remove_circle_button);
rootLayout.post(new Runnable() {
#Override
public void run() {
rootLayout.getLayoutParams().width = rootLayout.getWidth() + mainDeleteButton.getWidth();
rootLayout.requestLayout();
}
});
circleButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
rootLayout.animate().translationX(
-1 * mainDeleteButton.getWidth())
.setDuration(300)
.start();
}
});
mainDeleteButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "clicked", Toast.LENGTH_SHORT).show();
}
});
}
}
Here is the effect:
Although this example does not involve a RecyclerView, the technique can be applied to a RecyclerView.

Android Toolbar with Avatar and Name clickable

I am looking for a way to create a Toolbar likes a lot of apps with name and a photo.
I need to allow touch, if user touchs the area near the name or the image it will change activity.
Example:

You just need to put the ImageView and TextView inside your Toolbar, he is just a ViewGroup. For example:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="#dimen/abc_action_bar_default_height_material">
<LinearLayout
android:id="#+id/linearlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/your_image_description"
android:src="#drawable/your_image"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/your_string" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
After that, you can set the click event on your activity:
LinearLayout linearLayout = (LinearLayout) findViewById(R.id.linearlayout);
linearLayout.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
Toast.makeText(MainActivity.this, "teste", Toast.LENGTH_LONG).show();
}
});
Run on the emulator to see the result:
Hope this helps.

OnClick for navigation drawer header not working

I have a navigation drawer in my app which contains a header and some list items. The header has a textview which i want to make clickable but I am not able to do it.
To get the id of this textview I used the following code, since it is in a different layout file compared to the one in the setContentView in onCreate.
final LayoutInflater factory = getLayoutInflater();
final View textEntryView = factory.inflate(R.layout.header, null);
TextView home = (TextView) textEntryView.findViewById(R.id.home);
home.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Toast.makeText(curr_context, "SHOW", Toast.LENGTH_LONG).show();
}
});
header.xml contains the header of the navigation drawer. It has an item named home. I need to make it clickable. The above code is in the onCreate method.

For me other Answers didn't work.
I have tried the below code.
I know it's too late. Hope this will help some.
What I did to access the view of header.
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
View headerview = navigationView.getHeaderView(0);
TextView profilename = (TextView) headerview.findViewById(R.id.prof_username);
profilename.setText("your name")
for clicking the views of header, here I have used a linearlayout of headerview
LinearLayout header = (LinearLayout) headerview.findViewById(R.id.header);
header.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Toast.makeText(HomeActivity.this, "clicked", Toast.LENGTH_SHORT).show();
drawer.closeDrawer(GravityCompat.START);
}
});
Or
headerview.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// Your code here
}
});

Don't forget to define android:clickable="true" in your TextView xml.

i know its late this is for those who facing the same problem.
place your header layout in the navigation view like this
this is in activity_main.xml
<android.support.design.widget.NavigationView
android:id="#+id/navigationView"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:layout_marginTop="-24dp"
app:itemTextColor="#color/black"
app:headerLayout="#layout/layout_header_profile"
app:menu="#menu/nav_menu"/>
create a layout, name it layout_header_profile.xml and put the fill it what ever view you want.
layout_header_profile.xml
<?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="178dp"
android:orientation="vertical"
android:weightSum="1"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:orientation="vertical">
<TextView
android:id="#+id/id_user_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:text="Irfan"
android:textSize="14sp"
android:textStyle="bold"
/>
<TextView
android:id="#+id/id_user_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginTop="5dp"
android:text="Irfan55121#gmail.com"
android:textSize="14sp"
android:textStyle="normal"
/>
</LinearLayout>
<ImageView
android:id="#+id/id_profile_image"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="38dp"
android:src="#mipmap/ic_profile_pic"
/>
</RelativeLayout>
then this header layout file will be in your activity_main.xml only
so in your MainActivity.java you can declare it as you do views from activity_main.xml and perform actions on it, no special code required.
do like this in your onCreate()
TextView tvUserName = (TextView) findViewById(R.id.id_user_name);
tvUserName.setText("My Name");
tvUserName.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Toast.makeText(getBaseContext(),"clicking textview",Toast.LENGTH_LONG).show();
}
});
Hope it works Happy coding.

Try like this
navigationView.getHeaderView(0).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// your code here.....
}
});

just add this to your header layout Xml file
android:focusable="true"
android:focusableInTouchMode="true"
android:clickable="true"

First fetch header view
View headerView = navigationView.getHeaderView(0);
And then use onClick Listener
headerView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
// code
}
});

setting layouts visiblity on button click event

I am new to android and i am unable to solve my simple problem.I have a parent Tablelayout and inside it i have two tablelayouts with ids tbl1 and tbl2 respectively in my xml file.In tbl1 layout i have three textviews and three edittext controls similarly i have some views in tbl2 layout.Now i want that my tbl1 layout is visible when my activity starts but on click of my button2 which is in tbl1 layout my tablelayout tbl1 gets invisible and my tablelayout tbl2 becomes visible.Actually i know i can achieve this in asp.net with the help of panels but in android i am not able to achieve the same thing.Please help

You are going to want to look at the setVisibility() method. In the on click listeners for button 2, put the following;
Button.setVisibility(View.INVISIBLE)
TextView.setVisibility(View.INVISIBLE)
etc...
This will make the views invisible, but they will still take up space. If you don't want them to take up space you should use
setVisibility(Veiw.GONE);
Finally, to make you buttons and textview and edittexts in the second table, appear, you need to do the following;
setVisibility(View.VISIBLE);

Java Code:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.visibility_1);
// Find the view whose visibility will change
mVictim = findViewById(R.id.victim);
// Find our buttons
Button visibleButton = (Button) findViewById(R.id.vis);
Button invisibleButton = (Button) findViewById(R.id.invis);
Button goneButton = (Button) findViewById(R.id.gone);
// Wire each button to a click listener
visibleButton.setOnClickListener(mVisibleListener);
invisibleButton.setOnClickListener(mInvisibleListener);
goneButton.setOnClickListener(mGoneListener);
}
OnClickListener mVisibleListener = new OnClickListener() {
public void onClick(View v) {
mVictim.setVisibility(View.VISIBLE);
}
};
OnClickListener mInvisibleListener = new OnClickListener() {
public void onClick(View v) {
mVictim.setVisibility(View.INVISIBLE);
}
};
OnClickListener mGoneListener = new OnClickListener() {
public void onClick(View v) {
mVictim.setVisibility(View.GONE);
}
};
}
XML Code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:background="#drawable/box"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:background="#drawable/red"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/visibility_1_view_1"/>
<TextView android:id="#+id/victim"
android:background="#drawable/green"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/visibility_1_view_2"/>
<TextView
android:background="#drawable/blue"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/visibility_1_view_3"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button android:id="#+id/vis"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/visibility_1_vis"/>
<Button android:id="#+id/invis"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/visibility_1_invis"/>
<Button android:id="#+id/gone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/visibility_1_gone"/>
</LinearLayout>
</LinearLayout>