Develop Reference

Android: How to make Layout clickable when EditText is a child

I have a Relative Layout with an EditText and an ImageView inside it.
Under certain circumstances, I would like to make the whole layout clickable and not any of its children.
I added an OnClickListener on the layout. And I tried the following with the children:
1. setEnabled(false)
2. setClickable(false)
This works for the ImageView but even after the above changes, when I click on the area near the EditText, the keyboard comes up and I can see the cursor in the edit text.
Instead of that, I am hoping that all click/touch events go to the layout.
Could some one help?
Thanks

Yon create a CustomLayout class and override the onInterceptTouchEvent method. If that method returns true, the layout's childrens will not receive the touch event. You can create a member variable and a public setter to change the returning value.
CustomLayout class
public class CustomLayout extends LinearLayout {
//If set to false, the children are clickable. If set to true, they are not.
private boolean mDisableChildrenTouchEvents;
public CustomLayout(Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
mDisableChildrenTouchEvents = false;
}
#Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
return mDisableChildrenTouchEvents;
}
public void setDisableChildrenTouchEvents(boolean flag) {
mDisableChildrenTouchEvents = flag;
}
}
MainActivity
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
CustomLayout layout = findViewById(R.id.mylayout);
//Disable touch events in Children
layout.setDisableChildrenTouchEvents(true);
layout.setOnClickListener(v -> System.out.println("Layout clicked"));
}
}
XML Layout
<?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">
<com.example.dglozano.myapplication.CustomLayout
android:id="#+id/mylayout"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/outline"
android:clipChildren="true"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<EditText
android:id="#+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Enter email"
android:inputType="textEmailAddress"
android:layout_gravity="center"/>
</com.example.dglozano.myapplication.CustomLayout>
</android.support.constraint.ConstraintLayout>

sliding up panel - thin line sliding panel under google mapfragment

I made slidinguppanel using this repository https://github.com/dlukashev/AndroidSlidingUpPanel-foursquare-map-demo
However, it contains one bug which is not covered anywhere.
When I touch anywhere to expand panel (listview) works well, but while I'm trying to expand it by holding a top of a list view (blue line on screen2) panel hide under the map (framelayout) (screen3)
How it's even possible that this blue line hiding panel under mapfragment and rest of listview expand it well?
Any ideas why? Please give me just a hint how to fix it?
Please look at the screen:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<org.sothree.slidinguppanel.SlidingUpPanelLayout
android:id="#+id/slidingLayout"
android:gravity="bottom"
app:shadowHeight="0dp"
app:paralaxOffset="#dimen/paralax_offset"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<FrameLayout
android:gravity="top"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/button">
<RelativeLayout
android:id="#+id/mapContainer"
android:layout_width="fill_parent"
android:layout_height="497dp"/>
</FrameLayout>
<RelativeLayout
android:id="#+id/slidingContainer"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/button">
<View
android:id="#+id/transparentView"
android:visibility="gone"
android:layout_width="fill_parent"
android:layout_height="#dimen/map_height"
android:layout_alignParentTop="true"/>
<ListView
android:id="#+id/listView1"
android:cacheColorHint="#android:color/white"
android:drawSelectorOnTop="true"
android:dividerHeight="#dimen/divider_height"
android:divider="#android:color/darker_gray"
android:background="#android:color/transparent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#id/transparentView"
android:smoothScrollbar="true"
android:layout_marginTop="0dp"/>
</RelativeLayout>
</org.sothree.slidinguppanel.SlidingUpPanelLayout>
</RelativeLayout>

You need to override ListView
public class LockableListView extends ListView {
private boolean mScrollable = true;
public LockableListView(Context context) {
super(context);
}
public LockableListView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public LockableListView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public void setScrollingEnabled(boolean enabled) {
mScrollable = enabled;
}
#Override
public boolean onTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
// if we can scroll pass the event to the superclass
if (mScrollable) {
return super.onTouchEvent(ev);
}
// only continue to handle the touch event if scrolling enabled
return mScrollable; // mScrollable is always false at this point
default:
return super.onTouchEvent(ev);
}
}
#Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
// Don't do anything with intercepted touch events if
// we are not scrollable
if (!mScrollable) {
return false;
} else {
return super.onInterceptTouchEvent(ev);
}
}
}
Then put disable scrolling when needed
private void collapseMap() {
mSpaceView.setVisibility(View.VISIBLE);
mTransparentView.setVisibility(View.GONE);
if (mMap != null && mLocation != null) {
mMap.animateCamera(CameraUpdateFactory.newLatLngZoom(mLocation, 11f), 1000, null);
}
mListView.setScrollingEnabled(true);
}
private void expandMap() {
mSpaceView.setVisibility(View.GONE);
mTransparentView.setVisibility(View.INVISIBLE);
if (mMap != null) {
mMap.animateCamera(CameraUpdateFactory.zoomTo(14f), 1000, null);
}
mListView.setScrollingEnabled(false);
}
I pushed this changes to GitHub https://github.com/dlukashev/AndroidSlidingUpPanel-foursquare-map-demo/commit/7b869394e9d197e6f56a833804426577dcb8458a
Enjoy

