Android click on view above the view

Question

I have tab Layout with dynamically added custom tabs (Image View + Text View)

I want to change image on select tab and on reselect (2 kind of images)

But there is no click event listeners on Tab, so I added transparent layout to catch clicks.

How do I need to change settings, to make 4 Linear Layouts clickable?

The code:

<RelativeLayout
    android:id="@+id/layout_sort_bar_fc"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_alignParentBottom="true">

        <android.support.design.widget.TabLayout
            android:id="@+id/sort_bar_fc"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:clickable="false"
            android:focusable="false"
            android:focusableInTouchMode="false"
            app:tabMaxWidth="0dp"
            app:tabGravity="fill"
            app:tabMode="fixed"
            app:tabBackground="@color/colorPrimary"
            app:tabIndicatorColor="#f00"
            app:tabSelectedTextColor="@color/white_text"
            app:tabTextColor="@color/colorPrimaryDark"/>

        <LinearLayout
            android:id="@+id/tab_listenter"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <LinearLayout
                android:id="@+id/dummy_tab_name"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0"
                android:clickable="true"
                android:orientation="horizontal"></LinearLayout>

            <LinearLayout
                android:id="@+id/dummy_tab_rate"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0"
                android:orientation="horizontal"></LinearLayout>

            <LinearLayout
                android:id="@+id/dummy_tab_change"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0"
                android:orientation="horizontal"></LinearLayout>

            <LinearLayout
                android:id="@+id/dummy_tab_24h"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0"
                android:orientation="horizontal"></LinearLayout>

        </LinearLayout>


    </RelativeLayout>

score 0 · Answer 1 · answered Sep 28 '17 at 14:20

0

the following answer deals with somewhat the same question and the answer marked as solution is what you're looking for, it explains how to define and use selectors

answered Sep 28 '17 at 14:20

Fminus

61
3

score 0 · Answer 2 · answered Nov 20 '17 at 10:00

Well, you can change image on a selected tab by two method which you need to create in Custom Pager Adapter and call it from tab selected listener.

"MainActivity"

public class MainActivity extends AppCompatActivity {
    TabLayout tabLayout;
    ViewPager viewPager;
    ViewPagerAdapter adapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        viewPager = (ViewPager) findViewById(R.id.viewpager);


        tabLayout = (TabLayout) findViewById(R.id.tabs);

        createViewPager(viewPager);

        tabLayout.setupWithViewPager(viewPager);

        createTabIcons();

        adapter.SetOnSelectView(tabLayout,0);
        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {

                int c = tab.getPosition();
                adapter.SetOnSelectView(tabLayout,c);

            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                int c = tab.getPosition();
                adapter.SetUnSelectView(tabLayout,c);
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });


        for (int i = 0; i < tabLayout.getTabCount() - 1; i++) {
            View tab = ((ViewGroup) tabLayout.getChildAt(0)).getChildAt(i);
            ViewGroup.MarginLayoutParams p = (ViewGroup.MarginLayoutParams) tab.getLayoutParams();
            p.setMargins(0, 0, 10, 0);
            tab.requestLayout();
        }


    }


    private void createTabIcons() {
        try {
            View tabOne = LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
            TextView textView = tabOne.findViewById(R.id.tab);
            ImageView imgViewTabIcon = tabOne.findViewById(R.id.imgViewTabIcon);
            imgViewTabIcon.setImageResource(R.drawable.img_11);
            textView.setText("A");
            tabLayout.getTabAt(0).setCustomView(tabOne);


            View tabTwo = LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
            TextView textView1 = tabTwo.findViewById(R.id.imgViewTabIcon);
            textView1.setText("B");
            ImageView imgViewTabIcon1 = tabTwo.findViewById(R.id.imgViewTabIcon);
            imgViewTabIcon1.setImageResource(R.drawable.img_22);
            tabLayout.getTabAt(1).setCustomView(tabTwo);


            View tabThree = LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
            TextView textView2 = tabThree.findViewById(R.id.tab);
            textView2.setText("C");
            ImageView imgViewTabIcon2 = tabThree.findViewById(R.id.imgViewTabIcon);
            imgViewTabIcon2.setImageResource(R.drawable.img_33);
            tabLayout.getTabAt(2).setCustomView(tabThree);

            View tabFour = LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
            TextView textView3 = tabFour.findViewById(R.id.tab);
            textView3.setText("D");
            ImageView imgViewTabIcon3 = tabFour.findViewById(R.id.imgViewTabIcon);
            imgViewTabIcon3.setImageResource(R.drawable.img_33);
            tabLayout.getTabAt(3).setCustomView(tabFour);

        } catch (Exception e) {
            e.printStackTrace();
        }
    }


    private void createViewPager(ViewPager viewPager) {
        adapter = new ViewPagerAdapter(getSupportFragmentManager(),HomeActivity.this);
        adapter.addFrag(new A(), "A");
        adapter.addFrag(new B(), "B");
        adapter.addFrag(new C(), "C");
        adapter.addFrag(new D(), "D");
        viewPager.setAdapter(adapter);
    }
}

"Custom PagerAdapter"

