Slide a layout up from bottom of screen

Question

I have a layout hidden from the view  On a button click I want it to slide up from the bottom pushing the entire screen contents upwards  very similar to how whatsapp shows emoticons panel in chat screen    I have seen SlidingDrawer  that dosen t work for me  It requires an image as an handle which is shown at the center of the screen  I don t want that  It also slides over the existing screen content  I am looking for a way to move the existing content upwards   Update 1   I tried using the animations as suggested by Sanket Kachhela  But the hidden layout is never shown  Here is the code   Layout  activity main xml      lt RelativeLayout     android id    id main screen      android layout width  match parent      android layout height  match parent   gt        lt TextView         android layout width  wrap content          android layout height  wrap content          android text   string hello world           android layout alignParentTop  true   gt         lt TextView        android layout width  wrap content         android layout height  wrap content         android text   string hello world          android layout centerInParent  true   gt        lt Button         android layout width  wrap content          android layout height  wrap content          android text  Slide up   down          android layout alignParentBottom  true           android onClick  slideUpDown   gt    lt  RelativeLayout gt    lt RelativeLayout     android id    id hidden panel      android layout width  match parent      android layout height  wrap content       android layout below   id main screen  gt        lt Button         android layout width  wrap content          android layout height  wrap content          android text   string app name    gt    lt  RelativeLayout gt      Activity  MainActivity java    package com example slideuplayout   import android app Activity  import android os Bundle  import android view Menu  import android view View  import android view ViewGroup  import android view animation Animation  import android view animation AnimationUtils   public class MainActivity extends Activity    private ViewGroup hiddenPanel  private boolean isPanelShown    Override protected void onCreate Bundle savedInstanceState        super onCreate savedInstanceState       setContentView R layout activity main        hiddenPanel    ViewGroup findViewById R id hidden panel       hiddenPanel setVisibility View INVISIBLE       isPanelShown   false      Override public boolean onCreateOptionsMenu Menu menu           Inflate the menu  this adds items to the action bar if it is present      getMenuInflater   inflate R menu main  menu       return true     public void slideUpDown final View view        if  isPanelShown               Show the panel         Animation bottomUp   AnimationUtils loadAnimation this                  R anim bottom up            hiddenPanel startAnimation bottomUp           hiddenPanel setVisibility View VISIBLE           isPanelShown   true            else              Hide the Panel         Animation bottomDown   AnimationUtils loadAnimation this                  R anim bottom down            hiddenPanel startAnimation bottomDown           hiddenPanel setVisibility View INVISIBLE           isPanelShown   false               Animations   bottom up xml    lt  xml version  1 0  encoding  utf-8   gt    lt set xmlns android  http   schemas android com apk res android  gt       lt translate         android fromYDelta  75 p         android toYDelta  0 p         android fillAfter  true         android duration  500    gt   lt  set gt    bottom down xml    lt  xml version  1 0  encoding  utf-8   gt    lt set xmlns android  http   schemas android com apk res android  gt   lt translate      android fromYDelta  0 p       android toYDelta  100 p       android fillAfter  true      android interpolator   android anim linear interpolator      android duration  500    gt   lt  set gt    Any ideas how this can be done    Thanks

User · Answer

Use these animations   bottom up xml   lt  xml version  1 0  encoding  utf-8   gt    lt set xmlns android  http   schemas android com apk res android  gt      lt translate android fromYDelta  75 p  android toYDelta  0 p       android fillAfter  true   android duration  500   gt   lt  set gt    bottom down xml    lt  xml version  1 0  encoding  utf-8   gt    lt set xmlns android  http   schemas android com apk res android  gt    lt translate android fromYDelta  0 p  android toYDelta  100 p  android fillAfter  true              android interpolator   android anim linear interpolator      android duration  500    gt    lt  set gt    Use this code in your activity for hiding animating your view   Animation bottomUp   AnimationUtils loadAnimation getContext                R anim bottom up   ViewGroup hiddenPanel    ViewGroup findViewById R id hidden panel   hiddenPanel startAnimation bottomUp   hiddenPanel setVisibility View VISIBLE

User · Answer

Here is a solution as an extension of  https   stackoverflow com a 46644736 10249774   Bottom panel is pushing main content upwards   https   imgur com a 6nxewE0  activity main xml   lt  xml version  1 0  encoding  utf-8   gt   lt RelativeLayout xmlns android  http   schemas android com apk res android  xmlns tools  http   schemas android com tools  android layout width  match parent  android layout height  match parent  tools context   MainActivity  gt   lt Button     android id    id my button      android layout marginTop  10dp      android onClick  onSlideViewButtonClick      android layout width  wrap content      android layout height  wrap content   gt   lt LinearLayout android id    id main view  android layout width  match parent  android layout height  wrap content  android orientation  vertical  android gravity  center horizontal  gt   lt TextView     android layout width  wrap content      android layout height  wrap content      android text  main       android textSize  70dp   gt   lt TextView     android layout width  wrap content      android layout height  wrap content      android text  main       android textSize  70dp   gt   lt TextView     android layout width  wrap content      android layout height  wrap content      android text  main       android textSize  70dp   gt   lt TextView     android layout width  wrap content      android layout height  wrap content      android text  main      android textSize  70dp   gt   lt TextView     android layout width  wrap content      android layout height  wrap content      android text  main      android textSize  70dp   gt   lt  LinearLayout gt   lt LinearLayout     android id    id footer view      android background   a6e1aa      android orientation  vertical      android gravity  center horizontal      android layout alignParentBottom  true      android layout width  match parent      android layout height  wrap content  gt       lt TextView         android layout width  wrap content          android layout height  wrap content          android text  footer content          android textSize  40dp    gt       lt TextView         android layout width  wrap content          android layout height  wrap content          android text  footer content          android textSize  40dp    gt     lt  LinearLayout gt   lt  RelativeLayout gt    MainActivity   import android support v7 app AppCompatActivity  import android os Bundle  import android view View  import android view animation TranslateAnimation  import android widget Button   public class MainActivity extends AppCompatActivity   private Button myButton  private View footerView  private View mainView  private boolean isUp  private int anim duration   700    Override protected void onCreate Bundle savedInstanceState        super onCreate savedInstanceState       setContentView R layout activity main        footerView   findViewById R id footer view       mainView   findViewById R id main view       myButton   findViewById R id my button           initialize as invisible  could also do in xml      footerView setVisibility View INVISIBLE       myButton setText  Slide up        isUp   false    public void slideUp View mainView   View footer view       footer view setVisibility View VISIBLE       TranslateAnimation animate footer   new TranslateAnimation              0                     fromXDelta             0                     toXDelta             footer view getHeight        fromYDelta             0                     toYDelta     animate footer setDuration anim duration       animate footer setFillAfter true       footer view startAnimation animate footer        mainView setVisibility View VISIBLE       TranslateAnimation animate main   new TranslateAnimation              0                     fromXDelta             0                     toXDelta             0      fromYDelta              0-footer view getHeight                        toYDelta     animate main setDuration anim duration       animate main setFillAfter true       mainView startAnimation animate main     public void slideDown View mainView   View footer view       TranslateAnimation animate footer   new TranslateAnimation              0                     fromXDelta             0                     toXDelta             0                     fromYDelta             footer view getHeight        toYDelta     animate footer setDuration anim duration       animate footer setFillAfter true       footer view startAnimation animate footer         TranslateAnimation animate main   new TranslateAnimation              0                     fromXDelta             0                     toXDelta              0-footer view getHeight         fromYDelta             0                     toYDelta     animate main setDuration anim duration       animate main setFillAfter true       mainView startAnimation animate main      public void onSlideViewButtonClick View view        if  isUp            slideDown mainView   footerView           myButton setText  Slide up          else           slideUp mainView   footerView           myButton setText  Slide down              isUp    isUp

User · Answer

Use this layout  If you want to animate the main view shrinking you ll need to add animation to the height of the hidden bar  buy it may be good enough to use the translate animation on the bar  and have the main view height jump instead of animate    lt LinearLayout xmlns android  http   schemas android com apk res android  xmlns tools  http   schemas android com tools  android layout width  match parent  android layout height  match parent  android orientation  vertical   gt    lt RelativeLayout     android id    id main screen      android layout width  match parent      android layout height  0dp      android layout weight  1   gt        lt TextView         android layout width  wrap content          android layout height  wrap content          android layout alignParentTop  true          android text   string hello world    gt        lt TextView         android layout width  wrap content          android layout height  wrap content          android layout centerInParent  true          android text   string hello world    gt        lt Button         android layout width  wrap content          android layout height  wrap content          android layout alignParentBottom  true          android onClick  slideUpDown          android text  Slide up   down    gt   lt  RelativeLayout gt    lt RelativeLayout     android id    id hidden panel      android layout width  match parent      android layout height  wrap content      android layout gravity  bottom      android background   fcc      android visibility  visible   gt        lt Button         android layout width  wrap content          android layout height  wrap content          android text   string app name    gt   lt  RelativeLayout gt    lt  LinearLayout gt

User · Answer

