ট্যাবলআউট (অ্যান্ড্রয়েড ডিজাইনের লাইব্রেরি) পাঠ্যের রঙ


85

আমি অ্যান্ড্রয়েড ডিজাইন লাইব্রেরি থেকে নতুন ট্যাবলেট ব্যবহার করছি। আমি ব্যবহার করে পাঠ্য রঙের স্থিতি তালিকা সেট করতে পরিচালিতtabLayout.setTabTextColors(colorstatelist)

আমি কীভাবে স্টাইল.এক্সএমএল ব্যবহার করে এটি অর্জন করতে পারি?

উত্তর:


256

এক্সএমএল বৈশিষ্ট্যগুলির মাধ্যমে:

<android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabGravity="fill"
        app:tabTextColor="@color/your_unselected_text_color"
        app:tabSelectedTextColor="@color/your_selected_text_color"/>

অতিরিক্তভাবে, আরও স্টাইলিংয়ের জন্য ট্যাব ইন্ডিকেটর কালার বা ট্যাব ইন্ডিসিকেটারহাইটের মতো বৈশিষ্ট্য রয়েছে।

কোডে:

tabLayout.setTabTextColors(
    getResources().getColor(R.color.your_unselected_text_color),
    getResources().getColor(R.color.your_selected_text_color)
);

যেহেতু এই পুরানো উপায়টি 23 এআইপি 23 হিসাবে অবচিত করা হয়েছে, বিকল্পটি হ'ল:

tabLayout.setTabTextColors(
    ContextCompat.getColor(context, R.color.your_unselected_text_color),
    ContextCompat.getColor(context, R.color.your_selected_text_color)
);

@ ফী লে কি আমি যদি ব্যবহারিকভাবে পরিবর্তন করতে চাই?
প্রিয়াঙ্কাচৌহান

@ পিসিপ্রিয়ঙ্কা টিপটির জন্য ধন্যবাদ, আমি কোডটিতে নির্বাচিত এবং অনির্বাচিত রং সংজ্ঞায়নের সহজ উপায় দিয়ে আমার উত্তর আপডেট করেছি।
Fe Le

81

পাঠ্য শৈলী এবং নির্বাচিত পাঠ্যের রঙকে ওভাররাইড করার জন্য এখানে স্নিপেট কোড

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabTextAppearance">@style/MyCustomTabText</item>
    <item name="tabSelectedTextColor">@color/tab_text_act</item>
</style>

<style name="MyCustomTabText" parent="TextAppearance.AppCompat.Button">
    <item name="android:textSize">14sp</item>
    <item name="android:textColor">@color/tab_text</item>
</style>

এবং এখানে লেআউট জন্য স্নিপেট কোড

<android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            style="@style/MyCustomTabLayout" />

4
ধন্যবাদ - এটি আমার পক্ষে কাজ করে। ঠিক এটি উল্লেখ করতে চাই যে ট্যাব নির্বাচন করা টেক্সটকলারটি আমি যখন ট্যাবটি নির্বাচন করি তখন ট্যাবটির নীচের লাইনটির জন্য রঙ এবং ট্যাবটির পাঠ্য।
সাইমন

আপনি কেন উইজেট উত্তরাধিকারী? ডিজাইন.ট্যাবলআউট?
স্পেসমুনকি

4
আমাদের এখানে ট্যাবলআউটটিতে "স্টাইল" ব্যবহার করতে হবে কেন? আমি যদি "অ্যান্ড্রয়েড: থিম" ব্যবহার করি তবে এটি কেন কাজ করে না?
স্পেসমুনকি

@ স্পেসমোনকি কারণ উইজেট.ডিজাইন.ট্যাবলয়েটে "ট্যাব ইন্ডিকেটোরকালার", "ট্যাব ইন্ডিকেটর হাইট"
সুইটনার্ড