public class ViewPagerAdapter extends FragmentPagerAdapter {
    private final List<Fragment> mFragmentList = new ArrayList<>();
    private final List<String> mFragmentTitleList = new ArrayList<>();
    private Context mContext;

    public ViewPagerAdapter(FragmentManager manager, Context context) {
        super(manager);
        mContext=context;
    }

    @Override
    public Fragment getItem(int position) {
        return mFragmentList.get(position);
    }

    @Override
    public int getCount() {
        return mFragmentList.size();
    }

    public void addFrag(Fragment fragment, String title) {
        mFragmentList.add(fragment);
        mFragmentTitleList.add(title);
    }


    public int dpToPx(int dp) {
        DisplayMetrics displayMetrics = mContext.getResources().getDisplayMetrics();
        return Math.round(dp * (displayMetrics.xdpi / DisplayMetrics.DENSITY_DEFAULT));
    }

  public void SetOnSelectView(TabLayout tabLayout, int position)
    {

        TabLayout.Tab tab = tabLayout.getTabAt(position);
        View selected = tab.getCustomView();
        TextView textView = (TextView) selected.findViewById(R.id.tab);

        textView.setTextColor(mContext.getResources().getColor(R.color.colorPrimary));

        ImageView imgViewTabIcon = selected.findViewById(R.id.imgViewTabIcon);

        int height = dpToPx(35);

        if(textView.getText().toString().equals("tab1")){
            BitmapDrawable bitmapdraw = (BitmapDrawable) mContext.getResources().getDrawable(R.drawable.img_1);
            Bitmap b = bitmapdraw.getBitmap();
            Bitmap smallMarker = Bitmap.createScaledBitmap(b, height, height, false);
            imgViewTabIcon.setImageBitmap(smallMarker);
        }else if(textView.getText().toString().equals("tab2")){
            BitmapDrawable bitmapdraw = (BitmapDrawable) mContext.getResources().getDrawable(R.drawable.img_2);
            Bitmap b = bitmapdraw.getBitmap();
            Bitmap smallMarker = Bitmap.createScaledBitmap(b, height, height, false);
            imgViewTabIcon.setImageBitmap(smallMarker);
        }else if(textView.getText().toString().equals("tab3")){
            BitmapDrawable bitmapdraw = (BitmapDrawable) mContext.getResources().getDrawable(R.drawable.img_3);
            Bitmap b = bitmapdraw.getBitmap();
            Bitmap smallMarker = Bitmap.createScaledBitmap(b, height, height, false);
            imgViewTabIcon.setImageBitmap(smallMarker);
        }
        else {
            BitmapDrawable bitmapdraw = (BitmapDrawable) mContext.getResources().getDrawable(R.drawable.img_4);
            Bitmap b = bitmapdraw.getBitmap();
            Bitmap smallMarker = Bitmap.createScaledBitmap(b, height, height, false);
            imgViewTabIcon.setImageBitmap(smallMarker);
        }
    }

    public void SetUnSelectView(TabLayout tabLayout,int position) {

        TabLayout.Tab tab = tabLayout.getTabAt(position);
        View selected = tab.getCustomView();
        TextView textView = (TextView) selected.findViewById(R.id.tab);

        textView.setTextColor(mContext.getResources().getColor(R.color.white));

        ImageView imgViewTabIcon = selected.findViewById(R.id.imgViewTabIcon);

        if(textView.getText().toString().equals("tab1")){
            imgViewTabIcon.setImageResource(R.drawable.img_11);
        }else if(textView.getText().toString().equals("tab2")){
            imgViewTabIcon.setImageResource(R.drawable.img_22);
        }else if(textView.getText().toString().equals("tab3")){
            imgViewTabIcon.setImageResource(R.drawable.img_33);
        }else{
            imgViewTabIcon.setImageResource(R.drawable.img_44);
        }

    }
    @Override
    public CharSequence getPageTitle(int position) {
        return mFragmentTitleList.get(position);
    }


    @Override
    public int getItemPosition(Object object){
        return ViewPagerAdapter.POSITION_NONE;
    }

}

"Custom Layout for Tab"

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/custom_tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@drawable/tab_color_selector"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center">

        <ImageView
            android:paddingTop="5dp"
            android:paddingBottom="5dp"
            android:paddingLeft="2dp"
            android:paddingRight="2dp"
            android:id="@+id/imgViewTabIcon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@drawable/img_11" />

        <TextView
            android:id="@+id/tab"        
            android:paddingTop="5dp"
            android:paddingBottom="5dp"
            android:paddingLeft="2dp"
            android:paddingRight="2dp"
            android:padding="5dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="A"
            android:textColor="#FFFFFF"
            android:layout_gravity="center"
            android:textSize="12sp"
            android:textStyle="bold" />
    </LinearLayout>
</LinearLayout>

"MainActivity XML File"

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:background="@drawable/bg"
    android:orientation="vertical"
    tools:context=".activity.MainActivity">


    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="35dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="5dp"
        app:tabBackground="@drawable/tab_color_selector"
        app:tabGravity="fill"
        app:tabIndicatorColor="@color/gps_btn"
        app:tabMode="fixed"
        app:tabSelectedTextColor="#ffffff"
        app:tabTextColor="#ffffff" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</LinearLayout>

Android click on view above the view

2 Answers2