How to give animation to FloatingActionButton in android studio - android-layout

I am giving Animation to FloatingActionButton to Move Right Side Position to Left Side. For that I am Implementing below Code. But That Don't Work. And I also Want to Change the icon of FloatingActionButton When I click on it.
Java Code :
fab = (FloatingActionButton)findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
TranslateAnimation animation = new TranslateAnimation(400.0f,200.0f,0.0f,0.0f);
animation.setDuration(5000);
animation.setRepeatCount(1);
animation.setRepeatMode(1);
fab.startAnimation(animation);
}
});

Using this library I solve my Problem.
https://github.com/shell-software/fab
Step 1 : you have to put this dependency in your build.gradle file
dependencies {
compile 'com.github.shell-software:fab:1.1.2'
}
Step 2 : write this in your xml file.
<com.software.shell.fab.ActionButton
android:id="#+id/action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginRight="#dimen/fab_margin"
android:layout_marginBottom="#dimen/fab_margin"
/>
Step : 3 Intialize the ActionButton
ActionButton actionButton = (ActionButton) findViewById(R.id.action_button);
Step : 4 Apply different effect for your different purpose.
1. Moving ActionButton
int distance = 100.0f // in density-independent pixels
// Move ActionButton left
actionButton.moveLeft(distance);
2. Button types
There are three types of Action Button, which you can work with:
DEFAULT (56dp)
MINI (40dp)
BIG (72dp)
3. Button size
To work with ActionButton size use:
// To get the ActionButton size
float size = actionButton.getSize();
// To set the ActionButton size
actionButton.setSize(60.0f); //
4. Button states
There are two button states, which Action Button may reside in:
NORMAL
PRESSED
5. Button colors
Button colors can be set as for the NORMAL state, so for the PRESSED one. By default the following colors are set:
#FF9B9B9B for the NORMAL state
#FF696969 for the PRESSED state
6. Shadow
Shadow can be customized in three ways: color, radius and offset. By default shadow enabled and has the following default values:
shadowColor = #42000000 (~ light-grey)
shadowRadius = 8.0f (in density-independent pixels)
shadowXOffset = 0.0f (in density-independent pixels)
shadowYOffset = 8.0f (in density-independent pixels)
7. Image
you can change actionButton Image using following code.
actionButton.setImageBitmap(bitmap);
actionButton.setImageDrawable(getResource.getDrawable(R.drawable.fab_plus_icon));
actionButton.setImageResource(R.drawable.fab_plus_icon);
8. Stroke
Stroke can be customized in two ways: width and the color. Stroke disabled by default, however it has the default values:
strokeColor = Color.BLACK
strokeWidth = 0.0f (no stroke)
InShort
In Xml you directly define the all thing
xml for that is :
<com.software.shell.fab.ActionButton
android:id="#+id/action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/fab_margin"
android:layout_marginBottom="#dimen/fab_margin"
fab:type="DEFAULT"
fab:button_color="#color/fab_material_lime_500"
fab:button_colorPressed="#color/fab_material_lime_900"
fab:image="#drawable/fab_plus_icon"
fab:image_size="24dp"
fab:shadow_color="#757575"
fab:shadow_radius="1.0dp"
fab:shadow_xOffset="0.5dp"
fab:shadow_yOffset="1.0dp"
fab:stroke_color="#color/fab_material_blue_grey_500"
fab:stroke_width="1.0dp"
fab:button_colorRipple="#color/fab_material_black"
fab:rippleEffect_enabled="false"
fab:shadowResponsiveEffect_enabled="true"
fab:show_animation="#anim/fab_roll_from_down"
fab:hide_animation="#anim/fab_roll_to_down"
/>

Related

Dynamically TextView Or buttons Android Studio

I'm not sure how to do this:
I have a variable that is passed threw an intent to my new activity.
This variable is a Number. That number received threw the intent will be different depending on the user.
So I want to dynamically write buttons or texViews depending on Number variable.
Example : Number = 4;
There is 4 buttons or textviews (with onclick listener each and text written has Button 1, Button 2, et. ).
Example Number = 10;
There is 10 buttons or textviews or etc. (with onclick listeners each).
Not sure how I can approach this problem
You can create new dynamic views something like that:
Button myButton = new Button(this);
myButton.setText("Push Me");
LinearLayout ll = (LinearLayout)findViewById(R.id.yourLinearLayoutId);
LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
// with addView method you say to your app when you want to add this view inside on your LinearLayout view
ll.addView(myButton, lp);

Android: Custom bottom sheet dialog

