I am trying to build responsive layout, but I am unable to do so. I need to implement view logic presented on those drawings:
(from the bottom) There is a View with fixed size, anchored to the bottom of the screen. Above it there is a TextView. Its minimum height should be space between center guideline and bottom view. When there is a lot of text it should grow above the center guideline. On the top there is an ImageView with maximum height as space between screen top and center guideline and no minimum height. My current solution looks something like this:
<ConstraintLayout>
<ImageView
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="barrier" />
<Textview
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="bottomView" />
<View
android:layout_height="{some}dp"
app:layout_constraintBottom_toBottomOf="parent" />
<android.support.constraint.Barrier
app:barrierDirection="top"
app:constraint_referenced_ids="guidelineCenter,textView" />
<ConstraintLayout>
At this point a case with long text works fine, but if text is short I end up with text anchored to the bottom view. Any idea how force this minimum constraints required for left image?
As far as I know, there isn't a way through XML to defined a percentage minimum height, so you will have to enforce a minimum height in code. Here are two images that show a short amount of text and one with a longer amount. The red line is there to show where the 1/2 way point is and is not needed. The guideline set at 50% is also not needed.
activity_main.xml
<android.support.constraint.ConstraintLayout
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/textView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_launcher" />
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:minHeight="0dp"
android:text="This is big text "
app:layout_constraintBottom_toTopOf="#id/bottomView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<View
android:id="#+id/bottomView"
android:layout_width="0dp"
android:layout_height="50dp"
android:background="#color/colorPrimary"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<View
android:id="#+id/view"
android:layout_width="0dp"
android:layout_height="1dp"
android:background="#android:color/holo_red_light"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/guideline" />
</android.support.constraint.ConstraintLayout>
MainActivity.xml
public class MainActivity extends AppCompatActivity {
private ConstraintLayout mLayout;
private TextView mTextView;
private View mBottomView;
private int mMinHeight;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mLayout = findViewById(R.id.layout);
mTextView = findViewById(R.id.textView);
mBottomView = findViewById(R.id.bottomView);
mTextView.setText(getResources().getString(R.string.large_text).substring(0, 1000));
mLayout.post(new Runnable() {
#Override
public void run() {
mMinHeight = mLayout.getHeight() / 2 - mBottomView.getHeight();
if (mTextView.getHeight() < mMinHeight) {
mTextView.setMinHeight(mMinHeight);
}
}
});
}
}
Related
I have an imageView that I want to move given a specific situation.
Initially I have a Relative layout with two textViews and an imageview. The textViews are oriented with one above the other. The imageView is set
android:layout_below="#id/text_view1"
android:layout_toEndOf="#+id/text_view2".
In the logic text_view2 is removed when a specific condition is met. I want to programmatically move the imageView to the end of text_view1 when this condition is met. Essentially when text_view2 is removed, I want to set the imageView to
android:layout_toEndOf="#+id/text_view1"
I don't believe setting X,Y,Z values is appropriate here because programmatically, I don't know where the imageView will show up given different screen sizes, and densities. I just need it to move to the end of the first textView.
Take a look at RelativeLayout.LayoutParams. You will need to manipulate the layout rules in the layout params as follows:
// Make textView2 invisible
tv2.visibility = View.INVISIBLE
// Get the LayoutParams of the ImageView
val ivParams = iv.layoutParams as RelativeLayout.LayoutParams
// Change the rule to be to the right of textView1
ivParams.addRule(RelativeLayout.RIGHT_OF, tv1.id)
// Since the placement of textView2 is changing, request a layout.
iv.requestLayout()
Consider using "END_OF" instead of "RIGHT_OF".
You can either place the Views in a nested LinearLayout or use a ConstraintLayout with a Barrier.
It is generally recommended to use ConstraintLayout because nested LinearLayouts are bad for performance but since ConstraintLayout takes some getting used to, I did not want to omit the other option.
To demonstrate the two approaches I've set up a small example with a LinearLayout and a ConstraintLayout in the same screen:
<FrameLayout 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=".ui.fragment.TabTwoFragment">
<LinearLayout
android:layout_width="240dp"
android:layout_height="128dp"
android:background="#cccccc">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#44ff0000"
android:maxWidth="160dp"
android:text="Upper TextView\nin\n nested\n LinearLayout" />
<TextView
android:id="#+id/longTextViewInLinearLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#4400ff00"
android:maxWidth="160dp"
android:text="Lower TextView in nested LinearLayout" />
</LinearLayout>
<ImageView
android:id="#+id/linearLayoutImageView"
android:layout_width="48dp"
android:layout_height="48dp"
android:background="#ffffff"
android:src="#drawable/ic_android_black_24dp"
android:tint="#color/colorPrimary" />
</LinearLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="240dp"
android:layout_height="128dp"
android:layout_gravity="bottom|end"
android:background="#666666">
<TextView
android:id="#+id/shortTextViewInConstraintLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#44ff0000"
android:maxWidth="160dp"
android:text="Upper TextView\nin\n nested\nConstraintLayout"
android:textColor="#ffffff"
app:layout_constraintBottom_toTopOf="#+id/longTextViewInConstraintLayout"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintVertical_chainStyle="packed" />
<TextView
android:id="#+id/longTextViewInConstraintLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#4400ff00"
android:maxWidth="160dp"
android:text="Lower TextView in ConstraintLayout"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/shortTextViewInConstraintLayout" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="end"
app:constraint_referenced_ids="shortTextViewInConstraintLayout, longTextViewInConstraintLayout" />
<ImageView
android:id="#+id/constraintLayoutImageView"
android:layout_width="48dp"
android:layout_height="48dp"
android:background="#ffffff"
android:importantForAccessibility="no"
android:src="#drawable/ic_android_black_24dp"
android:tint="#color/colorAccent"
app:layout_constraintStart_toEndOf="#+id/barrier"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>
If the ImageView is clicked, the longer TextView will disappear and the ImageView will move closer to the short TextView. The animations are provided by Android's transition framework, so basically all you have to do is trigger the transition by calling TransitionManager.beginDelayedTransition()
For demonstration purposes, I've placed all the code in one method. Please note that normally one would have the TransitionSet as field of the Fragment so that it does not have to be recreated every time you need it. (The code is in Java since Android Studio supports automatic translation to Kotlin if required but not the other way round ;-) )
#Override
public void onViewCreated(#NonNull View view, #Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
TransitionSet ts = new TransitionSet();
ts.addTransition( new ChangeBounds());
ts.addTransition(new Slide());
View imageViewInLinearLayout = view.findViewById(R.id.linearLayoutImageView);
imageViewInLinearLayout.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
TransitionManager.beginDelayedTransition((ViewGroup)getView(), ts);
view.findViewById(R.id.longTextViewInLinearLayout).setVisibility(GONE);
}
});
View imageViewInConstraintLayout = view.findViewById(R.id.constraintLayoutImageView);
imageViewInConstraintLayout.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
TransitionManager.beginDelayedTransition((ViewGroup)getView(), ts);
view.findViewById(R.id.longTextViewInConstraintLayout).setVisibility(GONE);
}
});
}
I wanna achieve the following be behavior for one screen of my app.
I have a fragment's layout with ConstraintLayout as it's parent. Inside ConstraintLayout I have a ScrollView with nested ConstraintLayout (nested ConstraintLayout contains ImageView and TextView) and simple Button below the ScrollView.
I wanna enable button as soon as user reaches to the bottom of ScrollView and disable when user scrolls up.
Layout is below.
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
>
<ScrollView
android:id="#+id/scrollableView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:fillViewport="true"
app:layout_constraintBottom_toTopOf="#id/elevationShadow"
app:layout_constraintTop_toBottomOf="#id/appbar">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_marginStart="#dimen/spacing_large"
android:layout_marginEnd="#dimen/spacing_large"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/user_image"
android:layout_width="144dp"
android:layout_height="144dp"
android:layout_gravity="center"
android:layout_marginTop="#dimen/spacing_large"
android:src="#drawable/user_image"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:id="#+id/heading"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="#dimen/text_size_xxlarge"
android:textStyle="bold"
android:textAlignment="center"
android:textColor="#color/black_color"
android:layout_marginTop="#dimen/spacing_large"
tools:text="Tools text"
android:textAppearance="?tvptTextAppearanceBody"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/user_image"
/>
<TextView
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/spacing_large"
android:textAlignment="center"
android:textSize="#dimen/user_info_content_text_size"
android:textAppearance="?tvptTextAppearanceBody"
android:textColor="#color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/heading"
tools:text="Tools test content"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
<View
android:id="#+id/elevationShadow"
android:layout_width="match_parent"
android:layout_height="3dp"
android:background="#drawable/shadow_elevation"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginBottom="#dimen/user_info_activity_confirm_button_margin"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="#id/button_confirm"/>
<com.travelportdigital.android.compasswidget.button.PercentageBasedStateButton
android:id="#+id/button_confirm"
style="#style/PrimaryButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:layout_marginBottom="#dimen/user_info_activity_confirm_button_margin"
android:text="#string/user_info_continueButton_title"
android:textAllCaps="true"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
The problem is that content for TextView which is inside ScrollView can both long and short. That's why I had to add ScrollView if the content is long.
By the small piece of code I was able to achieve the behavior I needed with one small remark.
fun addScrollChangeListener() {
scrollView.viewTreeObserver
.addOnScrollChangedListener {
enableContinueButton(scrollView.getChildAt(0).bottom <= scrollView.height + scrollView.scrollY)
}
}
And the code above works fine for the scenario when content is long (when user arrives to this screen Continue button is disabled and when user scrolls to the bottom of the scroll view it become enabled if user scrolls up it becomes disabled again.
I wanna update this logic to enable button when user arrives to this screen and content of TextView inside ScrollView is short (no need scrolling for this scenario).
I made some researches in Google and could not find the solution which would work for me.
In onViewCreated() method I added logic to disable or enable button when user arrives to this screen.
enableContinueButton(!isScrollingRequired())
I tried this implementation
private fun isScrollingRequired(): Boolean {
val view = scrollView.getChildAt(scrollView.childCount - 1) as View
val diff = view.bottom - (scrollView.height + scrollView.scrollY)
return diff != 0
}
and this
return if (child != null) {
val childHeight = child.height
scrollView.height <= childHeight + scrollView.paddingTop + scrollView.paddingBottom;
} else {
false
}
but it did not work, because ScrollView height and it's child height is always 0
Looking forward your advices.
Regards,
Alex
I dont know is this what you want to do but it should be one of the solution.
I think you can just simply add the button in the "ScrollView" so when user scrolls at the bottom, user will see the button and when user scrolls up, user cannot press the button as well.
Below layout .XML works for me, Using ScrollView with ConstraintLayout:
(you may need extra dependencies)
<ScrollView
android:id="#+id/msg_scroll"
android:layout_width="0dp"
android:layout_height="200dp"
android:fillViewport="true"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/infoSumm">
<!--Display the <ScrollView> under <TextView>"#+id/infoSumm" -->
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/inside_scroll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/infoDetail"
android:text=""
android:layout_marginTop="12dp"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxHeight="240dp"
app:layout_constraintTop_toTopOf="#id/inside_scroll"
app:layout_constraintStart_toStartOf="parent"
tools:text="Info Detail"/>
<com.google.android.material.button.MaterialButton
android:id="#+id/btn_infoClose"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/default_field_spacing"
android:backgroundTint="#color/colorPrimary"
android:textAppearance="#style/TextAppearance.MaterialComponents.Button"
android:textAlignment="center"
android:textStyle="bold"
android:textAllCaps="false"
android:textSize="20sp"
android:textColor="#color/colorWhite"
android:text="#string/btn_Close"
android:paddingTop="10dp"
android:paddingBottom="10dp"
app:cornerRadius="25dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/infoDetail"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
I am currently using a scroll view inside an Alert Dialog and need the scroll view to grow in height until the dialog reaches its maximum default height. It's a bit tough for me to explain so i have attached an illustration to help. Hope it does.
The issue i'm getting is the scrollview does not grow in height and even if i remove the app:layout_constraintBottom_toTopOf="#id/linearLayout4", it grows however the bottom part will be partially hidden by the button layout. This is my current code :
<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/filter_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/dialog_box"
android:minHeight="300dp"
android:elevation="12dp">
<TextView
android:id="#+id/filter_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="#string/filter"
style="#style/element_header"
android:textColor="#color/textColorDark"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/filter_reset_btn"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:background="?attr/selectableItemBackgroundBorderless"
android:text="#string/reset"
style="#style/text_info_nBold"
android:textSize="14sp"
android:textColor="#color/textColorDark"
app:layout_constraintBottom_toBottomOf="#+id/filter_header"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/filter_header" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#id/linearLayout4"
app:layout_constraintTop_toBottomOf="#id/filter_header"
app:layout_constraintVertical_bias="0.0">
<androidx.core.widget.NestedScrollView
android:id="#+id/filter_scroll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:layout_marginTop="16dp"
android:scrollbarFadeDuration="1000">
<!-- VIEWS INSIDE HERE -->
</androidx.core.widget.NestedScrollView>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/dialog_bottombar_layout"
android:orientation="horizontal"
android:padding="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<Button
android:id="#+id/dialog_secondary_button"
style="#style/low_emphasis_btn"
android:layout_width="0dp"
android:layout_marginEnd="8dp"
android:layout_weight="1"
android:backgroundTint="#color/textColorDark"
android:text="#string/dialog_cancel"
android:textColor="#color/textColorDark"
android:visibility="visible" />
<Button
android:id="#+id/dialog_primary_button"
style="#style/high_emphasis_btn"
android:layout_width="0dp"
android:layout_weight="1"
android:text="#string/apply" />
</LinearLayout>
Any help would be appreciated :)
Alert dialogs tend to wrap their content or can be forced to be full screen. A size in between the optimizes the screen real estate takes a some work, but it is not impossible.
One approach is to let the system lay out the alert dialog but, before it is displayed, use a ViewTreeObserver.OnGlobalLayoutListener to examine the resulting size of the dialog. In the layout listener, the size of the dialog can be adjusted up to fit the contents of the scrolling view or adjusted up to full screen if the scrolling view contents are too large for the screen.
Here is a demo app that shows how this can be done. Comments in the code explain more.
MainActivity.kt
class MainActivity : AppCompatActivity(), View.OnClickListener {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
}
override fun onClick(v: View) {
val text = when (v.id) {
R.id.customDialogShort -> getString(R.string.short_string)
R.id.customDialogMedium -> getString(R.string.lorem_medium)
else -> getString(R.string.lorem_long)
}
// Specifying the viewGroup as a parent to the inflater makes no difference.
val dialogView = LayoutInflater.from(v.context).inflate(R.layout.con_custom_view, null, false) as ConstraintLayout
(dialogView.findViewById(R.id.textView) as TextView).text = text
val alertDialog = AlertDialog.Builder(this).setView(dialogView).create()
val decorView = alertDialog.window!!.decorView
decorView.setBackgroundResource(R.drawable.alert_dialog_background)
// We need a layout pass to determine how big everything is and needs to be. Place a hook
// at the end of the layout process to examine the layout before display.
decorView.viewTreeObserver.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
override fun onGlobalLayout() {
decorView.viewTreeObserver.removeOnGlobalLayoutListener(this)
// Find out how much of the scrolling view is usable by its child.
val scrollingView: NestedScrollView = decorView.findViewById(R.id.filter_scroll)
val scrollingViewPadding = scrollingView.paddingTop + scrollingView.paddingBottom
val scrollingUsableHeight = scrollingView.height - scrollingViewPadding
// If the child view fits in the scrolling view, then we are done.
val childView = scrollingView.getChildAt(0)
if (childView.height <= scrollingUsableHeight) {
return
}
// Child doesn't currently fit in the scrolling view. Resize the top-level
// view so the child either fits or is forced to scroll because the maximum
// height is reached. First, find out how much space is allowed by the decor view.
val displayRectangle = Rect()
decorView.getWindowVisibleDisplayFrame(displayRectangle)
val decorViewPadding = decorView.paddingTop + decorView.paddingBottom
val decorUsableHeight = displayRectangle.height() - decorViewPadding - scrollingViewPadding
// Compute the height of the dialog that will 100% fit the scrolling content and
// reduce it if it won't fit in the maximum allowed space.
val heightToFit = dialogView.height + childView.height - scrollingUsableHeight
dialogView.minHeight = min(decorUsableHeight, heightToFit)
}
})
var buttonOk: Button = dialogView.findViewById(R.id.dialog_primary_button)
buttonOk.setOnClickListener { alertDialog.dismiss() }
buttonOk = dialogView.findViewById(R.id.dialog_secondary_button)
buttonOk.setOnClickListener { alertDialog.dismiss() }
alertDialog.show()
}
}
activity_main.xml
<LinearLayout
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
tools:context=".MainActivity">
<Button
android:id="#+id/customDialogShort"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="onClick"
android:text="Short text" />
<Button
android:id="#+id/customDialogMedium"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="onClick"
android:text="Medium text" />
<Button
android:id="#+id/customDialogLong"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="onClick"
android:text="Long text" />
</LinearLayout>
con_custom_view
Custom Layout for the AlertDialog.
<TextView
android:id="#+id/filter_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="#string/filter"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/filter_reset_btn"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:background="?attr/selectableItemBackgroundBorderless"
android:text="#string/reset"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="#+id/filter_header"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/filter_header" />
<androidx.core.widget.NestedScrollView
android:id="#+id/filter_scroll"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="16dp"
android:padding="16dp"
android:scrollbarFadeDuration="1000"
app:layout_constraintBottom_toTopOf="#id/linearLayout4"
app:layout_constraintTop_toBottomOf="#id/filter_header">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:text="#string/lorem_long" />
</androidx.core.widget.NestedScrollView>
<LinearLayout
android:id="#+id/linearLayout4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<Button
android:id="#+id/dialog_secondary_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_weight="1"
android:text="#string/dialog_cancel"
android:visibility="visible" />
<Button
android:id="#+id/dialog_primary_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/apply" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
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:
I got two TextViews inside a ConstraintLayout. One on top left, the other to the right of the first one. Nothing crazy. Now, the first view can grow wider which pushes the second view more to the right. What I want though is that the second view always stays within the bounds of the parent.
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingStart="20dp"
android:background="#FFFFFF"
android:paddingEnd="20dp">
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text 1"
android:ellipsize="end"
android:maxLines="1"
android:background="#FF0000"/>
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="#id/text1"
android:text="Text 2"
android:maxLines="1"
android:background="#00FF00"/>
...
What I get is something like this
But when I increase the text length, the second view is being pushed out of the view
What should happen is that the second view is on top right of the parent and the first one takes the rest of the available space. Is there any way I can do this in a ConstraintLayout?
You can use android:maxWidth in the activity_main.xml with a fixed number, but it is not good because every phone has diffirent screen size, so I recommend you set it with code, you can setMaxWidth for text1 following width of text2 and constraintLayout:
txt1 = (TextView) findViewById(R.id.text1);
txt2 = (TextView) findViewById(R.id.text2);
constraintLayout = (ConstraintLayout) findViewById(R.id.constraintLayout);
ViewTreeObserver vto = constraintLayout.getViewTreeObserver();
vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
constraintLayout.getViewTreeObserver().removeGlobalOnLayoutListener(this);
} else {
constraintLayout.getViewTreeObserver().removeOnGlobalLayoutListener(this);
}
int text2Width = txt2.getWidth();
int layoutWidth = constraintLayout.getWidth();
txt1.setMaxWidth(layoutWidth-text2Width);
}
});
The only way I can see to do this in constraintLayout is to make the 2 textView's a chain and apply layout_constrainedWidth to the first text view so the second text view gets priority:
<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:background="#fff"
tools:layout_width="200dp">
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FF0000"
android:ellipsize="end"
android:maxLines="1"
android:text="Text 1"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toStartOf="#id/text2"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00FF00"
android:maxLines="1"
android:text="Text 2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/text1" />
</android.support.constraint.ConstraintLayout>
Short Text 1:
Long Text 1: