How to make components responsive in various screen sizes

Question

Hello, I was wondering how to make the components responsive to various screen sizes, e.g.: I have an image view but it gets a size on the tablet, and the same size on a small phone, IE on the small phone will be big. I wanted to know how to readjust this size so that it’s a pattern on all devices.

xml of what I want to leave responsive:

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="250dp"
    android:layout_height="match_parent"
    android:layout_weight ="3"

    android:src="@drawable/splashhhh2" />

Answer 1

For this you can use the dimens.xml files in the values folders.

For example, you have an Imageview.

<ImageView
    android:layout_width="@dimen/imageview_width"
    android:layout_height="@dimen/imageview_height"
/>

So in the values-mdpi folder, for example, you create the dimens.xml file and put:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="imageview_width">30dp</dimen>
    <dimen name="imageview_height">30dp</dimen>
</resources>

Then you create in the values-xlarge folder, the same file, but put other values:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="imageview_width">60dp</dimen>
    <dimen name="imageview_height">60dp</dimen>
</resources>

You can create the dimens files in various folder combinations, for example values-normal-hdpi.

Another option would be to use the weight field of the Linearlayout component. For example:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:weightSum="10" >

    <ImageView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="7" />

</LinearLayout>

So the components will always occupy the same percentages of the screen, regardless of its size.

Answer 2

To make your layout responsive, you’ll need to create different sources for the different configurations you want. You can create folders within the res folder by following the following qualifiers(The most common ones):

• Smallest Width(Smallest Width): android uses the lowest screen value between height and width to set the features it will use. folder name : layout-swdp where the N and dimension a in dp. Example: layout-sw320dp, layout-sw720dp.
• Available width: Same as the previous qualifier, but this only checks the value of the device width. folder name: layout-wdp where the N and the width value. Example: layout-w320dp
• Available height: Qualifier similar to the previous one, only instead of the width of the device takes into account the height. folder name: layout-hdp. Example: layout-h720dp
• Screen size: using this qualifier, the android checks the screen size and this can be small- approximately 320x426dp, normal-about 320x470dp, large-approximately 480x640dp, xlarge-approximately 720x960dp.Example: layout-normal
• Orientation of devices: This qualifier selects the folder with the required resources according to device guidance. port- Portrait and land-Landscape. Example: layout-land.
• Screen pixeld density(dpi): this qualificaodr selects the folder with the right features after identifying the pixel density of the screen. these densities can be : ldpi-Low Density-120dpi, mdpi-medium Density-160dpi hdpi-high densitiy-240dpi, xhdpi- extra high Density-320dpi.

After choosing which of the qualifiers will best describe how Voce wants to define the screens that will support Voce should create folders values using the qualifiers above and placing in each of them the dimens.xml file with the dimensions that Voce will use inside the layout files to define the width and the height.