ViewPager with fixed width childs

I need to design a ViewPager which able to pass childs with fixed width (e.g childs with 700dp width), Unfortunately the current version of ViewPager will automatically makes all childrens width to MATCH_PARENT, is there any way to add this functionality to ViewPager?
My ViewPager layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="#+id/some_id"
android:layout_width="match_parent"
android:layout_height="300dp"
android:overScrollMode="never" />
</LinearLayout>
ViewPager childs layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/banner_main_layout_container"
android:layout_width="700dp"
android:layout_height="match_parent"
android:background="#fff"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="some images"/>
</LinearLayout>
Thanks in Advance...

It is possible to scale the pages within the ViewPager with FragmentPagerAdapter.getPageWidth. You will need a custom FragmentPagerAdapter. If you return a number between 0 and 1, the pages are scaled down, width > 1 scales pages up accordingly. But this is not really good, because you can't scroll the image within the up-scaled page.
If you wrap the ImageView in a HorizontalScrollView, things are a bit better, you can scroll the images within pages, but the swipe gesture between pages is caught by the HorizontalScrollView if you are not very fast. See this video.
So the solution is truly to use a custom HorizontalScrollView (see InterceptingHorizontalScrollView) which disallows intercepting the onTouch event, but also allows it when the User scrolls to the end (See overidden onOverScrolled). See this video or the image below for the difference.
EDIT You don't need to override onInterceptTouchEvent, because HorizontalScrollView intercepts them by default (so scrolling the image has higher priority than paging.)
Finally, here's all the code:
MainActivity.java
public class MainActivity extends Activity {
private ViewPager mViewPager;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Set up the ViewPager
mViewPager = (ViewPager) findViewById(R.id.pager);
mViewPager.setPageMargin(30);
mViewPager.setAdapter(new ImagePagerAdapter(getFragmentManager()));
}
private class ImagePagerAdapter extends FragmentPagerAdapter {
public ImagePagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int i) {
switch(i) {
case 0:
return ImageFragment.newInstance(R.drawable.forest1);
case 1:
return ImageFragment.newInstance(R.drawable.forest2);
case 2:
return ImageFragment.newInstance(R.drawable.forest3);
default:
return ImageFragment.newInstance(R.drawable.ic_launcher);
}
}
#Override
public int getCount() {
return 3;
}
#Override
public float getPageWidth(int position)
{
// Here it is possible to scale page width
return super.getPageWidth(position);
}
}
}
activity_main.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"
tools:context=".MainActivity">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
ImageFragment.java
public class ImageFragment extends Fragment {
private static final String ARG_PARAM1 = "image_resid";
private int mImageResId;
public static ImageFragment newInstance(int image_resid) {
ImageFragment fragment = new ImageFragment();
Bundle args = new Bundle();
args.putInt(ARG_PARAM1, image_resid);
fragment.setArguments(args);
return fragment;
}
public ImageFragment() {
// Required empty public constructor
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (getArguments() != null) {
mImageResId = getArguments().getInt(ARG_PARAM1);
}
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.fragment_image, container, false);
ImageView imageView = (ImageView)v.findViewById(R.id.imageView);
imageView.setImageResource(mImageResId);
return v;
}
}
fragment_image.xml
<com.gyebro.viewpagertest.InterceptingHorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="600dp"
android:layout_height="match_parent"
tools:context="com.gyebro.viewpagertest.ImageFragment">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:id="#+id/imageView"
android:src="#drawable/forest1" />
</com.gyebro.viewpagertest.InterceptingHorizontalScrollView>
InterceptingHorizontalScrollView.java
public class InterceptingHorizontalScrollView extends HorizontalScrollView {
public InterceptingHorizontalScrollView(Context context) {
super(context);
}
public InterceptingHorizontalScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public InterceptingHorizontalScrollView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
/*#Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
if (getParent() != null) {
switch (ev.getAction()) {
case MotionEvent.ACTION_MOVE:
getParent().requestDisallowInterceptTouchEvent(true);
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
getParent().requestDisallowInterceptTouchEvent(false);
break;
}
}
return super.onInterceptTouchEvent(ev);
}*/
#Override
protected void onOverScrolled (int scrollX, int scrollY, boolean clampedX, boolean clampedY) {
super.onOverScrolled(scrollX,scrollY,clampedX,clampedY);
// if clampedX == true, we've reached the end of the HorizontalScrollView so
// allow parent to intercept
if(clampedX) {
Log.d("InterceptingHorizontalScrollView", "Reached the end, allowing interception");
getParent().requestDisallowInterceptTouchEvent(false);
}
}
}

