Increase view width to the left and to the right
I have the following layout:
<android.support.constraint.ConstraintLayout
android:id="@+id/target"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:background="#FF0000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:gravity="center"
android:text="Hello"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/left_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="LEFT VIEW"
android:visibility="gone"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/right_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RIGHT VIEW"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<Button
android:id="@+id/left_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="LEFT"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/right_btn"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/target" />
<Button
android:id="@+id/right_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="RIGHT"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/left_btn"
app:layout_constraintTop_toBottomOf="@+id/target" />
Which result in this:
This is the fragment:
public class IncreaseWidthLeftRightFragment extends Fragment {
private IncreaseWidthLeftRightViewModel mViewModel;
private TextView mRightView;
private Button mLeftBtn;
private Button mRightBtn;
private TextView mLeftView;
private ConstraintLayout mTarget;
public static IncreaseWidthLeftRightFragment newInstance() {
return new IncreaseWidthLeftRightFragment();
}
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,
@Nullable Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.increase_width_left_right_fragment, container, false);
mRightView = v.findViewById(R.id.right_view);
mLeftBtn = v.findViewById(R.id.left_btn);
mLeftBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showLeftText();
}
});
mRightBtn = v.findViewById(R.id.right_btn);
mRightBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showRightText();
}
});
mLeftView = v.findViewById(R.id.left_view);
mTarget = v.findViewById(R.id.target);
return v;
}
private void showLeftText() {
// increase the left side of the target container
// ...
mLeftView.setVisibility(View.VISIBLE);
}
private void showRightText() {
// increase the right side of the target container
// ...
mRightView.setVisibility(View.VISIBLE);
}
}
The left_view and right_view TextViews are initially set to visibility GONE. The left button must show the left_view while expanding the left side but the right side should be kept in the same place. Similar for the right side but in the opposite direction.
How could I achieve this? I tried to play with the LayoutParams but without success. I would like to do this with an animation, but that will be the next step.
UPDATE:
Just to be clear, for instance, if I click on the left button, this should be the end result:
As you can see, the right side of the red rectangle is in the same X coordinate, however, the width of the rectangle increase to the left.
If you need your target view be anchored with the text views, they should not be inside of it (supposing you want to use the ConstraintLayout). The text views themselves also should have some anchor on the layout, so they can expand related to it position.
1) Add guidelines
For this purpose you can use constraint guidelines. E.g. if you want the text views (and consequently target view) expand from 32% from left and right edges of the root screen, you can add guidelines as follow (they should be at the same level of hierarchy with your buttons/target view):
<android.support.constraint.Guideline
android:id="@+id/left_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.32" />
<android.support.constraint.Guideline
android:id="@+id/right_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.68" />
P.S. the layout_constraintGuide_percent always calculates from left side of a view the guide is inside of
2) Align your text views
As I said above, the text views should be at the same level with the target view, so grab them from inside the target view and put somewhere in the root constraint layout such that the right view is to right of the right guideline and left view is to left of the left one:
<TextView
android:id="@+id/left_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="LEFT VIEW"
app:layout_constraintEnd_toStartOf="@+id/left_guideline" />
<TextView
android:id="@+id/right_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RIGHT VIEW"
app:layout_constraintStart_toStartOf="@+id/right_guideline" />
We also need set vertical constraint for the views, and make a feeling that they are inside of the target view. In order to do that we need to align top side of both text views with the top side of the target view. In addition to that, the text views initial state should be "folded" (so they are hidden), unfortunately i don't know how to make them of width 0dp, since such value for layout_width or layout_height makes a constraint layout think that the view just comply constraints instead of using it's own size. As a quick workaround let's set width to 1px. To prevent the text views from extending vertically, i also would like to propose set singleLine property for them to true.
<TextView
android:id="@+id/left_view"
android:singleLine="true"
android:layout_width="1px"
android:layout_height="wrap_content"
android:text="LEFT VIEW"
app:layout_constraintEnd_toStartOf="@+id/left_guideline"
app:layout_constraintTop_toTopOf="@+id/target" />
<TextView
android:id="@+id/right_view"
android:singleLine="true"
android:layout_width="1px"
android:layout_height="wrap_content"
android:text="RIGHT VIEW"
app:layout_constraintStart_toStartOf="@+id/right_guideline"
app:layout_constraintTop_toTopOf="@+id/target" />3) Align the target view
Now just align your target view left and right sides with left and right side of left and right text view respectively (so it's aligned with the outer boundaries of both text views) and set the layout_width attribute to 0dp, that will make it follow constraints instead of plain values.
<android.support.constraint.ConstraintLayout
android:id="@+id/target"
android:layout_width="0dp"
android:layout_height="200dp"
android:background="#FF0000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@+id/right_view"
app:layout_constraintStart_toStartOf="@+id/left_view"
app:layout_constraintTop_toTopOf="parent">4) Add root layout id
In order to get root layout for animation, add id for the root layout:
<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:id="@+id/rootView"
android:layout_width="match_parent"
android:layout_height="match_parent">After all steps your layout blueprint should look like this:
If you struggle at any step, feel free to use full layout gist from here.
5) Animate expanding
Eventually your show method should look something like that:
...
private void showLeftText() {
expandView(mLeftView);
}
private void showRightText() {
expandView(mRightView);
}
private void expandView(View view) {
TransitionManager.beginDelayedTransition(mRootView);
ViewGroup.LayoutParams layoutParams = view.getLayoutParams();
layoutParams.width = ViewGroup.LayoutParams.WRAP_CONTENT;
view.setLayoutParams(layoutParams);
}
And here is a short demo:
