Responsive layout in Android

Question

I want to make a responsive design in Android i.e. I need such a layout in which I will add views programmatically and they will adjust them according to screen size. For example: I want to add 10 views in a layout When I add them if there is place for only three views per line then automatically they get adjust in four rows and three columns i.e

[0,0] [0,1] [0,2]

[1,0] [1,1] [1,2]

[2,0] [2,1] [2,2]

[3,0]

But as in landscape mode, there is more space vertically

[0,0] [0,1] [0,2] [0,3] [0,4]

[1,0] [1,1] [1,2] [1,3] [1,4]

As you can see in example if views are getting adjusted according to width — Faiq, Sep 05 '17 at 12:50
Responsive to what? Your screen size won't change past the initial layout. Orientation changes can be made in the res/layout-land folder files — OneCricketeer, Sep 05 '17 at 12:50
https://stackoverflow.com/questions/17646363/android-gridlayout-implementation check this link. — Shaifali Rajput, Sep 05 '17 at 12:54

score 1 · Accepted Answer · edited Sep 05 '17 at 12:52

1

Use flexbox layout

In builde.gradle add

dependencies {
...
compile 'com.google.android:flexbox:0.3.0'
}

and use it in the layout xml. i.e.

<com.google.android.flexbox.FlexboxLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:alignItems="center"
    app:alignContent="center"
    app:flexDirection="row"
    app:flexWrap="wrap">

   ...
</com.google.android.flexbox.FlexboxLayout>

edited Sep 05 '17 at 12:52

OneCricketeer

179,855
19
132
245

answered Sep 05 '17 at 12:48

anemomylos

546
1
6
14

In this layout views are not going to next line. No matter how many views I add – Faiq Sep 05 '17 at 13:01
@Faiq you are doing something wrong. Maybe you have to make some modification to the parent layout of the `flexbox`. – anemomylos Sep 05 '17 at 13:05
Done! Achieved the purpose! Thanks – Faiq Sep 05 '17 at 13:09
Is there any way such that space between views will also get arranged automatically by taking remaining present space – Faiq Sep 05 '17 at 13:23
@Faiq without knowing your code is difficult to give you a tip. I also thing that you have to open a new question since that exceed the current question. – anemomylos Sep 05 '17 at 13:42
Yup however purpose achieved – Faiq Sep 05 '17 at 20:19
Thanks by the way – Faiq Sep 05 '17 at 20:19

score 1 · Answer 2 · answered Sep 05 '17 at 14:48

It seems the Flexbox solution worked for you, however there is another approach that can provide a different avenue for this problem. In case you are not aware, you can actually define different XML layout files with the same name - 1 for portrait mode, and another for landscape mode.

When creating a new layout file, if you right click on the layout directory and select New > Layout resource file you can configure the orientation here. In the Available qualifiers section, scroll down to Orientation and add it to the file. At this point, you will be able to choose the orientation for this layout and, if you name the file the same name as the opposite orientation, your app will automatically inflate the view that is appropriate for the device's current orientation. Android Studio will also understand the different layout orientations you have chosen while in the editor, and the screen you see in the Design tab will be adjusted accordingly i.e. the landscape layout file will have more room vertically to build the UI with.

Note that this adds a level of complexity to the application itself in the sense that the activity lifecycles will need to be accounted for since the views are now being destroyed and re-drawn by the OS in response to when the user switches the orientation of their device.

Hope this helps either in this situation or in some other situation where you want to accomplish different layouts based on device orientation!

Thanks for this solution! BTW I guess in flexlayout maybe views get destroyed automatically? — Faiq, Sep 05 '17 at 20:17
Never worked with the flex layout, so I couldn't tell you for sure. Likely that is gets destroyed since the UI changes - I would think it would follow the rest of the Android architecture @Faiq — DMP, Sep 06 '17 at 12:23

Responsive layout in Android

2 Answers2