How to use ConstraintSet for animation in Android with Java?

How to use ConstraintSet for animation in Android with Java? - java

I find that there is a quick way to create animation with ConstraintSet for ConstrainLayout Activity. Faster than use TransitionManager for RelativeLayout
ConstraintSet use two xml file for an Activity. One for the first position and next one for the destination.
I want to create something like this:
https://media.giphy.com/media/2UwXdWEoLWe9iQMFIY/giphy.gif
But there is no clearly instruction show how to use it in Java. Anyone had done this can show me the source code or link to some post like that.
Thanks for reading the post.

This is possible with ConstraintSet. They key is two have two layouts one layout has ui elements of the screen and the other has elements on the screen. Now you can use TransitionManager with interpolator and duration of your choice and animate the layout changes.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
android:id="#+id/constraint"
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"
android:background="#181818"
tools:context=".MainActivity">
<ImageView
android:id="#+id/backgroundImage"
android:layout_width="0dp"
android:layout_height="0dp"
android:src="#drawable/mugello"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="JUNE 3, 2018"
app:layout_constraintRight_toRightOf="#+id/title"
app:layout_constraintBottom_toBottomOf="#+id/title"
android:textSize="12sp"
android:background="#d3d3d3"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:paddingTop="3dp"
android:paddingBottom="3dp"/>
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="48dp"
android:background="#F44336"
android:paddingBottom="8dp"
android:paddingEnd="24dp"
android:paddingStart="24dp"
android:paddingTop="8dp"
android:text="Mugello Circuit"
android:textColor="#FFFF"
android:textSize="45sp"
app:layout_constraintRight_toLeftOf="#+id/backgroundImage"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/fadeBackgroudView"
android:layout_width="wrap_content"
android:layout_height="90dp"
android:foreground="#drawable/gradient_variant"
app:layout_constraintBottom_toTopOf="#+id/description" />
<TextView
android:id="#+id/tap"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="Tap for info"
android:textSize="15sp"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="The Mugello is a historic region and valley in northern Tuscany, in Italy. It is located to the north of the city of Florence and consists of the northernmost portion of the Metropolitan City of Florence. It is connected to the separate Santerno river valley by the Futa Pass."
android:textSize="22sp"
android:textColor="#FFFF"
android:background="#181818"
android:gravity="center"
android:paddingStart="8dp"
android:paddingEnd="8dp"
android:paddingBottom="8dp"
app:layout_constraintTop_toBottomOf="#+id/backgroundImage"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>
activity_main_detail.xml
<?xml version="1.0" encoding="utf-8"?>
<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=".MainActivity">
<ImageView
android:id="#+id/backgroundImage"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
android:src="#drawable/mugello"
app:layout_constraintBottom_toTopOf="#+id/description"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="48dp"
android:background="#F44336"
android:paddingBottom="8dp"
android:paddingEnd="24dp"
android:paddingStart="24dp"
android:paddingTop="8dp"
android:text="Mugello Circuit"
android:textColor="#FFFF"
android:textSize="45sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="JUNE 3, 2018"
app:layout_constraintRight_toRightOf="#+id/title"
app:layout_constraintTop_toBottomOf="#+id/title"
android:textSize="12sp"
android:background="#d3d3d3"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:paddingTop="3dp"
android:paddingBottom="3dp"/>
<View
android:id="#+id/fadeBackgroudView"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:foreground="#drawable/gradient"
app:layout_constraintBottom_toTopOf="#+id/description" />
<TextView
android:id="#+id/tap"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="Tap for info"
android:textSize="15sp"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="The Mugello is a historic region and valley in northern Tuscany, in Italy. It is located to the north of the city of Florence and consists of the northernmost portion of the Metropolitan City of Florence. It is connected to the separate Santerno river valley by the Futa Pass."
android:textSize="22sp"
android:textColor="#FFFF"
android:gravity="center"
android:background="#181818"
android:paddingStart="8dp"
android:paddingEnd="8dp"
android:paddingBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity {
private boolean show = false;
private ImageView backgroundImage;
private ConstraintLayout constraint;
private ConstraintSet constraintSet = new ConstraintSet();
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
constraint = findViewById(R.id.constraint);
backgroundImage = findViewById(R.id.backgroundImage);
backgroundImage.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
if(show)
hideComponents(); // if the animation is shown, we hide back the views
else
showComponents() ;// if the animation is NOT shown, we animate the views
}
});
}
private void showComponents(){
show = true;
constraintSet.clone(this, R.layout.activity_main_detail);
Transition transition = new ChangeBounds();
transition.setInterpolator(new AnticipateOvershootInterpolator(1.0f));
transition.setDuration(1000);
TransitionManager.beginDelayedTransition(constraint, transition);
constraintSet.applyTo(constraint);
}
private void hideComponents(){
show = false;
constraintSet.clone(this, R.layout.activity_main);
Transition transition = new ChangeBounds();
transition.setInterpolator(new AnticipateOvershootInterpolator(1.0f));
transition.setDuration(1000);
TransitionManager.beginDelayedTransition(constraint, transition);
constraintSet.applyTo(constraint);
}
}
Here's a slide share on ConstraintLayout https://speakerdeck.com/camaelon/advanced-animations-and-constraintlayout

