Increase view width to the left and to the right












0














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:
result_layout



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:



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.










share|improve this question
























  • Could you please elaborate your problem a little bit? I can't see if your current approach affect left or right views place.
    – The Dreams Wind
    Nov 22 at 19:03










  • @AleksandrMedvedev I have added an example of the result pretended. Is it clearer now? Thanks!
    – amp
    Nov 23 at 9:27
















0














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:
result_layout



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:



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.










share|improve this question
























  • Could you please elaborate your problem a little bit? I can't see if your current approach affect left or right views place.
    – The Dreams Wind
    Nov 22 at 19:03










  • @AleksandrMedvedev I have added an example of the result pretended. Is it clearer now? Thanks!
    – amp
    Nov 23 at 9:27














0












0








0







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:
result_layout



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:



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.










share|improve this question















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:
result_layout



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:



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.







android view android-constraintlayout






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 28 at 4:45









The Dreams Wind

1,488825




1,488825










asked Nov 22 at 17:45









amp

3,83485094




3,83485094












  • Could you please elaborate your problem a little bit? I can't see if your current approach affect left or right views place.
    – The Dreams Wind
    Nov 22 at 19:03










  • @AleksandrMedvedev I have added an example of the result pretended. Is it clearer now? Thanks!
    – amp
    Nov 23 at 9:27


















  • Could you please elaborate your problem a little bit? I can't see if your current approach affect left or right views place.
    – The Dreams Wind
    Nov 22 at 19:03










  • @AleksandrMedvedev I have added an example of the result pretended. Is it clearer now? Thanks!
    – amp
    Nov 23 at 9:27
















Could you please elaborate your problem a little bit? I can't see if your current approach affect left or right views place.
– The Dreams Wind
Nov 22 at 19:03




Could you please elaborate your problem a little bit? I can't see if your current approach affect left or right views place.
– The Dreams Wind
Nov 22 at 19:03












@AleksandrMedvedev I have added an example of the result pretended. Is it clearer now? Thanks!
– amp
Nov 23 at 9:27




@AleksandrMedvedev I have added an example of the result pretended. Is it clearer now? Thanks!
– amp
Nov 23 at 9:27












1 Answer
1






active

oldest

votes


















1














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:



Layout blueprint



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:



Animation






share|improve this answer























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53436048%2fincrease-view-width-to-the-left-and-to-the-right%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    1














    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:



    Layout blueprint



    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:



    Animation






    share|improve this answer




























      1














      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:



      Layout blueprint



      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:



      Animation






      share|improve this answer


























        1












        1








        1






        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:



        Layout blueprint



        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:



        Animation






        share|improve this answer














        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:



        Layout blueprint



        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:



        Animation







        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited Nov 25 at 0:12

























        answered Nov 23 at 23:13









        The Dreams Wind

        1,488825




        1,488825






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.





            Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


            Please pay close attention to the following guidance:


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53436048%2fincrease-view-width-to-the-left-and-to-the-right%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            A CLEAN and SIMPLE way to add appendices to Table of Contents and bookmarks

            Calculate evaluation metrics using cross_val_predict sklearn

            Insert data from modal to MySQL (multiple modal on website)