I am trying to do the same animation as Google :
https://vid.me/9Wli
A quick explanation about my app :
At the top I have an AppBar, below it a LinearLayout including a button to expand more information and below this LinearLayout I have a RecyclerView.
For the moment, when I click the "expand more" button, I just show some items with .setVisibility(View.VISIBLE), so I have no animation.
Here is my actual XML code :
<LinearLayout
android:id="#+id/expandable_zone"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical"
android:visibility="gone">
<LinearLayout
android:id="#+id/1"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical">
<TextView
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_width="wrap_content"
android:text="#string/expandable_1"
android:textColor="#color/secondaryTextDark"
android:textSize="13dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/bottom_expandable_zone"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical">
<TextView
android:animateLayoutChanges="true"
android:id="#+id/expand_more"
android:layout_gravity="center_horizontal"
android:layout_height="wrap_content"
android:layout_marginBottom="11sp"
android:layout_marginTop="11sp"
android:layout_width="wrap_content"
android:text="#string/expand_more"
android:textColor="#color/secondaryTextDark" />
<ImageButton
android:background="#drawable/circle_shape"
android:id="#+id/expand_less"
android:layout_gravity="center_horizontal"
android:layout_height="wrap_content"
android:layout_marginBottom="11sp"
android:layout_marginTop="10sp"
android:layout_width="wrap_content"
android:src="#drawable/ic_check_grey600_24dp"
android:visibility="gone" />
</LinearLayout>
</LinearLayout>
Can anyone give me the best solution to do that ?
android:animateLayoutChanges="true"
set it on LinearLayout
android:id="#+id/bottom_expandable_zone"
if this wont help u need to serach on stackoverflow how to animate view and implement it on your android:id="#+id/bottom_expandable_zone"
Related
I'm updating an old existing app to be 4+ only and am trying to introduce a flavour of Material Design for < Lollipop. To that end, I am using MaterialDesignLibrary to add a few elements - in particular, the floating button.
The floating button displays OK, along with its animation, but I cannot get its bottom position displaying correctly.
Despite the recommendation that the component should be put in the right-bottom of the screen, I am trying to put the component in the right-bottom of my container wrapper... The right positioning works ok, but the bottom positioning seems to take from the wrong element.
Here is my xml for the section in the screen:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dip"
android:layout_marginRight="20dip"
android:layout_marginTop="10dip" >
<RelativeLayout
android:id="#+id/llFeelingContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/light_background"
android:baselineAligned="true"
android:orientation="vertical" >
<TextView
android:id="#+id/tvFeelingTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="3dip"
android:paddingLeft="5dip"
android:textSize="16sp" />
<View
android:id="#+id/vSeparatorTop"
android:layout_width="match_parent"
android:layout_height="1dip"
android:layout_below="#id/tvFeelingTitle"
android:background="#color/material_lightgreen_100" />
<LinearLayout
android:id="#+id/llCircleContentHolder"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_below="#id/vSeparatorTop"
android:baselineAligned="false"
android:orientation="horizontal"
android:paddingBottom="5dip"
android:paddingTop="3dip" >
<LinearLayout
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_marginRight="5dp"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:gravity="center"
android:text="pain"
android:textSize="14sp"
android:textStyle="bold" />
<com.app.prohealth.extras.CircleDisplay
android:id="#+id/circlePain"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/circle_0"
android:gravity="center" />
</LinearLayout>
<LinearLayout
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_marginRight="5dp"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:gravity="center"
android:text="energy"
android:textSize="14sp"
android:textStyle="bold" />
<com.app.prohealth.extras.CircleDisplay
android:id="#+id/circleMood"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/circle_0"
android:gravity="center" />
</LinearLayout>
<LinearLayout
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:gravity="center"
android:text="mood"
android:textSize="14sp"
android:textStyle="bold" />
<com.app.prohealth.extras.CircleDisplay
android:id="#+id/circleEnergy"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/circle_0"
android:gravity="center" />
</LinearLayout>
</LinearLayout>
<View
android:id="#+id/vSeparatorBottom"
android:layout_width="match_parent"
android:layout_height="1dip"
android:layout_below="#id/llCircleContentHolder"
android:background="#color/material_lightgreen_100" />
<TextView
android:id="#+id/tvFeelingSubTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/vSeparatorBottom"
android:paddingBottom="3dip"
android:paddingLeft="5dip"
android:text="How are you feeling now?"
android:textSize="16sp" />
</RelativeLayout>
<com.gc.materialdesign.views.ButtonFloat
android:id="#+id/buttonFloat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginTop="20dp"
android:background="#1E88E5"
materialdesign:animate="true"
materialdesign:iconDrawable="#drawable/fab_ic_add" />
</FrameLayout>
Here is a shot of where the Floating Button appears, and where it should appear:
You'll see in the code that I have tried negative margins and padding, but nothing I've tried has had any effect.
The Floating Button should appear aligned with the bottom of tvFeelingSubTitle; what has gone wrong?
UPDATE
The suggestion from mistwalker did work, in as much as the button now aligns itself to the bottom. However, it expands the height of the bottom container to match the height of the button:
I tried a number of different variations on the suggestion, which either squashed the button to fit a fixed height container, or overwrote the content completely.
The layout I am wanting to create is more like this:
Maybe this isn't possible and I'm wasting my time and yours...
What do you think?
Try putting
android:layout_below="#id/vSeparatorBottom"
android:align_baseline=#id/tvFeelingSubTitle
android:alignParentRight="true"
and remove the margin attributes plus the alignParentBottom one.
That should do it.
ADD:
About your second question - You are seeing that because your floating action button(FAB) is INSIDE your RelativeLayout.
Instead have FrameLayout as the outermost parent and the RelativeLayout (minus the FAB) and FAB as siblings.
Then adjust the style on the FAB to sit in the bottom right corner of your FrameLayout with layout_gravity=bottom|right and any margins you may want to add.
I'm struggling to come to grips with android layouts, firstly can anyone point me to a good basic tutorial on working with the layouts on screen. I understand the concepts when i read the google layout dev ref, but come to practice and I don't quite get it.
I have the below layout that I am trying to replicate in an Android screen, I believe I need to nest different layouts within others, but I can't quite get what I have to look like this:
http://screencast.com/t/GFw7OSzvbmX
Any suggestions on code out there similar and also the tutorials to get me going would be great thx
(Black - LinearLayout Vertical )
(Red - LinearLayout Horizontal )
(Green - ImageView )
(Yellow - TextView )
(Brown - Button )
Visualize like this first . Then write your xml .
Use TextView,Button,ImageView as child and use LinearLayout as parent with weight which handle area allocation child content :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.40">
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="textview"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="textview"
android:layout_marginTop="5dp"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.60"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="textview"
android:layout_marginTop="5dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="textview"
android:layout_marginTop="5dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp">
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="textview"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button"/>
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="textview"
android:layout_marginTop="5dp"/>
</LinearLayout>
</LinearLayout>
I'm trying to show a vertical line in an android ListView item. I define it in the XML for the cell but when I preview it in the ListView it doesn't appear.
I understand this is an issue because I see alot of questions on here, but don't see any real answer.
The XML is pretty standard:
Cell:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/appWhite" >
<View android:layout_width="5dp"
android:layout_height="match_parent"
android:background="#color/appGreen"
android:layout_alignParentLeft="true" />
<RelativeLayout
android:id="#+id/cell_trip_info_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/vertical_bar" >
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/cell_trip_name"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:textColor="#2c3e50"
android:paddingLeft="10dp"
android:text="adfadf" />
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/cell_trip_country"
android:layout_below="#+id/cell_trip_name"
android:textColor="#2c3e50"
android:paddingLeft="10dp"
android:text="adfadf" />
</RelativeLayout>
<RelativeLayout android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/whole_container"
android:layout_alignParentRight="true" >
<RelativeLayout android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#color/appGreen"
android:id="#+id/cell_trip_date_box"
android:layout_alignTop="#+id/update_buttons"
android:layout_alignBottom="#+id/update_buttons"
android:padding="20dp" >
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/cell_tripstart_date"
android:layout_centerHorizontal="true"
android:textColor="#fff" />
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/cell_date_thru"
android:text="#string/thru"
android:layout_below="#+id/cell_tripstart_date"
android:layout_centerHorizontal="true"
android:textColor="#fff" />
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/cell_tripend_date"
android:layout_below="#+id/cell_date_thru"
android:textColor="#fff"
android:layout_centerHorizontal="true" />
</RelativeLayout>
<RelativeLayout android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/update_buttons"
android:visibility="gone"
android:layout_toRightOf="#+id/cell_trip_date_box"
android:background="#e9e9e9"
android:padding="20dp" >
<ImageView android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/cell_button_edit_trip"
android:src="#drawable/slide_edit"
android:adjustViewBounds="true"
android:contentDescription="#string/content_description" />
<ImageView android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/cell_button_delete_trip"
android:src="#drawable/slide_delete"
android:layout_toRightOf="#+id/cell_button_edit_trip"
android:adjustViewBounds="true"
android:contentDescription="#string/content_description" />
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
I found the cause and the obvious solution/workaround on another post Here
Basically RelativeLayouts for whatever reason won't play nice with the "match_parent" height setting in a ListView Item. One of the answer to the post recommended using a LinearLayout instead. So I just created a new File with the parent view being a LinearLayout. I then created a RelativeLayout child and tossed everything else in there.
It worked fine this time, easily allowing me to create my vertical rule.
In your cell_trip_info_container RelativeLayout you have
android:layout_toRightOf="#+id/vertical_bar"
You dont have a View named vertical_bar
Add that ID to your vertical bar view and you should be good to go
<View
android:id="#+id/vertical_bar"
android:layout_width="5dp"
android:layout_height="match_parent"
android:background="#color/appGreen"
android:layout_alignParentLeft="true" />
change
RelativeLayout
to
VerticalLayout
I'm developing an Android app in eclipse.
I have an XML which has 2 linear layouts next to each other. The left one has several buttons, which make content visible in the right. However, I would not only like these buttons to make specific content visible, but hide (setVisibility.GONE) all the other stuff in that layout. I have already tried removeAllViews, but this is not suitable for me since it deletes them. So my idea is to hide (set the visibility to gone) every single stuff, then make the ones I wish visible. The reason I ask this is that it takes too much time setting the visibility to gone for everything (24, actually) for all the 12 buttons.
Thanks in advance
Layout code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/alap"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ScrollView
android:id="#+id/scrollView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/imageView3"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView4" >
<LinearLayout
android:layout_width="197dp"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/lewis" />
<Button
android:id="#+id/first"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/first" />
<Button
android:id="#+id/second"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/second" />
</LinearLayout>
</ScrollView>
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:scaleType="center"
android:src="#drawable/cpr1" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:scaleType="center"
android:src="#drawable/epizodok" />
<LinearLayout
android:id="#+id/def"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/imageView3"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/scrollView2"
android:layout_toRightOf="#+id/scrollView2"
android:orientation="vertical"
android:visibility="visible" >
<ImageView
android:id="#+id/image1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/lewis"
android:visibility="gone" />
<ImageView
android:id="#+id/image2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:visibility="gone" />
</LinearLayout>
</RelativeLayout>
Please try this...
<LinearLayout
android:id="+id/ll"
android:layout_width="197dp"
android:layout_height="match_parent"
android:orientation="vertical" >
<!-- All content which you hide/show put here -->
</LinearLayout>
now in your class file you read this.
LinearLayout ll = (LinearLayout) findViewById(R.id.ll);
after that as per your requirement you hide/show this Layout with their all contents.
like:
For Hide.
ll.setVisibility(View.GONE);
For Show.
ll.setVisibility(View.VISIBLE);
when you hide/show LinearLayout all content with this Layout also hide/show automatically.
Simply, Just take another Linear Layout with vertical layout within your "def" Linear layout..Nd change its visibility as per your need.
<LinearLayout
android:id="#+id/def"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/imageView3"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/scrollView2"
android:layout_toRightOf="#+id/scrollView2"
android:orientation="vertical"
android:visibility="visible" >
<LinearLayout
android:id="#+id/Subdef"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/image1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/lewis"
android:visibility="gone" />
<ImageView
android:id="#+id/image2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:visibility="gone" />
</LinearLayout>
</LinearLayout>
No need to hide views instead of that just use ViewFlipper concept.
Just declare view flipper in your xml file with your two linearlayouts like this
<Viewflipper android:id="#+id/myViewFlipper" android:layout_height="wrap_content" android:layout_width="match_parent">
<LinearLayout android:id="#+id/layout1" android:layout_height="wrap_content" android:layout_width="match_parent"></LinearLayout>
<LinearLayout android:id="#+id/layout2" android:layout_height="wrap_content" android:layout_width="match_parent"></LinearLayout>
</Viewflipper>
And get viewflipper reference in your java code like this
Viewflipper mFlipper = (Viewflipper)findViewById(R.id.myViewFlipper);
use mFlipper.showNext(), use mFlipper.showPrevious() methods to hide and show your layouts thats it.
Yes, this is yet another edittext grow question on SO. And yes I've already gone through all those edittext grow questions. But this ones a bit specific.
UI:
A simple android layout with edittext and button below it. When text is less, the edittext view is still covering whole screen leaving space for button below.
Once user starts entering text, edittext grows vertically to accommodate text. At the same time, the button should also kept pushing downwards to let edittext grow.
User can vertically scroll through screen to view full text.
UI after entering significant text:
Here's the layout with edittext and button below:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/background"
android:clipToPadding="false"
android:fadingEdge="none"
android:fillViewport="true"
android:padding="13dp"
android:scrollbarStyle="outsideOverlay" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<!-- some fixed width image -->
<ImageView
android:id="#+id/someimage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:src="#drawable/page_white_text" />
<EditText
android:id="#+id/some"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/someimage"
android:background="#null"
android:gravity="top"
android:minLines="10"
android:minHeight="50dp"
android:textColor="#222222"
android:textSize="15dp"
android:typeface="serif" >
<requestFocus />
</EditText>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:baselineAligned="true"
android:layout_marginTop="5dp"
android:padding="10dp"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</RelativeLayout>
</ScrollView>
This works more or less. But when I enter to much text, instead of pushing button downwards. It goes behind it like:
Any help here is much appreciated. Thanks :)
Here's my recommendation: inside the ScrollView, put a RelativeLayout in which you can place every element in a certain order using android:layout_below. For the auto-growing of your EditText, use this solution.
Let's see an example:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center">
<RelativeLayout
android:id="#+id/general2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_margin="20sp" >
<TextView
android:id="#+id/textFirstOpinion"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="#string/titleFirstOpinion"
android:textStyle="bold"
android:textSize="23sp"
android:textColor="#FFFFFF"
android:layout_marginTop="10dp" />
<EditText
android:id="#+id/fieldFirstOpinion"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/textFirstOpinion"
android:minHeight="80sp"
android:isScrollContainer="true"
android:inputType="textMultiLine"
android:textSize="20sp"
android:gravity="top|left" />
<Button
android:id="#+id/button"
android:layout_width="110dp"
android:layout_height="wrap_content"
android:layout_below="#id/fieldFirstOpinion"
android:layout_centerHorizontal="true"
android:layout_marginTop="37sp"
android:textSize="23sp"
android:text="#string/textSendButton"
android:gravity="center_horizontal"
android:padding="10dp" />
</RelativeLayout>
</ScrollView>
try adding android:layout_below="#id/some" in your LinearLayout like
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:baselineAligned="true"
android:layout_marginTop="5dp"
android:padding="10dp"
android:orientation="vertical"
android:layout_below="#id/some" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
Since you want the button to be at the bottom of the page, add the following line
android:layout_below="#+id/some"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
in your LinearLayout code here like
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/some"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:baselineAligned="true"
android:layout_marginTop="5dp"
android:padding="10dp"
android:orientation="vertical" >
Also make sure the layout:height parameter of EditText is set to wrap_content
Try this and tell me if it works or not