Related

Views losing margin when activity created

I have a strange behavior here
When I start this dialog (which is actually an activity with dialog Theme) the EditTexts are losing the left margin.
This is my XML
`<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/alert_root_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/primary">
<TextView
android:id="#+id/user_entry_hint"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="8dp"
android:text="#string/input_user"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.cardview.widget.CardView
android:id="#+id/user_edit_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:background="#color/icons"
app:cardCornerRadius="10dp"
app:cardElevation="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#id/user_entry_hint">
<LinearLayout
android:id="#+id/editTextLinear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/icons"
android:orientation="vertical">
<EditText
android:id="#+id/user_name_et"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/comfortaa_medium"
android:hint="#string/userName"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:textColor="#color/primary_text"
android:textColorHint="#color/primary_text"
android:textSize="14sp" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#color/primary_dark" />
<EditText
android:id="#+id/user_address_et"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/comfortaa_medium"
android:hint="#string/userAddress"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:textColor="#color/primary_text"
android:textColorHint="#color/primary_text"
android:textSize="14sp" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/places_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/icons"
android:orientation="vertical"
android:padding="10dp"
app:layout_constrainedHeight="true" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:orientation="horizontal"
android:weightSum="2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/user_edit_card">
<Button
android:id="#+id/cancel_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_weight="1"
android:text="#string/dialog_cancel"
android:textAllCaps="false" />
<Button
android:id="#+id/save_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_weight="1"
android:text="#string/dialog_save"
android:textAllCaps="false" />
</LinearLayout></androidx.constraintlayout.widget.ConstraintLayout>
`
And this is how I initialize it in activity.
public class AlertDialogActivity extends AppCompatActivity implements PlacesAutoCompleteAdapter.ClickListener {
private static final String TAG = "AlertDialogActivity";
private ActivityAlertDialogBinding binding;
private EditText userNameEdit;
private EditText userAddressEdit;
private Button saveUserButton;
private Button cancelButton;
private RecyclerView recyclerViewPlaces;
private PlacesAutoCompleteAdapter adapter;
private UserViewModel userViewModel;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
binding = ActivityAlertDialogBinding.inflate(getLayoutInflater());
View view = binding.getRoot();
setContentView(view);
this.setFinishOnTouchOutside(false);
initViews(binding);
private void initViews(ActivityAlertDialogBinding binding) {
userNameEdit = binding.userNameEt;
userAddressEdit = binding.userAddressEt;
saveUserButton = binding.saveButton;
cancelButton = binding.cancelButton;
recyclerViewPlaces = binding.placesRecyclerView;
}
I am trying to figure out why the views lose margin and when the Edittext is gaining focus the margins are restored
The Ui works fine on emulator. The video is from my device.

I would first remove all match_parent sizes from the children of the ConstraintLayout and replace with 0dp and the appropriate constraints. See the "important" comment here.
Important: MATCH_PARENT is not recommended for widgets contained in a ConstraintLayout. Similar behavior can be defined by using MATCH_CONSTRAINT with the corresponding left/right or top/bottom constraints being set to "parent".

Constraint layout has space bottom and top

I'm building an app using Constraint layout, but it has extra space bottom and top. I can't find where they come from. I checked maybe ten times from top to bottom all code but there is no margin or padding or anything else for it.
<?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:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/black"
android:paddingLeft="0dp"
android:paddingTop="0dp"
android:paddingRight="0dp"
android:paddingBottom="0dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/Brand"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#id/guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/brandname"
style="#style/viewParent.headerText"
android:text="Did"
android:textColor="#color/white" />
<TextView
android:id="#+id/brandname2"
style="#style/viewParent.headerText2"
android:layout_toRightOf="#id/brandname"
android:text="You"
android:textColor="#color/yellow" />
<TextView
style="#style/viewParent.headerText2"
android:layout_toRightOf="#id/brandname2"
android:text="Know!"
android:textColor="#color/red"
android:textStyle="bold|italic" />
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/container_main"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="4dp"
android:background="#drawable/card_bg"
android:paddingLeft="16dp"
android:paddingRight="16dp"
app:layout_constraintBottom_toTopOf="#id/guideline2"
app:layout_constraintEnd_toEndOf="#id/guidelineyazisag"
app:layout_constraintStart_toStartOf="#id/guidelineyazisol"
app:layout_constraintTop_toBottomOf="#id/guideline">
<TextView
android:id="#+id/activity_main_text_view_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="simple Title Text"
android:textColor="#5E4C4C"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/activity_main_did_u_know"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Category"
android:textColor="#5E4C4C"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.core.widget.NestedScrollView
android:id="#+id/scrollview"
android:layout_width="match_parent"
android:layout_height="0dp"
android:fillViewport="true"
app:layout_constraintBottom_toTopOf="#id/activity_main_image_view"
app:layout_constraintTop_toBottomOf="#id/activity_main_did_u_know">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/activity_main_image_view"
app:layout_constraintTop_toBottomOf="#id/activity_main_did_u_know">
<TextView
android:id="#+id/factTextView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="8dp"
android:gravity="center_vertical|center_horizontal"
android:lineSpacingExtra="8dp"
android:padding="10dp"
android:text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged."
android:textColor="#000000"
android:textSize="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
<ImageView
android:id="#+id/activity_main_image_view"
android:layout_width="30dp"
android:layout_height="40dp"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:clickable="true"
android:src="#drawable/ic_share_black_24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/scrollview" />
<ImageView
android:id="#+id/activity_main_fav_button"
android:layout_width="30dp"
android:layout_height="40dp"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/ic_favorite_border_black_24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/scrollview" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/LeftRight"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#id/adView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/guideline2">
<ImageView
android:id="#+id/activity_main_left_button"
android:layout_width="60dp"
android:layout_height="60dp"
android:clickable="true"
android:src="#drawable/ic_previous"
android:elevation="3dp"
android:background="#drawable/okarka"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/guideline3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/activity_main_right_button"
android:layout_width="60dp"
android:layout_height="60dp"
android:clickable="true"
android:src="#drawable/ic_next"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
android:background="#drawable/okarka"
app:layout_constraintStart_toEndOf="#+id/guideline3"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.gms.ads.AdView xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="#+id/adView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
ads:adSize="SMART_BANNER"
ads:adUnitId="ca-app-pub-3940256099942544/6300978111"
ads:layout_constraintBottom_toBottomOf="parent"
ads:layout_constraintLeft_toLeftOf="parent"
ads:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/LeftRight" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.076" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.7" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guidelineyazisol"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.07" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guidelineyazisag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.93" />
</androidx.constraintlayout.widget.ConstraintLayout>
I tried adding guidelines to 0 points in the bottom but it also starts in that space. I gave -(minus) values to margin and padding but doesn't work. I don't know what else to do. You can see from screenshots how it looks.
public class MainActivity extends AppCompatActivity {
private ColorWheel colorWheel = new ColorWheel();
private TextView factTextView;
private TextView textViewId;
private TextView textViewTableName;
ImageView tableImageView;
AdView adView;
ImageView shareImageView;
ImageView favImageView;
float x1,x2,y1,y2;
int i = 1;
int adCounter = 0;
private ConstraintLayout constraintLayout;
String fact;
ArrayList<Fact> favList = new ArrayList<>();
private InterstitialAd mInterstitial;
AdRequest interAdRequest;
int favId;
String favTable;
Typeface typeface;
List<Fact> mData;
private DatabaseFacts db;
GradientDrawable shape;
#SuppressLint({"ClickableViewAccessibility", "SetTextI18n"})
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
db = new DatabaseFacts(this);
db.copyDbIfNotExists();
shape = new GradientDrawable();
shape.setCornerRadius(40);
mData = new ArrayList<>();
MobileAds.initialize(this, "ca-app-pub-2469721886989416~7390658870");
adView = findViewById(R.id.adView);
AdRequest bannerAdRequest = new AdRequest.Builder().build();
adView.loadAd(bannerAdRequest);
interAdRequest = new AdRequest.Builder().build();
mInterstitial = new InterstitialAd(this);
mInterstitial.setAdUnitId("ca-app-pub-2469721886989416/9441000894");
mInterstitial.loadAd(interAdRequest);
factTextView = findViewById(R.id.factTextView);
constraintLayout = (ConstraintLayout) findViewById(R.id.container_main);
textViewId = findViewById(R.id.activity_main_text_view_id);
favImageView = findViewById(R.id.activity_main_fav_button);
shareImageView = findViewById(R.id.activity_main_image_view);
textViewTableName = findViewById(R.id.activity_main_did_u_know);
// tableImageView = findViewById(R.id.img_user);
// if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.O) {
// typeface = getResources().getFont(R.font.sourceserifproregular);
// }
factTextView.setTypeface(typeface);
Intent intent = getIntent();
final int choice = intent.getIntExtra("choice",0);
switch (choice) {
case 1:
textViewTableName.setText("General Facts");
factTextView.setText(db.getFact((readFromShared("defaultKey") - 1), DatabaseFacts.TABLE_GENERAL_NAME).getFact());
textViewId.setText("Fact " + (readFromShared("defaultKey") - 1) + " of " + db.getFactsCount(DatabaseFacts.TABLE_GENERAL_NAME));
if (db.getFact((readFromShared("defaultKey") - 1), DatabaseFacts.TABLE_GENERAL_NAME).isFavorite() == 0) {
favImageView.setImageResource(R.drawable.ic_favorite_border_black_24dp);
} else {
favImageView.setImageResource(R.drawable.ic_favorite_black_24dp);
}
ImageView leftClick = (ImageView) findViewById(R.id.activity_main_left_button);
leftClick.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
leftClickMethod("defaultKey", DatabaseFacts.TABLE_GENERAL_NAME);
}
});
ImageView rightClick = (ImageView) findViewById(R.id.activity_main_right_button);
rightClick.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
rightClickMethod("defaultKey",DatabaseFacts.TABLE_GENERAL_NAME);
return;
}
});
favImageView.setOnClickListener(v -> handleFavorites("defaultKey", DatabaseFacts.TABLE_GENERAL_NAME));
break;

