Creating Tabs and showing and hiding Layout inside an Activity

Question

I am building an app in Android and you can see a sample picture of it. In the red rectangle I have entered some Imagebuttons. When the user clicks one of the imagebuttons, the controls below of it should change. This is like what we have as tabs in a normal desktop application.
But I don't know how to implement that in Android and what kind of technique I should use. Should I use layouts and hide one and show another? Or is there something like a tab technique for layouts I should use?
I have seen that Salesforce has implemented this in it tablet app. So it must be possible. But I have looked almost anywhere and asked around, but couldn't find an answer to it, yet.
I would appreciate for any kind of hint, code sample or else that could show a way to solve that in Xamarin.Android.

Answer 1

Based on the layout you are showing here, I would assume that this is using a FrameLayout and then Fragments to control the content.

When the user presses the button, the frame layout is repopulated using a transaction. It looks something like this:

Layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">
        <Button
            android:id="@+id/buttonOne"
            android:text="One"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
        <Button
            android:id="@+id/buttonTwo"
            android:text="Two"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
    </LinearLayout>
    <FrameLayout
        android:id="@+id/frameContent"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"/>
</LinearLayout>

Activity:

public class MainActivity : Activity
{
    protected override void OnCreate (Bundle bundle)
    {
        base.OnCreate (bundle);

        SetContentView (Resource.Layout.Main);

        var btnOne = this.FindViewById<Button> (Resource.Id.buttonOne);
        btnOne.Click += (object sender, EventArgs e) => {
            var fragment = new MyFragment(Resource.Layout.FrameLayoutOne);
            FragmentManager
                .BeginTransaction()
                .Replace(Resource.Id.frameContent, fragment)
                .Commit();
        };

        var btnTwo = this.FindViewById<Button> (Resource.Id.buttonTwo);
        btnTwo.Click += (object sender, EventArgs e) => {
            var fragment = new MyFragment(Resource.Layout.FrameLayoutTwo);
            FragmentManager
                .BeginTransaction()
                .Replace(Resource.Id.frameContent, fragment)
                .Commit();
        };
    }
}

Fragment:

public class MyFragment : Fragment
{
    int layoutId;
    public MyFragment(int layoutId)
    {
        this.layoutId = layoutId;
    }

    public override void OnCreate (Bundle savedInstanceState)
    {
        base.OnCreate (savedInstanceState);
    }

    public override View OnCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        var view = inflater.Inflate (layoutId, container, false);
        return view;
    }
}

For a complete example, see this sample I'm hosting on my github:

FragmentTransactionSample

Answer 2

First: You are independent of Xamarin, because Xamarin supports almost all native-android-API-classes. So if you find native Android code you should easily be able to translate it into Xamarin/C#.

So what you are looking for is a TabHost: See this tutorial for example:

http://androidituts.com/android-tab-layout-example/

For TabHost in Xamarin Documentation see:

http://docs.xamarin.com/guides/android/user_interface/tab_layout/

I would not recommend creating your custom tabview, but use the existing solutions.

edit:

If you want to embedd a tab-like control in an activity, than you could go for creating a Master-Detail-View as with the following:

• Create a ListView at the left and a empty Fragment at the right
• On ListView Item Click you have to load the proper Fragment into the right one
• Wrap Everything within a Layout or in another Fragment to be portable

This problem has already been discussed in: Android Master Detail Flow Example

You can also create a new Master-Detail-Flow-Project in ADT-Eclipse. Try to understand what the generated code does. You can simply transform it to Xamarin C#.

Another posibility which I don't know in Detail is to use the MVVM Pattern with mvvmcross.