Search code examples
androidxmlandroid-fragmentsandroid-viewpager

How to hide layout when click outside of it?

In my app in need to hide layout when i click out side (MobileFragment) of that layout. You can understand the whole problem from given below images.

This is my app sturcture:

project Structure

This is the problem:

Problem

Here is my code:



MainActivity.java

package com.example.admin.smsrupee;

import android.content.res.Resources;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.content.ContextCompat;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.LayoutInflater;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;
import java.util.ArrayList;
import java.util.List;


public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    private TabLayout tabLayout;
    private ViewPager viewPager;
    private ImageView menu_icon,profile_icon;
    private LinearLayout layout,profile_layout;
    ViewPagerFinder adapter;
    CoordinatorLayout coordinatorLayout;


    private int[] tabIcons = {
            R.drawable.mobile_icon,
            R.drawable.dth_icon,
            R.drawable.data_card_icon,
            R.drawable.landline_icon,
            R.drawable.electricity_icon,
            R.drawable.gas_icon
    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        overridePendingTransition(R.anim.fadein, R.anim.fadeout);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        viewPager = (ViewPager)findViewById(R.id.viewpager);
        setupViewPager(viewPager);
        tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);

        menu_icon = (ImageView)findViewById(R.id.menu_icon);
        profile_icon = (ImageView)findViewById(R.id.profile_icon);
        layout = (LinearLayout)findViewById(R.id.menu_list);
        profile_layout = (LinearLayout)findViewById(R.id.profile_menu_list);
        menu_icon.setOnClickListener(this);
        profile_icon.setOnClickListener(this);
        viewPager.setOnClickListener(this);

        coordinatorLayout.setOnClickListener(this);

    setupTabIcons();

        FragmentStatePagerAdapter a = (FragmentStatePagerAdapter)viewPager.getAdapter();
        Fragment ft = (Fragment)a.instantiateItem(viewPager, viewPager.getCurrentItem());
        System.out.println("Fragment---" + ft);

    }


    private void setupTabIcons() {


        Drawable mobile_img;
        Resources res1 = getResources();
        mobile_img = ContextCompat.getDrawable(MainActivity.this, R.drawable.mobile_icon);
        mobile_img.setBounds(0, 0, 20, 25);

        TextView tabOne = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
        tabOne.setText("Mobile");
        tabOne.setCompoundDrawables(null,mobile_img, null, null);
        tabLayout.getTabAt(0).setCustomView(tabOne);

        Drawable dth_img ;
        Resources res2 = getResources();
        dth_img = ContextCompat.getDrawable(MainActivity.this, R.drawable.dth_icon);
        dth_img.setBounds(0, 0, 20, 25);

        TextView tabTwo = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
        tabTwo.setText("DTH");
        tabTwo.setCompoundDrawables(null, dth_img, null, null);
        tabLayout.getTabAt(1).setCustomView(tabTwo);

        Drawable data_img ;
        Resources res3 = getResources();
        data_img = ContextCompat.getDrawable(MainActivity.this, R.drawable.data_card_icon);
        data_img.setBounds(0, 0, 20, 25);

        TextView tabThree = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
        tabThree.setText("Data Card");
        tabThree.setCompoundDrawables(null, data_img, null, null);
        tabLayout.getTabAt(2).setCustomView(tabThree);

        Drawable landline_img ;
        Resources res4 = getResources();
        landline_img = ContextCompat.getDrawable(MainActivity.this, R.drawable.landline_icon);
        landline_img.setBounds(0, 0, 20, 25);

        TextView tabFour = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
        tabFour.setText("LandLine");
        tabFour.setCompoundDrawables(null,landline_img, null, null);
        tabLayout.getTabAt(3).setCustomView(tabFour);

        Drawable electricity_img ;
        Resources res5 = getResources();
        electricity_img = ContextCompat.getDrawable(MainActivity.this, R.drawable.electricity_icon);
        electricity_img.setBounds(0, 0, 20, 25);


        TextView tabFive = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
        tabFive.setText("Electricity");
        tabFive.setCompoundDrawables(null,electricity_img, null, null);
        tabLayout.getTabAt(4).setCustomView(tabFive);

        Drawable gas_img ;
        Resources res6 = getResources();
        gas_img = ContextCompat.getDrawable(MainActivity.this, R.drawable.gas_icon);
        gas_img.setBounds(0, 0, 20, 25);


        TextView tabSix = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
        tabSix.setText("Gas");
        tabSix.setCompoundDrawables(null,gas_img , null, null);
        tabLayout.getTabAt(5).setCustomView(tabSix);

    }


    private void setupViewPager(ViewPager viewPager) {
        adapter = new ViewPagerFinder(getSupportFragmentManager());
        adapter.addFragment(new MobileFragment(), "Mobile");
        adapter.addFragment(new DTHFragment(), "DTH");
        adapter.addFragment(new DataCardFragment(), "Data Card");
        adapter.addFragment(new LandLineFragment(), "Landline");
        adapter.addFragment(new ElectricityFragment(), "Electricity");
        adapter.addFragment(new GasFragment(), "Gas");
        viewPager.setAdapter(adapter);
    }


    @Override
    public void onClick(View v) {

        switch (v.getId()){
            case R.id.menu_icon:
                if(layout.getVisibility() == View.INVISIBLE){
                    layout.setVisibility(View.VISIBLE);
                }else{
                    layout.setVisibility(View.INVISIBLE);
                }
                break;

            case R.id.profile_icon:
                if(profile_layout.getVisibility() == View.INVISIBLE) {
                    profile_layout.setVisibility(View.VISIBLE);
                } else {
                    profile_layout.setVisibility(View.INVISIBLE);
                }
                break;
            default:

                break;
        }
    }

    class ViewPagerFinder extends FragmentStatePagerAdapter{

       private final List<Fragment> mFragmentList = new ArrayList<>();
       private final List<String> mFragmentTitleList = new ArrayList<>();

       public ViewPagerFinder(FragmentManager manager) {
           super(manager);

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

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

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

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

        public Fragment  returnFragment(int position){
            return mFragmentList.get(position);

        }

   }



    @Override
    public boolean onCreateOptionsMenu(Menu menu) {

        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }



    @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        int id = item.getItemId();
      /*  if (id == R.id.action_settings) {
            return true;
        }*/

        return super.onOptionsItemSelected(item);
    }


}

