Constrain Layout : Defining Seekbar height with respect to other fields - android-constraintlayout

I am adding a couple of Textviews and a Seekbar in a Constraint Layout. I have defined textview height according to the screen height and want the seekbar height to go from one textview to the other. The code is
<TextView
android:id="#+id/detailTaskHighTextId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="0.1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.45"
android:text="High"/>
<TextView
android:id="#+id/detailTaskLowTextId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="0.1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.75"
android:text="Low"/>
<SeekBar
android:id="#+id/detailTaskPriorityId"
style="#style/Widget.AppCompat.SeekBar.Discrete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:max="3"
android:progress="3"
android:rotation="270"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="#id/detailTaskLowTextId"
app:layout_constraintTop_toTopOf="#id/detailTaskHighTextId"
app:layout_constraintLeft_toRightOf="#id/detailTaskHighTextId"/>
I don't want to hardcode the seekbar width. The seekbar width is really small here. Using the Top_toTopOf and Bottom_toBottomOf just brings seekbar in the middle of the two text views. I tried Start_toStart and End_toEnd as well. What am I missing? This is what I am seeing Link to image

You need to change height (using MATCH_CONSTRAINT) of seek bar like this:
<SeekBar
android:id="#+id/detailTaskPriorityId"
style="#style/Widget.AppCompat.SeekBar.Discrete"
android:layout_width="wrap_content"
android:layout_height="0dp" <- MATCH_CONSTRAINT
android:max="3"
android:progress="3"
android:rotation="270"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="#id/detailTaskLowTextId"
app:layout_constraintTop_toTopOf="#id/detailTaskHighTextId"
app:layout_constraintLeft_toRightOf="#id/detailTaskHighTextId"/>

Related

android constraintLayout, how to horizontal flow a few views and one of them may show ellipse

Having A, B, C, D views horizontally flowing one after the other.
If the parent width is wide enough all of them will be displayed
| A | B | C | D
when the parent width is not enough for all, the 3rd one will show ellipse
| AAA | BB | C... | DDD
tried following it works in portrait mode but not in landscape since the android:maxWidth="100dp" is used
<TextView
android:id="#+id/c"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="100dp"
android:maxLines="1"
android:ellipsize="end"
app:layout_constraintStart_toEndOf="#+id/b"
app:layout_constraintTop_toTopOf="#+id/a"
tools:text="CCCCCCCCCCCC long long long long long" />
and dont want to make another layout for landscape specifically.
any suggestions?
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/the_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="83dp" />
<ImageView
android:id="#+id/top_row_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon_1"
app:layout_constraintEnd_toStartOf="#+id/the_guideline"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:visibility="visible"/>
<TextView
android:id="#+id/top_row_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:ellipsize="end"
android:maxLines="1"
tools:text="top title"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/the_guideline"
app:layout_constraintTop_toTopOf="parent"
android:visibility="visible"/>
<ImageView
android:id="#+id/left_column_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:scaleType="fitXY"
app:layout_constraintEnd_toStartOf="#+id/the_guideline"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/top_row_title"
app:srcCompat="#drawable/left_icon" />
<!-- horizontal flow views-->
<TextView
android:id="#+id/a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginStart="8dp"
app:layout_constraintStart_toStartOf="#+id/the_guideline"
app:layout_constraintTop_toBottomOf="#+id/top_row_title"
tools:text="AAAAAAAAAAAAAAAAAAAA" />
<ImageView
android:id="#+id/b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="#+id/a"
app:layout_constraintTop_toTopOf="#+id/a"
app:srcCompat="#drawable/right_icon" />
<TextView
android:id="#+id/c"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="100dp"
android:maxLines="1"
android:ellipsize="end"
app:layout_constraintStart_toEndOf="#+id/b"
app:layout_constraintTop_toTopOf="#+id/a"
tools:text="CCCCCCCCCCCC long long long long long" />
<TextView
android:id="#+id/d"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DDDDDDDDDDDDDDD"
app:layout_constraintStart_toEndOf="#+id/c"
app:layout_constraintTop_toTopOf="#+id/a" />
</androidx.constraintlayout.widget.ConstraintLayout>
Did't get the point what you're trying to do but, if I'm right then you want to make a Horizontal Chain in ConstraintLayout.
Find full documentation here : Control linear groups with a chain

Offset image vertically in a ConstraintLayout from its center position

