I have several expandable layouts in my Android App. When I click to expand a layout, the layout disapear outside the screen, and I have to manual scroll down to make it visible. How can I make the ScrollView automatically scroll down to make the clicked layout visible?
I tried using scrollView.scrollTo(0, textID.getBottom()); to scroll to the bottom of the layout element, but without luck.
Java:
expandableLayout1 = root.findViewById(R.id.expandable_layout1);
button = (LinearLayout)root.findViewById(R.id.box_header);
button.setOnClickListener(new View.OnClickListener(){
#Override
public void onClick(View view) {
if (expandableLayout1.isExpanded()) {
expandableLayout1.collapse();
} else {
expandableLayout1.expand();
scrollView.scrollTo(0, textID.getBottom());
}
}
});
xml:
<LinearLayout
android:id="#+id/box"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/box_header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/textID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="title"
android:textColor="#ffffff"
android:textSize="16sp"/>
</LinearLayout>
<net.cachapa.expandablelayout.ExpandableLayout
android:id="#+id/expandable_layout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:el_duration="1000"
app:el_expanded="false"
app:el_parallax="0.5">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="some text"
android:textColor="#ffffff"
android:textSize="12sp"/>
</net.cachapa.expandablelayout.ExpandableLayout>
</LinearLayout>
The problem you are facing is that the ExpandableLayout doesn't have time to finish opening before ScrollView already ends up scrolling to the bottom of it. So what ends up happening is that the ScrollView Scrolls to the bottom of the ExpandableLayout which hasn't fully opened yet. What you need to do is add a delay between the Layout opening and the ScrollView starting it's scroll function. Here is the code you need, I would try adjusting the milliseconds, you could probably drop them down below 1000 but not by much, still it's up to you to troubleshoot it a bit to make it just a tad bit faster and smoother. Also try using smoothScrollTo instead of scrollTo.
expandableLayout1 = root.findViewById(R.id.expandable_layout1);
button = (LinearLayout)root.findViewById(R.id.box_header);
button.setOnClickListener(new View.OnClickListener(){
#Override
public void onClick(View view) {
if (expandableLayout1.isExpanded()) {
expandableLayout1.collapse();
} else {
expandableLayout1.expand();
new Handler().postDelayed(new Runnable() {
#Override
public void run() {
scrollView.post(new Runnable() {
#Override
public void run() {
scrollView.scrollTo(0, textID.getBottom());
}
});
}
}, 1000 ); // time in milliseconds
}
}
});
And here is the code that I added in it's raw form, might help you understand it a bit easier.
new Handler().postDelayed(new Runnable() {
#Override
public void run() {
// do something
}
}, 1000 ); // time in milliseconds
Related
i am a beginner in application development and i like to ask a question that i tried my best to get an answer in google but i failed.
So,
in my application (in java) i am using too text fields :
<com.google.android.material.textfield.TextInputLayout
android:layout_marginBottom="20dp"
android:id="#+id/start_date_Layout"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="20dp"
app:helperText="Start Date"
app:endIconMode="custom"
app:endIconDrawable="#drawable/ic_date"
>
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/start_date"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="dd/mm/yy"
/>
</com.google.android.material.textfield.TextInputLayout>
I added a listener to my end icon like that :
this.startDateLayout = v.findViewById(R.id.start_date_Layout);
this.startDateLayout.setEndIconOnClickListener(this);
My problem is when i try to get the view that the user clicked :
#Override
public void onClick(View v) {
if (v.getParent() == this.startDateLayout){
Toast.makeText(this.context, "click", Toast.LENGTH_LONG).show();
}
}
the toast never appear and the if condition is never true, my question is how can i get the view on witch the user clicked. thanks for reading i hope i was clear as much as possible.
For me only doing following works:
final TextInputLayout textInputLayout = findViewById(R.id.start_date_Layout);
textInputLayout.setEndIconOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// DO STUFF
}
});
As you're explicitly setting listener on End icon only you shouldn't be worried about verifying viewId.
Just use:
startDateLayout = v.findViewById(R.id.start_date_Layout);
startDateLayout.setEndIconOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// DO something....
}
});
Simple kotlin:
b.dateLabel.setEndIconOnClickListener {
Toast.makeText(requireContext(), "date", Toast.LENGTH_SHORT).show()
}
First what I can notice in the above code, you're trying to listen to click events on your View
A simple way to do so is change your onClick() method to below
public void onClick(View v) {
if (v.getId() == R.id.start_date_Layout){
Toast.makeText(getApplicationContext(), "click", Toast.LENGTH_LONG).show();
}
}
I believe I could help
If you are using EditText, then try setting an onFocusChangeListner to the editText instead of onClickListner.
startDateLayout.setOnFocusChangeListener(new OnFocusChangeListener() {
#Override
public void onFocusChange(View v, boolean hasFocus) {
if(hasFocus) {
// Show your code when has focus
} else {
// when it does not have focus
}
}});
The question is simple, You can you a FragmeLayout or LinearLayout, EditText and an ImageView for achieving the solution, it will be similar to the TextInputEditText but you will have much more control over View Hierarchy, let me show you how you can achieve it, for the sake of simplicity as you are a beginner I'll use linear Layout
Create A FrameLayout or LinearLayout and then create an EditText and an ImageView like
XML:
<LinearLayout
android:layout_margin="10dp"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#DCDFDF"
android:orientation="horizontal"
tools:ignore="MissingConstraints">
<ImageView
android:layout_gravity="center_vertical"
android:id="#+id/imageViewTitle"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_margin="15dp"
android:src="#drawable/android"
tools:ignore="ContentDescription" />
<EditText
android:layout_gravity="center_vertical"
android:id="#+id/editTextTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:background="#DCDFDF"
android:gravity="top"
android:hint="Start Date"
android:paddingTop="10dp"
android:textAlignment="gravity"
android:importantForAutofill="no" />
</LinearLayout>
Java
public class MainActivity extends AppCompatActivity {
EditText editTextTitle;
ImageView imageViewTitle;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
editTextTitle = findViewById(R.id.editTextTitle);
imageViewTitle = findViewById(R.id.imageViewTitle);
imageViewTitle.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
//Do your work here
Toast.makeText(MainActivity.this, "ImageView Pressed", Toast.LENGTH_SHORT).show();
}
});
}
}
I am developing an Android application where an activity displays content in a scrollview. At the top of the content there is a placeholder for an image to be displayed. The image is downloaded from the Internet and may take a few seconds until it is ready to be displayed. The image placeholder is initially empty. When the image is downloaded, it is dynamically added to the placeholder.
Initially I had the following problem.
The user starts the activity and scrolls down
The image starts to download in the background. When available, it is added to the placeholder
When the image is added to the placeholder, the contents of the scrollview change and the user experience is disrupted by the unwanted scrolling that occurs
To fix this, I added code to adjust the scroll position once the image view is added to the placeholder. The problem with this is that a flickering is caused on the scrollview during the display-image and adjust-scrollview process. The reason is that the scrollBy function is called from a runnable. Calling scrollBy outside the runnable does not cause flickering but the scroll position is incorrect - the reason for this is that there is not enough time for the items on the scroll view to recalculate/measure their dimensions/heights.
Here is a sample application the illustrates this problem:
public class MainActivity extends AppCompatActivity {
ScrollView scrollView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
scrollView = findViewById(R.id.scrollview);
startImageDownload();
simulateImageScroll();
}
private void simulateImageScroll() {
// scroll to the bottom of the scroll view
scrollView.post(new Runnable() {
#Override
public void run() {
scrollView.scrollTo(0, scrollView.getMaxScrollAmount());
}
});
}
private void startImageDownload() {
Handler handler = new Handler(getMainLooper());
// simulate a delay for the image download to illustrate the flashing problem in the scrollview
handler.postDelayed(new Runnable() {
#Override
public void run() {
displayImage("");
}
}, 2000);
}
// when the image is downloaded we add it to the image container
private void displayImage(String imageFilename) {
// dynamically create an image and add it to the image container layout
RelativeLayout container = findViewById(R.id.imageContainer);
ImageView img = new ImageView(this);
// image should be loaded from the given filename - for now use a solid background and fixed height
img.setBackgroundColor(Color.BLUE);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.MATCH_PARENT, 500);
container.addView(img, params);
adjustScrolling(container);
}
private void adjustScrolling(RelativeLayout container) {
// adjust scroll if the image is loaded before the current content
if (scrollView.getScrollY() > container.getTop()) {
container.measure(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
final int amountToScroll = container.getMeasuredHeight();
// the following does not cause flickering but scrolls to the wrong position
//scrollView.scrollBy(0, amountToScroll);
// adjust the scrollview so that it keeps the current view unchanged
scrollView.post(new Runnable() {
#Override
public void run() {
// this causes flickering but scrolls to the correct position
scrollView.scrollBy(0, amountToScroll);
}
});
}
}
}
And here is the layout file:
<ScrollView
android:id="#+id/scrollview"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/imageContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:background="#aa0000" >
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:background="#aa0000" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textColor="#ffffff"
android:textSize="128dp"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:background="#aa0000" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2"
android:textColor="#ffffff"
android:textSize="128dp"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:background="#aa0000" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3"
android:textColor="#ffffff"
android:textSize="128dp"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:background="#aa0000" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4"
android:textColor="#ffffff"
android:textSize="128dp"/>
</RelativeLayout>
</LinearLayout>
</ScrollView>
Any ideas on how to fix this problem?
Edited:
Currently, your layout is flickering, because adding blue view cause redraw layout (and scroll). So scroll occurred once, and next you scrolled to the position you want. That's the second moving.
To solve this problem, you need to know how android draws view.
https://developer.android.com/guide/topics/ui/how-android-draws.html
Simply, onMeasure() - onLayout() - onDraw(). And you can add your layout code between onLayout() and onDraw(), by ViewTreeObserver().addOnGlobalLayoutListener().
https://developer.android.com/reference/android/view/ViewTreeObserver.OnGlobalLayoutListener.html
ps: I still recommend using nice and lovely image library, Picasso.
Fixed code is: Set scroll before draw() called. By this, you can draw only once.
public class MainActivity extends AppCompatActivity {
ScrollView scrollView;
int amountToScroll = 0;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
scrollView = findViewById(R.id.scrollview);
scrollView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
scrollView.scrollBy(0, amountToScroll);
amountToScroll = 0;
}
});
startImageDownload();
simulateImageScroll();
}
private void simulateImageScroll() {
// scroll to the bottom of the scroll view
scrollView.post(new Runnable() {
#Override
public void run() {
scrollView.scrollTo(0, scrollView.getMaxScrollAmount());
}
});
}
private void startImageDownload() {
Handler handler = new Handler(getMainLooper());
// simulate a delay for the image download to illustrate the flashing problem in the scrollview
handler.postDelayed(new Runnable() {
#Override
public void run() {
displayImage("");
}
}, 2000);
}
// when the image is downloaded we add it to the image container
private void displayImage(String imageFilename) {
// dynamically create an image and add it to the image container layout
RelativeLayout container = findViewById(R.id.imageContainer);
ImageView img = new ImageView(this);
// image should be loaded from the given filename - for now use a solid background and fixed height
img.setBackgroundColor(Color.BLUE);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.MATCH_PARENT, 500);
container.addView(img, params);
adjustScrolling(container);
}
private void adjustScrolling(RelativeLayout container) {
// adjust scroll if the image is loaded before the current content
if (scrollView.getScrollY() > container.getTop()) {
container.measure(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
amountToScroll = container.getMeasuredHeight();
}
}
}
I strongly recommend using Picasso. http://square.github.io/picasso/
This one line will fix all of your problem.
Picasso.with(context).load("http://i.imgur.com/DvpvklR.png").into(imageView);
You can load your local image file or network image (url) into your imageView.
In your case, remove both startImageDownload() and simulateImageScroll(), and on onResume(), call displayImage().
Fixed displayImage():
private void displayImage(String imageFilename) {
// dynamically create an image and add it to the image container layout
RelativeLayout container = findViewById(R.id.imageContainer);
ImageView img = new ImageView(this);
// image should be loaded from the given filename - for now use a solid background and fixed height
img.setBackgroundColor(Color.BLUE);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.MATCH_PARENT, 500);
container.addView(img, params);
Picasso.with(this).load(imageFilename).into(img);
adjustScrolling(container);
}
Or, if you want to solve this problem directly for academic reasons,
Do not adjust your scroll. It seems that it is not a real solution to use scrollBy to fix your problem. The real cause is the code that cause the UI to redraw. May be calling invalidate() or something like that.
Adding ImageView programmatically is not a good idea. Because your RecyclerView or ViewHolder of ListView cannot reuse the view, so it cause degrade performance. If you can avoid it, do that. (eg. use xml)
It seems that adding your ImageView to imageContainer is real problem. imageContainer has android:layout_height="wrap_content" property, and this means it has no fixed height, it depends on it's own child. Try to change to fixed value, for example: android:layout_height="500dp"
Well first if it's a single image on top then you don't have to create imageview dynamically just use it inside your XML file without Relative-layout. set to an default image. Use Image-View with adjustViewBounds="true" and scaleType="fitCenter" then you don't have to worry about the image scaling.
<ImageView
android:id="#id/img"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter" />
you can use Picasso http://square.github.io/picasso/ library as suggested by "Stanley Kou" for loading the image.
My Suggestion is to use Progress Bar, Start the Progress bar when image starts downloading and hide it once the image load is complete then let the user see the activity.
<ProgressBar
android:id="#+id/indeterminateBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
For more details, please check -
https://developer.android.com/reference/android/widget/ProgressBar.html
I'm trying to make an application on Android Studio. I have 2 buttons. a plus and a minus. I need to know how to make the text smaller and bigger everytime I click on one of these buttons.
This is my MainActivity.java:
Button Min = (Button)findViewById(R.id.Min);
Min.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
TextView t = (TextView)findViewById(R.id.DeText);
t.setTextSize(-5);
}
});
This is my .xml:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/Plus"
android:layout_gravity="top|left"
android:text="+"
android:textSize="50dp"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/Min"
android:layout_gravity="top|right"
android:text="-"
android:textSize="50dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textSize="50dp"
android:id="#+id/DeText"
android:text="Text"/>
I also have made a screenshot of the page I'm working on. Hopefully this gives some more information about my end product:
You simply set the text size by getting the current size and adding/subtracting the value you want.
Button minButton = (Button)findViewById(R.id.Min);
minButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
TextView t = (TextView)findViewById(R.id.DeText);
t.setTextSize(COMPLEX_UNIT_PX, t.getTextSize() - 5f);
}
});
It would be better to check if the current text size is not too small before reducing the size.
You should use sp instead of dp for text sizes. From documentation, you can use setTextSize method and it includes two arguments.
void setTextSize (int unit,
float size)
So, you can specify the text size after button click as:
Button button = (Button)findViewById(R.id.buttonId);
button.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
TextView text = (TextView)findViewById(R.id.DeText);
text.setTextSize(TypedValue.COMPLEX_UNIT_SP,text.getTextSize()-1);
}
});
This Question Is Pretty Silly to ask but out, but i Would like to know how it Works?
I had a Relative Layout with 2 ImageViews as Child having separate clickListner instances. One above Another, of same Size and Attributes.
Overlaps Each other. Both having Different images.
Question is When i click on one image both ImageView Click listners are Called.
Or if i disable the Click on ImageView Top, The ImageView Below Still Works, I was Clicking on Image View Above though. How it is I'ts Getting callback from both.
I Just Want to know How it works? not The code, i do not have any issue writing code for clickListners Whether only one Working or Both.
<RelativeLayout
----
---
>
<ImageView
---
---<!--Child 1-->
<ImageView
---
---<!--Child 2-->
<RelativeLayout/>
Taken from here:
if you are working with just one clicklistener, you can do:
View.OnClickListener myOnlyhandler = new View.OnClickListener() {
public void onClick(View v) {
switch(v.getId()) {
case R.id.b1:
// it was the first button
break;
case R.id.b2:
// it was the second button
break;
}
}
}
Use ImageButton
Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/content"
android:src="#drawable/ic_launcher" />
</LinearLayout>
Activity class
public class MainActivity extends Activity {
ImageButton imgButton;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
addButtonListener();
}
public void addButtonListener() {
imgButton = (ImageButton) findViewById(R.id.imageButton);
imgButton.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View view) {
Toast.makeText(MainActivity.this,"ImageButton is working!", Toast.LENGTH_SHORT).show();
}
});
}
}
Give this to your parent layout
android:context="Yourclasshere"
then give this to your image view
android:onclick="onclick"
and then implement the on click listener or make the method like Vitly A make above
I have designed a simple layout.I have finished the design without animation, but now I want to add animations when textview click event and I don't know how to use it.
Did my xml design looks good or not?
Any suggestions would be appreciated.
My XML
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:longClickable="false"
android:orientation="vertical"
android:weightSum="16" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:background="#00DDA0"
android:layout_weight="3" >
</LinearLayout>
<TextView
android:id="#+id/Information1"
android:layout_width="match_parent"
android:layout_height="1dp"
android:text="Child Information"
android:background="#0390BE"
android:layout_weight="0.75"
android:textColor="#FFFFFF"
android:layout_gravity="center|fill_horizontal"/>
<LinearLayout
android:id="#+id/layout1"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="8.5"
android:background="#BBBBBB"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="TextView" />
</LinearLayout>
<TextView
android:id="#+id/Information2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="Parent Information"
android:background="#0390BE"
android:layout_weight="0.75"
android:textColor="#FFFFFF"
android:layout_gravity="center|fill_horizontal"/>
<LinearLayout
android:id="#+id/layout2"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:background="#BBBBBB"
android:layout_weight="8.5" >
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="TextView" />
</LinearLayout>
<TextView
android:id="#+id/Information3"
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="Siblings"
android:background="#0390BE"
android:layout_weight="0.75"
android:textColor="#FFFFFF"
android:layout_gravity="center|fill_horizontal"/>
<LinearLayout
android:id="#+id/layout3"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:background="#BBBBBB"
android:layout_weight="8.5" >
<TextView
android:id="#+id/textView3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="TextView" />
</LinearLayout>
<TextView
android:id="#+id/Information4"
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="Teacher Information"
android:background="#0390BE"
android:layout_weight="0.75"
android:textColor="#FFFFFF"
android:layout_gravity="center|fill_horizontal"/>
<LinearLayout
android:id="#+id/layout4"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:background="#BBBBBB"
android:layout_weight="8.5" >
<TextView
android:id="#+id/textView4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="TextView" />
</LinearLayout>
<TextView
android:id="#+id/Information5"
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="Grade Information"
android:background="#0390BE"
android:layout_weight="0.75"
android:textColor="#FFFFFF"
android:layout_gravity="center|fill_horizontal"/>
<LinearLayout
android:id="#+id/layout5"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:background="#BBBBBB"
android:layout_weight="8.5" >
<TextView
android:id="#+id/textView5"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="TextView" />
</LinearLayout>
<TextView
android:id="#+id/Information6"
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="Health Information"
android:background="#0390BE"
android:layout_weight="0.75"
android:textColor="#FFFFFF"
android:layout_gravity="center|fill_horizontal"/>
<LinearLayout
android:id="#+id/layout6"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:background="#BBBBBB"
android:layout_weight="8.5" >
<TextView
android:id="#+id/textView5"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="TextView"
android:layout_weight="8.5" />
</LinearLayout>
</LinearLayout>
My java
public class Certify_Info extends Activity {
private static TextView tv2,tv3,tv5,tv6,tv4,tv1;
private static LinearLayout l1,l2,l3,l4,l5,l6;
#Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_certify__info);
tv1=(TextView) findViewById(R.id.Information1);
tv2=(TextView) findViewById(R.id.Information2);
tv3=(TextView) findViewById(R.id.Information3);
tv4=(TextView) findViewById(R.id.Information4);
tv5=(TextView) findViewById(R.id.Information5);
tv6=(TextView) findViewById(R.id.Information6);
l1=(LinearLayout) findViewById(R.id.layout1);
l2=(LinearLayout) findViewById(R.id.layout2);
l3=(LinearLayout) findViewById(R.id.layout3);
l4=(LinearLayout) findViewById(R.id.layout4);
l5=(LinearLayout) findViewById(R.id.layout5);
l6=(LinearLayout) findViewById(R.id.layout6);
l2.setVisibility(View.GONE);
l3.setVisibility(View.GONE);
l4.setVisibility(View.GONE);
l5.setVisibility(View.GONE);
l6.setVisibility(View.GONE);
tv1.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
l2.setVisibility(View.GONE);
l3.setVisibility(View.GONE);
l4.setVisibility(View.GONE);
l5.setVisibility(View.GONE);
l6.setVisibility(View.GONE);
l1.setVisibility(View.VISIBLE);
}
});
tv2.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
l1.setVisibility(View.GONE);
l3.setVisibility(View.GONE);
l4.setVisibility(View.GONE);
l5.setVisibility(View.GONE);
l6.setVisibility(View.GONE);
l2.setVisibility(View.VISIBLE);
}
});
tv3.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
l1.setVisibility(View.GONE);
l2.setVisibility(View.GONE);
l4.setVisibility(View.GONE);
l5.setVisibility(View.GONE);
l6.setVisibility(View.GONE);
l3.setVisibility(View.VISIBLE);
}
});
tv4.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
l1.setVisibility(View.GONE);
l2.setVisibility(View.GONE);
l3.setVisibility(View.GONE);
l4.setVisibility(View.GONE);
l5.setVisibility(View.GONE);
l6.setVisibility(View.GONE);
l4.setVisibility(View.VISIBLE);
}
});
tv5.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
l1.setVisibility(View.GONE);
l2.setVisibility(View.GONE);
l3.setVisibility(View.GONE);
l4.setVisibility(View.GONE);
l6.setVisibility(View.GONE);
l5.setVisibility(View.VISIBLE);
}
});
tv6.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
l1.setVisibility(View.GONE);
l2.setVisibility(View.GONE);
l3.setVisibility(View.GONE);
l4.setVisibility(View.GONE);
l5.setVisibility(View.GONE);
l6.setVisibility(View.VISIBLE);
}
});
}
}
You can do two things to add animations, first you can let android animate layout changes for you. That way every time you change something in the layout like changing view visibility or view positions android will automatically create fade/transition animations. To use that set
android:animateLayoutChanges="true"
on the root node in your layout.
Your second option would be to manually add animations. For this I suggest you use the new animation API introduced in Android 3.0 (Honeycomb). I can give you a few examples:
This fades out a View:
view.animate().alpha(0.0f);
This fades it back in:
view.animate().alpha(1.0f);
This moves a View down by its height:
view.animate().translationY(view.getHeight());
This returns the View to its starting position after it has been moved somewhere else:
view.animate().translationY(0);
You can also use setDuration() to set the duration of the animation. For example this fades out a View over a period of 2 seconds:
view.animate().alpha(0.0f).setDuration(2000);
And you can combine as many animations as you like, for example this fades out a View and moves it down at the same time over a period of 0.3 seconds:
view.animate()
.translationY(view.getHeight())
.alpha(0.0f)
.setDuration(300);
And you can also assign a listener to the animation and react to all kinds of events. Like when the animation starts, when it ends or repeats etc. By using the abstract class AnimatorListenerAdapter you don't have to implement all callbacks of AnimatorListener at once but only those you need. This makes the code more readable. For example the following code fades out a View moves it down by its height over a period of 0.3 seconds (300 milliseconds) and when the animation is done its visibility is set to View.GONE.
view.animate()
.translationY(view.getHeight())
.alpha(0.0f)
.setDuration(300)
.setListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
view.setVisibility(View.GONE);
}
});
The easiest way to animate Visibility changes is use Transition API which available in support (androidx) package. Just call TransitionManager.beginDelayedTransition method then change visibility of the view. There are several default transitions like Fade, Slide.
import androidx.transition.TransitionManager;
import androidx.transition.Transition;
import androidx.transition.Fade;
private void toggle() {
Transition transition = new Fade();
transition.setDuration(600);
transition.addTarget(R.id.image);
TransitionManager.beginDelayedTransition(parent, transition);
image.setVisibility(show ? View.VISIBLE : View.GONE);
}
Where parent is parent ViewGroup of animated view. Result:
Here is result with Slide transition:
import androidx.transition.Slide;
Transition transition = new Slide(Gravity.BOTTOM);
It is easy to write custom transition if you need something different. Here is example with CircularRevealTransition which I wrote in another answer. It shows and hide view with CircularReveal animation.
Transition transition = new CircularRevealTransition();
android:animateLayoutChanges="true" option does same thing, it just uses AutoTransition as transition.
Try adding this line to the xml parent layout
android:animateLayoutChanges="true"
Your layout will look like this
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
android:longClickable="false"
android:orientation="vertical"
android:weightSum="16">
.......other code here
</LinearLayout>
Please check this link. Which will allow animations like L2R, R2L, T2B, B2T animations.
This code shows animation from left to right
TranslateAnimation animate = new TranslateAnimation(0,view.getWidth(),0,0);
animate.setDuration(500);
animate.setFillAfter(true);
view.startAnimation(animate);
view.setVisibility(View.GONE);
if you want to do it from R2L then use
TranslateAnimation animate = new TranslateAnimation(0,-view.getWidth(),0,0);
for top to bottom as
TranslateAnimation animate = new TranslateAnimation(0,0,0,view.getHeight());
and vice a versa..
Base on #ashakirov answer, here is my extension to show/hide view with fade animation
fun View.fadeVisibility(visibility: Int, duration: Long = 400) {
val transition: Transition = Fade()
transition.duration = duration
transition.addTarget(this)
TransitionManager.beginDelayedTransition(this.parent as ViewGroup, transition)
this.visibility = visibility
}
Example using
view.fadeVisibility(View.VISIBLE)
view.fadeVisibility(View.GONE, 2000)
I was able to show/hide a menu this way:
MenuView.java (extends FrameLayout)
private final int ANIMATION_DURATION = 500;
public void showMenu()
{
setVisibility(View.VISIBLE);
animate()
.alpha(1f)
.setDuration(ANIMATION_DURATION)
.setListener(null);
}
private void hideMenu()
{
animate()
.alpha(0f)
.setDuration(ANIMATION_DURATION)
.setListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
setVisibility(View.GONE);
}
});
}
Source
Based on the answer of #Xaver Kapeller I figured out a way to create scroll animation when new views appear on the screen (and also animation to hide them).
It goes from this state:
Button
Last Button
to
Button
Button 1
Button 2
Button 3
Button 4
Last Button
and viceversa.
So, when the user clicks on the first button, the elements "Button 1", "Button 2", "Button 3" and "Button 4" will appear using fade animation and the element "Last Button" will move down till end. The height of the layout will change as well, allowing using scroll view properly.
This is the code to show elements with animation:
private void showElements() {
// Precondition
if (areElementsVisible()) {
Log.w(TAG, "The view is already visible. Nothing to do here");
return;
}
// Animate the hidden linear layout as visible and set
// the alpha as 0.0. Otherwise the animation won't be shown
mHiddenLinearLayout.setVisibility(View.VISIBLE);
mHiddenLinearLayout.setAlpha(0.0f);
mHiddenLinearLayout
.animate()
.setDuration(ANIMATION_TRANSITION_TIME)
.alpha(1.0f)
.setListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
updateShowElementsButton();
mHiddenLinearLayout.animate().setListener(null);
}
})
;
mLastButton
.animate()
.setDuration(ANIMATION_TRANSITION_TIME)
.translationY(mHiddenLinearLayoutHeight);
// Update the high of all the elements relativeLayout
LayoutParams layoutParams = mAllElementsRelativeLayout.getLayoutParams();
// TODO: Add vertical margins
layoutParams.height = mLastButton.getHeight() + mHiddenLinearLayoutHeight;
}
and this is the code to hide elements of the animation:
private void hideElements() {
// Precondition
if (!areElementsVisible()) {
Log.w(TAG, "The view is already non-visible. Nothing to do here");
return;
}
// Animate the hidden linear layout as visible and set
mHiddenLinearLayout
.animate()
.setDuration(ANIMATION_TRANSITION_TIME)
.alpha(0.0f)
.setListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
Log.v(TAG, "Animation ended. Set the view as gone");
super.onAnimationEnd(animation);
mHiddenLinearLayout.setVisibility(View.GONE);
// Hack: Remove the listener. So it won't be executed when
// any other animation on this view is executed
mHiddenLinearLayout.animate().setListener(null);
updateShowElementsButton();
}
})
;
mLastButton
.animate()
.setDuration(ANIMATION_TRANSITION_TIME)
.translationY(0);
// Update the high of all the elements relativeLayout
LayoutParams layoutParams = mAllElementsRelativeLayout.getLayoutParams();
// TODO: Add vertical margins
layoutParams.height = mLastButton.getHeight();
}
Note there is a simple hack on the method to hide the animation. On the animation listener mHiddenLinearLayout, I had to remove the listener itself by using:
mHiddenLinearLayout.animate().setListener(null);
This is because once an animation listener is attached to an view, the next time when any animation is executed in this view, the listener will be executed as well. This might be a bug in the animation listener.
The source code of the project is on GitHub:
https://github.com/jiahaoliuliu/ViewsAnimated
Happy coding!
Update: For any listener attached to the views, it should be removed after the animation ends. This is done by using
view.animate().setListener(null);
My solution extension
fun View.slideVisibility(visibility: Boolean, durationTime: Long = 300) {
val transition = Slide(Gravity.BOTTOM)
transition.apply {
duration = durationTime
addTarget(this#slideVisibility)
}
TransitionManager.beginDelayedTransition(this.parent as ViewGroup, transition)
this.isVisible = visibility
}
Use:
textView.slideVisibility(true)
Find the below code to make visible the view in Circuler reveal, if you send true, it'll get Invisible/Gone. If you send false, it'll get visible. anyView is the view you're going to visible/hide, it could be any view (Layouts, Buttons etc)
private fun toggle(flag: Boolean, anyView: View) {
if (flag) {
val cx = anyView.width / 2
val cy = anyView.height / 2
val initialRadius = Math.hypot(cx.toDouble(), cy.toDouble()).toFloat()
val anim = ViewAnimationUtils.createCircularReveal(anyView, cx, cy, initialRadius, 0f)
anim.addListener(object : AnimatorListenerAdapter() {
override fun onAnimationEnd(animation: Animator) {
super.onAnimationEnd(animation)
anyView.visibility = View.INVISIBLE
}
})
anim.start()
} else {
val cx = anyView.width / 2
val cy = anyView.height / 2
val finalRadius = Math.hypot(cx.toDouble(), cy.toDouble()).toFloat()
val anim = ViewAnimationUtils.createCircularReveal(anyView, cx, cy, 0f, finalRadius)
anyView.visibility = View.VISIBLE
anim.start()
}
}