@ সুইটেনার্ড ওহ, সুতরাং এটি "অ্যান্ড্রয়েড: থিম" এ আমি যে থিমটি নির্দিষ্ট করেছি তা ওভাররাইড করছে?
স্পেসমুনকি

5

উপরের সমস্ত উত্তর সঠিক তবে আমি কেবলমাত্র ডিফল্ট শৈলীর ওভাররাইড করা এবং কেবলমাত্র যে নির্দিষ্ট উপাদানটি আপনি পরিবর্তন করতে চান তা পরিবর্তন করা ভাল বলে মনে করি। নীচের উদাহরণটি পাঠ্যকে সাহসী করবে:

<style name="Widget.TabItem" parent="TextAppearance.Design.Tab">
    <item name="android:textStyle">bold</item>
</style>

তারপরে ..,

app:tabTextAppearance="@style/Widget.TabItem"

আমি দুঃখিত তবে আপনি কোথায় পেলেন?
ডেডফিশ

4

আপনাকে কেবল android:textAppearanceস্টাইলকে ওভাররাইড করতে হবে । কারণ ট্যাবলআউট টেক্সটঅ্যাপেন্স ব্যবহার করে। শৈলীর ছোট ছোট স্নিপেট কোডটি এখানে।

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Below will reference with our custom style -->
    <item name="android:textAppearance">@style/my_tab_text</item>
</style>

<style name="my_tab_text" parent="Base.TextAppearance.AppCompat">
    <item name="android:textColor">@android:color/holo_blue_dark</item>
</style>

এবং আপনি যদি আপনার অ্যাপটিথিম থেকে রেফারেন্স দিতে চান না তবে আপনি নীচে স্নিপেট ব্যবহার করে সরাসরি ট্যাবলিয়টে নির্দিষ্ট করতে পারেন।

 <android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabTextAppearance="@style/my_tab_text"
            app:tabIndicatorHeight="48dp"/>

নিশ্চিত হয়ে নিন যে আপনি অ্যাপকম্প্যাক্টটি পিতামাতার হিসাবে ব্যবহার করছেন
মৃঙ্খন

ঠিক আছে আপনি ঠিক আছেন, এটি কাজ করে। তবে কেবলমাত্র "অনির্বাচিত" -তন্ত্রের জন্য। নির্বাচিত ট্যাব-পাঠ্যটি আমার জন্য সর্বদা কালো
সেবাস্তিয়ান

ঠিক আছে নকশা সমর্থন লাইব্রেরিতে নির্বাচিত ট্যাবের একটি পাঠ্য কালার বরাদ্দ করার জন্য ডিজাইন লাইব্রেরিতে কোনও কোড উপলব্ধ নেই। সুতরাং নির্বাচিত ট্যাব পাঠ্যের রঙের জন্য আপনাকে এটি ব্যবহার করে সেট করতে হবে সম্পত্তিটি ব্যবহার করে ..
মইনখান

1

কাস্টম ট্যাবগুলির জন্য আমাদের নীচেরগুলিকে ওভাররাইড করতে হবে: 1) অ্যাপ্লিকেশন: ট্যাবটেক্সট কালার // for_unselected_text "

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            style="@style/MyCustomTabLayout"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:background="?attr/colorPrimary"
            android:scrollbarSize="24sp"
            android:visibility="gone"
            app:tabTextColor="@color/white_40_percent"
            app:tabMode="scrollable" />

2) ট্যাবসিলিগ্রেড টেক্সটকালার // নির্বাচিত ট্যাব রঙের জন্য 3) ট্যাব ইন্ডিকেটর কালার // ট্যাব নির্দেশকের জন্য রঙ

   <style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
    <item name="android:textColorPrimary">@color/white</item>
    <item name="tabSelectedTextColor">@color/white</item>
    <item name="tabTextAppearance">@style/TabTextStyle</item>
    <item name="tabIndicatorColor">?attr/colorAccent</item>
    <item name="tabIndicatorHeight">4dp</item>
    <item name="android:tabStripEnabled">true</item>
    <item name="android:padding">0dp</item>
  </style>



