Responsive Layout in XML - android

Which is the best option to create a responsive layout design? The first question is what should be the height and width of every view (it should be in percentage, match constraint or wrap content using constraint layout).
If we use wrap content I think there is no way to create a responsive design with help of wrap content because if content increase the view will take all the space of the screen either vertically or horizontally
If we use match constraint then, in that case, it's good, but sometimes it is looking awesome on Android Studio but when we run it on a real device it doesn't look the same
The last option is to use percentage, in that case, I think first we have to check our item list vertically and horizontally and provide them space according to their content priority and usage
So what will be the best case to create a responsive layout in XML for Android?

It depends on UI.generaly people use the 2nd and 3rd methods because by using constraints and percentages you can get responsive UI.
sometimes it depends on your requirement.
if you are using the percentage method and you set the imageView at 10 % it's looking proper on your device but sometimes it happened that in a small device that imageView is not looked proper
So the moral is all your three methods can be applied as per UI you can not make all designs responsive using 1 method

Related

ConstraintLayout to build responsive app

i'm working on an android app , trying to make it responsive in different screen sizes, so i'm using constraintlayout . But i had a problem when i test it in a tablet in mode portrait (vertical) there is so much space in the bottem i've tried to work with PercentRelativeLayout(supports percentage based margin and dimensions for Views) it has a good result but it's deprecated. Any idea please ?
You could also use ConstraintLayout Chaining to connect your Views into a group and then you can center, expand, pack these into the available space as desired. This layout will change dynamically based on the screen size and orientation.
Using alternate layouts as mentioned (layout-sw600dp) is also a good idea. The system will automatically use this layout instead of the default layout. 600dp is a good display width to make the breakpoint for tablets.

eclipse android gui designer - limit number of items in list

When I drag a gridview into the graphical layout screen in Android Eclipse, and give it wrap content, then it fills the height of the screen with 24 placeholders.
How can I limit its length? Note this is fine when I actually run the application because my adapter adds 6 items and it isn't very long. I simple want a way of telling eclipse that in an absence of real data that it should draw something with say 6 placeholder items
I don't think it's possible to set the number of items just for the aesthetic purposes of the graphical view in xml builder. If you must do it, you could set the height to look acceptable in the XML via a literal value such as 100dp, then set the layout params for height to Wrap Content when you assign and initialize it in your onCreate(). That way, it will look the height you require in the graphical interface editor, but will wrap the number of elements you add to it when it's running on the device.
http://developer.android.com/reference/android/view/ViewGroup.LayoutParams.html
I agree this is not the most elegant solution, but it would probably work.

How to create a regular, resizable grid without nested weights?

I've one of the simplest layouts imaginable: A num pad.
I want to create a fragment containing a 3 x 4 grid of buttons. The layout should automatically resize the num pad to fill the available space.
I've learned, that GridLayout is not up to the task, and TableLayout/TableRow or nesting LinearLayouts means nesting weights, which is also discouraged for performance reasons. A RelativeLayout won't work either, because that requires at least one button with given dimensions.
So, is there a clean way to create a regular grid that will resize to fill its parent?
Any help is appreciated, thx!
You will need a custom compound control.
Check the following link:
http://developer.android.com/guide/topics/ui/custom-components.html#compound
Make the control fill the available space. Make it to have 12 buttons. Calculate the size and position of them based on their position and the available space.
Depending on your needs you might also need to override onMeasure() and onLayout() defined earlier in the above document, in the "Fully Customized Components" section.

Android SDK, Placeing widgets/buttons etc at will?

Hey Im new to android developing and I have a quick question. Is there a way to place buttons where I want them on the view? Right now they only seem to be placed where there is specific spots for them. Why cant i drag and place them where ever I want like in the iphone sdk for example?
Is there a way to do so or does this functionality not exist? thanks.
Android (eg. similar to Qt) uses a concept of layouts. This is especially useful when you're creating UIs that can be displayed on different devices with different DPIs, different screen resolutions, etc.
So instead placing your buttons at pixel coordinates you put them, independent of device screen resolution, into layouts.
Read more in User Interface documentation. Using Eclipse ADT plugin you can visually create layouts. You can even embed one layout into other, creating eg. LinearLayout in RelativeLayout. This gives much more possibilities of creating screen scalable applications (one app on phone and tablet for example).
There is AbsoluteLayout, but that class is deprecated. The recommended strategy is to use a RelativeLayout (you can control the position of views by setting layout margins) or build your own custom layout class.
An android UI screen is build for various screen sizes , due to which you can not specify an exact location for the UI component .
Android instead uses the concepts of Layouts where each layout has a different behavior. Here are a few of them.
LinearLayout aligns all children in a single direction — vertically or horizontally, depending on how you define the orientation attribute
TableLayout positions its children into rows and columns
RelativeLayout , one of the most used layouts , lets child views specify their position relative to the parent view or to each other (specified by ID).
Android uses layouts to design the UI. For example, a vertical linear layout stacks one element on top of the other.
AbsoluteLayout is the most precise, but it's also harder to maintain and can get messy.
I recommend RelativeLayout. It positions UI elements relative to other elements.
If you don't really need that much precision, one more option is nesting layouts within layouts. But doing that too much gets messy and RelativeLayout becomes the better option.
A UI element's position is determined by the layout you choose. See this link.

Android View Design Issues

I've been playing about with the layout of a view with Android (lets say within the MainActivity) and I'm looking to create this sort of layout using 3 ImageView's (where each block represents an image):
This is rather easy to pull of using LinearLayout's but only if you specify the exact size and position of each ImageView. This then obviously causes problems when looking at different screen sizes.
Using AbsoluteLayout looked like it was going to work at first, but I've read that it's deprecated and it still causes problems with different screen sizes.
Then there is RelativeLayout, which I've tried using with DroidDraw, but it doesn't seem to get me very far when I implement it :(
So, does anyone have an ideas of how to achieve this?
EDIT: I've got close to doing this using dp instead of px but this still gets screwed up when using larger resolution devices! :(
Thanks
Romain Guy does something very similar using RelativeLayout. Android Layout Tricks #1
One solution is that you could use a TableLayout with 2 columns, and then in the second column embed a second TableLayout.
DroidDraw doesn't always show exactly how it will work when it runs 100% of the time I've noticed.
You can do this with a horizontal LinearLayout: add the green first, then add a vertical liner layout for the blue and orange and give each an appropriate weight (like 50 and 50).
You can still use LinearLayout but make the width/height in dip units. Thatvway it should look the same on any supported screen size. Alternativly, you could use the weight attribute instead which is probably a better idea for this case.

Categories

Resources