How to scale different Views to all screen sizes in Android Studio?

In this article, it is shown how to change the size of View in Android App Development (like TextView, etc), so that they can modify the content that is displayed on the screen.

Note: For this article, XML visualizer instead of Android Studio.

Below are the various methods to change the size of Views in Android:

  1. Hard-coding the values in dp (density pixel): We know that pixels are a unit of measure for an image or any object that appears on a computer screen. But if we specify the size of a View in pixels, there’s a very big problem which will arise since every device has a different pixel screen ratio. The more the number of pixel a device has, the more crisper and better quality images can be seen.

    For example, if we specify a view to being 4pixels*4pixels, it may be shown in varying sizes according to the device concerned.

    We can overcome this issue by specifying the view in density-pixels(dp) instead of pixels. When specified in dp, the device itself adjusts the view as such that the view will take the space it was intended to.



    Now that we know the upper-hand of using density-pixels over pixels, let’s look at the code to do so:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <TextView
        android:text="You are in GeeksforGeeks!"
        android:background="#66bb6a"
        android:layout_width="250dp"
        android:layout_height="450dp" />

    chevron_right

    
    

    Note: To run this code, erase any previously written code from the XML Visualizer and paste the above code.

    Output:

    We see a very tiny writing in a big green rectangle. The rectangle is the size specified by us: 450dp*250dp. It is evident from the code that while specifying the size of the view(In the above example it’s a textView), we need to set values for two parameters: height and width. If any of them is absent, the code won’t run.

  2. Using wrap_content: Generally, hard-coding the values in dp isn’t a good practice. Take the above output as an example: our text is quite tiny but we are using a gigantic green box to enclose it. Not only it looks weird but it also takes a lot of unnecessary space. Also, many times we don’t know how much content will there be in the view; say user-input, if it’s a long input then the size which we specified in dp might be small to hold the content thus cutting it off and if the input is very small, there will be a lot of space left inside the specified view thus resulting in poor design.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <TextView
        android:text="This is a very very large input in a very very small view size!"
        android:background="#ffff00"
        android:layout_width="30dp"
        android:layout_height="80dp" />

    chevron_right

    
    

    Output:

    To solve this problem, we use the wrap_content function. It makes the size of the view restricted to the content it covers. Therefore, the view size will grow and shrink as the content it covers grows or shrinks. Let’s look at the code for it:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <TextView
        android:text="This is a very very large input in a view size which will grow accordingly!"
        android:background="#42a5f5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    chevron_right

    
    

    Output:



    However, there is one more way which comes in handy when we are dealing with more than one view.

  3. Using match_parent: When we have more than one view on the screen, we use layouts to arrange the views. The layout which we use is also a view and is known as parent view and all the views which it contains are known as child views.

    While specifying the layout, we also need to specify it’s size just as we would do with any other view. We can do this by hard-coding the values in dp or using wrap_content. However, using wrap_content for layouts might make the design poor as it may sometimes make the child view smaller or larger than intended.

    If we want the layout size to match the size of the device, we need to use match_parent. Not only can it be used for layout aka parent view but also for child views. If we use it for child views, it will be the size of the parent view.

    Below is the code to display the above method:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/darker_gray">
          
        <ImageView
            android:src="@drawable/rainbow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>

    chevron_right

    
    

    Now the layout will stretch across the entire display. Here, we used the colour “darker_gray” for the layout so that we can see it covering the entire device. If no colour is specified, the layout will be invisible.

    Output:

    If we use match_parent on an image view, it will take the size of the entire device display thus creating a full-bleed image:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <ImageView
            android:src="@drawable/rainbow"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"/>

    chevron_right

    
    

    Output:

Don’t stop now and take your learning to the next level. Learn all the important concepts of Data Structures and Algorithms with the help of the most trusted course: DSA Self Paced. Become industry ready at a student-friendly price.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.