MobileFragemnt.java

package com.example.admin.smsrupee;

import android.app.Fragment;
import android.content.Context;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.Toast;

/**
 * Created by admin on 11/4/2015.
 */
public class MobileFragment extends android.support.v4.app.Fragment {

    EditText editText;
    private ImageView menuicon;
    private LinearLayout layout;
    private RelativeLayout relativeLayout;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view= inflater.inflate(R.layout.mobile_fragment, container, false);
        return view;
    }

    public static MobileFragment newInstance(int index) {
        MobileFragment f = new MobileFragment();
        Bundle args = new Bundle();
        args.putInt("index", index);
        f.setArguments(args);
        return f;
    }

}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/cordinator"
    android:clickable="true"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:fitsSystemWindows="true"
    tools:context=".MainActivity">


    <android.support.design.widget.AppBarLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent" android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:contentInsetStart="0dp"
            android:contentInsetLeft="0dp"
            app:contentInsetLeft="0dp"
            app:contentInsetStart="0dp"
            android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay">
            <include layout="@layout/content_main"/>


        </android.support.v7.widget.Toolbar>



    </android.support.design.widget.AppBarLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#2f5392"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_height="wrap_content"
        app:tabMode="scrollable"
        app:tabGravity="fill"/>

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

    </android.support.v4.view.ViewPager>

    <!--<include layout="@layout/dummy_layout"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />-->

    <include layout="@layout/menu_contents"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />

    <include layout="@layout/profile_contents"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />

</android.support.design.widget.CoordinatorLayout>

