Search code examples
javaandroidandroid-fragmentsandroid-tabhost

Simple buttons to get Tab feature in android


I am trying to attain Tab feature using simple Buttons


What is happening now::

  • Click on Button1 ----> F1 Activity is displayed
  • Click on button1 (again) ---- > F2 Activity is isplayed
  • Click on Button1 (third time) -----> F1 Activity is Displayed again

- Similarly with Button2 w.r.t G1 & G2 activities


FragmentDemo.java

public class FragmentDemo extends FragmentActivity implements OnClickListener {

    Button b1, b2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_fragment_demo);

        b1 = (Button) findViewById(R.id.button1);
        b1.setOnClickListener(this);

        b2 = (Button) findViewById(R.id.button2);
        b2.setOnClickListener(this);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.fragment_demo, menu);
        return true;
    }

    private boolean state = false;

       @Override
        public void onClick(View v) {
            switch (v.getId()) {
            case R.id.button1:
                state = !state;
                if (state) {
                addFragment(new F2(this), false,
                        FragmentTransaction.TRANSIT_FRAGMENT_OPEN);
                } else {
                addFragment(new F1(this), false,
                        FragmentTransaction.TRANSIT_FRAGMENT_OPEN);
                }
                break;

            case R.id.button2:
                state = !state;
                if (state) {
                addFragment(new G2(this), false,
                        FragmentTransaction.TRANSIT_FRAGMENT_OPEN);
                } else {
                addFragment(new G1(this), false,
                        FragmentTransaction.TRANSIT_FRAGMENT_OPEN);
                }
                break;    

            default:
                break;
            }

        }

    void addFragment(Fragment fragment, boolean addToBackStack, int transition) {
        FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
        ft.replace(R.id.simple_fragment, fragment);
        ft.setTransition(transition);
        if (addToBackStack)
            ft.addToBackStack(null);
        ft.commit();
    }

}

F1.java

public class F1 extends Fragment {

    Context c;
    View v;

    public F1(FragmentDemo fragmentDemo) {
        // TODO Auto-generated constructor stub
        this.c = fragmentDemo;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // TODO Auto-generated method stub

        v = inflater.inflate(R.layout.f1, container, false);

        return v;
    }

}

F2.java

public class F2 extends Fragment {
    Context c;
    View v;

    public F2(FragmentDemo fragmentDemo) {
        // TODO Auto-generated constructor stub
        this.c = fragmentDemo;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // TODO Auto-generated method stub

        v = inflater.inflate(R.layout.f2, container, false);

        return v;
    }
}

Similarly for G1 & G2

activity_fragment_demo.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=".FragmentDemo" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <Button
                android:id="@+id/button1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Button1" />

            <Button
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Button2" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/simple_fragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

OUTPUT::

enter image description here


Clearly we can see that, when i start the project i come to blank screen ..... A default activity is not displayed. As it does in Tabs

How can i make sure a default activity say F1 be already be present when i load the project

Like this ::

enter image description here

Any ideas What changes should i need to make in the code

Hope i am clear


Solution

  • Your Layout activity_fragment_demo looks good so I will use that. The LinearLayout with id simple_fragment will be the container that holds the fragment's view

    So lets say that the fragment F1 represents your first Tab and the fragment F2 represents your second tab.

    So three methods that you should have are.

    The following method adds each fragment to the activity and has to be called for both F1 and F2 in the activity's onCreate

    public void addFragment(Fragment fragment)
    {
        FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
        ft.add(R.id.simple_fragment, fragment);
    }
    

    The following method essentially shows a fragment.I am not sure about the behind workings of attach but it can be seen as View.VISIBLE

    public void attachFragment(Fragment fragment)
    {
        FragmentTransaction ft = getSupportManager().beginTransaction();
        ft.attach(fragment).commit();
    }
    

    The following method essentially hides a fragment.I am not sure about the behind workings of detach but it can be seen as View.GONE

    public void attachFragment(Fragment fragment)
    {
        FragmentTransaction ft = getSupportManager().beginTransaction();
        ft.detach(fragment).commit();
    }
    

    Your Activity's onCreate method

    public void onCreate()
    {
        //Create all your fragments here eg F1 f1 = new F1(); etc
    
        //For whatever fragment you have created you should call the method addFragment
    
        //Now depending on what fragment you want shown by default you should call attachFragment or detachFragment. eg. if F1 has to be shown by default
        attachFragment(F1);
        detachFragment(F2) //and all otherfragment you want hidden by default
    
        //Set the listeners for the buttons
    
        //The purpose of the next two lines is to store the current state of the buttons. Since F1 is attached to button1 and it is currently being shown we set the tag to "clicked"
        //and button2 tag has been set to notClicked
        button1.setTag("clicked");
        button2.setTag("notClicked");
    }
    

    Inside the onClickListener for your buttons

    OnClickListener onTabButtonClickListener = new OnClickListener()
    {
        public void onClick(View view)
        {
            switch(view.getId)
            {
                case R.id.button1
                {
                    if(button1.getTag().equals("clicked"))
                    {
                        detachFragment(F2);
                        attachFragment(F1);
    
                        button1.setTag("notClicked");
                        button2.setTag("clicked");
                    }
                    else
                    {
                        detachFragment(F2);
                        attachFragment(F1);
    
                        button1.setTag("clicked");
                        button2.setTag("notClicked");
                    }
                }
                case R.id.button2
                {
                    //Same thing as before except opposite
                }
            }
        }
    }
    

    And that should work.I am not very good at explaining stuff so feel free to ask any questions you have.