How to replace one fragment with another on button click in Xamarin.Android? - replace

Question

I want to have the following screen:
When I click IMAGE 1 and IMAGE 2 buttons I want in IMAGE ZONE to appear Image1.jpg and Image2.jpg respectively. I want Image1.jpg and Image2.jpg to be in different fragments and replace those fragments on button click rather than changing simply the android:src of the ImageView in IMAGE ZONE on button click. I want Image1.jpg to be the first image to appear when opening the activity. I can't find how to do that with fragments in Xamarin.Android

Answer 1

You can create two Fragment and its xml first.
FragmentOne :
public class Fragment1 : Android.Support.V4.App.Fragment
{
public override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
// Create your fragment here
}
public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
// Use this to return your custom view for this Fragment
return inflater.Inflate(Resource.Layout.layoutFragment1, container, false);
//return base.OnCreateView(inflater, container, savedInstanceState);
}
}
and its xml :
<?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="match_parent"
android:id="#+id/fragment1">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/th2"/>
</LinearLayout>
FragementTwo :
public class Fragment2 : Android.Support.V4.App.Fragment
{
public override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
// Create your fragment here
}
public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
// Use this to return your custom view for this Fragment
return inflater.Inflate(Resource.Layout.layoutFragment2, container, false);
//return base.OnCreateView(inflater, container, savedInstanceState);
}
}
and its xml :
<?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="match_parent"
android:id="#+id/fragment2">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/th2"/>
</LinearLayout>
Then in MainActivity , you can set its xml as follow :
<?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:orientation="vertical">
<LinearLayout
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="80dip"
android:orientation="horizontal">
<Button
android:id="#+id/buttonone"
android:layout_width="150dip"
android:layout_height="80dip"
android:text="FragmentOne"/>
<Button
android:id="#+id/buttontwo"
android:layout_width="150dip"
android:layout_height="80dip"
android:text="FragmentTwo"/>
</LinearLayout>
<RelativeLayout
android:id="#+id/containerView"
android:layout_width="match_parent"
android:layout_height="430dip">
</RelativeLayout>
</LinearLayout>
Finally , in MainActivity.cs implement this function :
public class MainActivity : AppCompatActivity
{
Android.Support.V4.App.Fragment fragmentOne;
Android.Support.V4.App.Fragment fragmentTwo;
Android.Support.V4.App.FragmentTransaction fragmentManager;
[Obsolete]
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
Xamarin.Essentials.Platform.Init(this, savedInstanceState);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.activity_main);
Button buttonone = FindViewById<Button>(Resource.Id.buttonone);
buttonone.Click += Buttonone_Click;
Button buttontwo = FindViewById<Button>(Resource.Id.buttontwo);
buttontwo.Click += Buttontwo_Click;
fragmentOne = new Fragment1();
fragmentTwo = new Fragment2();
fragmentManager = SupportFragmentManager.BeginTransaction();
fragmentManager.Add(Resource.Id.containerView, fragmentOne);
//adding first fragment when entering activity
fragmentManager.Commit();
}
private void Buttonone_Click(object sender, System.EventArgs e)
{
//throw new System.NotImplementedException();
Console.WriteLine("Buttonone_Click");
fragmentManager = SupportFragmentManager.BeginTransaction();
// replace to be the first fragment
fragmentManager.Replace(Resource.Id.containerView, fragmentOne);
fragmentManager.Commit();
}
private void Buttontwo_Click(object sender, System.EventArgs e)
{
//throw new System.NotImplementedException();
Console.WriteLine("Buttontwo_Click");
fragmentManager = SupportFragmentManager.BeginTransaction();
// replace ro be the second fragment
fragmentManager.Replace(Resource.Id.containerView, fragmentTwo);
fragmentManager.Commit();
}
}
The effect as follow :