DEV Community

loading...
Cover image for Android Views: Peek-A-Boo

Android Views: Peek-A-Boo

Pabi Moloi, but Forbes
Creator of Uteroo. Software Developer. Green Tea Drinker. Macaroon Eater. Llama Admirer. But Mostly, A Software Developer.
・3 min read

In this post, I will be talking about the Visibility attribute for Android views. So what are Android Views? Android Views are user interface elements that are drawn onto the screen and that a user can interact with. For example, a button, a textview,and an imageview.

Android view attributes define how an element looks like, such as it's height, width, and color. Think of them as metadata for views. A view's visibility can be set to gone, invisible, or visible, as indicated in the sample code below:
Visible Textview

android:visibility="visible"
This is a view's visibility value by default. This means that the view will always be displayed on the screen.
As it is default, a view's visibility does not have to be explicitly set to visible. As we can see with the sample below, the textview that displays the infamous "Hello World" is visible on the screen.
Visible Textview

android:visibility="gone"
When we set textview's visibility attribute to gone,
it will simply not show on the screen and it's space on the layout will be occupied by surrounding elements.
When the view is toggled from gone to visible, surrounding elements will simply make way for the view and the view will ocuppy it's space and show on the screen.
Looking at our sample app below, we can see that the textview is not visible on the screen and it's space is occupied by the buttons.
Visible Textview

android:visibility="invisible"
If a view's visibility is set to invisible, the view will not be displayed, but it will still occupy it's space on a layout. So it might make the layout look a little weird with some extra space in-between elements.
Taking a look back at our sample app, the textview is not shown, but it still occupies it's space. The buttons stay in their positions.
Visible Textview

Changing Visibility On The Go
Toggling between the different visibility values can be easily achieved programatically. I have added the functionality of toggling between the different visibility attribute value behind the clicks of the buttons. When the "Gone" button is clicked, we change the visibility value to gone. When the "Invisible" button is clicked, we change the visibility value to invisible. When the "Visible" button is clicked, we simply change the visibility value to visible.
Take a peek below:
Visible Textview

Toggling between the different visibility values aids us in showing the user relevant content depending on the activity being carried out on the screen. For example, we can show a loader when making a service call, and then only display the underlying content once we have a response from the server. The android visibility attribute is just one of many attributes that are available for us to use and play around with, so don't be shy to try them out.
A cool post you can check out https://guides.codepath.com/android/Defining-Views-and-their-Attributes.

Credits:
Thank you to Andrei Lazarev for the amazing cover image take from https://unsplash.com/photos/U47vtNMkyXg

Discussion (6)

Collapse
kostassar profile image
Kostas Sar

So does this mean that you could write the whole app in your main view by switching each component's visibility value?

Collapse
ditn profile image
Adam Bennett

People do actually do this sometimes - when Fragments went out of vogue a lot of people switched to using Compound Views/ViewGroups with their own View Controller/Presenters and just switched the visibility in the Activity.

It works fairly well for a handful of pages (say, bottom nav bar pages), but you wouldn't do an entire app this way - especially now that Support Fragments are actually good and the recommended way of doing it.

Collapse
pabiforbes profile image
Pabi Moloi, but Forbes Author

From a best practise point of view, I do not think that this is a good idea. In my opinion, it's best to have fragments, and swap those in and out of the main view.

Collapse
k_kendrapadia profile image
Khanti Kendrapadia

Nice Post. .

Collapse
lalunamel profile image
Cody Sehl

What a great photo