LinearLayout with percent empty space - android

I am working on linear layout for my simple android application. I wanna make the portion of two views dynamically change based on the size ( I want to have, for a row for left to right, the first 20% is empty, and all the content is inside the rest of 80%) . For this approach, i chosen the weight for different view. I created an nested linear layout for this approach. For example, the layout hierarchy is something like this.
<linearLayout> //parent layout
<linearLayout //child 1 layout
android:layout_weight="1">
//so that this view occupy 20% of the space regardless the width of device. I intensionally wanna keep this view empty.
</linearLayout>
<linearLayout //child 2 layout
android:layout_weight="4">
//so that this view occupy 80% of the space regardless the width of device. and
//inside this view I have whatever view I wanna add on it.
<EditText>
<ImageView>
</linearLayout>
</linearLayout>
With this approach, the Lint in Android Studio tell me the following warnings:
This is a Nested Layout. Layout weights require a widget to be measured twice. When a LinearLayout with non-zero weights is nested inside another LinearLayout with non-zero weights, then the number of measurements increase exponentially.
the child 1 layout is useless: This LinearLayout view is useless (no children, no background, no id, no style)
Can anyone address me the right layout to use in order to have the layout dynamically change based on the size of devices? How should I correctly set up the empty space for a linear layout case?

This is a possible solution using weights:
<LinearLayout
android:layout_width="match_parent"
android:gravity="end"
android:weightSum="1">
<!-- Your content here: -->
<View
android:layout_width="0dp"
android:layout_weight="0.8"
android:layout_gravity="end" />
</LinearLayout>

Have a look at PercentRelativeLayout.
Note: You need the Percent library to use it.

Related

Android UI: "Smart" centering?

So I have a UI element (a single line of text) that I want horizontally centered with respect to the overall device -- unless/until it collides with other UI elements in the given view group / layout. At that point I'd like it to be either centered in the space remaining or pegged as close to being centered overall as possible without colliding. [When there's finally not enough space, then I want to use ellipses.]
Is there any way to achieve this using just standard Android layouts?
I'm currently achieving this via code that adjusts layout constraints when the view group's width changes, the text changes, or related UI elements become visible/invisible. It works fine, but I can't help thinking that some layout should just do this for me.
You can use a weighted horizontal LinearLayout like this:
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:gravity="center_horizontal"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="i am centered"
android:ellipsize="end"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="another widget"/>
.
.
.
</LinearLayout>
The TextView with width 0dp and weight 1 will use the remaining horizontal space.
You can add additional widgets to the LinearLayout, and the TextView will always take the remaining space.
For example, if you change the Visibility of the Button to GONE, you'll see the TextView will expand to use the whole width. Similarly, if you programmatically add new widgets to the LinearLayout, the available space for the TextView will adjust.
You can further add ellipsize options to control what happens when the text does not fit in the TextView size.

Inserting many views into one layout without them overflowing to the end of the screen

I'm looking for a way that I can dynamically add views into a layout (currently a LinearLayout) and that they won't overflow into the end of the screen and be hidden.
I can't use ScrollViews since it has to look like one sentence (It's a "fill the blanks" question).
I'm just looking for an idea on how to do this, not the code itself.
Thanks in advance, Shay.
If you are using linear layout than use linear layout with weights:
For example:
You have a LinearLayout with vertical orientation and you have 2 ImageViews inside it and you want these ImageViews always to take equal space.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:weightSum="2"
android:orientation="vertical"
android:layout_gravity="center">
You can set the layout_weight of each ImageView to 1 and the weightSum in LinearLayout to 2 to achieve this.
<ImageView
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_height="0dp"/>
This will work correctly for any device without overflow into the end of the screen and be hidden

How to set the width of LinearLayout inside RelativeLayout to be independent of screen resolution?

I am a newbie in Android-programing and currently I'm building my first application. I have a LinearLayout (with several imageviews), which is situated inside of basic RelativeLayout.
The xml width and heigth settings of LinearLayout are as follows:
android:layout_width="135dp"
android:layout_height="match_parent"
The settings of imageviews inside LinearLayout look like this:
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="125dp"
android:layout_weight="3"
.....
When I start my application on small screens, it looks normal, but when the screen is big, all the pictures become very narrow (the width of LinearLayout inside RelativeLayout stays the same on small and big screen). I tried to set it in percentage, but that is not allowed. So I ask you: how can I set the width of LinearLayout to be like 25-30% of the width of parent RelativeLayout(to make my images look pretty on any device).
I know that there is a layout_weight attribute, but it doesn't seem to work with layouts inside another layouts (or maybe I have no idea what is correct or what is not).
As I know, you cant take parent layout percantage to child layout.
Linearlayout add elements to as columns or as row.
linearlayout api
Relative Layout
A Layout where the positions of the children can be described in
relation to each other or to the parent.
Relative Layout api
Why do you use linearlayout inside relative layout? In linearlayout you cant design your layout elements puting element with mouse,But in relativelayout you can.

Have elements equally span entire width / height of their RelativeLayout

I have, say three buttons i would like to list below one another in a layout. Depending on the device, screen size, pixel density, orientation and so on, i would like the buttons to span the entire height of their parent layout. The buttons each have a fixed height (dp), so the spanning is more likely concerning the space between the buttons.
I saw several questions on various forums regarding how a LinearLayout is supposedly a fix for this problem, by nesting a layout for each element, having the layout span. I would very much like to avoid nesting layouts, and I'm using a RelativeLayout as of now, so if there is any way to go about it with this type of layout it will be of great help! :)
Additionally, I would like the top and bottom button to "touch" the parent layout border at the top and bottom, and the last (or rest) button to fill out the rest of the vertical space equally.
Thank you in advance.
I'm not entirely sure what you wish to achieve, but you should be able to do this using a LinearLayout & weights (so you don't have to nest multiple layouts).
If you want the 3 buttons to take up the entire parent of the screen just add a weight to each for example:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button_one"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<Button
android:id="#+id/button_two"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<Button
android:id="#+id/button_three"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
Try to set to topButton a field in XML:
android:layout_alignTop="true";
Try to set to middleButton a field in XML:
android:layout_centerVertical="true";
Try to set to bottomButton a field in XML:
android:layout_alignBottom="true";

Automatic/dynamic margin in Android layout

I was wondering if it's possible to set an automatic/dynamic margin (padding?) between elements in an Android layout without having to do it programmatically?
For example let's say there is a horizontal LinearLayout which is set to android:layout_width="fill_parent" and that contains five elements. Is there a setting that evenly shares the remaining empty space of the LinearLayout to the margins of the child elements?
See image at http://img63.imageshack.us/img63/8/margin.png
Thanks for any help!
You could use view spacers as your margin, with the layout weight set on them.
<LinearLayout ...>
<View id=marginLeft android:layout_weight="1"/>
<Element1/>
<Element2/>
<Element3/>
<Element4/>
<Element5/>
<View id=marginRight android:layout_weight="1"/>
</LinearLayout>
This should make the two views use up any remaining space in your row. Note, the above XML will not parse :)
-- Edit
Just saw the picture. To add equal spacing between each of the elements too would just be a case of adding more spacer elements between your content elements (all with the same layout weight)
Yup. Only LinearLayouts support it. Tis called layout weight
Look for LinearLayout at http://developer.android.com/guide/topics/ui/layout-objects.html
For a good intro, look here

Categories

Resources