Build tablet friendly Android apps

AutoSizeMVPDialogFragment.kt

abstract class AutoSizeMVPDialogFragment : DialogFragment() {

    private val isLargeScreen
        get() = resources.getBoolean(R.bool.device_wide_tall)

    init {
        this.setStyle(DialogFragment.STYLE_NO_TITLE, 0)
    }

    override fun getTheme() = if (isLargeScreen) R.style.ThemeOverlay_AppCompat_Dialog else R.style.Theme_AppCompat_Light_NoActionBar

    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        // Set to adjust screen height automatically, when soft keyboard appears on screen.
        if (dialog != null) {
            dialog.window.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE)
        }

        val view = inflater?.inflate(R.layout.dialog_fragment_auto_size, container, false) ?: return null
        inflater.inflate(mergeLayoutRes, view.contentViewGroup, true)

        return view
    }

}

bools.xml

<!-- res/values/ -->
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <bool name="device_wide_tall">false</bool>

</resources>

dialog_fragment_auto_size.xml

<!-- res/layout/ -->
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:minWidth="@dimen/auto_size_dialog_min_width"
    android:minHeight="@dimen/auto_size_dialog_min_height">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:navigationIcon="@drawable/vd_clear"/>

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/scrollview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="?attr/actionBarSize"
        android:fillViewport="true">

        <android.support.constraint.ConstraintLayout
            android:id="@+id/contentViewGroup"
            android:layout_width="@dimen/auto_size_dialog_width"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:background="@android:color/white"
            android:animateLayoutChanges="true"/>
    </android.support.v4.widget.NestedScrollView>

</FrameLayout>

dimes.xml

<!-- res/values/ -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
    
    <item name="match_parent" type="dimen">-1</item>
    <item name="wrap_content" type="dimen">-2</item>

    <dimen name="auto_size_dialog_toolbar_elevation">@dimen/elevation_default</dimen>
    <dimen name="auto_size_dialog_width">@dimen/match_parent</dimen>
    <dimen name="auto_size_dialog_min_width">0dp</dimen>
    <dimen name="auto_size_dialog_min_height">0dp</dimen>
    <dimen name="auto_size_dialog_bottom_bar_layout_height">64dp</dimen>

</resources>

merge_auto_size_fragment_test.xml

<merge
    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="wrap_content"
    tools:parentTag="android.support.constraint.ConstraintLayout">

    <!-- Your layout goes here inside the ConstraintLayout -->

</merge>

res - values - bools.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <bool name="device_wide_tall">false</bool>

</resources>

TestAutoSizeMVPDialogFragment.kt

class TestAutoSizeMVPDialogFragment : AutoSizeMVPDialogFragment() {

    interface TestListener {
        fun onCertainEvent()
    }

    companion object {

        fun show(fragment: Fragment, tag: String) {
            val dialogFragment = newInstance()
            dialogFragment.setTargetFragment(fragment, 0)

            dialogFragment.show(fragment.fragmentManager, tag)
        }

        fun newInstance(): TestAutoSizeMVPDialogFragment {
            val dialogFragment = TestAutoSizeMVPDialogFragment()

            val args = Bundle()
            dialogFragment.arguments = args

            return dialogFragment
        }

    }

    private lateinit var listener: TestListener

    override val mergeLayoutRes: Int
        get() = R.layout.merge_profile_update_personal_details

	override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val targetFragment = this.targetFragment
        val activity = this.activity
        listener = when {
            targetFragment is TestListener -> targetFragment
            activity is TestListener -> activity
            else -> throw ClassCastException("Activity: $activity, or target fragment: $targetFragment must implement ${TestListener::class.java.name}")
        }
    }

}

usage.kt

// Use TestAutoSizeMVPDialogFragment as a dialog on tablets and normal looking activity on mobile
TestAutoSizeMVPDialogFragment.show(this, TAG_TEST_DIALOG)

// Embed inside an Activity
val fragmentTransaction = supportFragmentManager.beginTransaction()
fragmentTransaction.replace(R.id.fragmentContainer, TestAutoSizeMVPDialogFragment.newInstance())
fragmentTransaction.commit()

vd_clear.xml

<!-- res/drawable/ -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FFFFFFFF"
        android:pathData="M19,6.41L17.59,5 12,10.59 6.41,5 5,6.41 10.59,12 5,17.59 6.41,19 12,13.41 17.59,19 19,17.59 13.41,12z"/>
</vector>

w600dp ** dimes.xml

<!-- res/values-w600dp/ -->
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <dimen name="auto_size_dialog_width">550dp</dimen>

</resources>

w600dp-h600dp ** dimes.xml

<!-- res/values-w600dp-h600dp/ -->
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <dimen name="auto_size_dialog_toolbar_elevation">0dp</dimen>
    <dimen name="auto_size_dialog_width">@dimen/match_parent</dimen>
    <dimen name="auto_size_dialog_min_width">500dp</dimen>
    <dimen name="auto_size_dialog_min_height">0dp</dimen>

</resources>