I'm trying to create this:
I set it up as follows:
layout.xml
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/divder1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
app:layout_constraintTop_toBottomOf="#id/receipt_top"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:background="#color/white">
<ImageView
android:id="#+id/left_cutout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src = "#drawable/ic_left_cutout"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<ImageView
android:id="#+id/right_cutout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src = "#drawable/ic_right_cutout"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<androidx.constraintlayout.widget.ConstraintLayout
app:layout_constraintEnd_toStartOf="#id/right_cutout"
app:layout_constraintStart_toEndOf="#id/left_cutout"
android:paddingEnd="10dp"
android:paddingStart="10dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_dotted_line_divider"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
ic_dotted_line_divider.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke
android:color="#color/red"
android:dashWidth="20dp"
android:dashGap="15dp"
android:width="10.5dp"/>
</shape>
and it ends up looking like this for some reason, my half circles show up but the line does not:
How do I get the dotted line to show up?
Also I tried doing this previously in a layer-list instead of a constraint layout but that didn't work because the width of the view could change but the heigh won't so that distorted the circles so this seems like the best route to take.
Well first of all I wouldn't add the nested constraint layout and direclty place the imageView.
Probably you are missing the following properties in your middle view to specify it to fill the middle space. If anything sometimes using the editor also helps.
android:layout_width="0dp"
android:layout_weight="1"
Your problem is that your dashed line has no height. Neither the ic_dotted_line_divider drawable nor the ImageView that uses it declares a specific height. While the ImageView has android:layout_height="wrap_content", the content is the drawable, and the drawable has no height.
So, whether in the drawable or in the ImageView, you will need to specify a height, representing how thick the dashed line should be.
Related
I want to make my TextView background color without the drawable on the left like this:
But when I'm trying to do it I got like this:
This is my textview code:
<TextView
android:id="#+id/Typetxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/space0"
android:drawableStart="#drawable/ic_type_icon"
android:drawablePadding="10dp"
android:textColor="#color/black"/>
and in the Adapter this is the code for coloring the background:
holder.Typetxt.setText(posts.getTRADE_TYPE_NAME());
if(posts.getTRADE_TYPE_NAME().equals("VL")){
holder.Typetxt.setTextColor(Color.parseColor("#FF7464"));
holder.Typetxt.setBackgroundResource(R.drawable.vl_background);
holder.cardViewMain.setBackgroundResource(R.color.VLBackground);
The background is set for the entire view- not just the text. If you're using a drawableStart, that includes the drawable. If you don't want that, use 2 views, an ImageView and a TextView.
You can make this layout without using a drawable. Make the cardView's background color, same as the color you want on the left side strip. Add a ConstraintLayout inside it and give this ConstraintLayout white background color and a marginStart of whatever size you want your strip width to be.
<androidx.cardview.widget.CardView
android:id="#+id/cvContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:cardBackgroundColor="#color/orange"
app:cardCornerRadius="8dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:layout_marginStart="12dp"
>
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tvText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp"
android:textSize="16sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
tools:text="Lorem \nipsum \ndolor" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
Result
I wanted to place my left icon(Please refer image below), vertically centred to first line of the text in TextView. I couldn't find a way, I tried drawableLeft on text view, gravity & constraints but that didn't help. Can anybody help me?
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp">
<ImageView
android:id="#+id/iv_itm_tick"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_tick_mark"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
app:layout_constraintStart_toEndOf="#+id/iv_itm_tick"
app:layout_constraintTop_toTopOf="parent"
android:text="Concepts of deep learning and machine learning workflow" />
</androidx.constraintlayout.widget.ConstraintLayout>
If the ImageView were a TextView you could simply constrain its baseline to the baseline of the other TextView. Unfortunately, ImageViews don't really have a workable concept of baselines, so you can't simply constrain the baseline of the ImageView to the TextView. (Try it to see what happens.)
One way to go is to replace the ImageView with a TextView, set the icon as the TextView's background and constrain the two baselines. Without special consideration, this technique will result in scaling of the tick mark and will result in distortion. To get around this, place the tick mark drawable in a layer-list drawable and specify a gravity. It is the gravity that prevents scaling:
tick_background.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/ic_tick_mark"
android:gravity="center" />
</layer-list>
The tick mark can look like this:
ic_tick_mark.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:tint="#66A8DD"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="#FFFFFFFF"
android:pathData="M9,16.17L4.83,12l-1.42,1.41L9,19 21,7l-1.41,-1.41z" />
</vector>
The layer-list could also be an XML bitmap drawable if the underlying icon is a bitmap.
Another way, which will also work, is to create an empty TextView that has the same characteristics of the TextView you want to attach the tick mark to. Constrain the empty TextView to the baseline of the other TextView. This will position the empty textview alongside the first line of the other TextView.
Now, take the ImageView and constrain its top and bottom to the empty TextView. The tick mark will line up as is wanted.
This is an XML-only solution. Other solutions may involve some coding.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
tools:context=".MainActivity">
<ImageView
android:id="#+id/iv_itm_tick"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_tick_mark"
app:layout_constraintBottom_toBottomOf="#id/dummyView"
app:layout_constraintEnd_toStartOf="#id/textView"
app:layout_constraintTop_toTopOf="#id/dummyView" />
<TextView
android:id="#+id/textView"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:text="Concepts of deep learning and machine learning workflow"
android:textAppearance="#style/TextAppearance.AppCompat.Display1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/dummyView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="#style/TextAppearance.AppCompat.Display1"
app:layout_constraintBaseline_toBaselineOf="#id/textView"
app:layout_constraintEnd_toStartOf="#+id/textView"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Edit your xml like this:
<?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="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp">
<ImageView
android:id="#+id/iv_itm_tick"
android:layout_width="30dp"
android:layout_height="30dp"
android:src="#drawable/ic_tick_mark"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Concepts of deep learning and machine learning workflow"
app:layout_constraintStart_toEndOf="#+id/iv_itm_tick"
android:layout_marginTop="10dp"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
My layout includes:
<?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=".MainActivity">
<Button
android:id="#+id/btnFindPOIs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:text="Find POIs"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btnGetLocation" />
<TextView
android:id="#+id/txtPoiDetails"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btnFindPOIs" />
</androidx.constraintlayout.widget.ConstraintLayout>
When the content of TextView extends beyond one line it correctly flows to a second line but the text extends right to the edge of the screen ignoring the 16dp left and right margins.
Layout Margin affects the View object, in this case a TextView. Not the actual text inside the object. So it will still go right up against the object's edge.
I would recommend using padding, it will directly affect the text. You may also want to consider adding gravity to the object?
I would also recommend using layout weights on these views or you are going to have resizing issues!
android:paddingStart="16dp"
Cheers!
I'm trying to center the items of my listview which are a custom view to the center of a constraint layout but they only show at the left side.
I tried setting the horizontal bias of both the constraint and the list view to 50 and to 100 but the listView still doesn't show the Items in the center or anywhere else other than at the start. I tried using layout_centerhorizontal="true" but that does not work either. Bare in mind that the listview is being inflated inside a fragment which is inside a ViewPager.
UPDATE:
I fixed it by wrapping the custom_item xml inside a linear layout which filled the entire screen horizontally and added horizontal center gravity to the item.
Here is my xml:
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/parentConstraint_tutor_fragment_loged"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="32dp"
android:layout_marginBottom="8dp"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0">
<ListView
android:id="#+id/tutorListView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:divider="#null"
android:dividerHeight="0dp"
android:listSelector="#android:color/transparent"
android:overScrollMode="never"
android:scrollbars="none"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"/>
</androidx.constraintlayout.widget.ConstraintLayout>
And here is the custom_Item:
<?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="323dp"
android:layout_height="68dp"
android:layout_gravity="center_horizontal"
android:background="#drawable/tutor_entry_panel_phones_selector">
<ImageView
android:id="#+id/tutorIcon_cell"
android:layout_width="35dp"
android:layout_height="33dp"
android:layout_marginStart="12dp"
android:layout_marginLeft="12dp"
android:scaleType="fitCenter"
android:tint="#color/BlueColor"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/login_tutor_icon" />
<TextView
android:id="#+id/userLogin_nameTextV"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_marginLeft="4dp"
android:layout_marginEnd="22dp"
android:layout_marginRight="22dp"
android:gravity="center"
android:textColor="#color/BlueColor"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/deleteIconPhones"
app:layout_constraintStart_toEndOf="#+id/tutorIcon_cell"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/deleteIconPhones"
android:layout_width="32dp"
android:layout_height="36dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
I just need the custom view inside the listview to be in the center of the constraint layout. here is a Screenshot of the current state:
https://ibb.co/88KVQvq
desired state will be with the custom_item in the middle and not in the beginning of the constraintLayout:
https://ibb.co/XbtWJkw
custom_item snapshot:
https://ibb.co/rkDXmGs
Blueprint view of the viewpager in which this fragment is contained (Im trying to get the custom_item centered inside the viewpager's fragment):
https://ibb.co/XVR02Kq
If it is a custom_listView then Do change in the custom_layout.xml - (Whatever you gave the name of the layout) and check it again.
First of all, all these parameters in <ConstraintLayout ...> element are unnecessary:
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
They don't have any meaning. Those parameters are used on elements inside ConstraintLayout, not on Layout itself. Layout fills all available space (in case of activity, it is whole screen), whatever layout are you using. Generally, just use match_parent/wrap_content in width/height, and that's it.
Secondly, based on your screen I cannot say where the ViewPager is located. It looks like ViewPager itself is left aligned in whole activity, but I am not sure. If it is, than it is the reason why everything squashed to left side. You can activate Developer Options on your device, then find and activate option Show Layout Bounds, than you will see on your screen borders of all rendered elements and see if this is the case.
Additionally, your item does not have very proper layout. If you want to chain these three elements, all of them should have all four layout_constraintXxx_toYyyOf elements. You can find it described here. I am not sure that this is the cause of your problem, but certainly is something that might cause the issue. Also, unless you really need to use ConstraintLayout, I would advise to use here LinearLayout, or even just plain text/button with drawableStart and drawableEnd set. It is documented on TextView class (Button is just a subclass of a TextView.)
I have a ConstraintLayout and one Button and an ImageView as its child views. The ImageView is placed over the Button with the expectation that the ImageView would be drawn over the Button. (Definitely, I could have added the image as a drawabl with the Button. But, in my scenario I want to do some animation with the button width and I want the the ImageView to stay as it is). However, the ImageView is drawn below the Button as the Button has a 2dp elevation on its default state [Material Design Guidline]. This elevation rises to 8dp when the button is pressed. Generally, we'll need to set the elevation or translationZ property of the ImageView to more than 2dp to make the ImageView appear over the button. But, the elevation property nor the translationZ property is supported before the API level 21. I am require to support API level 19. Also, elevation is not achievable using design library yet. Maintaining the conditions, is there any way to draw the ImageView over the Button inside the ConstraintLayout?
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/input_margin_bottom">
<EditText
android:id="#+id/et_account"
style="#style/RocketTheme.EditText"
android:drawableStart="#drawable/ic_bill_pay"
android:hint="#string/prompt_biller_id"
android:inputType="number"
android:maxLength="12"
android:maxLines="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp" />
<Button
style="#style/RocketTheme.EditText.SideButton"
android:id="#+id/ib_get_contact"
android:layout_width="match_parent"
android:layout_height="48dp"
android:text="Select Biller"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_bill_pay"
android:layout_marginLeft="12dp"
android:elevation="2dp"
android:background="#drawable/bg_white_round"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"/>
</android.support.constraint.ConstraintLayout>
You should wrap your button with a FrameLayout. It will allow you to pile a view on top of the one below. See the following example:
<?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">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
</FrameLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
In the xml cut imageview's code and paste it below button's code. elevation is not supported on older devices
This is the solution I am going with for now. According to android documentation, the later sibling is drawn later. So, in general if a View comes later as siblings in the layout file it will be drawn over the other siblings. However, the button has a elevation by default and so it will be drawn above the Views having lower elevation in API above 21.
We can set an elevation or translationZ in the sibling to make it appear above the Button. We also need to make sure the View we want on the top is placed later in the layout. In API below 21, the elevation won't work and the later View is drawn on top.