Solution 1 :
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,
Problem :
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>
Comments
Comment posted by machinery
Thank you for your answer. I’m already using layout_weight attribute. When I use wrap_content for the imageView then the image gets very big (much bigger than the text height. Can you please give an example how to change my code for the two problems?