What you really want here is a HorizontalScrollView inside of a ViewPager. This requires custom touch handling, so you'll want to use something like this class: InterceptingHorizontalScrollView
To make InterceptingHorizontalScrollView work in a ViewPager, you'll have to override onOverScrolled:
#Override
protected void onOverScrolled (int scrollX, int scrollY, boolean clampedX, boolean clampedY) {
super.onOverScrolled(scrollX,scrollY,clampedX,clampedY);
if(clampedX) {
getParent().requestDisallowInterceptTouchEvent(false);
}
}
Thanks to Gyebro for this tip.^
Your ViewPager child layout would look like this:
<com.tumblr.widget.InterceptingHorizontalScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/banner_main_layout_container"
android:layout_width="700dp"
android:layout_height="match_parent"
android:background="#fff"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="some images"/>
</LinearLayout>
</com.tumblr.widget.InterceptingHorizontalScrollView>

You can either override PagerAdapter´s getWidth method and if this does not help, look at this:
http://commonsware.com/blog/2012/08/20/multiple-view-viewpager-options.html
and most importantly try this example, it works great!
Just go along the whole example.

The ViewPager children will/should always match it's parent width.
Furthermore it sounds like a bad idea to use a 700dp width ImageView. What would that look like in portrait mode?
If you don't want to make the ViewPager itself smaller, i.e. you want the ImageViews to be swiped from the absolute side of the screen, you have to make the items appear smaller.
That imitation could be done by creating 2 additional LinearLayouts to act as spacers. Then it would appear as if your item has a specific width.
Here's an example (with a TextView):
<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="horizontal">
<LinearLayout
android:background="#FFF"
android:layout_weight="3"
android:layout_width="0dp"
android:layout_height="match_parent"/>
<TextView
android:layout_weight="10"
android:background="#333"
android:textColor="#FFF"
android:textSize="50sp"
android:gravity="center"
android:text="HELLO"
android:layout_width="0dp"
android:layout_height="match_parent" />
<LinearLayout
android:background="#FFF"
android:layout_weight="3"
android:layout_width="0dp"
android:layout_height="match_parent"/>
</LinearLayout>
And that would look like this:

Set the page margin of the view pager to a negative value. This will force the pages to push into the the view pager. Be warned, it will also cause overlap so you'll see part of the next/previous element in the view pager.

Button not clickable in custom LinearLayout

I have a custom view that contain a framelayout. This framelayout contain two views (LinearLayout) that can be swipe. If I swipe the first one, the second one appears and vice versa. One of those views has a button but I don't know why, this button is like disable. I cannot click on it and the onClick method has no effect.
Here the structure of the layout xml inflated in the custom view :
<FrameLayout>
<LinearLayout
android:id="#+id/frontview"
/>
<LinearLayout
android:id="#+id/backview">
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/ButtonUpdate"
android:text="#string/bUpdate"
android:padding="5dp"
android:clickable="true"
style="?android:attr/borderlessButtonStyle"
/>
</LinearLayout>
</FrameLayout>
Here the code in my custom view :
public class mView extends LinearLayout {
ImageView icon;
TextView current_data;
TextView previous_data;
TextView time ;
Button bUpdate;
EditText TextUpdate;
public mView(Context context) {
super(context);
init(context);
}
public mView(Context context, AttributeSet attrs) {
super(context,attrs);
init(context);
}
public mView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(context);
}
#Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
// nothing
}
}
public void init(Context pContext) {
LayoutInflater inflater = (LayoutInflater) pContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View ll = inflater.inflate(R.layout.list_item_data, this, true);
/** We initialize the elements of our UI **/
/**
* First View
*/
icon= (ImageView) ll.findViewById(R.id.ic_icon);
current_data = ll.(TextView) findViewById(R.id.current_data);
previous_data = ll.(TextView) findViewById(R.id.previous_data);
time = (TextView) ll.findViewById(R.id.time);
/**
* Second View
*/
bUpdate = (Button) ll.findViewById(R.id.ButtonUpdate);
TextUpdate= (EditText) ll.findViewById(R.id.TextUpdate);
bUpdate.setOnClickListener(new bUpdateClickListener());
}
private class bUpdateClickListener implements OnClickListener {
#Override
public void onClick(View v) {
// When the button is clicked, the front view re-appears and the backview disappears
frontview
.animate()
.translationX(0);
backview
.animate()
.translationX(-backview.getMeasuredWidth());
}
}
The swipe is correctly handle with onInterceptTouchEvent(MotionEvent ev) and onTouchEvent(MotionEvent ev).
Here the main.xml used in MyActivity :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#f6f6f6">
<TextView
android:id="#+id/infoimc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="18dp"
android:layout_marginTop="8dp"
android:text="#string/app_name"
android:textColor="#000000"
android:textSize="16dp"/>
<View
android:id="#+id/divider_infoimc"
android:layout_width="match_parent"
android:layout_height="1dip"
android:layout_marginRight="18dp"
android:layout_marginLeft="18dp"
android:background="#99CC00"/>
<com.example.essai.CustomGraph
android:id="#+id/CustomGraph"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_gravity="center"
android:visibility="visible"
android:layout_marginTop="10dp"/>
</LinearLayout>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_gravity="left|center_vertical">
<com.example.essai.mView
android:id="#+id/CustomView"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</FrameLayout>
</LinearLayout>
And MyActivity.class :
public class MyActivity extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}
I don't know if the button must be handle also in the Activity ?
Thanks for your help !