I am centering an image on the screen as follows:
<androidx.constraintlayout.motion.widget.ConstraintLayout
android:id="#+id/dashboardConstraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/logo"
android:layout_width="155dp"
android:layout_height="20dp"
android:scaleType="centerCrop"
app:srcCompat="#drawable/ic_logo"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.motion.widget.ConstraintLayout>
What I would like to do is have the image offset downward by 50dp from its center position. Adding a marginTop does not work. All that does is adds a margin at the top of the screen where the image is constrained. The image still remains in the center. But I want it shifted down by 50dp.
I tried it and it works fine and I have highlighted the code that I have changed
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Third">
<androidx.appcompat.widget.AppCompatImageView //it is normar imageView in centered
android:id="#+id/logo"
android:layout_width="155dp"
android:layout_height="20dp"
android:scaleType="centerCrop"
android:src="#drawable/ic_launcher_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<androidx.appcompat.widget.AppCompatImageView //in this imageView i used marginTop and it works perfectly
android:id="#+id/logo1"
android:layout_width="155dp"
android:layout_height="20dp"
android:scaleType="centerCrop"
android:src="#drawable/two"
android:layout_marginTop="50dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<androidx.appcompat.widget.AppCompatImageView //in this imageView i used vertical_bias and it work perfectly.
android:id="#+id/logo2"
android:layout_width="155dp"
android:layout_height="20dp"
android:scaleType="centerCrop"
android:src="#drawable/ic_launcher_background"
app:layout_constraintVertical_bias="0.60" //there is 0.0=Top, 0.50=center, 1.0=Bottom and so on.
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Output is:-

How can i center a view in a guideline?

Suppose i have a horizontal GuideLine at 30% of parent and a View (suppose a Button) how can i make that view be centered on the guideline?
Like this:
Update:
The view i'm using here has height based on ratio, and soltuion on answers doesnt works.
Here is current layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:id="#+id/imgLogo"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#id/guideline_30"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintEnd_toStartOf="#+id/guidelineV_75"
app:layout_constraintStart_toEndOf="#+id/guidelineV_25"
app:layout_constraintTop_toTopOf="#+id/guideline_30"
app:srcCompat="#drawable/ic_launcher_background" />
<android.support.constraint.Guideline
android:id="#+id/guideline_30"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.3" />
<android.support.constraint.Guideline
android:id="#+id/guidelineV_25"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.25" />
<android.support.constraint.Guideline
android:id="#+id/guidelineV_75"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.75" />
</android.support.constraint.ConstraintLayout>
Using fix width or height
Need to use same Guideline for both top and bottom constraint like:
app:layout_constraintTop_toTopOf="#id/guideline_30"
app:layout_constraintBottom_toBottomOf="#id/guideline_30"
xml:
<android.support.constraint.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">
<ImageView
android:id="#+id/imgLogo"
android:layout_width="150dp"
android:layout_height="150dp"
app:layout_constraintTop_toTopOf="#id/guideline_30"
app:layout_constraintBottom_toBottomOf="#id/guideline_30"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:src="#drawable/splash_logo" />
<android.support.constraint.Guideline
android:id="#+id/guideline_30"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.30" />
</android.support.constraint.ConstraintLayout>
output:
Using width and height based on the ratio
As you are using both width and height based on ratio so that it's not centered.
But to get your desired result you can also set Guideline = 0.15 (0.3 / 2) and modify constraintTop and constraintBotttom
xml:
<android.support.constraint.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">
<ImageView
android:id="#+id/imgLogo"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintEnd_toStartOf="#+id/guidelineV_75"
app:layout_constraintStart_toEndOf="#+id/guidelineV_25"
app:layout_constraintTop_toTopOf="#+id/guideline_15"
app:srcCompat="#drawable/ic_launcher_background" />
<android.support.constraint.Guideline
android:id="#+id/guideline_15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.15" />
<android.support.constraint.Guideline
android:id="#+id/guidelineV_25"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.25" />
<android.support.constraint.Guideline
android:id="#+id/guidelineV_75"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.75" />
</android.support.constraint.ConstraintLayout>
output:
You need to constraint both the top and the bottom of the View to the guideline, like so:
<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.3" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="#id/guideline"
app:layout_constraintBottom_toBottomOf="#id/guideline" />
In ConstraintLayout, for centering the View over Vertical axis of any other View Component (e.g. Guidelines, TextViews, ImageViews, layouts, etc.), you can simply follow these two steps, in XML:-
1) app:layout_constraintTop_toTopOf="#id/componentId"
2) app:layout_constraintBottom_toBottomOf="#id/componentId"
This will Equally distribute the component's View in the Vertical center.
BONUS:-
For centering the View in the Horizontal axis, use
1) app:layout_constraintLeft_toLeftOf="#id/componentId"
or
app:layout_constraintStart_toStartOf="#id/componentId"
2) app:layout_constraintRight_toRightOf="#id/componentId"
or
app:layout_constraintEnd_toEndeOf="#id/componentId"

How to center horizontally 2 vertical views with ConstraintLayout