Here is what worked in the end for me   Layouts   activity main xml        lt RelativeLayout     android id    id main screen      android layout width  match parent      android layout height  match parent       android layout alignParentTop  true      android layout alignParentBottom  true  gt        lt TextView         android layout width  wrap content          android layout height  wrap content          android text   string hello world           android layout alignParentTop  true   gt        lt TextView         android layout width  wrap content          android layout height  wrap content          android text   string hello world          android layout centerInParent  true    gt        lt Button         android id    id slideButton          android layout width  wrap content          android layout height  wrap content          android text  Slide up   down          android layout alignParentBottom  true           android onClick  slideUpDown   gt    lt  RelativeLayout gt      hidden panel xml   lt  xml version  1 0  encoding  utf-8   gt   lt LinearLayout xmlns android  http   schemas android com apk res android      android id    id hidden panel      android layout width  match parent      android layout height  wrap content      android orientation  vertical   gt       lt Button     android layout width  wrap content      android layout height  wrap content      android text  Test    gt   lt  LinearLayout gt    Java      package com example slideuplayout   import android app Activity  import android os Bundle  import android view Menu  import android view View  import android view ViewGroup  import android view ViewTreeObserver  import android view ViewTreeObserver OnGlobalLayoutListener  import android view animation Animation  import android view animation Animation AnimationListener  import android view animation AnimationUtils   public class MainActivity extends Activity    private ViewGroup hiddenPanel  private ViewGroup mainScreen  private boolean isPanelShown  private ViewGroup root   int screenHeight   0    Override protected void onCreate Bundle savedInstanceState        super onCreate savedInstanceState       setContentView R layout activity main        mainScreen    ViewGroup findViewById R id main screen       ViewTreeObserver vto   mainScreen getViewTreeObserver         vto addOnGlobalLayoutListener new OnGlobalLayoutListener               Override          public void onGlobalLayout                  screenHeight   mainScreen getHeight                mainScreen getViewTreeObserver   removeGlobalOnLayoutListener this                             root    ViewGroup findViewById R id root        hiddenPanel    ViewGroup getLayoutInflater   inflate R layout hidden panel  root  false       hiddenPanel setVisibility View INVISIBLE        root addView hiddenPanel        isPanelShown   false      Override public boolean onCreateOptionsMenu Menu menu           Inflate the menu  this adds items to the action bar if it is present      getMenuInflater   inflate R menu main  menu       return true     public void slideUpDown final View view        if  isPanelShown               Show the panel         mainScreen layout mainScreen getLeft                              mainScreen getTop   -  screenHeight   25 100                              mainScreen getRight                              mainScreen getBottom   -  screenHeight   25 100               hiddenPanel layout mainScreen getLeft    mainScreen getBottom    mainScreen getRight    screenHeight           hiddenPanel setVisibility View VISIBLE            Animation bottomUp   AnimationUtils loadAnimation this                  R anim bottom up            hiddenPanel startAnimation bottomUp            isPanelShown   true            else           isPanelShown   false              Hide the Panel         Animation bottomDown   AnimationUtils loadAnimation this                  R anim bottom down           bottomDown setAnimationListener new AnimationListener                   Override             public void onAnimationStart Animation arg0                       TODO Auto-generated method stub                              Override             public void onAnimationRepeat Animation arg0                       TODO Auto-generated method stub                              Override             public void onAnimationEnd Animation arg0                    isPanelShown   false                   mainScreen layout mainScreen getLeft                              mainScreen getTop      screenHeight   25 100                              mainScreen getRight                              mainScreen getBottom      screenHeight   25 100                     hiddenPanel layout mainScreen getLeft    mainScreen getBottom    mainScreen getRight    screenHeight                                     hiddenPanel startAnimation bottomDown

User · Answer

You were close  The key is to have the hidden layout inflate to match parent in both height and weight  Simply start it off as View GONE  This way  using the percentage in the animators works properly   Layout  activity main xml     lt  xml version  1 0  encoding  utf-8   gt   lt RelativeLayout xmlns android  http   schemas android com apk res android      android id    id main screen      android layout width  match parent      android layout height  match parent   gt        lt TextView         android layout width  wrap content          android layout height  wrap content          android layout alignParentTop  true          android text   string hello world    gt        lt TextView         android layout width  wrap content          android layout height  wrap content          android layout centerInParent  true          android text   string hello world    gt        lt Button         android layout width  wrap content          android layout height  wrap content          android layout alignParentBottom  true          android onClick  slideUpDown          android text  Slide up   down    gt        lt RelativeLayout         android id    id hidden panel          android layout width  match parent          android layout height  match parent          android background   android color white          android visibility  gone   gt            lt Button             android layout width  wrap content              android layout height  wrap content              android text   string app name              android layout centerInParent  true              android onClick  slideUpDown    gt       lt  RelativeLayout gt    lt  RelativeLayout gt    Activity  MainActivity java    import android app Activity  import android os Bundle  import android view View  import android view ViewGroup  import android view animation Animation  import android view animation AnimationUtils   public class OffscreenActivity extends Activity       private View hiddenPanel        Override     protected void onCreate Bundle savedInstanceState            super onCreate savedInstanceState           setContentView R layout main activity            hiddenPanel   findViewById R id hidden panel              public void slideUpDown final View view            if   isPanelShown                     Show the panel             Animation bottomUp   AnimationUtils loadAnimation this                      R anim bottom up                hiddenPanel startAnimation bottomUp               hiddenPanel setVisibility View VISIBLE                     else                  Hide the Panel             Animation bottomDown   AnimationUtils loadAnimation this                      R anim bottom down                hiddenPanel startAnimation bottomDown               hiddenPanel setVisibility View GONE                        private boolean isPanelShown             return hiddenPanel getVisibility      View VISIBLE             Only other thing I changed was in bottom up xml  Instead of  android fromYDelta  75 p    I used   android fromYDelta  100 p    But that s a matter of preference  I suppose

