In Android Responsive Design Screen With Scroll View And Make It Responsive?

Image I am new in Android So i don't known how to design this screen showing in image using scroll view and make it responsive Please Give me idea or example

Solution 1:

I'm give you basic solution as per your requirement you can change image icon, margin, and layout height and width, etc everything.

<?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><ScrollViewandroid:layout_width="match_parent"android:layout_height="wrap_content"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"android:layout_marginVertical="10dp"android:orientation="vertical"><TextViewandroid:layout_width="28dp"android:layout_height="28dp"android:padding="2dp"android:gravity="center"android:background="@drawable/circle"android:text="1" /><ImageViewandroid:id="@+id/img1"android:layout_width="wrap_content"android:layout_height="70dp"android:layout_centerInParent="true"android:background="@drawable/ic_fingerprint_black_24dp" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerHorizontal="true"android:gravity="center"android:layout_below="@+id/img1"android:layout_marginTop="10dp"android:text="hello" /></RelativeLayout><Viewandroid:layout_width="5dp"android:layout_marginVertical="15dp"android:background="@color/colorPrimary"android:layout_height="80dp" /><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"android:orientation="vertical"><TextViewandroid:layout_width="28dp"android:layout_height="28dp"android:padding="2dp"android:layout_marginLeft="5dp"android:gravity="center"android:background="@drawable/circle"android:text="8" /><ImageViewandroid:id="@+id/img2"android:layout_width="wrap_content"android:layout_height="70dp"android:layout_centerInParent="true"android:background="@drawable/ic_fingerprint_black_24dp" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@+id/img2"android:layout_centerHorizontal="true"android:gravity="center"android:layout_marginTop="10dp"android:text="hello" /></RelativeLayout></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><Viewandroid:layout_width="match_parent"android:layout_weight="1"android:layout_marginVertical="10dp"android:background="@color/colorPrimary"android:layout_marginHorizontal="15dp"android:layout_height="5dp" /><Viewandroid:layout_width="match_parent"android:layout_weight="1"android:layout_marginHorizontal="15dp"android:layout_marginVertical="10dp"android:background="@color/colorPrimary"android:layout_height="5dp" /></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"android:layout_marginVertical="10dp"android:orientation="vertical"><TextViewandroid:layout_width="28dp"android:layout_height="28dp"android:padding="2dp"android:gravity="center"android:background="@drawable/circle"android:text="1" /><ImageViewandroid:id="@+id/img11"android:layout_width="wrap_content"android:layout_height="70dp"android:layout_centerInParent="true"android:background="@drawable/ic_fingerprint_black_24dp" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@+id/img11"android:layout_centerHorizontal="true"android:gravity="center"android:layout_marginTop="10dp"android:text="hello" /></RelativeLayout><Viewandroid:layout_width="5dp"android:layout_marginVertical="15dp"android:background="@color/colorPrimary"android:layout_height="80dp" /><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"android:orientation="vertical"><TextViewandroid:layout_width="28dp"android:layout_height="28dp"android:padding="2dp"android:layout_marginLeft="5dp"android:gravity="center"android:background="@drawable/circle"android:text="8" /><ImageViewandroid:id="@+id/img21"android:layout_width="wrap_content"android:layout_height="70dp"android:layout_centerInParent="true"android:background="@drawable/ic_fingerprint_black_24dp" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@+id/img21"android:layout_centerHorizontal="true"android:gravity="center"android:layout_marginTop="10dp"android:text="hello" /></RelativeLayout></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><Viewandroid:layout_width="match_parent"android:layout_weight="1"android:layout_marginVertical="10dp"android:background="@color/colorPrimary"android:layout_marginHorizontal="15dp"android:layout_height="5dp" /><Viewandroid:layout_width="match_parent"android:layout_weight="1"android:layout_marginHorizontal="15dp"android:layout_marginVertical="10dp"android:background="@color/colorPrimary"android:layout_height="5dp" /></LinearLayout></LinearLayout></ScrollView></LinearLayout>

Solution 2:

API 30

Use computed values for width, height, and margins

ex - height = (getHeight(this) / 0.5) //50% of device height

Get device width and height

fungetWidth(context: Context): Int {
        val displayMetrics = DisplayMetrics()
        returnif (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
            context.display?.getRealMetrics(displayMetrics)
            displayMetrics.widthPixels
        }else{
            this.windowManager.defaultDisplay.getMetrics(displayMetrics)
            displayMetrics.widthPixels
        }
    }

    fungetHeight(context: Context): Int {
        val displayMetrics = DisplayMetrics()
        returnif (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
            context.display?.getRealMetrics(displayMetrics)
            displayMetrics.heightPixels
        }else {
            val displayMetrics = DisplayMetrics()
            this.windowManager.defaultDisplay.getMetrics(displayMetrics)
            displayMetrics.heightPixels
        }
    }

MainActiviy onCreate() method

set values dynamically for the views, so they will scale according to device size

overridefunonCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val view = findViewById<Button>(R.id.button).layoutParams as ViewGroup.MarginLayoutParams
        view.apply {
            width = (getWidth(this@MainActivity) * 0.5).toInt()
            height = (getHeight(this@MainActivity) * 0.5).toInt() //scroll view height should maupulate by it's children, for dynamic layouts
            setMargins(50, 50, 0, 50)
        }
    }

layout XML file that contains scroll view

<?xml version="1.0" encoding="utf-8"?><ScrollViewxmlns: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:id="@+id/scroll"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#4CAF50"tools:context=".MainActivity"><androidx.constraintlayout.widget.ConstraintLayoutandroid:id="@+id/constraintLayout"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="#C81D1D"><Buttonandroid:id="@+id/button"android:layout_width="wrap_content"android:layout_height="300dp"android:text="Button"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" /></androidx.constraintlayout.widget.ConstraintLayout></ScrollView>

Design

The actual result on the device

If you want to subtract action bar height and status bar height to get actual available view height, use below code

height = (getHeight(this@MainActivity) * 0.5).toInt()  - getActionBarHeight() - getStatusBarHeight()

Action bar height and status bar height

fungetStatusBarHeight(): Int {
        val resourceId = resources.getIdentifier("status_bar_height", "dimen", "android")
        if (resourceId > 0) {
            return resources.getDimensionPixelSize(resourceId)
        }
        return0
    }

    fungetActionBarHeight() : Int {
        val tv = TypedValue()
        this.theme.resolveAttribute(android.R.attr.actionBarSize, tv, true)
        return resources.getDimensionPixelSize(tv.resourceId)
    }

Result