เปลี่ยนตระกูลแบบอักษรของแถบเครื่องมือใน Android

ปรับแต่งแบบอักษรของแถบเครื่องมือได้อย่างง่ายดาย

ในปัจจุบันนี้ในแอปพลิเคชัน Android เรามักจะเห็นแบบอักษรที่กำหนดเองทั่วทั้งแอปพลิเคชัน เช่น แบบอักษรที่กำหนดเองในรายละเอียด แบบอักษรที่กำหนดเองในแถบเครื่องมือ แบบอักษรที่กำหนดเองทุกที่ในแอปพลิเคชัน ซึ่งทำให้ UI เหมาะสมและน่าดึงดูดยิ่งขึ้น

ในบทความนี้ เราจะเรียนรู้วิธีปรับแต่งแบบอักษรของแถบเครื่องมือ วิธีเปลี่ยนตระกูลแบบอักษรของแถบเครื่องมือโดยใช้ธีม

เผยแพร่ครั้งแรกที่https://danishamjad.com เมื่อวันที่ 2 มิถุนายน 2020

เปลี่ยนแบบอักษรสำหรับ TextView

ก่อนที่จะข้ามไปยังแบบอักษรของแถบเครื่องมือที่กำหนดเองโดยตรง ก่อนอื่น มาดูว่าเราสามารถเปลี่ยนตระกูลแบบอักษรสำหรับ TextView ใน Android ได้อย่างง่ายดายได้อย่างไร

เราเพียงแค่ต้องเพิ่มแอตทริบิวต์ font-family ใน TextView ของเรา เช่น ข้อมูลโค้ดด้านล่าง

<androidx.appcompat.widget.AppCompatTextView
    android:id="@+id/heading"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fontFamily="@font/montserrat_semi_bold"
    android:textSize="16sp"
    android:ellipsize="end"
    android:gravity="center"/>

เพียงเพิ่มแอตทริบิวต์ android:fontFamily แล้วมันจะสร้างความมหัศจรรย์ การเปลี่ยนตระกูลแบบอักษรสำหรับ Textview เป็นเรื่องง่ายมาก

เปลี่ยนแบบอักษรสำหรับแถบเครื่องมือ

ในปัจจุบัน ใน Android เรามักจะจำเป็นต้องเปลี่ยนตระกูลแบบอักษรสำหรับ Toolbar รวมถึงเพื่อให้ UI ดูน่าดึงดูดยิ่งขึ้นสำหรับผู้ใช้ปลายทางของเรา

ในการทำเช่นนั้น เราจำเป็นต้องกำหนดธีมในแถบเครื่องมือของเราด้วยแอตทริบิวต์ app:theme เช่นข้อมูลโค้ดด้านล่าง

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:theme="@style/AppTheme.ToolbarFont" />

ก่อนหน้านั้น เราต้องเพิ่มธีมในไฟล์ styles.xml ของเรา และเราต้องกำหนดตระกูลฟอนต์ในรูปแบบนั้น เช่น ข้อมูลโค้ดด้านล่าง

<style name="AppTheme.ToolbarFont" parent="AppTheme">
    <!--This line changes the color of text in Toolbar-->
    <item name="android:textColorPrimary">@color/black</item>
    <!--This line changes the color of icons in toolbar (back, overflow menu icons)-->
    <item name="android:textColorSecondary">@color/azul</item>
    <item name="textAllCaps">false</item>
    <item name="android:textSize">16sp</item>
    <item name="android:fontFamily">@font/montserrat_semi_bold</item>
</style>

เพิ่มแบบอักษรแบบกำหนดเองลงในโฟลเดอร์ทรัพยากร

ในการเพิ่มแบบอักษรที่กำหนดเอง เราจำเป็นต้องสร้างโฟลเดอร์ที่มีชื่อ “font” ในไดเรกทอรี res เช่นเดียวกับภาพหน้าจอด้านล่าง

ผลลัพธ์

เอาล่ะ!!! เราได้รับแบบอักษรที่กำหนดเองในแถบเครื่องมือของเรา

หากคุณต้องการเป็นช่างภาพมืออาชีพ ลองดูลิงค์ด้านล่างนี้

บทสรุป

บทความนี้จะสอนคุณถึงวิธีที่คุณสามารถเปลี่ยนแบบอักษรของแถบเครื่องมือโดยใช้ธีมได้ และยังอธิบายวิธีตั้งค่าแบบอักษรสำหรับ Textview ด้วยบรรทัดเดียวอีกด้วย

ฉันหวังว่าบทความนี้จะเป็นประโยชน์ หากคุณคิดว่ามีบางอย่างขาดหายไป มีคำถาม หรือต้องการเสนอความคิดเห็นหรือข้อเสนอแนะ โปรดแสดงความคิดเห็นด้านล่างได้เลย ฉันขอขอบคุณข้อเสนอแนะ

ฉันได้เขียนเนื้อหาอื่นๆ ที่เกี่ยวข้องกับ Android และหากคุณชอบสิ่งที่คุณอ่านที่นี่ คุณอาจจะชอบสิ่งเหล่านี้:

การแบ่งปัน (ความรู้) คือความห่วงใย 😊 ขอบคุณที่อ่านบทความนี้ครับ อย่าลืมปรบมือหรือแนะนำบทความนี้หากคุณพบว่ามีประโยชน์ มันมีความหมายมากกับผม.

หากคุณต้องการความช่วยเหลือใด ๆ เข้าร่วมกับฉันที่ Twitter, LinkedIn, GitHub,และสมัครสมาชิกของฉัน ช่องยูทูป.