I have two layouts. The inner one wraps its contents for height and matches parent for width.
<RelativeLayout
android:id="#+id/lytMoreInfo"
android:layout_width="match_parent"
android:layout_height="0dp" >
<LinearLayout
android:id="#+id/lytMoreInfoButtons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:orientation="horizontal" >
<!-- OTHER VIEWS HERE -->
</LinearLayout>
<!-- OTHER VIEWS HERE -->
</RelativeLayout>
The outer layout, instead, need to be animated for its height, kinda open to show its content. To do that, I use a value animator that change the height of the outer layout. The animation works correctly.
The problem is that the views inside the inner layout are stretched during the animation, because the inner layout is resized together with the outer layout during the animation.
So my question is, is there a way to specify the inner layout to wrap its content (for height), regardless the size of the outer layout?
Its not the proper solution to make height/width fix. As it will
varies with device. You can use scrollview for that.
Related
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.
So the initial layout consists of a large circular "parent" button and multiple circular "child" buttons that are centered behind the parent button. So all the child buttons share the same center as the parent button. The reason for this layout is so during runtime, I can move the child buttons in and out of the parent button using translateX and translateY.
However, I'm stuck on the initial layout. How can I center the child buttons to the center of the parent button without hardcoding any child attributes?
Make the views the same size and add padding to the children so they get reduced. If the views are all in the same position the layout will look as you wish. Anyways, you can always change the properties in code.
I solved this myself using a container RelativeLayout as an anchor, with the parent button and all child buttons given android:layout_centerInParent. Then, to solve the issue of the child buttons disappearing when leaving the container, I gave the container android:clipChildren(false) and also set clipChildren to false on all of its ancestors as well.
Note that the container has to be bigger than all of its child elements, or all the child elements will be clipped to the same dimensions, even when they move outside of the container! To solve this, I gave the container a width and height of wrap_content.
Thus, all my child buttons were centered in the parent button no matter where I positioned the parent, and the child buttons were free to move around as well.
EDIT
A major flaw in this is that buttons can't recieve touch events if they are outside of their parent. To fix this, you can either use event coordinates or make the parent container big enough to always encompass the child elements (maybe twice the screen width/height?)
Here is the code:
res/layout/listfragment.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false" >
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RelativeLayout
android:onClick="onButterflyMenuClicked"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginBottom="20sp"
android:layout_marginRight="15sp"
android:clipChildren="false" >
<Button
android:id="#+id/btn_north_1"
style="#style/PeekabooButton"
android:text="1st"
android:translationY="-65sp" />
<Button
android:id="#+id/btn_north_2"
style="#style/PeekabooButton"
android:text="2nd"
android:translationY="-115sp" />
<Button
android:id="#+id/kingbutton"
android:layout_width="65sp"
android:layout_height="65sp"
android:layout_centerInParent="true"
android:gravity="center_vertical|center_horizontal"
android:textSize="16sp"
android:text="KING" />
</RelativeLayout>
</FrameLayout>
res/values/styles.xml
<style name="PeekabooButton">
<item name="android:layout_width">45sp</item>
<item name="android:layout_height">45sp</item>
<item name="android:layout_centerInParent">true</item>
<item name="android:textSize">10sp</item>
</style>
Use android:gravity="center" on all views after putting them all inside a FrameLayout (possibly nesting the FrameLayout inside another layout). You can then offset each Button's position in its parent by changing the layout_margin* values. Or you could translate the parent FrameLayout that holds all the Buttons however you wish.
To make the button circular, change your button's android:background value to point to a custom selector.
I wanna put image in top of View and a listview bottom of it.
what's best and correct way?
LinearLayout?RelativeLayout?
and with which attribute?
layout_gravity="top"?
layout_alignParentTop="true"?
please give me a snipped code and a brief description about:
what's different between layout_gravity="top" and android:layout_alignParentTop="true"?
I wanna put image in top of View and a listview bottom of it. what's
best and correct way?
If you want to place a ListView below an ImageView positioned at the top of the current view then you could use both layouts, it isn't any real difference.
The layour_gravityis used to place the children relative within its parent bounds(the Relativelayout doesn't have this attribute). For example you could use a LinearLayout with orientation vertical which will stack your two children one on top of the other like you want. Also layout_gravity="top" is ignored for a vertical orientated LinearLayout as it doesn't make sense, so you could remove it from the layout completely:
<LinearLayout android:orientation="vertical">
<!-- the layout_gravity is useless int this case and could be removed-->
<ImageView android:layout_gravity="top"/>
<ListView />
</LinearLayout>
layout_alignParentTop is a placement rule for children of RelativeLayout(only for this type of layout!) which tells them to position aligning the top of the children with the top of the parent RelativeLayout. In this case, to stack the children you would do:
<RelativeLayout>
<!-- you could remove the layout_alignParentTop attribute because by default the Relativelayout will position it's children there -->
<ImageView android:id="#+id/imageId" android:layout_alingParentTop="true" />
<!-- Position this child below the other -->
<ListView android:layout_below="#id/imageId"/>
</RelativeLayout>
I'm trying to create a marquee style animated view wherein a very wide linear layout scrolls horizontally within a narrower view. Something like
<LinearLayout
android:id="#+id/ContentLinearLayout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:clipChildren="false">
<LinearLayout ...> <- a very wide layout that animates.
</LinearLayout>
Problem is I can't figure out how to make the view with the content in it not clip it's width to the size of it's parent without setting an exact layout_width. The animated content view is dynamically created so I don't know the width ahead of time. This is for an appwidget so I'm further constrained by the limitations of RemoteViews.
With RemoteViews you will have to specify a fixed width.
I am trying to make a selection ListActivity, similar to the one used to add shortcuts to the launcher screens. I have rolled my own header and footers, which I would like to be "sticky" at the top and bottom of the view when on screen. In order to do this, I am using a RelativeLayout with the header set to dock to top, footer set to dock to bottom, and the list set to go below the header and above the footer. In terms of the overall layout of the activity, this is rendering as I would expect. The header is sticky to the top, the footer is sticky to the bottom, and the list scrolls in between them.
One odd thing though happened when I switched to the RelativeLayout as my root. Please see the following screenshot:
I want my Activity's height to be wrap_content, so that the form is only as high as the content displayed in it, but once i switched to RelativeLayout, it seems to render the Activity effectively as fill_parent, taking up the whole screen, even though the content doesn't warrant it. Notice that there are not enough list items to fill the screen, which with the fill_parent style, is leaving a bunch of whitespace between the end of the list, and the footer. I was setting my height's via styles - which worked fine with LinearLayout, but seems to be ignored now. So I tried hard-coding the height directly on the RelativeLayout, but it still doesn't work and still renders as fill_parent.
Here is my layout code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="#style/GroupsList"
android:layout_height="wrap_content">
<FrameLayout android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:id="#+id/hdrGroups"
android:layout_alignParentTop="true">
<include layout="#layout/title"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</include>
</FrameLayout>
<FrameLayout style="#style/MyFooter"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_alignParentBottom="true"
android:id="#+id/ftrGroups">
<ImageView style="#style/CloseButton"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/add"
android:id="#+id/imgGroupsAdd"
android:clickable="true">
</ImageView>
</FrameLayout>
<ListView android:divider="#9f9f9f"
android:id="#+id/android:list"
android:choiceMode="singleChoice"
android:dividerHeight="1dp"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_below="#id/hdrGroups"
android:layout_above="#id/ftrGroups">
</ListView>
<TextView android:text="#string/browser_no_groups"
style="#style/ListedItemB"
android:id="#+id/android:empty"
android:layout_height="wrap_content"
android:layout_above="#id/ftrGroups"
android:layout_below="#id/hdrGroups"
android:layout_width="fill_parent">
</TextView>
</RelativeLayout>
All layout is done via XML, ... I am not doing any layout in code.
How can I get the sticky header and footer while also having the activity as a whole behave in a wrap_content mode for its height? Is there some other way I should be going about this instead of a RelativeLayout?
According to the developer documentation your desired behaviour is not possible for Relative layout ;
"Note that you cannot have a circular dependency between the size of
the RelativeLayout and the position of its children. For example, you
cannot have a RelativeLayout whose height is set to WRAP_CONTENT and a
child set to ALIGN_PARENT_BOTTOM."
RelativeLayout
To solve your problem you could maybe try to use a linear layout, set to wrap_content and set max height via code to screen height.
You can get the screen height as described here : get screen height
I just change my RelativeLayout in FrameLayout and all starts to work