74444

customizing Tab text color, stacked color, and swipe functionality in Xamarin Android?

Question:

I have three tabs in xamarin android, I have used tab Host to create those tabs. Now, I want to change the text color in those tabs, and I want to use the swipe effect just like the Tabbed Page in Xamarin Forms. How can I achieve this? Please do tell me the library also ,if required?

Answer1:

<blockquote>

I want to change the text color in those tabs, and I want to use the swipe effect just like the Tabbed Page in Xamarin Forms

</blockquote>

You could use <a href="https://developer.android.com/reference/android/support/design/widget/TabLayout.html" rel="nofollow">TabLayout</a>, Usage like this :

<?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" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <android.support.design.widget.TabLayout android:layout_height="wrap_content" android:layout_width="match_parent" android:id="@+id/tablayout" app:tabTextColor="@color/colorPrimary" app:tabSelectedTextColor="@color/colorAccent" app:tabIndicatorColor="@android:color/holo_orange_light"> <android.support.design.widget.TabItem android:text="tab 1"/> <android.support.design.widget.TabItem android:text="tab 2"/> <android.support.design.widget.TabItem android:text="tab 3"/> </android.support.design.widget.TabLayout> </LinearLayout>

Attribute to change the text color :

app:tabTextColor --> The default text color to be applied to tabs. app:tabSelectedTextColor --> The text color to be applied to the currently selected tab. app:tabIndicatorColor --> Color of the indicator used to show the currently selected tab.

Effect like <a href="https://i.stack.imgur.com/760RY.gif" rel="nofollow">this</a>.

<blockquote>

use the swipe effect just like the Tabbed Page in Xamarin Forms

</blockquote>

In Xamarin.Forms, tabs is associated with Page, actually when it render in native Android, it was associated with <a href="https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/custom-renderer/renderers/#Pages" rel="nofollow">ViewPager</a>. So if you want implement the swipe effect feature, you have to write the code by yourself. For more details, you could read the <a href="https://www.linkedin.com/pulse/xamarin-android-working-material-design-tablayout-viewpager-hoang-le" rel="nofollow">document</a>.

EDIT :

To use TabLayout, you have to add Xamarin.Android.Support.v4 and Xamarin.Android.Support.Design nuget package.

<strong>EDIT 2 ;</strong>

Here is a simple demo about implement the swipe effect :

public class MainActivity : AppCompatActivity { private List<Android.Support.V4.App.Fragment> mFragments = new List<Android.Support.V4.App.Fragment>(); private List<string> mTabTitles = new List<string>(); protected override void OnCreate(Bundle savedInstanceState) { base.OnCreate(savedInstanceState); SetContentView(Resource.Layout.Main); TabLayout tabLayout = FindViewById<TabLayout>(Resource.Id.tablayout); ViewPager viewPager = FindViewById<ViewPager>(Resource.Id.view_pager); initTab(); mFragments.Add(new Fragment1()); mFragments.Add(new Fragment1()); mFragments.Add(new Fragment1()); mFragments.Add(new Fragment1()); viewPager.Adapter = new ViewPagerAdapter(SupportFragmentManager, mFragments,mTabTitles); tabLayout.SetupWithViewPager(viewPager); } private void initTab() { for (int i = 1; i < 5; i++) { mTabTitles.Add("Tab" + i); } } } public class ViewPagerAdapter : FragmentPagerAdapter { private List<string> mTabTitles; private static int FRAGMENT_COUNT = 4; public ViewPagerAdapter(Android.Support.V4.App.FragmentManager fragmentManager, List<Android.Support.V4.App.Fragment> fragments, List<string> tabTitles):base(fragmentManager) { mTabTitles = tabTitles; } public override Android.Support.V4.App.Fragment GetItem(int position) { Fragment1 testFragment = new Fragment1(); return testFragment; } public override int Count => FRAGMENT_COUNT; public override ICharSequence GetPageTitleFormatted(int position) { return new Java.Lang.String(mTabTitles[position]); } }

axml file :

<?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.support.design.widget.TabLayout android:layout_height="wrap_content" android:layout_width="match_parent" android:id="@+id/tablayout" > </android.support.design.widget.TabLayout> <android.support.v4.view.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="wrap_content" > </android.support.v4.view.ViewPager> </LinearLayout>

<a href="https://i.stack.imgur.com/lOWnG.gif" rel="nofollow">Effect</a>.

<strong>EDIT 3</strong> :

In my demo, Fragment should use Android.Support.V4.App.Fragment, code like this :

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.YourFragment, container, false); return base.OnCreateView(inflater, container, savedInstanceState); } }

Recommend

  • How can I override my menu bar to come on my application bar?
  • How do I add a show/hide to Questionnaire form
  • Global variables modified by main() and accessed by ISR()
  • Reading the last line in a Tmemo in delphi
  • reloading my drop down when using a custom directive
  • Using regex to fix xml content
  • not retrieving html value through xslt
  • Define TabLayout style in theme
  • Read XML in spark
  • How can we call one fragment from another class that doesn't contain that fragment?
  • Style.display block/none problems
  • Split into 3 character length
  • how can I add the viewpager and tablayout under the collapsing toolbar layout
  • How to force culture/region on RegionInfo.DisplayName
  • How to extract C source code from .so file?
  • Material Design TextInputEditText Border Color When Not Activated
  • Scrolling in View Pager
  • coordinatorlayout not scrolling with swipeRefreshlayout
  • Using ViewPager in activity and launch app from URL inflating Exception thrown
  • coordinatorlayout not scrolling with swipeRefreshlayout
  • Problem getting terminal output from ImageMagick's compare.exe ( Either by pipe or Python )
  • Collapsing toolbar with floating action Menu
  • Macro to cycle through and allocate data to members of structs incorrectly recognises struct member
  • Android TabLayout with active tab always at center, just like in Play Newsstand app
  • Action bar doesn't accept personal styles
  • Runtime Exception: Font not found for every font i've tried - Android
  • Change DatePicker Text Color
  • How to update a table based on an XML parameter
  • How to inject Symfony param from parameters.yml into Behat 3 configuration?
  • Search String in NSDictionary store in NSMutableArray
  • Android dynamically add EditText in Linear Layout
  • Change tabs text color in TabLayout to different colors programmatically
  • Odoo POS create a dropdown list
  • ContextCompat.getcolor() going to null object reference
  • Change status / notification bar color on api below 21 android?
  • TextView color is always white for AppCompatActivity
  • option[selected=true] doesn't work
  • Android TabLayout on the bottom of the screen
  • Android error - Failed to find style 'toolbarStyle' in current theme
  • AlertDialog style when using setView()