Linear layout adapting to screen size without overlap
I have an Android layout of an activity shown below. The layout is divided into a header and a footer. The middle part is divided into equally weighted segments and each segment has a text above. With this layout I have two issues:
First, when the layout is displayed on a small screen the text and images are vertically overlapping. What I instead want is that the images and the text scale so that they are not overlapping on any screen size. I assume that this could be achied by moving the texts into the equally weighted parts (i.e. @+id/row1, @+id/row2, @+id/row3). But I don't know how this can be done and if that is real the solution.
Does somebody know what to do?
Second, the question mark in the header is too big in relation to the text. On the screenshot the text is only on one line so the question mark should be smaller. On smaller screens, the text is perhaps on two lines, then the question mark should get bigger. That means how can I achieve it so that the question mark is adapting to the height of the text?
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:id="@+id/state_description"
android:background="@color/eth"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:layout_marginStart="30dp"
android:layout_marginEnd="100dp"
android:orientation="vertical"
android:gravity="start|center_vertical"
android:textSize="16sp"
android:text="This is a tile" />
<ImageView
android:id="@+id/sam_help_button"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_alignParentEnd="true"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:layout_marginEnd="10dp"
android:padding="5dp"
android:adjustViewBounds="true"
android:layout_centerVertical="true"
android:scaleType="fitCenter"
android:src="@drawable/question_mark_white"
android:background="@drawable/round_button"/>
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:weightSum="3"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="20dp"
android:gravity="center"
android:textSize="16sp"
android:text="This is the title of the first three images" />
<!-- Row number 1 -->
<LinearLayout
android:id="@+id/row1"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="@dimen/padding_contour"
android:layout_marginBottom="0dp"
android:layout_marginLeft="@dimen/padding_contour"
android:layout_marginRight="@dimen/padding_contour"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="horizontal">
<LinearLayout
android:id="@+id/valence_pos_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="@+id/valence_pos_image"
android:layout_width="65dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:src="@drawable/ic_launcher_background" />
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:textAlignment="center"
android:layout_marginTop="10dp"
android:text="Positive"
android:textColor="@android:color/white"
android:textSize="14sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/valence_neutral_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="@+id/valence_neutral_image"
android:layout_width="65dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:src="@drawable/ic_launcher_background" />
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:textAlignment="center"
android:layout_marginTop="10dp"
android:text="Neutral"
android:textColor="@android:color/white"
android:textSize="14sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/valence_neg_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="@+id/valence_neg_image"
android:layout_width="65dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:src="@drawable/ic_launcher_background" />
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:textAlignment="center"
android:layout_marginTop="10dp"
android:text="Negative"
android:textColor="@android:color/white"
android:textSize="14sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:gravity="center"
android:textSize="16sp"
android:text="This is the title of the second three images" />
<!-- Row number 2 -->
<LinearLayout
android:id="@+id/row2"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="@dimen/padding_contour"
android:layout_marginBottom="0dp"
android:layout_marginLeft="@dimen/padding_contour"
android:layout_marginRight="@dimen/padding_contour"
android:layout_weight="1">
<LinearLayout
android:id="@+id/arousal_high_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="@+id/arousal_high_image"
android:layout_width="65dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:src="@drawable/ic_launcher_background" />
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:textAlignment="center"
android:layout_marginTop="10dp"
android:text="High"
android:textColor="@android:color/white"
android:textSize="14sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/arousal_neutral_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="@+id/arousal_neutral_image"
android:layout_width="65dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:src="@drawable/ic_launcher_background" />
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:textAlignment="center"
android:layout_marginTop="10dp"
android:text="Medium"
android:textColor="@android:color/white"
android:textSize="14sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/arousal_low_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="@+id/arousal_low_image"
android:layout_width="65dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:src="@drawable/ic_launcher_background" />
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:textAlignment="center"
android:layout_marginTop="10dp"
android:text="Low"
android:textColor="@android:color/white"
android:textSize="14sp" />
</LinearLayout>
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:gravity="center"
android:textSize="16sp"
android:text="This is the title of the last three images" />
<!-- Row number 3 -->
<LinearLayout
android:id="@+id/row3"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="@dimen/padding_contour"
android:layout_marginBottom="0dp"
android:layout_marginLeft="@dimen/padding_contour"
android:layout_marginRight="@dimen/padding_contour"
android:layout_weight="1">
<LinearLayout
android:id="@+id/dominance_low_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="@+id/dominance_low_image"
android:layout_width="65dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:src="@drawable/ic_launcher_background" />
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:textAlignment="center"
android:layout_marginTop="10dp"
android:text="Controlled"
android:textColor="@android:color/white"
android:textSize="14sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/dominance_neutral_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="@+id/dominance_neutral_image"
android:layout_width="65dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:src="@drawable/ic_launcher_background" />
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:textAlignment="center"
android:layout_marginTop="10dp"
android:text="Neutral"
android:textColor="@android:color/white"
android:textSize="14sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/dominance_high_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="@+id/dominance_high_image"
android:layout_width="65dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:src="@drawable/ic_launcher_background" />
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:textAlignment="center"
android:layout_marginTop="10dp"
android:text="In-control"
android:textColor="@android:color/white"
android:textSize="14sp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:orientation="vertical">
<RelativeLayout
android:id="@+id/sam_button_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/submit_sam_button"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_marginEnd="30dp"
android:layout_alignParentEnd="true"
android:textSize="14sp"
android:padding="10dp"
android:textColor="@android:color/white"
android:background="@drawable/button"
android:drawableStart="@drawable/ic_check_circle_white_24dp"
android:drawablePadding="10dp"
android:text="Next" />
<Button
android:id="@+id/cancel_sam_button"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_alignParentStart="true"
android:textSize="14sp"
android:padding="10dp"
android:textColor="@android:color/white"
android:background="@drawable/button"
android:drawableStart="@drawable/ic_cancel_white_24dp"
android:drawablePadding="10dp"
android:text="Cancel" />
</RelativeLayout >
</LinearLayout>
</LinearLayout>
</LinearLayout>
<!-- Container for contents of drawer - use NavigationView to make configuration easier -->
<com.google.android.material.navigation.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:menu="@menu/drawer_view"
app:headerLayout="@layout/nav_header" />
</androidx.drawerlayout.widget.DrawerLayout>
Solution
The problem your are facing is because of hard-coded layout sizes such as,
layout_height=60
layout_width=60
instead you must use,
layout_height="match_parent/wrap_content"
layout_width="match_parent/wrap_content"
have a look at this,
https://developer.android.com/training/multiscreen/screensizes
https://www.youtube.com/watch?v=b6AVdCKoyiQ
you should also use layout_weight attribute,
- Capacitor on Android fails with error: "ERR_SDK_PACKAGE_NOT_FOUND: SDK package not found by location: D:\Android_SDK_HOME\platform-tools."
- Flutter App Cant Authenticate to Google Drive API Using google_sign_in Package
- Spinner in Full Screen android app is showing status bar
- Android SDK not found for react-native
- Android: .nomedia is ignored, images still appear on the gallery
- BuildConfig not getting created correctly (Gradle Android)
- Androidx : How to test Slider in UI tests (Espresso)?
- RequiresApi vs TargetApi android annotations
- React Native, Execution failed for task ':app:mergeDexDebug'
- Request for permission (Pop - up) dialog is not showing in Android
- Reset mutableStateOf if the initial value changes - Jetpack Compose
- How to use a custom typeface in a widget?
- How NOT to create projects with Jetpack Compose using Android Studio
- Customize android app preview when it is in background with secure flag
- Viewmodels in android using mvvm and jetpackcompose
- text and icon parameters in a Tab don't allow composable invocations
- Channel vs Shared Flow what is the difference
- Android Jetpack Compose Room query depending on Flow
- Jetpack Compose how to recompose when internal state changes
- How to fix this Hilt gradle setup?
- How to use ThreeTenABP in Android Project
- Unable to load class Plugin
- How can I add .so files to an android library project using gradle 0.7+
- How to get context for Room database and initialize it correctly in Android Compose?
- How to show/hide password in TextFormField?
- How to pass List of data from NavGraph in android kotlin Android
- Firebase analytics AppMeasurement not enabled
- Why WebView doesn't render raw HTML properly?
- ':google_sign_in_android:compileDebugJavaWithJavac'
- Play Media using URL in Android using Media