I am trying to replicate this simple use case in ConstraintLayout. Basically it is 2 views left aligned to each other, but centered within parent.
Without CL, it would be as follows
FrameLayout
match_parent
match_parent
LinearLayout
orientation vertical
width wrap_content
height wrap_content
layout_gravity center_horizontal
gravity left
View
width wrap_content
View
width wrap_content
With CL im struggling how to center them both as a group, I can center them each, with constraints to left parent, right parent, however I want the group to be centered, and withing that group, left gravity. Ive tried using barriers to left and right of the two views, but it doesn center the chain horizontally. Basically I need a horizontal chain out of barriers, I think.
Edit:
I----AAA ----I
I----BBBBB----I
I-------------I
I-------------I
You can do it programmatically:
xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="28dp"
android:background="#303F9F"
android:text="Short Text"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/guideline2"
app:layout_constraintTop_toTopOf="parent"
android:gravity="start" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginTop="24dp"
android:background="#303F9F"
android:text="This is a very long text"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/guideline2"
app:layout_constraintTop_toBottomOf="#+id/textView"
android:layout_marginRight="8dp"
android:gravity="start" />
<android.support.constraint.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
</android.support.constraint.ConstraintLayout>
The background color is the see the change.
In code get width of the larger TextView and set it to the smaller one.
textView1 = findViewById(R.id.textView);
textView2 = findViewById(R.id.textView2);
textView1.measure(0,0);
textView2.measure(0,0);
int len1 = textView1.getMeasuredWidth();
int len2 = textView2.getMeasuredWidth();
if (len1 > len2) {
textView2.getLayoutParams().width = len1;
} else {
textView1.getLayoutParams().width = len2;
}
And you don't always have to use ConstraintLayout.
Maybe below code will address your problem
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text2 Test2 Test2"
app:layout_constraintTop_toBottomOf="#id/centered"
app:layout_constraintStart_toStartOf="#id/text1" />
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#+id/centered"
app:layout_constraintStart_toStartOf="parent" />
<android.support.constraint.Guideline
android:id="#+id/centered"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.50" />
Assuming you have two views (view1 being the shorter but at the top and view2 being the longer but at the bottom).
You can do something like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:apps="http://schemas.android.com/apk/res-auto">
<View
android:id="#+id/view1"
android:layout_width="120dp"
android:layout_height="30dp"
android:background="#android:color/holo_blue_bright"
apps:layout_constraintLeft_toLeftOf="#+id/view2"
apps:layout_constraintTop_toTopOf="parent"
apps:layout_constraintBottom_toTopOf="#+id/view2"
apps:layout_constraintVertical_chainStyle="packed"
/>
<View
android:id="#+id/view2"
android:layout_width="240dp"
android:layout_height="30dp"
android:background="#android:color/holo_blue_dark"
apps:layout_constraintLeft_toLeftOf="parent"
apps:layout_constraintRight_toRightOf="parent"
apps:layout_constraintTop_toBottomOf="#+id/view1"
apps:layout_constraintBottom_toBottomOf="parent"
/>
</android.support.constraint.ConstraintLayout>
Do note layout_constraintVertical_chainStyle set to packed being used that would have both views pushed together.
Also, observe the constraints between both the views to enable it to be laid out the way you want. View2, in a way, is dictating to view1 on how it is centred. A good thing about using ConstraintLayout here is that you don't need to define an extra group (ViewGroup) just to lump the two views together, just define the constraints well enough and it will do its magic.
This will produce something like this:
I'm not sure if this is what you are looking for?

How to load menu inside a list view when a list item is long pressed

I'm trying to mimic an action in the Twitter android app. When you long press/swipe a tweet (list item) it looks like this
This makes it easy for the user to take actions on the list item without leaving the screen. How can I do something similar in my app?
For now I've added a context menu which looks like this (notice that it fades out rest of the app).
I achieved this by registerForContextMenu(listView)
Currently, my list is like this:
ListAdapter adapter = new SimpleAdapter(
MainActivity.this, myList,
R.layout.list_items, new String[] {LI_ID,
LI_NAME, LI_COUNT}, new int[] {
R.id.li_id, R.id.li_name, R.id.li_count});
setListAdapter(adapter);
and my layout is simply like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/li_id"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="gone" />
<TextView
android:id="#+id/li_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="16dip"
android:textColor="#000000"
android:paddingTop="15dip"
android:paddingBottom="15dip"
android:paddingLeft="10dip"
android:textStyle="bold"/>
<TextView android:id="#+id/li_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:textColor="#ffffff"
android:textStyle="bold"
android:background="#9ed321"
android:paddingRight="3dip"
android:paddingLeft="3dip"/>
</RelativeLayout>
Have you looked tried an expandable list view ?
http://developer.android.com/reference/android/widget/ExpandableListView.html
http://www.youtube.com/watch?v=mwE61B56pVQ
You could just nest another layout in each individual ListView item that's initially invisible, then just toggle the visibility of the view on a long click event.
For example:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:animateLayoutChanges="true" >
<TextView
android:id="#+id/main_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:padding="16dp"
android:layout_gravity="center" />
<LinearLayout
android:id="#+id/hidden_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Delete" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Edit" />
</LinearLayout>
</LinearLayout>
Then in your activity, just set an onItemLongClickListener on your ListView, and toggle the
visibility of the hidden_view:
public boolean onItemLongClick(AdapterView<?> parent, View view, int position, long id){
LinearLayout mView = view.findViewById(R.id.hidden_view);
switch(mView.getVisibility()){
case View.VISIBLE:
mView.setVisibility(View.GONE);
break;
case View.GONE:
mView.setVisibility(View.VISIBLE);
break;
}
}
}