The root cause
According to API:
FrameLayout is designed to block out an area on the screen to display
a single item.
If there is more items, like in your case, then "unexpected" things will happen:
Child views are drawn in a stack, with the most recently added child
on top.
This means, your frontview is on top of your backview and since the frontview doesn't have android:clickable="true" the click events (on button) are not delegated below.
Solution 1
Reorder the child-layout gravity programmatically.
You can, however, add multiple children to a FrameLayout and control
their position within the FrameLayout by assigning gravity to each
child, using the android:layout_gravity attribute.
Just switch the android:layout_gravity="top" and android:layout_gravity="bottom" whenever you are sliding them.
Solution 2
Control the visibility of the child-layouts programmatically.
When the backview should be displayed, set the visibility of the frontview to View.GONE. And set it to View.VISIBLE in the reversed case.
Solution 3
Change FrameLayout to a different layout type.
Could require more "fiddling" with layout xmls...
See what you're familliar with the most and choose the solution accordingly :)

How to implement Custom View as part of MVC?

So I'm experimenting with implementing an MVC pattern in Android where my views are subclassed from RelativeLayout, LinearLayout, ScrollView, etc... It's working until I try to get a hold of a view within my view. I get an NPE. I've tried accessing the view in order to set the onClickListener in the constructor and also in onAttachedToWindow(), but I get the NPE in both places.
For example, here's a view class:
public class ViewAchievements extends LinearLayout
{
private RelativeLayout mRelativeLayoutAchievement1;
public ViewAchievements(Context context, AttributeSet attrs)
{
super(context, attrs);
mRelativeLayoutAchievement1 = (RelativeLayout) findViewById(R.id.relativeLayout_achievement1);
mRelativeLayoutAchievement1.setOnClickListener((OnClickListener) context); //NPE on this line
}
#Override
protected void onAttachedToWindow()
{
super.onAttachedToWindow();
mRelativeLayoutAchievement1.setOnClickListener(mOnClickListener); //Also get NPE on this line
}
}
Can someone please tell me the proper way to get a hold of my subviews, in this case mRelativeLayoutAchievement1?
Here's an XML snippet:
<com.beachbody.p90x.achievements.ViewAchievements xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/gray_very_dark"
android:orientation="vertical" >
<!-- kv Row 1 -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="1"
android:baselineAligned="false">
<RelativeLayout
android:id="#+id/relativeLayout_achievement1"
style="#style/linearLayout_achievement"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_margin="#dimen/margin_sm"
android:layout_weight="1" >
<TextView
android:id="#+id/textView_achievement1"
style="#style/text_small_bold_gray"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="#dimen/margin_large"
android:text="1/20" />
</RelativeLayout>
...
And here's how I'm creating the view from my Activity:
public class ActivityAchievements extends ActivitySlidingMenu
{
private ViewAchievements mViewAchievements;
#Override
public void onCreate(Bundle savedInstanceState)
{
mViewAchievements = (ViewAchievements) View.inflate(this, R.layout.view_achievements, null);
setContentView(mViewAchievements);
...

You're trying to get the child views during the view's constructor. Since they are child views, they haven't been inflated yet. Can you move this code out of the constructor, possibly into View.onAttachedToWindow()?
http://developer.android.com/reference/android/view/View.html#onAttachedToWindow()