In my code, I'm presenting a custom alert dialog by inflating a layout and set it as the dialog's view.
The problem I'm having is that the text looks OK in the Android Studio's design tool, but at run-time, the dialog becomes smaller and the text takes more lines.
I tried different approaches to fix it, but didn't acquire the wanted result.
For the layout, I'm using constraint layout and the text is "wrap content".
Here's my code:
//inflate alert layout
LayoutInflater inflater = LayoutInflater.from(this);
final View view = inflater.inflate(R.layout.connectivity_issue_counter, null);
//set builder
AlertDialog.Builder dialog = new AlertDialog.Builder(this);
dialog.setView(view);
dialog.setCancelable(false);
final AlertDialog alert = dialog.create();
//define dialog buttons and counter......//
alert.show();
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"
android:background="#color/alertBackground">
<TextView
android:id="#+id/connectivity_issue_title"
style="#style/customAlertTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="50dp"
android:text="#string/connectivity_issue_title"
app:layout_constraintEnd_toStartOf="#+id/connectivity_issue_wait"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/connectivity_issue_wait"
style="#style/customAlertTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:text="#string/connectivity_issue_wait"
app:layout_constraintEnd_toStartOf="#+id/connectivity_issue_counter_text"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/connectivity_issue_counter_text"
style="#style/customAlertTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/connectivity_issue_main_text"
style="#style/customAlertMainText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:text="#string/connectivity_issue_main_text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/connectivity_issue_title" />
<Button
android:id="#+id/connectivity_isuue_button"
style="#style/customAlertButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:text="#string/stop"
app:layout_constraintEnd_toStartOf="#+id/guideline21"
app:layout_constraintStart_toStartOf="#+id/guideline22"
app:layout_constraintTop_toBottomOf="#+id/connectivity_issue_main_text" />
<android.support.constraint.Guideline
android:id="#+id/guideline20"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.82" />
<android.support.constraint.Guideline
android:id="#+id/guideline21"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.75" />
<android.support.constraint.Guideline
android:id="#+id/guideline22"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.25" />
</android.support.constraint.ConstraintLayout>
*Another interesting thing - on a different tablet (both the same model) the dialog looks bigger and wider.
I'll appreciate any help.
As Davidaz suggested, I've changed the text size from sp to dp and it helped to solve the problem.
¿Maybe the text is bigger on that phone? I can't see the customAlertTitle style, but I suppose the text is on "SP", and these are "DP" but text-size dependent (if the phone is set to show the text on a big font from it's settings tab, it will increase it's size).
Maybe a solution could be to set the sizes to "DP", but you won't let the people change it, so it has counter effects.
Another idea that comes to my mind is that the size of the screen you are previewing on the preview is larger than your phone's screen.
The last thing I would try is to change the 'android.R.id.message' TextView's size by hand after creating the dialog. Once you show it you can access the message's textview by calling for it's id,
TextView messageTv = (TextView) alert.findViewById(android.R.id.message);
messageTv.setTextSize(X);
Edit: Don't mind that last idea, as you are inflating your own layout, maybe you can try to access your id and change it the same way, but with R.id.connectivity_issue_wait
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 am trying to create a dialog which uses a custom view which also has a number of different behaviours attached, which is why I extended AlertDialog instead of using a builder.
The code that creates the view looks like this looks like this
class MyTaskCreateDialog extends AlertDialog implements DialogInterface.OnCancelListener {
public MyTaskCreateDialog(Context ctx, TaskItem item, List<Person> people, IOnFinishListener listener) {
super(ctx) {
View view = LayoutInflater.from(ctx).inflate(Resource.Layout.dialog_my_task_create, null, false);
setView(view);
setCancelable(true);
setOnCancelListener(this);
setCanceledOnTouchOutside(true);
assign_views(view); //this assigns the views to the local variables
attach_listeners();
refresh_view();//this updates the view with data
}
the above uses this 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:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="#dimen/app_padding">
<android.support.design.widget.TextInputLayout
android:id="#+id/my_task_create_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/app_margin"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/my_task_create_hint_title" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/my_task_create_description"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="#+id/my_task_create_title"
app:layout_constraintStart_toStartOf="#+id/my_task_create_title"
app:layout_constraintTop_toBottomOf="#+id/my_task_create_title">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/my_task_create_hint_description" />
</android.support.design.widget.TextInputLayout>
<TextView
android:id="#+id/my_task_create_assignee_caption"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/my_task_create_caption_assignee"
app:layout_constraintBottom_toBottomOf="#+id/my_task_create_assignee"
app:layout_constraintStart_toStartOf="#+id/my_task_create_description"
app:layout_constraintTop_toTopOf="#+id/my_task_create_assignee" />
<Spinner
android:id="#+id/my_task_create_assignee"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/app_margin"
android:checked="true"
android:padding="#dimen/app_padding"
android:textOff="#string/my_task_create_toggle_manually"
android:textOn="#string/my_task_create_toggle_automatically"
app:layout_constraintEnd_toEndOf="#+id/my_task_create_description"
app:layout_constraintStart_toEndOf="#+id/my_task_create_assignee_caption"
app:layout_constraintTop_toBottomOf="#+id/my_task_create_description"
tools:listitem="#android:layout/simple_spinner_item" />
<Button
android:id="#+id/my_task_create_create_task"
style="#style/Widget.AppCompat.Button.Borderless.Colored"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/app_margin"
android:text="#string/my_task_create_button_create"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/my_task_create_cancel"
app:layout_constraintTop_toBottomOf="#+id/my_task_create_assignee" />
<Button
android:id="#+id/my_task_create_cancel"
style="#style/Widget.AppCompat.Button.Borderless.Colored"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/app_margin"
android:text="#string/my_task_create_button_cancel"
app:layout_constraintEnd_toStartOf="#+id/my_task_create_create_task"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_task_create_assignee" />
</android.support.constraint.ConstraintLayout>
which creates a dialog with big padding at the bottom.
in fact is I change the background of the ConstraintLayout to be greyish, then the bottom half of the dialog seems to be the default color.
the result of the above looks like this:
now I know that some space is saved for the buttons (I do not use those, I use custom ones from the layout file), but how can I make the rest of the space disappear and make my dialog wrap its content?
I was having the same problem, and the only solution that worked for me is to add the following code into all Views inside of ConstraintLayout:
android:layout_height="0dp"
app:layout_constraintHeight_default="wrap"
Those sentences replace this:
android:layout_height="wrap_content"
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.
As you can see, on the small screen the last TextView is cropped to the right.
Here's how it looks:
I need it to be so:
Here is the layout source code:
<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">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:text="Lorem Ipsum is simply dummy text:"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:text="1234567890.1234567890"
app:layout_constraintLeft_toRightOf="#+id/textView1"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp" />
</android.support.constraint.ConstraintLayout>
for this issue you may have to create new custom xml file layout click on LayoutVariant option in design view like above
then select option - Create Other.. at end
Now set Directory Name as custom and select option Available qualifiers now set dimension 480 and 800 as like above
now set texView2 below textView like below
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 !