First of all, take a look at this screeshot:
I want to place a close button in this modal like this:
But I can't figure out how to do that, here is going my layout file:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="br.com.makadu.makaduevento.ui.fragments.wizardInteligenceArtificial.WizardAIFifthStep">
<android.support.constraint.ConstraintLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/tv_title_subjects_schedule_suggestion"
android:paddingTop="#dimen/screen_title_top_bot_padding"
android:paddingBottom="#dimen/screen_title_top_bot_padding"
android:background="#color/Verde2"
android:gravity="center_horizontal"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:textSize="#dimen/txt_medium"
android:text="#string/str_screen_title_subjects"
tools:layout_constraintTop_creator="1"
tools:layout_constraintRight_creator="1"
app:layout_constraintRight_toRightOf="parent"
tools:layout_constraintLeft_creator="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:text="#string/str_according_to_your_interests_title"
style="#style/Theme.DefaultTextView.PrimaryDark.Bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:layout_constraintLeft_creator="1"
app:layout_constraintLeft_toLeftOf="parent"
android:id="#+id/tv_according_interests"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/tv_title_subjects_schedule_suggestion" />
<ExpandableListView
android:id="#+id/elv_suggested_schedule"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/tv_according_interests"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintHorizontal_bias="0.0"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/b_confirm_schedule">
</ExpandableListView>
<Button
android:id="#+id/b_confirm_schedule"
style="#style/Theme.DefaultButton.Purple.Radius"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/str_confirm_schedule_button"
tools:layout_constraintLeft_creator="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginEnd="8dp" />
</android.support.constraint.ConstraintLayout>
Thanks in advance.
Well stackoverflow is asking me to explain better my problem, but i guess the pictures explain it selfs, so I'm now just writing any no sense text.
The first solution, it will work 100% but I think not beautiful:
You can make root layout transparent and put in it needed visible views. U can set OnClickListener for root view to hide dialog on tap out visible views.
The second solution, maybe it will work I can't check now:
You can turn off clipPadding for root view and move yo close button out of visible.
P.S. I wrote from phone so it has not good view format and without samples.
I runed on similar issue, u should Create a LinearLayout With a gravity center and margin with background transparent, the add a RelativeLayout with the content of your dialog.
In the RelativeLayout u can use the android:layout_alignParentRight="true" & android:layout_alignParentTop="true" for the ImageView containing the close button (probably u will need to use some margins too) so it will be displayed above the textview containing the title of your dialog.
I hope this helped you, tomorrow i will try to send u a code for this !
Related
everyone
I am a beginner. I tried to use ConstraintLayout with Android studio 3.1.1 and genymotion. when I run the project on genymotion emulator, It is different from what I have coded. Images FYI.
Each component needs to be constrained to be able to display correctly. I think you should do it. Because some TextView components seem to have no constraints
For Constrain Layout, You can to pull all point from the box of your TextView (for example)to top, bottom, left and right to remain it in the position. It could takes sometimes if have lots of button or textView or what so ever.
ConstrainLayout
sampleCode
<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">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Button"
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.32" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="16dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
You have to pull the line from the dot of the box to everyside so it could stay at the position.
Since you are a beginner, I think You can consider LinearLayout.
As LinearLayout, it is align those textView and button or anything inside in arrangement. As long as You it in vertical or horizontal.
Example
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
....
//Edit your layout
</LinearLayout>
Another good layout for beginner is RelativeLayout
RelativeLayout you can drag and drop the textView or button or what so ever to the layout.
Example
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
....
//Edit your layout
</RelativeLayout>
U have to keep edit and arrange until the design is what you like.
However, I believe there is a lot of tutorial You can learn from Youtube. Check it Out.
I can't figure out how to render my listItems correctly. Everything seems fine until the text title is too long. Looking at the pics below, I have the Title anchored on the left side of the listItem View and to the right of the imageView. I've even tried anchoring the right side to the right edge of the entire view but with no success. If the user enters a title too long the views overlap.
I want the title to be centered between the imageview and the left side of the entire listItem view. I have provided pics of how this all renders. Any help would be greatly appreciated. When the title gets long enough, it wraps the text which is fine. At this point I'd even settle for the trailing ... but I would prefer to have the text wrap. I just don't want to overlap the imageview. I have also posted the xml code
<?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="wrap_content"
android:orientation="vertical"
android:padding="5dp"
android:id="#+id/list_item_container">
<TextView
android:id="#+id/match_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAlignment="center"
android:textSize="16sp"
tools:text="Match Name"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="16dp"
app:layout_constraintRight_toLeftOf="#+id/imageView"
android:layout_marginRight="8dp"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"/>
<TextView
android:id="#+id/match_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="Match Date"
android:textAlignment="center"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintRight_toLeftOf="#+id/imageView"
android:layout_marginRight="8dp"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/match_name"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"/>
<ImageView
android:id="#+id/imageView"
android:layout_width="60dp"
android:layout_height="45dp"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_marginEnd="8dp"
android:layout_weight="1"
app:srcCompat="#drawable/ic_more_vert_black_24dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
android:layout_marginRight="68dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintVertical_bias="0.484"/>
<TextView
android:id="#+id/match_id_hidden"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:visibility="invisible"
tools:layout_editor_absoluteY="67dp"
tools:layout_editor_absoluteX="24dp"/>
</android.support.constraint.ConstraintLayout>
Inside the ConstraintLayout try to always use "0dp" for your heights and widths and always set the app:layout_constraint..._to...Of for all 4 sides for all your views. Examine the outcome and then fine tune to get the expected result. Do this in the XML instead of in the visual editor; in my experience it is quicker and it avoids the layout_editor_absolute... settings.
Set android:layout_width="0dp" for both your TextViews. In a ConstraintLayout, a value of "0dp" basically means match the constraints. A value of "wrap_content" doesn't take constraints into account when measuring the views, just when positioning them.
I have some issues regarding the new Constraint Layout.
I am using RecyclerView, and the layout for the item is based on a Constraint Layout with 2 TextViews and 1 ImageView inside it.
In the design view, from Android Studio, everything looks fine, but on the actual device (a S5 with Lineage OS), the ImageView changes its position in some activities.
If I scroll down, the items are how they are supposed to be and when scroll back up, everything goes back to normal.
I mention that I am reusing the same layout file for 3 fragments with Recycler view.
This is the layout for 1 list item.
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/cont_item_root"
android:layout_width="match_parent"
android:layout_height="72dp"
android:background="#drawable/bottom_border"
android:paddingRight="16dp"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:paddingEnd="16dp"
android:paddingStart="16dp"
android:paddingLeft="16dp">
<TextView
android:id="#+id/lbl_item_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="0dp"
android:gravity="center"
android:text="wqewqwewqeqw"
android:textColor="#android:color/black"
android:textSize="16sp"
app:layout_constraintBottom_toTopOf="#+id/lbl_item_desc"
app:layout_constraintHorizontal_bias="0.008"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/lbl_item_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="14sp"
android:text="weqweweqweweqeweqwe"
android:layout_marginRight="0dp"
android:layout_marginEnd="72dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="#+id/lbl_item_title"
android:layout_marginBottom="7dp"
app:layout_constraintRight_toRightOf="#+id/lbl_item_title"
app:layout_constraintHorizontal_bias="0.0"/>
<ImageView
android:id="#+id/lbl_item_save"
android:contentDescription="#string/bookmarked"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_star_border_black_24dp"
android:layout_marginEnd="8dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:layout_marginRight="24dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#+id/lbl_item_desc"
android:layout_marginLeft="8dp"
app:layout_constraintHorizontal_bias="1.0" />
On the phone, in the first fragment, everything is fine, no matter in which order I open it. But if I open the second or the third fragment, things are getting messed up.
Does anybody know what could influence the ImageView (the star) to move?
Thank you!
Found out the answer.
The parent layout, that was containing the RecyclerView, was using Constraint Layout as well, and it seems that there were some conflicts between them.
After changing the root layout to RelativeLayout or LinearLayout, everything went back to normal.
I'm trying to create a nested ConstraintLayout in Android.
The objective is to have an Image to the left, and another constraint layout to the right, inside a constraint layout, as the following image:
It correctly shows on the preview, but inside the application, it bugs and doesn't show at all
Layout File:
<?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:id="#+id/box_npcs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/npcImage"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="#+id/layoutInformation"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="#+id/layoutInformation"
app:srcCompat="#color/colorBlueishGreen" />
<android.support.constraint.ConstraintLayout
android:id="#+id/layoutInformation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
android:maxWidth="250dp"
app:layout_constraintHorizontal_bias="0.021"
app:layout_constraintLeft_toRightOf="#+id/npcImage"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/top_priority"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ellipsize="start"
android:text="DummyTextIsDummy"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/common_google_signin_btn_text_light_default"
android:textSize="24sp"
android:textStyle="bold"
android:typeface="normal"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="HardcodedText" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
The layout is being added to another ConstraintLayout using the code
parent.addChild(inflater.inflate(R.layout.box_npc);
How should I fix this? And even, what is the issue?
The situation faced was that OP was trying to add the created ConstraintLayout to another ConstraintLayout programatically. That was being made using
inflater.inflate(R.layout.box, null)
It was an incorrect approach, as this ignores the layout parameters from the box. What was made to fix it was
inflater.inflate(R.layout.box, PARENT_LAYOUT/* One that box was being added to*/)
This fixes some issues due to the fact that the layout parameters were now being respected by the parent layout.
More information: Understaing Android's Layout Inflater.inflate()
For child views of each inner ConstraintLayout, use the id of parent layout instead of "parent".
For example instead of:
app:layout_constraintTop_toTopOf="parent"
Use
app:layout_constraintTop_toTopOf="#+id/parent_id"
Here's a picture to help me explain my problem:
The black box is the whole screen. The red box is the TextView. The green is the text. When I run my code, it looks like the left screen, but I want to it look as it does on the right. (start from left)
Here is the TextView code:
<TextView
android:id="#+id/info_ruta"
android:layout_width="256dp"
android:layout_height="80dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="#string/info_sumary"
android:textColor="#FFF"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/day_seven_id" />
When trying to add android:gravity="left" or ="start" it does not help with my problem. What am I missing here?
use android:layout_width="match_parent" instead of fixed width android:layout_height="80dp" so it would be
<TextView
android:id="#+id/info_ruta"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="#string/info_sumary"
android:textColor="#FFF"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/day_seven_id" />
match_parent with android:width mean cover the complete width which is occupied by the parent container.
Use android:layout_width="match_parent" and android:gravity="left" on attributes of XML.
The match_parent is fundamental for this.