Which is the best approach for key value pair representation in mobile material ui

Question

I am having limitted data for a page as given below

Key	Value
First name	John
Last name	Doe
Phone	+9099999999
City	Chicago

I want to represent the above data in an Android view. I tried to avoid table view like above. I am trying to show it as a material style. But in material documentation, I cannot find how to handle this. Could anybody share some insights or links.

Answer 1

If the data is not editable you could use the solution proposed in the mindsphere blog:

• Have the key and value side by side on larger screens and above each other on smaller ones

• use individual font sizes to differentiate key and value, with key either above or below the value (the example below only shows key under value)

Answer 2

You could use textfields to display the data (if it is editable). The label above the textfield would be your key (https://material.io/components/text-fields#anatomy)