การดึง content มาแสดงใน Chrome Custom Tab

android Jul 17, 2016
ขออัพเดตบล็อกเป็น androidx และ kotlin เน้ออ~~

เราจะใช้เจ้า Chrome Custom Tab เพื่อมาอ่านบล็อกจากหน้าเว็บของเรากัน โดยกดที่ card item ใน blog list ของเรานั่นเอง

แต่ละแอปที่เราใช้กัน เช่น facebook google แม้กระทั่ง line เอง ก็ใช้ custom chrome tab ซึ่งมันโหลดหน้าเว็บไวมาก แถมยังใช้ feature จากใน chrome เช่น save password หรือการแชร์เว็บไปยังแอปอื่น

แหล่งข้อมูล

อันนี้มาตอนปี 2016 https://developer.chrome.com/multidevice/android/customtabs

จริงๆอ่านอันนี้ก็จบไวดี

Custom Tabs Best Practices | Web On Android | Google Developers
Best Practices for Custom Tabs implementations.

ส่วนก่อนหน้านี้จะอ่านจาก

Exploring Chrome Customs Tabs on Android

Android Chrome Custom Tabs Android Tutorial with Example
Android Chrome Custom Tabs Android Tutorial with Example. In this tutorial, you will learn to implement chrome custom tabs in android application.
Chrome Custom Tabs ของดีที่จะช่วยให้การเปิดเว็ปในแอปเป็นเรื่องง่ายๆ
สมมติว่าผู้ที่หลงเข้ามาอ่านอยากจะทำแอปพลิเคชันที่สามารถเปิดเว็ปของตัวเองได้ในตัวเอง จะต้องทำยังไงครับ? ใช่ครับ ก็แค่สร้าง WebView ขึ้นมาภ...
Is there any way to load html content in chrome custom tab
Is it possible to load local html content using chrome custom tab in android? I searched the web, could not find the solution, can anyone help..

เริ่ม implement ได้!

ก่อนอื่นเลย add dependencies ก่อนเลยจ้า

dependencies {
  implementation 'androidx.browser:browser:1.0.0'
}

บอกก่อนเลยว่าไม่ต้องไปทำ layout UI ใดๆ แค่ implement code ก็ใช้ได้แล้วจ้า เลยมาเล่าว่าเรา implement อะไรบ้าง อาจจะแตกต่างกันไป และตอนนี้คิดว่าน่าจะมี url กันอยู่แล้วเนอะ

ก่อนอื่นมาประกาศตัวแปรที่เป็น CustomTabsIntent ขึ้นมา

val intentBuilder = CustomTabsIntent.Builder()

การเปิด custom tab ก็ไม่ยากเลย แค่นี้เลย

intentBuilder.build().launchUrl(context, Uri.parse(url))

ผลที่ได้จ้า

ขออภัยที่ติด Adsense ในเว็บมือถือจ้า แหะๆ

ต่อมาเรามา custom ต่างๆเพิ่มเพื่อความสวยงามมม

เราจะเปลี่ยนสี toolbar ด้านบนให้เป็น colorPrimary

intentBuilder.setToolbarColor(ContextCompat.getColor(context, R.color.colorPrimary))

และเราอยากให้มันโชว์ title ด้วยว่ากำลังอ่านบล็อกชื่ออะไรอยู่

intentBuilder.setShowTitle(true)

แล้วก็เปลี่ยนปุ่มปิดจาก x เป็น <- เพื่อย้อนกลับไปหน้า blog list

intentBuilder.setCloseButtonIcon(
    BitmapFactory.decodeResource(
        context.resources, 
        R.drawable.ic_action_arrow_left
    )
)

ข้อควรระวัง drawable จะใช้เป็น 24dp เท่านั้น ไม่งั้นมันไม่ยอมเปลี่ยน icon ให้เรานะ

Chrome Custom Tabs change the default close button not working
I am trying to change the default close button on the actionbar of the custom chrome tabs. I have tried to set using setCloseButtonIcon() However, the default close button still shows. I want to ch...

ผลก็จะออกมาสวยงามมม แต่พอกดปุ่มสามจุดบนขวาพบว่า ยังไม่มีปุ่มให้แชร์เลยนี่นา

ดังนั้นเพิ่ม memu share ในปุ่มสามจุดด้วยการใส่สิ่งนี้ลงไปจ้า

เราจะใส่ putExtra(Intent.EXTRA_REFERRER, Uri.parse("android-app://" + context.packageName)) เพื่อทำการ tracking ว่าเปิดจากในแอพนะ

ผลที่ได้ก็คืออออ

และเราสามารถใส่ animation เพิ่มได้ด้วยนะเออ แต่ R.anim.silde_in_right กับ R.anim.silde_out_left เราต้องใส่ resource เพิ่มเองนะ

intentBuilder.setStartAnimations(
    context, 
    R.anim.slide_in_right, 
    R.anim.slide_out_left
)
intentBuilder.setExitAnimations(
    context, 
    android.R.anim.slide_in_left, 
    android.R.anim.slide_out_right
)

ถ้าเราต้องการให้ chrome custom tab ของเราโหลดเร็วขึ้น ต้องใส่ warmup ไปด้วย แต่ใส่ลงไปเปล่าๆปลี้ๆไม่ได้ ต้องเปิด browser service ของ chrome custom tab ขึ้นมาก่อน แล้วใส่ลงไปข้างใน

ดังนั้น ผลที่ออกมา จะเป็นประมาณนี้


จบแล้ว ฝากร้านสิ รอไร

อย่าลืมกด like กด share บทความกันด้วยนะคะ :)

Posted by MikkiPastel on Sunday, 10 December 2017

Tags

Minseo Chayabanjonglerd

Android Developer ผู้เป็นเจ้าของบล็อก MikkiPastel ที่ชอบทำหลายๆอย่างนอกจากเขียนแอพแอนดรอยด์ เช่น เขียนบล็อก เขียนแชทบอท เรียนออนไลน์ อ่านหนังสือ วาดรูปเล่น ดู netfilx สั่งอาหารอร่อยๆกัน เป็นต้น

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.