User · Answer

You could define the mainscreen and the other screen that you want to scroll up as fragments  When the button on the mainscreen is pushed  the fragment would send a message to the activity which would then replace the mainscreen with the one that you want to scroll up and animate the replacement

User · Answer

My code to make animation slide up  slide down without XML  private static ObjectAnimator createBottomUpAnimation View view          AnimatorListenerAdapter listener  float distance        ObjectAnimator animator   ObjectAnimator ofFloat view   translationY   -distance             animator setDuration          animator removeAllListeners        if  listener    null            animator addListener listener             return animator     public static ObjectAnimator createTopDownAnimation View view  AnimatorListenerAdapter listener          float distance        view setTranslationY -distance       ObjectAnimator animator   ObjectAnimator ofFloat view   translationY   0       animator removeAllListeners        if  listener    null            animator addListener listener             return animator      Using For slide down  createTopDownAnimation myYellowView  null  myYellowView getHeight    start      For slide up   createBottomUpAnimation myYellowView  null  myYellowView getHeight    start

User · Answer

You just need to add some line in your app  please find it from below link   Show and hide a View with a slide up down animation  Just add an animation to your layout like this   mLayoutTab animate      translationYBy 120     translationY 0     setDuration getResources   getInteger android R integer config mediumAnimTime

User · Answer

Try this below code  Its very short and simple    transalate anim xml   lt  xml version  1 0  encoding  utf-8   gt  lt  -- Copyright  C  2013 The Android Open Source Project       Licensed under the Apache License  Version 2 0  the  License         you may not use this file except in compliance with the License       You may obtain a copy of the License at            http   www apache org licenses LICENSE-2 0       Unless required by applicable law or agreed to in writing  software      distributed under the License is distributed on an  AS IS  BASIS       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND  either express or implied       See the License for the specific language governing permissions and      limitations under the License  -- gt   lt set xmlns android  http   schemas android com apk res android  gt       lt translate         android duration  4000          android fromXDelta  0          android fromYDelta  0          android repeatCount  infinite          android toXDelta  0          android toYDelta  -90 p    gt        lt alpha xmlns android  http   schemas android com apk res android          android duration  4000          android fromAlpha  0 0          android repeatCount  infinite          android toAlpha  1 0    gt   lt  set gt    activity main xml   lt  xml version  1 0  encoding  utf-8   gt   lt android support constraint ConstraintLayout xmlns android  http   schemas android com apk res android      xmlns app  http   schemas android com apk res-auto      xmlns tools  http   schemas android com tools      android layout width  match parent      android layout height  match parent      tools context  com naveen congratulations MainActivity  gt         lt ImageView         android id    id image 1          android layout width  50dp          android layout height  50dp          android layout marginBottom  8dp          android layout marginStart  8dp          app layout constraintBottom toBottomOf  parent          app layout constraintLeft toLeftOf  parent          app srcCompat   drawable balloons    gt   lt  android support constraint ConstraintLayout gt    MainActivity java  public class MainActivity extends AppCompatActivity         Override     protected void onCreate Bundle savedInstanceState            super onCreate savedInstanceState           setContentView R layout activity main           final ImageView imageView1    ImageView  findViewById R id image 1           imageView1 setOnClickListener new View OnClickListener                  Override             public void onClick View view                    startBottomToTopAnimation imageView1                                         private void startBottomToTopAnimation View view            view startAnimation AnimationUtils loadAnimation this  R anim translate anim

User · Answer

Ok  there are two possible approaches  The simplest - is to use a sliding menu library  It allows creating a bottom sliding menu  it can animate the top container to make bottom visible  it suports both dragging it with your finger  or animating it programmatically via button  StaticDrawer    Harder way - if you want to use Animations  as was already suggested  With animations you must FIRST change your layouts  So try first to make your layout change to the final state without any animations whatsoever  Because it is very likely that you are not laying out your views properly in RelativeLayout  so even though you show your bottom view  it remains obscured by the top one  Once you achieved proper layout change - all you need to do is to is to remember translations before layout and apply translate animation AFTER layout

[android] Slide a layout up from bottom of screen

Examples related to android

Examples related to layout

Examples related to uislider