How can I implement following design functionality with android standard component bottom sheet:
Image when Bottom sheet dialog fragment will appear:
Image when user scrolled to up to view bottom of content:
I will use ViewPager to scrolling header images and RecyclerView to showing descriptions and other informations. And parallax effect to ImageView(which are placed in ViewPager) when scrolling content vertically. Have a minimum height of the ImageView(and ViewPager), user can't collapse fully it (Look to second screenshot, which is user scrolled until the end of content).
I want stop scrolling ImageView when it will reach to minimum height(look to second one Screenshot), but the content of below ImageView should be continue scrolling
This can be done with an if statement in an on scroll view such as shown below:
ScrollView scrollView = findViewById(R.id.scrollView); //Adjust for your code
ImageView imageView = findViewById(R.id.imageView); //Adjust for your code
boolean imageIsHidden = false;
int threshold = 250;
scrollView.getViewTreeObserver().addOnScrollChangedListener(new OnScrollChangedListener() {
#Override
public void onScrollChanged() {
int scrollY = rootScrollView.getScrollY();
if(scrollY >= threshold){
imageIsHidden = true;
//Move image outside of scroll view so it doesn't scroll
}
else if(scrollY < threshold && imageIsHidden){
imageIsHidden = false;
//Move image inside of scroll view so it does scroll
}
}
});
What this does is has a boolean called imageIsHidden and an integer called threshold. Threshold is where you want it to make it disappear. You will need to play around with this value to find a sweet spot.
You will also need to implement moving the image inside and outside of the scroll view as well in the if and if else statement.

Layout composition varying between preview and running app in CN1

I configured a layout with the following result:
The Layout of the Form's contentpane is TableLayout which consists of one cell. The contentpane has only one container as child for which I set the layoutConstraint with the following modified values: width = 100%, height = 100%, Align = CENTER, Vertical Align = CENTER.
In other words, I'm centering the components of the form.
In the preview it looks as expected but not when the app runs in the simulator!
Note:
I'm not modifiying any style or layout properties in my code! Thus I have no idea why it's not as intended in the simulator.
The approach from How to show two or more label at centre of the container in codenameone didn't work for me!
this is my code concerning that form:
#Override
protected void postIntroLangSelect(Form f) {
f.getTitleArea().setHidden(true);
f.revalidate();
// button configuration
Button btnDE = findButtonDE(f);
Button btnTR = findButtonTR(f);
btnDE.addActionListener((e) -> {
settings.setLocale(Lang.GERMAN);
showNextForm();
});
btnTR.addActionListener((e) -> {
settings.setLocale(Lang.TURKISH);
showNextForm();
});
}
Set your form's layout to BorderLayout and check the Absolute Center, then add a container on the form with its layout constraint set to Center. Give this container a BoxLayout Y layout and add all your other components in it.
If this approach didn't work for you, then you will have to hand-code your form and set it's Layout to new BorderLayout(BorderLayout.CENTER_BEHAVIOR_CENTER).

Why is my image clipped after scaling?

I am having a strange problem. I scale an image and, while scaling works correctly, the image always gets clipped. I tried different scale types - things changed but I never could make it work.
Just to be clear, here's what I need to solve:
1. I have a HorizontalScrollView around the ImageView and a ScrollView around the HorizontalView.
2. I scroll around (using scrollTo of both scroll views) and, upon a certain event, zoom in.
3. What I'd like to happen is for the ImageView to scale around my current scroll position.
Here's the layout:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none"
android:overScrollMode="never">
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none"
android:overScrollMode="never">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:scaleType="fitCenter" />
</HorizontalScrollView>
</ScrollView>
</FrameLayout>
And here's the scaling code (originalWidth/originalHeight are calculated at scale of 1; targetView points to the ImageView):
public synchronized void changeScale(float newScaleFactor) {
this.scaleFactor = Math.max(min_zoom, Math.min(newScaleFactor, max_zoom));
if (targetView != null && originalWidth > 0) {
int newWidth = (int)(originalWidth * scaleFactor);
int newHeight = (int)(originalHeight * scaleFactor);
onScaleChanged(targetView, scaleFactor, newWidth, newHeight);
}
}
public void onScaleChanged(View targetView, float scaleFactor, int newWidth, int newHeight) {
ViewGroup.LayoutParams layoutParams = targetView.getLayoutParams();
layoutParams.width = newWidth;
layoutParams.height = newHeight;
// This is needed to increase the pane size (rather than zoom within the initial layout)
targetView.setLayoutParams(layoutParams);
// Tell the system to recalculate the layout
targetView.requestLayout();
// This is needed to specify the center of scaling
HorizontalScrollView horizontalScrollView = (HorizontalScrollView)targetView.getParent();
ScrollView vertScrollView = (ScrollView)horizontalScrollView.getParent();
// ~~~ the pivot points are probably wrong
targetView.setPivotX(horizontalScrollView.getScrollX() * scaleFactor);
targetView.setPivotY(vertScrollView.getScrollY() * scaleFactor);
// This is needed for actual zooming
targetView.setScaleX(scaleFactor);
targetView.setScaleY(scaleFactor);
};
public void zoomIn(float scaleDelta) {
changeScale(scaleFactor + scaleDelta);
}
public void zoomOut(float scaleDelta) {
changeScale(scaleFactor - scaleDelta);
}
Question 1: How do I prevent clipping? I can't find the right combination of scaleType and layout resizing.
Question 2: When I use setScaleX/setScaleY, should my pivot be calculated after applying the new scale factor or does the renderer take care of that automatically?
After updating the scale you need to invalidate(), and requestLayout() the views.
targetView.invalidate();
targetView.requestLayout();
I usually calculate the scale differently for images. You could try to scale the image view using the MATRIX scale type. You will need to know the size of your bound DPI.
// Get the scaled DPI
int boundBoxInDp = getResources().getDisplayMetrics().densityDpi * scaleFactor
// Determine how much to scale: the dimension requiring less scaling is
// closer to its side. This way the image always stays inside your
// bound AND either x/y axis touches the bound but neither will go over.
float xScale = ((float) boundBoxInDp) / newWidth;
float yScale = ((float) boundBoxInDp) / newHeight;
float scale = (xScale <= yScale) ? xScale : yScale;
// scale using our calculated scale
targetView.setScaleX(scale);
targetView.setScaleY(scale);
As to your second question about the Pivot. That will probably need to be set to the center of the visible scroll area. The the scrollable area should be increased when you change the image size since you are using FIT_CENTER;
See this article for code that works quite well. I ditched my HorizontalScrollView and ScrollView and attached this PanAndZoomListener to my FrameLayout and from then on it was all rainbows and unicorns.
I tried to do the same thing as you, but without success. It would seem that you can scroll an ImageView without using HorizontalScrollView and ScrollView. I'm still unclear as to what makes it happen, but I'm leaning toward the use of the image matrix (as in, setImageMatrix on ImageView) or possibly the use of MarginLayoutParams. In looking at the Gallery source code from the picture Gallery available on the Android, I'm seeing heavy use of Matrix. Unfortunately, the documentation on this seems to be quite light in my estimation.
Other people have figured it out, so plug in the PanAndZoomListener and you're done. That's what I did.

