Change between images using Fade In/Out animations - java

I am trying to change between images using fade in/out and I am having a difficult time.
This is what I have for the code
public void fade(View view)
{
ImageView loveLive = findViewById(R.id.lovelive);
ImageView rikoCheer = findViewById(R.id.rikoCheer);
loveLive.animate().alpha(0f).setDuration(2000);
rikoCheer.animate().alpha(1f).setDuration(2000);
}
public void fade2(View view)
{
ImageView rikoCheer = findViewById(R.id.rikoCheer);
ImageView loveLive = findViewById(R.id.lovelive);
rikoCheer.animate().alpha(0f).setDuration(2000);
loveLive.animate().alpha(1f).setDuration(2000);
}
Here is my xml file
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".MainActivity">
<ImageView
android:id="#+id/lovelive"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:onClick="fade"
app:srcCompat="#drawable/lovelive"
tools:layout_editor_absoluteX="50dp"
tools:layout_editor_absoluteY="-69dp" />
<ImageView
android:id="#+id/rikoCheer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0"
android:onClick="fade"
app:srcCompat="#drawable/rikocheer"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
so my goal for this is to fade in and fade out between images

What's going wrong exactly? If nothing's showing up it might be that you don't have any layout constraints set up for your images (the tools: stuff only affects the layout editor, like fake data for testing, it doesn't apply when you run the app)
There's something called a TransitionDrawable you might want to use, you'd basically create a new Drawable XML file and put this in it
<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/lovelive" />
<item android:drawable="#drawable/rikocheer" />
</transition>
and then you can just use that in an ImageView or whatever.
In your code you'd go
myImage = (TransitionDrawable) findViewById<ImageView>(R.id.thatImageView).getDrawable()
and then you can call myImage.startTransition(duration) to go from image 1 to image 2, or myImage.reverseTransition(duration) to go back to the first image. You can switch immediately with resetTransition() for image 1 or startTransition(0) to go straight to image 2
You also might want to use setCrossfadeEnabled() on the TransitionDrawable - when it's false the first image is always opaque, so the second is drawn on top of it like an overlay. If it's set to true you get one fading out while the other fades in - depends what you want!

Related

Make Spinner dropdown to match screen width

I'd like my Spinner dropdown items to fill the entire screen width even tho my 'title' does not. Problem is the dropdown menu width seems to be limited the Spinner's title width.
My goal is to make it fill the entire screen width, with no spacing left or right, right below the action bar. A similar one to what I'm trying to do would be Instagram's menu to change profile.
I looked to similar questions but didn't find a solution that worked here. Also tried to create a custom adapter and making sure its views had match_parent attribute on their width. But didn't work either.
main.java (only relevant part of the code for legibility)
mMyListsSpinner = (Spinner) findViewById(R.id.spinner_mylists);
ArrayAdapter<String> snipperAdapter = new ArrayAdapter<String>(
FamilistActivity.this, R.layout.layout_spinner_title, dummyLists);
snipperAdapter.setDropDownViewResource(R.layout.layout_spinner_dropdown);
mMyListsSpinner.setAdapter(snipperAdapter);
mMyListsSpinner.setOnItemSelectedListener(this);
layout_spinner_title.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/spinner_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:textColor="#color/color_white_bright"
android:maxLines="1"
style="#style/OverflowMenu"
android:text="this is my list"/>
layout_spinner_dropdown.xml
<?xml version="1.0" encoding="utf-8"?>
<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_spinner_dropdown"
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_actionbar_height"
android:maxLines="1"
android:textSize="18sp"
android:textColor="#color/color_green_dark"
android:background="#color/color_white_bright"/>
styles.xml (only the relevant part)
<style name="OverflowMenu" parent="Widget.AppCompat.PopupMenu.Overflow">
<item name="overlapAnchor">false</item>
<item name="android:dropDownVerticalOffset">16dp</item>
<item name="android:dropDownHorizontalOffset">-15dp</item>
</style>
my toolbar:
toolbar.xml
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/bar_appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_actionbar_height"
app:layout_collapseMode="pin"
android:background="#color/color_green_bright">
<Spinner
android:id="#+id/spinner_mylists"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:spinnerMode="dropdown"
android:dropDownWidth="match_parent"
style="#style/OverflowMenu"/>
By looking into AppCompatSpinner.java and running the debugger I saw in this line in computeContentWidth()
else if (mDropDownWidth == MATCH_PARENT) {
setContentWidth(spinnerWidth - spinnerPaddingLeft - spinnerPaddingRight);
}
that SpinnerPaddingRight has a value that is not 0. I solved it by setting
android:paddingEnd="0dp"
in the Spinner view.

Android CoordinatorLayout anchor glitch with keyboard

I am trying to use a CoordinatorLayout to anchor a view to another one and it is working almost perfectly. The problem is that when i switch to another fragment, open the keyboard, then switch back, the anchored view gets messed up. Sometimes after a couple seconds it (seemingly) randomly snaps back into place. Here is a gif to demonstrate what I am talking about.
As you can see, the FloatingActionButton is not aligned when I return to the fragment, but after a while it snaps back into place. What could cause this issue?
Fragment XML
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout android:id="#+id/coordinatorLayout_main"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="false">
<!-- Other views -->
<!-- Bottom sheet -->
<include
android:id="#+id/bottom_sheet"
layout="#layout/bottom_sheet_primes"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/button_start"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/fab_margin"
android:src="#drawable/ic_play_arrow_white_24dp"
app:backgroundTint="#color/accent"
app:layout_anchor="#id/bottom_sheet"
app:layout_anchorGravity="top|end"/>
</android.support.design.widget.CoordinatorLayout>
The solution to this is to use android:windowSoftInputMode="adjustPan" attribute in your activity tag of the activity in question in the AndroidManifest.xml file.