mobile_fragment.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/mobile_relative_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="info.androidhive.materialtabs.fragments.OneFragment">
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#2f5392"
        android:id="@+id/view" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:id="@+id/linearlayout_one1"
        android:layout_marginTop="30dp"
        android:layout_centerHorizontal="true"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >
    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Prepaid"
        android:textColor="#2f5392"
        android:layout_marginRight="20dp"
        android:id="@+id/prepaid_radio1"
        android:checked="false" />

    <RadioButton
            android:layout_width="wrap_content"
            android:textColor="#2f5392"
            android:layout_height="wrap_content"
            android:text="Postpaid"
            android:id="@+id/postpaid_radio1"
            android:checked="false" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:id="@+id/linearlayout_two1"
        android:layout_below="@+id/linearlayout_one1"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:layout_marginTop="20dp"
        android:orientation="vertical"
        >

        <EditText
            android:layout_width="300dp"
            android:hint="Enter Your Mobile Number"
            android:textSize="15sp"
            android:text="123xxxxxx"
            android:id="@+id/mobile_number1"
            android:paddingLeft="30dp"
            android:layout_height="wrap_content"
            android:drawableRight="@drawable/editbox_icon"
            />

        <EditText
            android:layout_width="300dp"
            android:hint="Select Operator"
            android:paddingLeft="30dp"
            android:id="@+id/operator1"
            android:textSize="15sp"
            android:layout_height="wrap_content"
            android:drawableRight="@drawable/down_arrow"
            />
        <EditText
            android:layout_width="300dp"
            android:drawableLeft="@drawable/indian_rupee"
            android:hint="    Amount"
            android:id="@+id/amount1"
            android:textSize="15sp"
            android:layout_height="wrap_content"
            android:drawableRight="@drawable/browse_plan"
            />

    </LinearLayout>

    <Button
        android:layout_below="@+id/linearlayout_two1"
        android:layout_marginTop="35dp"
        android:layout_width="250dp"
        android:id="@+id/proceed1"
        android:layout_centerHorizontal="true"
        android:layout_height="37dp"
        android:background="#2f5392"
        android:textColor="#ffffff"
        android:text="PROCEED"/>

</RelativeLayout>

content_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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" android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_main" tools:context=".MainActivity">

    <RelativeLayout
        android:id="@+id/relative_one"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/sms_rupee_logo"
            />
        <ImageView
            android:id="@+id/menu_icon"
            android:layout_width="wrap_content"
            android:layout_marginRight="10dp"
            android:layout_alignParentRight="true"
            android:layout_height="wrap_content"
            android:src="@drawable/menu_icon"
            />

        <ImageView
            android:id="@+id/wallet_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="20dp"
            android:layout_toLeftOf="@+id/menu_icon"
            android:src="@drawable/wallet_icon" />
        <ImageView
            android:id="@+id/profile_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="20dp"
            android:layout_toLeftOf="@+id/wallet_icon"
            android:src="@drawable/profile_icon" />

    </RelativeLayout>


</RelativeLayout>

profile_content.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/profile_menu_list"
        android:layout_width="165dp"
        android:layout_height="fill_parent"
        android:layout_alignParentRight="true"
        android:clickable="true"
        android:layout_alignParentTop="true"
        android:background="#2f5392"
        android:orientation="vertical"
        android:visibility="invisible"
        >
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_gravity="center_vertical"
            android:padding="8dp"
            android:layout_height="wrap_content"
            android:src="@drawable/add_user"/>

        <TextView
            android:id="@+id/register"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="3dp"
            android:layout_gravity="center_vertical"
            android:padding="8dp"
            android:text="Register"
            android:textColor="#fff"
            android:textSize="17dp"
            />

        </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="wrap_content"
            android:padding="8dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:src="@drawable/login"/>

        <TextView
            android:id="@+id/login"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="3dp"
            android:padding="8dp"
            android:text="Login"
            android:textColor="#ffffff"
            android:textSize="17dp"
            />

        </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="wrap_content"
            android:padding="8dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:src="@drawable/referral"/>

        <TextView
            android:id="@+id/referrals"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="3dp"
            android:layout_gravity="center_vertical"
            android:padding="8dp"
            android:text="Referrals"
            android:textColor="#ffffff"
            android:textSize="17dp"
            />
        </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="wrap_content"
            android:padding="8dp"
            android:layout_gravity="center_vertical"
            android:layout_height="wrap_content"
            android:src="@drawable/recharge"/>

        <TextView
            android:id="@+id/configure_easychange"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="3dp"
            android:layout_gravity="center_vertical"
            android:padding="8dp"
            android:text="Configure EasyCharge"
            android:textColor="#ffffff"
            android:textSize="17dp"
            />
        </LinearLayout>

    </LinearLayout>
</RelativeLayout>
Solution

  • Firstly, you can get an instance of an Activity inside its fragment by help of getActivity() method. Use this instance to call any method of the activity from your fragment like this :-

    ((MainActivity) getActivity()).methodName();

    Secondly, I would suggest you to convert that bar into a NavigationDrawer which will benefit you by providing you with a much cleaner user interface with more cleaner transitions.