<style name="TabTextStyle">
    <item name="android:fontFamily">@string/font_fontFamily_medium</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textAllCaps">true</item>
    <item name="android:textColor">@color/tab_text_color</item>
    <item name="android:textSize">16sp</item>
</style>

tab_text_color.xML

 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="@color/white_40_percent"android:state_selected="false"/>
  <item android:color="@color/white_100_percent"android:state_selected="true"/>
 </selector>

1

সঙ্গে TabLayoutদেওয়া উপাদান উপাদান লাইব্রেরী আপনি করতে পারেন:

  • একটি কাস্টম শৈলী ব্যবহার করুন
  <com.google.android.material.tabs.TabLayout
      style="@style/My_Tablayout"
      ..>

এবং আপনার স্টাইলে tabTextColorএকটি নির্বাচক সহ ব্যবহার করুন ।

<!-- TabLayout -->
<style name="My_Tablayout" parent="Widget.MaterialComponents.TabLayout" >
    <item name="tabTextColor">@color/tab_layout_selector</item>
</style>


<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="?attr/colorPrimary" android:state_selected="true"/>
  <item android:alpha="0.60" android:color="?attr/colorOnSurface"/>
</selector>
  • app:tabTextColorআপনার বিন্যাসে ব্যবহার করুন :
  <com.google.android.material.tabs.TabLayout
      app:tabTextColor="@color/tab_layout_selector"
      ..>

এখানে চিত্র বর্ণনা লিখুন


0

সহজ এবং নিখুঁত উপায়:

এক্সএমএল ফাইলটিতে ::

<android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabTextAppearance="@style/TabText"/>

মান-শৈলীর ফাইলটিতে:

দ্রষ্টব্য: "কায়রো_সেমিবোল্ড" একটি বাহ্যিক ফন্ট, আপনি এটি আপনার ফন্টের সাথে প্রতিস্থাপন করতে পারেন।

<style name="TabText" parent="TextAppearance.Design.Tab">
    <item name="android:textColor">#1f57ff</item>
    <item name="android:textSize">14sp</item>
    <item name="android:fontFamily">@font/cairo_semibold</item>
</style>

0

সেরা বা স্বল্প এবং সহজ উপায় কাস্টম অ্যাপবার পছন্দ করা হয়

 <?xml version="1.0" encoding="utf-8"?>
    <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/actionBarSize"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@color/colorAccent"
    app:theme="@style/myCustomAppBarTheme"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"><RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageButton
            android:id="@+id/btn_back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:background="@android:color/transparent"
            android:src="@mipmap/ic_launcher" />

        <TextView
            android:id="@+id/txt_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="16dp"
            android:layout_marginStart="16dp"
            android:layout_toEndOf="@+id/btn_back"
            android:layout_toRightOf="@+id/btn_back"
            android:text="Title"
            android:textColor="@android:color/white"
            android:textSize="20sp"
            android:textStyle="bold" />

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

0

এক্সএমএল বৈশিষ্ট্য

<com.google.android.material.tabs.TabLayout
                    android:id="@+id/tab_layout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:tabIndicatorColor="@color/white"
                    app:tabBackground="@color/colorAccent"
                    app:tabSelectedTextColor="@color/white"
                    app:tabTextColor="@color/white"
                    app:tabMode="scrollable" />

প্রোগ্রামিয়ালি কোটলিনে

(tab_layout as TabLayout).setBackgroundColor(ContextCompat.getColor(mContext, R.color.colorPrimary))
(tab_layout as TabLayout).setSelectedTabIndicatorColor(ContextCompat.getColor(mContext, R.color.white))
(tab_layout as TabLayout).setTabTextColors(ContextCompat.getColor(mContext, R.color.white),
                ContextCompat.getColor(mContext, R.color.white))
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.