Remove app:layout_constraintBottom_toTopOf="#id/guideline" from Brand and app:layout_constraintTop_toBottomOf="#id/LeftRight" from adView. You can't put constraints for Top and Bottom because it will center your View between those two constraints. Same about left and right (start, end), but you have match_parent here, so this problem doesn't occur (visualy - if you set wrap_content, view will go to the center too).

Fix Overlapping Collapsing/Expanding Cards Java

I am using Android Studio to create 2 CardViews that expand and collapse on a mouseclick. However, when I expand a card, the card underneath does not get pushed down and still visible even if the card above is expanded and is an overlap problem.
How do i fix this so either the card below the one being expanded gets pushed down or that the card that is being expanded information is at the front?
Screenshot of how cards look before clicked:Before Clicked
screenshot of when when clicked: when clicked (as you can see the 'Steven Smith card is still being shown)
Note: I did look into using a Recycler View + adapter etc. but in each card I would want different layouts/images (vs all being consistent info like a contact in someones phone)
Here is my java code:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_engineering_page);
expandableView = findViewById(R.id.expandableView);
arrowBtn = findViewById(R.id.arrowBtn);
cardView = findViewById(R.id.cardView);
arrowBtn.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if (expandableView.getVisibility()==View.GONE){
TransitionManager.beginDelayedTransition(cardView, new AutoTransition());
expandableView.setVisibility(View.VISIBLE);
arrowBtn.setBackgroundResource(R.drawable.down_arrow);
} else {
TransitionManager.beginDelayedTransition(cardView, new AutoTransition());
expandableView.setVisibility(View.GONE);
arrowBtn.setBackgroundResource(R.drawable.android_icon);
}
}
});
expandableView2 = findViewById(R.id.expandableView2);
arrowBtn2 = findViewById(R.id.arrowBtn2);
cardView2 = findViewById(R.id.cardView2);
arrowBtn2.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if (expandableView2.getVisibility()==View.GONE){
TransitionManager.beginDelayedTransition(cardView2, new AutoTransition());
expandableView2.setVisibility(View.VISIBLE);
arrowBtn2.setBackgroundResource(R.drawable.down_arrow);
} else {
TransitionManager.beginDelayedTransition(cardView2, new AutoTransition());
expandableView2.setVisibility(View.GONE);
arrowBtn2.setBackgroundResource(R.drawable.android_icon);
}
}
});
}
}
Here is my XML code:
<?xml version="1.0" encoding="utf-8"?>
<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=".EngineeringPage"
android:background="#22325A">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/toolbar"
android:background="#C4C4C4"
app:logo="#drawable/image1"
app:title="">
</android.support.v7.widget.Toolbar>
<TextView
android:id="#+id/engineeringTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="409dp"
android:layout_marginEnd="111dp"
android:layout_marginLeft="111dp"
android:layout_marginRight="111dp"
android:layout_marginStart="111dp"
android:layout_marginTop="61dp"
android:text="Engineering"
android:textColor="#android:color/white"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/CardView.Light"
android:layout_marginTop="98dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="12dp">
<TextView
android:id="#+id/name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Section 1"
style="#style/TextAppearance.AppCompat.Title"
android:layout_marginStart="12dp" />
<Button
android:id="#+id/arrowBtn"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginEnd="12dp"
android:background="#drawable/down_arrow"
app:layout_constraintEnd_toEndOf="parent" />
<android.support.constraint.ConstraintLayout
android:id="#+id/expandableView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="12dp"
android:visibility="gone"
android:layout_marginTop="12dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<ImageView
android:id="#+id/phoneIcon"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginTop="52dp"
android:layout_marginStart="12dp"
android:src="#drawable/android_icon"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/phoneNumber"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="(999) 345 32 45"
android:layout_marginStart="32dp"
android:textColor="#000"
style="#style/TextAppearance.AppCompat.Medium"
app:layout_constraintTop_toTopOf="#+id/phoneIcon"
app:layout_constraintStart_toEndOf="#id/phoneIcon"
app:layout_constraintBottom_toTopOf="#+id/phoneDesc"/>
<TextView
android:id="#+id/phoneDesc"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Mobile"
android:layout_marginStart="32dp"
android:textColor="#8A000000"
style="#style/TextAppearance.AppCompat.Body1"
app:layout_constraintTop_toBottomOf="#+id/phoneNumber"
app:layout_constraintStart_toEndOf="#id/phoneIcon"
app:layout_constraintBottom_toBottomOf="#+id/phoneIcon"/>
<ImageView
android:id="#+id/mailIcon"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginTop="22dp"
android:layout_marginStart="12dp"
android:src="#drawable/android_icon"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/phoneIcon"/>
<TextView
android:id="#+id/mailNumber"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="workemail#gmail.com"
android:layout_marginStart="32dp"
android:textColor="#000"
style="#style/TextAppearance.AppCompat.Medium"
app:layout_constraintTop_toTopOf="#+id/mailIcon"
app:layout_constraintStart_toEndOf="#id/mailIcon"
app:layout_constraintBottom_toTopOf="#+id/mailDesc"/>
<TextView
android:id="#+id/mailDesc"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Work"
android:layout_marginStart="32dp"
android:textColor="#8A000000"
style="#style/TextAppearance.AppCompat.Body1"
app:layout_constraintTop_toBottomOf="#+id/mailNumber"
app:layout_constraintStart_toEndOf="#id/mailIcon"
app:layout_constraintBottom_toBottomOf="#+id/mailIcon"/>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/cardView2"
style="#style/CardView.Light"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="184dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="12dp">
<TextView
android:id="#+id/name2"
style="#style/TextAppearance.AppCompat.Title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:text="Steven Smith" />
<Button
android:id="#+id/arrowBtn2"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginEnd="12dp"
android:background="#drawable/down_arrow"
app:layout_constraintEnd_toEndOf="parent" />
<android.support.constraint.ConstraintLayout
android:id="#+id/expandableView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:paddingBottom="12dp"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<ImageView
android:id="#+id/phoneIcon2"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginStart="12dp"
android:layout_marginTop="52dp"
android:src="#drawable/android_icon"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/phoneNumber2"
style="#style/TextAppearance.AppCompat.Medium"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:text="(999) 345 32 45"
android:textColor="#000"
app:layout_constraintBottom_toTopOf="#+id/phoneDesc2"
app:layout_constraintStart_toEndOf="#id/phoneIcon2"
app:layout_constraintTop_toTopOf="#+id/phoneIcon2" />
<TextView
android:id="#+id/phoneDesc2"
style="#style/TextAppearance.AppCompat.Body1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:text="Mobile"
android:textColor="#8A000000"
app:layout_constraintBottom_toBottomOf="#+id/phoneIcon2"
app:layout_constraintStart_toEndOf="#id/phoneIcon2"
app:layout_constraintTop_toBottomOf="#+id/phoneNumber2" />
<ImageView
android:id="#+id/mailIcon2"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginStart="12dp"
android:layout_marginTop="22dp"
android:src="#drawable/android_icon"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/phoneIcon2" />
<TextView
android:id="#+id/mailNumber2"
style="#style/TextAppearance.AppCompat.Medium"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:text="workemail#gmail.com"
android:textColor="#000"
app:layout_constraintBottom_toTopOf="#+id/mailDesc2"
app:layout_constraintStart_toEndOf="#id/mailIcon2"
app:layout_constraintTop_toTopOf="#+id/mailIcon2" />
<TextView
android:id="#+id/mailDesc2"
style="#style/TextAppearance.AppCompat.Body1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:text="Work"
android:textColor="#8A000000"
app:layout_constraintBottom_toBottomOf="#+id/mailIcon2"
app:layout_constraintStart_toEndOf="#id/mailIcon2"
app:layout_constraintTop_toBottomOf="#+id/mailNumber2" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>

