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>

Answer 1

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

Answer 2

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>

Answer 3

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)

Answer 4

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>