Custom android controls with elements

I have a pretty basic idea and experience with creating custom android controls.
I know I can create a custom control that is basically a layout with a number of controls in it, add attributes and any kind of logic I would want.
But now I need something a bit different. I have an app in which all of my EditText elements have a gray horizontal line under them.
I know this can be achived with backgroundTint but this is only for api 21 and more.
So instead of adding this gray line below every EditText element I use, I would like to create a custom element that extends EditText but also has this gray line. Something like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ImageView
android:layout_width="match_parent"
android:layout_height="1dp"
android:src="#drawable/gray_divider"/>
</LinearLayout>
And in the code behind:
public class MyEditText extends LinearLayout {
public MyEditText(Context context, AttributeSet attrs) {
super(context, attrs);
Init();
}
private void Init() {
LayoutInflater inflater = (LayoutInflater)getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = inflater.inflate(R.layout.my_edit_text, this);
InitViews(view);
}
So my problem is this:
In order for MyEditText to function like an EditText I have to create an attribute for every EditText attribute. I want to do this:
<MyEditText android:layout_width="match_parent"
android:layout_height="match_parent"
android:text_color="#android:color/white" />
Without adding anything in the code behind. Is this possible?
For a good practice in this case, Use a background with bottom line.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="-10dp"
android:right="-10dp"
android:top="-10dp">
<shape android:shape="rectangle">
<gradient
android:angle="270"
android:endColor="#color/transparent"
android:startColor="#color/transparent" />
<stroke
android:width="#dimen/border"
android:color="#color/border" />
<corners android:radius="#dimen/border" />
</shape>
</item>
Make a .xml resource and put it in Drawable folder.Eg border_bottom.xml
And for Edit text just give background like
android:background="#drawable/border_bottom"
Hope it helps.

Selected cardview no foreground

I need to do what google does with notes like this.
This happens when I select a note and not just when I press one, even if my finger isn't on the note, the card view is selected and grey.
I tried with a custom foreground but without results.
I am not sure it can be done with foreground.
If I understand you correctly, you want to implement color change and add stroke on long click?
Than you can use one trick:
set your card layout like so:
<android.support.v7.widget.CardView
android:id="#+id/card"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
...>
<LinearLayout
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
...>
...
</LinearLayout>
</android.support.v7.widget.CardView>
Set LinearLayout background color
<android.support.v7.widget.CardView
android:id="#+id/card"
xmlns:card_view="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/your_color"
...>
...
</LinearLayout>
</android.support.v7.widget.CardView>
Than change card and layout background color at runtime, layout margins to reveal card beneath
layout.setOnLongClickListener(new View.OnLongClickListener() {
public boolean onLongClick(View l) {
card.setCardBackgroundColor(Color.parseColor("#939393")); //darker gray
layout.setBackgroundColor(Color.parseColor("#d4d4d4")) //gray
// use this to define margins in dp, not px
int dp8 = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 8, getResources().getDisplayMetrics());
// get layout's parent (card is parent of layout)
CardView.LayoutParams params = (CardView.LayoutParams) card.getLayoutParams();
// set margins in dp
params.setMargins(dp8, dp8, dp8, dp8);
// apply them to your layout
layout.setLayoutParams(params);
}
});
I haven't tested this code yet, but I think it should do the trick.
Tried toggling the background of the cardview via code with a white gray color depending on the state that you would prefer. Ie if it's selected etc?
Use duplicateParentState on note.
The childView will get parentView's state.
When you press parentView,the childView will get the pressed state.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="123"
android:background="#drawable/bg_txt"
android:duplicateParentState="true"
android:textSize="15sp" />
</FrameLayout >
Add
<color name="color_1">#4b14b1</color>
<color name="color_0">#ffffff</color>
in colors.xml.
Add bg_txt.xml in drawable folder.
bg_txt.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="#color/color_1"></item>
<item android:state_pressed="true" android:drawable="#color/color_1"></item>
<item android:drawable="#color/color_0"></item>
</selector>

Android: Image set as button background is not being shrunk?

I created a button with an image set as the background through a drawable. When I run the program the image is not being centered nor shrunk to fit the button. But when you click it, the pressed image is showing properly. This was working just the other day and I have no clue what happened to change it.
main.xml
<Button
android:id="#+id/rightarrow"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#android:color/transparent"
android:clickable="false" />
Activity.java
rightarrow = (Button) findViewById(R.id.rightarrow);
rightarrow.setBackgroundResource(R.drawable.rightarrow_drawable);
rightarrow_drawable.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/rightarrow_pressed" android:state_pressed="true"/>
<item android:drawable="#drawable/rightarrow" />
</selector>
Why not set the selector in XML? You do not have to set it by code.
Try Project->Clean in Eclipse - maybe your resources got mixed.
Just replace your Button with an ImageView

Categories