I have modified your sample to make it work correctly, you need to animated the parent layout for the two cardViews to make the animation smoth
java
final ConstraintLayout content = findViewById(R.id.content_layout);
final ConstraintLayout expandableView = findViewById(R.id.expandableView);
final Button arrowBtn = findViewById(R.id.arrowBtn);
arrowBtn.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if (expandableView.getVisibility() == View.GONE) {
TransitionManager.beginDelayedTransition(content, new AutoTransition());
expandableView.setVisibility(View.VISIBLE);
arrowBtn.setBackgroundResource(R.drawable.down_arrow);
} else {
TransitionManager.beginDelayedTransition(content, new AutoTransition());
expandableView.setVisibility(View.GONE);
arrowBtn.setBackgroundResource(R.drawable.android_icon);
}
}
});
final ConstraintLayout expandableView2 = findViewById(R.id.expandableView2);
final Button arrowBtn2 = findViewById(R.id.arrowBtn2);
arrowBtn2.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if (expandableView2.getVisibility() == View.GONE) {
TransitionManager.beginDelayedTransition(content, new AutoTransition());
expandableView2.setVisibility(View.VISIBLE);
arrowBtn2.setBackgroundResource(R.drawable.down_arrow);
} else {
TransitionManager.beginDelayedTransition(content, new AutoTransition());
expandableView2.setVisibility(View.GONE);
arrowBtn2.setBackgroundResource(R.drawable.android_icon);
}
}
});
xml
<?xml version="1.0" encoding="utf-8"?>
<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"
android:id="#+id/content_layout"
android:background="#22325A">
<android.support.v7.widget.Toolbar
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="#+id/toolbar"
android:background="#C4C4C4"
app:logo="#drawable/logo"
app:title="">
</android.support.v7.widget.Toolbar>
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="0dp"
android:layout_height="wrap_content"
style="#style/CardView.Light"
android:layout_marginTop="98dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/toolbar">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="12dp">
<TextView
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:id="#+id/name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Section 1"
style="#style/TextAppearance.AppCompat.Title"
android:layout_marginStart="12dp" />
<Button
android:id="#+id/arrowBtn"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginEnd="12dp"
android:background="#drawable/down_arrow"
app:layout_constraintTop_toTopOf="#id/name"
app:layout_constraintBottom_toBottomOf="#id/name"
app:layout_constraintEnd_toEndOf="parent" />
<android.support.constraint.ConstraintLayout
android:id="#+id/expandableView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:paddingBottom="12dp"
android:visibility="gone"
app:layout_constraintTop_toBottomOf="#id/arrowBtn"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<ImageView
android:id="#+id/phoneIcon"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginStart="12dp"
android:src="#drawable/logo"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/phoneNumber"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="(999) 345 32 45"
android:layout_marginStart="32dp"
android:textColor="#000"
style="#style/TextAppearance.AppCompat.Medium"
app:layout_constraintTop_toTopOf="#+id/phoneIcon"
app:layout_constraintStart_toEndOf="#id/phoneIcon"
app:layout_constraintBottom_toTopOf="#+id/phoneDesc"/>
<TextView
android:id="#+id/phoneDesc"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Mobile"
app:layout_constraintStart_toStartOf="#id/phoneNumber"
android:textColor="#8A000000"
style="#style/TextAppearance.AppCompat.Body1"
app:layout_constraintTop_toBottomOf="#+id/phoneNumber"
app:layout_constraintStart_toEndOf="#id/phoneIcon"
app:layout_constraintBottom_toBottomOf="#+id/phoneIcon"/>
<ImageView
android:id="#+id/mailIcon"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginTop="22dp"
android:layout_marginStart="12dp"
android:src="#drawable/android_icon"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/phoneIcon"/>
<TextView
android:id="#+id/mailNumber"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="workemail#gmail.com"
app:layout_constraintStart_toStartOf="#id/phoneNumber"
android:textColor="#000"
style="#style/TextAppearance.AppCompat.Medium"
app:layout_constraintTop_toTopOf="#+id/mailIcon"
app:layout_constraintStart_toEndOf="#id/mailIcon"
app:layout_constraintBottom_toTopOf="#+id/mailDesc"/>
<TextView
android:id="#+id/mailDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Work"
android:textColor="#8A000000"
style="#style/TextAppearance.AppCompat.Body1"
app:layout_constraintStart_toStartOf="#id/phoneNumber"
app:layout_constraintTop_toBottomOf="#+id/mailNumber"
app:layout_constraintBottom_toBottomOf="#+id/mailIcon"/>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/cardView2"
style="#style/CardView.Light"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="48dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/cardView">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="12dp">
<TextView
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/name2"
style="#style/TextAppearance.AppCompat.Title"
android:layout_marginStart="12dp"
android:text="Steven Smith" />
<Button
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginEnd="12dp"
android:background="#drawable/down_arrow"
app:layout_constraintTop_toTopOf="#id/name2"
app:layout_constraintBottom_toBottomOf="#id/name2"
app:layout_constraintEnd_toEndOf="parent"
android:id="#+id/arrowBtn2"
/>
<android.support.constraint.ConstraintLayout
android:id="#+id/expandableView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:paddingBottom="12dp"
app:layout_constraintTop_toBottomOf="#id/arrowBtn2"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<ImageView
android:id="#+id/phoneIcon2"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginStart="12dp"
android:src="#drawable/logo"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:id="#+id/phoneNumber2"
style="#style/TextAppearance.AppCompat.Medium"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:text="(999) 345 32 45"
android:textColor="#000"
app:layout_constraintBottom_toTopOf="#+id/phoneDesc2"
app:layout_constraintStart_toEndOf="#id/phoneIcon2"
app:layout_constraintTop_toTopOf="#+id/phoneIcon2" />
<TextView
android:id="#+id/phoneDesc2"
style="#style/TextAppearance.AppCompat.Body1"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#id/phoneNumber2"
android:text="Mobile"
android:textColor="#8A000000"
app:layout_constraintBottom_toBottomOf="#+id/phoneIcon2"
app:layout_constraintStart_toEndOf="#id/phoneIcon2"
app:layout_constraintTop_toBottomOf="#+id/phoneNumber2" />
<ImageView
android:id="#+id/mailIcon2"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginStart="12dp"
android:layout_marginTop="22dp"
android:src="#drawable/android_icon"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/phoneIcon2" />
<TextView
android:id="#+id/mailNumber2"
style="#style/TextAppearance.AppCompat.Medium"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#id/phoneNumber2"
android:text="workemail#gmail.com"
android:textColor="#000"
app:layout_constraintBottom_toTopOf="#+id/mailDesc2"
app:layout_constraintStart_toEndOf="#id/mailIcon2"
app:layout_constraintTop_toTopOf="#+id/mailIcon2" />
<TextView
android:id="#+id/mailDesc2"
style="#style/TextAppearance.AppCompat.Body1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Work"
android:textColor="#8A000000"
app:layout_constraintStart_toStartOf="#id/phoneNumber2"
app:layout_constraintBottom_toBottomOf="#+id/mailIcon2"
app:layout_constraintStart_toEndOf="#id/mailIcon2"
app:layout_constraintTop_toBottomOf="#+id/mailNumber2" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>

