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"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginVertical="10dp"
android:orientation="vertical">
<TextView
android:layout_width="28dp"
android:layout_height="28dp"
android:padding="2dp"
android:gravity="center"
android:background="@drawable/circle"
android:text="1" />
<ImageView
android:id="@+id/img1"
android:layout_width="wrap_content"
android:layout_height="70dp"
android:layout_centerInParent="true"
android:background="@drawable/ic_fingerprint_black_24dp" />
<TextView
android: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>
<View
android:layout_width="5dp"
android:layout_marginVertical="15dp"
android:background="@color/colorPrimary"
android:layout_height="80dp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="28dp"
android:layout_height="28dp"
android:padding="2dp"
android:layout_marginLeft="5dp"
android:gravity="center"
android:background="@drawable/circle"
android:text="8" />
<ImageView
android:id="@+id/img2"
android:layout_width="wrap_content"
android:layout_height="70dp"
android:layout_centerInParent="true"
android:background="@drawable/ic_fingerprint_black_24dp" />
<TextView
android: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>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<View
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_marginVertical="10dp"
android:background="@color/colorPrimary"
android:layout_marginHorizontal="15dp"
android:layout_height="5dp" />
<View
android: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
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginVertical="10dp"
android:orientation="vertical">
<TextView
android:layout_width="28dp"
android:layout_height="28dp"
android:padding="2dp"
android:gravity="center"
android:background="@drawable/circle"
android:text="1" />
<ImageView
android:id="@+id/img11"
android:layout_width="wrap_content"
android:layout_height="70dp"
android:layout_centerInParent="true"
android:background="@drawable/ic_fingerprint_black_24dp" />
<TextView
android: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>
<View
android:layout_width="5dp"
android:layout_marginVertical="15dp"
android:background="@color/colorPrimary"
android:layout_height="80dp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="28dp"
android:layout_height="28dp"
android:padding="2dp"
android:layout_marginLeft="5dp"
android:gravity="center"
android:background="@drawable/circle"
android:text="8" />
<ImageView
android:id="@+id/img21"
android:layout_width="wrap_content"
android:layout_height="70dp"
android:layout_centerInParent="true"
android:background="@drawable/ic_fingerprint_black_24dp" />
<TextView
android: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>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<View
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_marginVertical="10dp"
android:background="@color/colorPrimary"
android:layout_marginHorizontal="15dp"
android:layout_height="5dp" />
<View
android: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
fun getWidth(context: Context): Int {
val displayMetrics = DisplayMetrics()
return if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
context.display?.getRealMetrics(displayMetrics)
displayMetrics.widthPixels
}else{
this.windowManager.defaultDisplay.getMetrics(displayMetrics)
displayMetrics.widthPixels
}
}
fun getHeight(context: Context): Int {
val displayMetrics = DisplayMetrics()
return if (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
override fun onCreate(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"?>
<ScrollView 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:id="@+id/scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#4CAF50"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#C81D1D">
<Button
android: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
fun getStatusBarHeight(): Int {
val resourceId = resources.getIdentifier("status_bar_height", "dimen", "android")
if (resourceId > 0) {
return resources.getDimensionPixelSize(resourceId)
}
return 0
}
fun getActionBarHeight() : Int {
val tv = TypedValue()
this.theme.resolveAttribute(android.R.attr.actionBarSize, tv, true)
return resources.getDimensionPixelSize(tv.resourceId)
}
Result
Post a Comment for "In Android Responsive Design Screen With Scroll View And Make It Responsive?"