How to make components responsive in various screen sizes

Asked

Viewed 1,729 times

2

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" />

2 answers

3


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.

  • How does this weight work? Why 10 in the first? 3 in the second, and 7 in the third?

  • These are just sample values. You define in Linearlayout what your maximum size will be. And then divide the weight into his children. @Warlock

  • I made the changes in xml, and saw no changes, which may be?

  • Which of the two ways did you do it? @Warlock

  • the second, because it seems simpler

  • put the layout code please

  • I posted the code, I tried several values but it doesn’t change anything.

  • You need to put width as 0 dp

  • If you put 0 of the error: Suspicious size: this will make the view Invisible

  • You put in the "father" of your android Imageview:weightSum?

  • I put it the way you put it on Linearlayout android:weightSum="10"

  • place the entire block of the layout then please

  • I can not post all the code, only the image view part appears, follow on Stebin: http://pastebin.com/ZRJ7VsyT

Show 9 more comments

0

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.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.