Just put everything inside a Linear Layout orientation vertical or Inside other layouts align your bottom and tops correctly with android:layout_below="#+id/YOUR ID"

Can hide ProgressBar but cannot show it

I'm using the default ProgressBar widget, for indeterminate progress, in a Linear Layout with Style: #android:style/Widget.DeviceDefault.Light.ProgressBar.Small
If I start the activity with the ProgressBar VISIBLE and never make it INVISIBLE or GONE it shows ok. But if I put progressBar.setVisibility(progressBar.GONE); or progressBar.setVisibility(progressBar.INVISIBLE); anywhere in my code, the space for the ProgressBar is on the UI, but I cant see it.
I thought it might be a leaky parallel thread and removed all multi-threading from my app, but it still won't appear if INVISIBLE or GONE is anywhere in my code.
It works fine on other Activities.
Layout XML:
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="260dp">
<ScrollView
android:id="#+id/myTeamsScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="8dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/content_frame"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:orientation="horizontal">
<LinearLayout
android:layout_width="32dp"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_marginLeft="16dp"
android:orientation="vertical"
android:paddingTop="32dp">
<ImageView
android:id="#+id/menu1ImageView"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_gravity="center"
android:contentDescription="#string/userNavigationMenuButtonContent"
android:onClick="openDrawer"
app:srcCompat="#drawable/menu_icon" />
</LinearLayout>
</LinearLayout>
<EditText
android:id="#+id/enterNewTeamEditText"
android:layout_width="340dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_gravity="center_horizontal"
android:contentDescription="#string/enterTeamNameEditTextcontent"
android:ems="10"
android:hint="#string/teamNameHint"
android:inputType="textEmailAddress"
android:textColor="#color/colorPrimary" />
<ProgressBar
android:id="#+id/myTeamsProgressBar"
style="#android:style/Widget.DeviceDefault.Light.ProgressBar.Small"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="16dp"
android:alpha="1"
android:foregroundTint="#FFFFCC"
android:progressTint="#FFFFCC"
android:visibility="visible" />
<TextView
android:id="#+id/deckTypeTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="16dp"
android:contentDescription="#string/remotePokerlabelcontent"
android:enabled="false"
android:text="#string/newTeamDeckType"
android:textAlignment="center"
android:textColor="#color/colorPrimary"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/remotePokerTextView" />
<Spinner
android:id="#+id/newTeamDeckTypeSpinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="8dp"
android:background="#drawable/spinner"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/enterNewTeamEditText" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation="horizontal"
android:paddingTop="16dp">
<Button
android:id="#+id/createTeamButton"
android:layout_width="wrap_content"
android:layout_height="32dp"
android:layout_gravity="center_horizontal"
android:layout_marginEnd="8dp"
android:layout_weight="1"
android:background="#color/colorButton"
android:contentDescription="#string/createTeamButtoncontent"
android:fontFamily="#string/fontfamily"
android:onClick="createTeam"
android:text="Create Team"
android:textColor="#color/colorPrimaryDark"
android:textSize="14sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation="horizontal"
android:paddingTop="16dp">
<Button
android:id="#+id/receivedJoinRequestsButton"
android:layout_width="147dp"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:background="#color/colorButton"
android:contentDescription="#string/createTeamButtoncontent"
android:fontFamily="#string/fontfamily"
android:onClick="showJoinRequests"
android:text="#string/myTeamsJoinRequestsButton"
android:textColor="#color/colorPrimaryDark"
android:textSize="14sp"
android:layout_weight="1" />
<Switch
android:id="#+id/teamTypesSwitch"
android:layout_width="143dp"
android:layout_height="wrap_content"
android:checked="false"
android:fontFamily="#string/fontfamily"
android:text="#string/switchMemberTeams"
android:textColor="#color/colorPrimary"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:layout_marginTop="16dp"
android:orientation="vertical">
<ListView
android:id="#+id/myTeamsListView"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="32dp"
android:layout_weight="1"
android:alwaysDrawnWithCache="true"
android:background="#drawable/spinner"
android:contentDescription="#string/myTeamsListViewcontent"
android:isScrollContainer="true"
android:scrollbars="vertical"
android:scrollingCache="true"
android:smoothScrollbar="true"></ListView>
</LinearLayout>
</LinearLayout>
</ScrollView>
<com.google.android.material.navigation.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
android:onClick="onSwitchChange"
app:headerLayout= "#layout/nav_header_main"
app:menu="#xml/drawer_view" />
</androidx.drawerlayout.widget.DrawerLayout>
In the Activity onCreate I call populateMemberTeams(); I added a CountDownTimer to check if the progressBar is on the screen and it is...Before the 2 seconds, there is a empty space, but I can't see the ProgressBar
When the timer expires the UI adjusts when the ProgressBar changes to GONE.
private void populateMemberTeams() {
ListView myTeamsListView = findViewById(R.id.myTeamsListView);
ProgressBar progressBar = findViewById(R.id.myTeamsProgressBar);
progressBar.setVisibility(progressBar.VISIBLE);
mAuth = FirebaseAuth.getInstance();
String userId = mAuth.getCurrentUser().getUid();
callTeamManagement.populateMemberTeams(TAG, passedActivity, context, userId);
new CountDownTimer(2000, 1000) {
public void onFinish() {
progressBar.setVisibility(progressBar.GONE);
}
public void onTick(long millisUntilFinished) {
// millisUntilFinished The amount of time until finished.
}
}.start();
}
I have tried:
Changing the ProgressBar style in case it was a colour issue;
INVISIBLE instead of GONE;
Putting the ProgressBar inside its own LinearLayout
progressBar.setVisibility(progressBar.VISIBLE);
progressBar.setVisibility(View.VISIBLE);
progressBar.setVisibility(ProgressBar.VISIBLE);

