How to change the height dynamically according to screen size?

Question

I have a RelativeLayout with a ViewPager and another LinearLayout. I have set the layout width of the ViewPager as match_parent and have given the layout height a fixed value of 250dp.

However, when changing the screen sizes bigger and bigger, the height of the ViewPager gets smaller.

How to make the height change according to screen size?

If I set the height to wrap_content it almost takes up the whole screen except for a smaller bit reserved for the other layout.

The code is posted below.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.sloid.destinations.navigationdrawerfragments.aboutSLFragment">


<android.support.v4.view.ViewPager
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="250dp"
    android:layout_marginBottom="8dp"/>

<LinearLayout
    android:id="@+id/SliderDots"
    android:layout_below="@+id/viewPager"
    android:orientation="horizontal"
    android:gravity="center_vertical|center_horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>



</RelativeLayout>

why you have set it android:layout_height="250dp" ... any reason? — Aj 27, Feb 14 '18 at 12:28
you can use dimens property.. also ..set different dimensions for different screen sizes.. if at all you must have to set a fixed screen size.. — Santanu Sur, Feb 14 '18 at 12:38

Sachin Rajput · Answer 1 · 2018-02-15T04:25:21.270

Try using this

If you want to make your screen design for multiple devices ,

You can use WeightSum with LinearLayout as Container to avoid this like below :-

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="10"
tools:context="com.example.sloid.destinations.navigationdrawerfragments.aboutSLFragment">


<android.support.v4.view.ViewPager
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="3.5"
    android:layout_marginBottom="8dp"/>

<LinearLayout
    android:id="@+id/SliderDots"
    android:layout_below="@+id/viewPager"
    android:orientation="horizontal"
    android:gravity="center_vertical|center_horizontal"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="6.5"
/>



</LinearLayout>

for reference :-https://developer.android.com/reference/android/widget/LinearLayout.html

Thunder I cannot use layoutWeight because I need to add a scrollView.Is there any other way to do that.And if I used layoutWeights and added a scrollview as the parent view, it works except for a tiny probleem.Can you fix that. The link is https://stackoverflow.com/questions/48849507/images-disappear-when-read-more-button-is-clicked — Chana, Feb 18 '18 at 08:09

score 0 · Answer 2 · answered Feb 14 '18 at 12:39

You could also use modern new ConstraintLayout https://developer.android.com/training/constraint-layout/index.html to set percentage of viewpager view relative to screen height (33% in example below)

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/SliderDots"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_weight="1" />

    <LinearLayout
        android:id="@+id/SliderDots"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_below="@+id/viewPager"
        android:gravity="center_vertical|center_horizontal"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/viewPager"
        app:layout_constraintVertical_weight="2" />

</android.support.constraint.ConstraintLayout>

Hello Deni this answer makes the dot indicators go down and this is not what I expected.Anyway using layoutWeight fixed the problem but a problem arises when the whole code is added insidde a scrollView.Can you have a look and give your opinion.link is https://stackoverflow.com/questions/48849507/images-disappear-when-read-more-button-is-clicked — Chana, Feb 18 '18 at 08:14
I have multiple siblings, Better solution would be to set the height as a percentage of full screen height. — Vikas Pandey, Feb 08 '22 at 04:57

Adinia · Answer 3 · 2018-02-14T12:47:57.073

To strictly answer your question :

How to make the height change according to screen size?

You can externalize your height value to the dimens.xml in the default values folder, like

<dimen name="view_pager_height">250dp</dimen>

and in the values-sw720dp folder you can put

 <dimen name="view_pager_height">300dp</dimen>

Then use it in the layout like this:

<android.support.v4.view.ViewPager
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="@dimen/view_pager_height"
    android:layout_marginBottom="8dp"/>

Read more about that here: Using new size qualifiers.

Besides that, you can use a LinearLayout as a parent, and set weights to each child. (RelativeLayouts as parents are quite expensive, as they double measure their children)

score 0 · Answer 4 · answered Feb 15 '18 at 01:48

Set viewpager to be above sliderdots.

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
tools:context="com.example.sloid.destinations.navigationdrawerfragments.aboutSLFragment">
<android.support.v4.view.ViewPager 
android:id="@+id/viewPager" 
android:layout_width="match_parent" 
android:layout_height="match_parent"
android:layout_above="@+id/SliderDots"/> 
<LinearLayout android:id="@+id/SliderDots" 
android:orientation="horizontal" 
android:gravity="center_vertical|center_horizontal"
android:layout_width="match_parent" 
android:layout_height="wrap_content"/>
 </RelativeLayout>

How to change the height dynamically according to screen size?

4 Answers4