TextView gravity="top" but changing font size dynamically doesn't keep text align to the top

I have an app that needs to dynamically align text views over certain locations on an image. The image is scaled to fit the view. Text entries are added by the user. I'm using a RelativeLayout and margins to properly position the text. All is good.
When the user rotates the screen, I save the text locations and bitmap using onRetainNonConfigurationInstance(). When the view is recreated, I add the views back into the RelativeLayout. Now, because the view is a different size, the scale of the image is different. To keep the text boxes in the same location, I have to account for that. I have all that code working except for one issue....
If I create a TextView and set the fontSize to a small size (e.g. <11px), the top of the text box is positioned where I want it to be but the text is aligned with a baseline as if it were 11px font. I don't know the scale factor in the onCreate method so I can't change the font size until after onMeasure and onLayout are called. I've tried forceLayout() and requestLayout() but nothing seems to fix the alignment problem.
Here is the layout:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="0dp"
>
<com.xyx.ScalableLayout
android:id="#+id/layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="0dp"
android:clickable="true"
android:gravity="top"
>
<com.xyx.ScaledImageView
android:id="#+id/formView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="0dp"
/>
<com.xyx.ScalableLayout>
</ScrollView>
A textView is added with the following code:
textView = new TextView(getContext());
textView.setPadding(0, 0, 0, 0);
textView.setSingleLine();
textView.setFocusableInTouchMode(false);
textView.setClickable(false);
textView.setGravity(Gravity.TOP);
textView.setText(entry.mText);
float fontSize = mImageView.mapSizeToView(entry.mPointSize);
textView.setTextSize(TypedValue.COMPLEX_UNIT_PT, fontSize);
params = new RelativeLayout.LayoutParams(
ViewGroup.MarginLayoutParams.WRAP_CONTENT,
ViewGroup.MarginLayoutParams.WRAP_CONTENT);
params.leftMargin = Math.round(viewLoc.x);
params.topMargin = Math.round(viewLoc.y);
addView(textView, params);
When ScaledImageView gets an onSizeChanged() callback, it sets the scale value and updates the font size and location of TextViews with the following code:
float fontSize = mImageView.mapSizeToView(entry.mPointSize);
textView.setTextSize(TypedValue.COMPLEX_UNIT_PT, fontSize);
PointF viewLoc = computeTopLeft(entry, entry.mTextView.getPaint());
params = (RelativeLayout.LayoutParams) textView.getLayoutParams();
params.leftMargin = Math.round(viewLoc.x);
params.topMargin = Math.round(viewLoc.y);
textView.setLayoutParams(params);
textView.forceLayout();
And finally, I do a
requestLayout() on the ScalableLayout
I know that's a lot of code but my problem is this. If I know the proper scale factor (used in mapSizeToView()) when I am creating the TextView and adding it to the screen everything works fine. If the value is incorrect, then nothing I can find will do a full recalculate that will get the TextView to be the same as if it were created with that font size. I believe it is tied to Android Layout structure which I generally understand. However, I don't understand why I can't get it to recompute from scratch (short of tearing down all the views and recreating them).

Resources