You should use runOnUiThread.
Helper method for running part of a method on the UI thread.
runOnUiThread(new Runnable() {
#Override
public void run() {
progressBar.setVisibility(View.VISIBLE);
//progressBar.setVisibility(View.INVISIBLE);
//progressBar.setVisibility(View.GONE);
}
});

FloatingActionButton over EditText is not clickable

I have a FloatingActionButton over a big EditText. When I launch the app and try to tap on the FloatingActionButton the keyboard flips up because it takes the tap of the EditText.
What do I need to change in my code such that the FloatingActionButton is "above" the EditText?
I found that I need to add the FloatingActionButton last, what I already did, such that it is on top, but it didn't work. I also have implemented an onClickListener, which I suppose is not the problem.
Here a screenshot of my layout: Layout Screenshot
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/listviewbackground"
android:backgroundTint="#80FFFFFF"
android:backgroundTintMode="src_over"
>
<EditText
android:id="#+id/itemTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"
android:paddingLeft="5dp"
android:paddingTop="5dp"
android:hint="What do you need to do?"
android:textAlignment="center"
android:textAppearance="?attr/textAppearanceListItem"
android:textSize="30dp"
android:background="#android:color/transparent"/>
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/itemTitle"
android:paddingTop="50dp"
android:gravity="center"
android:orientation="horizontal"
android:weightSum="2"
android:descendantFocusability="beforeDescendants"
android:focusableInTouchMode="true">
<TextView
android:id="#+id/DueDate"
android:layout_width="0dp"
android:layout_height="39dp"
android:layout_marginEnd="64dp"
android:layout_marginStart="40dp"
android:layout_weight="1"
android:text="Due Date"
android:textAlignment="textStart"
android:textSize="24dp"
app:layout_constraintEnd_toStartOf="#+id/Date"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="0dp" />
<TextView
android:id="#+id/Date"
android:layout_width="110dp"
android:layout_height="33dp"
android:layout_marginEnd="32dp"
android:layout_weight="1.2"
android:clickable="true"
android:focusable="false"
android:onClick="openCalendarView"
android:textAlignment="center"
android:textSize="18dp"
app:layout_constraintEnd_toEndOf="parent"
tools:layout_editor_absoluteY="0dp" />
<TextView
android:id="#+id/Important"
android:layout_width="149dp"
android:layout_height="39dp"
android:layout_marginBottom="8dp"
android:layout_marginStart="40dp"
android:layout_marginTop="8dp"
android:text="Is important?"
android:textAlignment="textStart"
android:textSize="24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/DueDate"
app:layout_constraintVertical_bias="0.0" />
<Switch
android:id="#+id/switch1"
android:layout_width="51dp"
android:layout_height="40dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_toRightOf="#id/Important"
android:gravity="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.59"
app:layout_constraintStart_toEndOf="#+id/Important"
app:layout_constraintTop_toBottomOf="#+id/Date"></Switch>
</android.support.constraint.ConstraintLayout>
<EditText
android:id="#+id/Description"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"
android:layout_below="#id/constraintLayout1"
android:background="#android:color/transparent"
android:hint="Put in your description"
android:inputType="textPersonName"
android:nextFocusLeft="#id/Description"
android:nextFocusUp="#id/Description"
android:paddingTop="20dp"
android:textAlignment="center"
android:textSize="18dp" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/floatingButtonDone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:paddingRight="5dp"
android:paddingLeft="5dp"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#drawable/check"
android:backgroundTint="#color/Green"
android:layout_alignBottom="#id/Description"
android:layout_alignParentRight="true"
android:focusable="true"
/>
</RelativeLayout>
Here my onClickListener
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_itemdetail, container, false);
//Getting Data and Creation of ToDoItem Object
FloatingActionButton floatingbutton = view.findViewById(R.id.floatingButtonDone);
floatingbutton.bringToFront();
floatingbutton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
//Getting Data
try {
//Do something
} catch (Exception e) {
Snackbar.make(view, "You need to set a Title", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
}
});

Put your FloatingActionButton inside a frame layout and set its gravity and padding accordingly where you want to show it.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
<android.support.design.widget.FloatingActionButton
android:id="#+id/floatingButtonDone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#color/Green"
android:contentDescription="#null"
android:gravity="bottom|end"
android:padding="3dp"
android:src="#drawable/check" />
</FrameLayout>

We Keep Coding

Java is a programming language and computing platform first released by Sun Microsystems in 1995.

How to use ConstraintSet for animation in Android with Java? - java

Related

Views losing margin when activity created

Constraint layout has space bottom and top

Fix Overlapping Collapsing/Expanding Cards Java

Can hide ProgressBar but cannot show it

FloatingActionButton over EditText is not clickable

Categories

Resources