I am trying to replicate this layout of this view (not necessarily the rounded rectangles of the editText boxes, just the widths/layout):
The dimmed background color, the editText's widths. However, I'm getting this:
No transparent background color, the user can access the view behind the popup and the editTexts are shrunk. This popupwindow is being called from a fragment.
1. I do not want the user to be able to touch the calling fragment so I used:
mPopupWindow.setOutsideTouchable(false);
But the user can still access the view behind the popup. And I thought it was because the background hadn't been set yet. So I did this:
Here are the relevant pieces of code (the full code is at the bottom).
2. For the background color:
In my colors.xml I have this:
< color name="COLOR_50_GREY" >#80636363</color>
According to this SO question you can create transparency. But I have also tried standard colors too.
I called that color (or the android default colors) with :
mPopupWindow.setBackgroundDrawable(new ColorDrawable(ContextCompat.getColor(getContext(), R.color.COLOR_50_GREY)));
but no luck.
3. Shrunk text views. According to this SO question's second answer
I should be able create a weighted LinearLayout using the below (Obvious stuff removed for clarity, full code at the bottom):
<LinearLayout
android:orientation="horizontal"
android:weightSum="5">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
<EditText
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
</LinearLayout>
But as you can see from the screenshot above, the weights are not honored.
Any help?
How to call my popup from in my fragment
private void showCompeletPopup() {
LayoutInflater inflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View customView = inflater.inflate(R.layout.popup_close_ticket, null);
mPopupWindow = new PopupWindow(customView, LinearLayoutCompat.LayoutParams.MATCH_PARENT, LinearLayoutCompat.LayoutParams.WRAP_CONTENT);
// Set an elevation value for popup window call requires API level 21
if (Build.VERSION.SDK_INT >= 21) {
mPopupWindow.setElevation(5.0f);
}
mPopupWindow.setOutsideTouchable(false);
mPopupWindow.setBackgroundDrawable(new ColorDrawable(ContextCompat.getColor(getContext(), R.color.COLOR_50_GREY)));
mPopupWindow.showAtLocation(getView(), Gravity.CENTER, 0, 0);
}
Popup windows XML
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/COLOR_LIGHT_GREY"
android:padding="8dp"
android:layout_margin="20dp"
android:scrollbars="none">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginBottom="5dp"
android:orientation="horizontal"
android:padding="3dp"
android:weightSum="5">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginEnd="4dp"
android:layout_weight="1"
android:text="TOW TICKET:"
android:gravity="right|center_vertical"
android:textAllCaps="true"
android:textColor="#color/COLOR_BLUE"
android:textIsSelectable="false"
android:textStyle="bold"/>
<EditText
android:id="#+id/etTowTicketNumber"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:imeOptions="actionDone"
android:inputType="text"
android:maxLength="30"
android:maxLines="1"
/>
<Button
android:id="#+id/btnNA"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="right"
android:layout_weight="1"
android:background="#color/COLOR_BLUE"
android:padding="1dp"
android:text="NA"
android:textColor="#color/COLOR_WHITE"
android:textSize="18sp"
android:textStyle="bold"/>
</LinearLayout>
//OTHER STUFF TRUNCATED FOR BREVITY
</LinearLayout>
</ScrollView>
You need to make custom drawable design for your edit text and set it as edit text background then you can achieve
<?xml version="1.0" encoding="utf-8"?>
<!-- res/drawable/rounded_edittext.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle" >
<solid android:color="#FFFFFF" />
<corners
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp" />
</shape>
And for giving hint as "Enter Value" use android:hint attribute
Related
I'm creating a tabbed activity. As long as the first tab is selected, the soft keyboard should be visible. I achieved that by adding this line to my manifest file in the activity tag:
android:windowSoftInputMode="stateVisible|adjustResize"
As the keyboard opens, the space for the layout shrinks. The most space is occupated by an ImageView. I want it to shrink with the layout size to allow the other 2 views (which should remain the same size) to fit on the screen. However, although the soft input mode is set to adjustResize, the ImageView keeps its size after the keyboard opens. Here's a comparison of the current layout and the one I want to achieve (the ImageView is the red rectangle):
comparison
My fragment's layout code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".DataInputFragment"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:src="#drawable/image"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/input_label_text"/>
<namespace.InputEditText
android:id="#+id/input_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
<requestFocus/>
</namespace.InputEditText>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/submit"
</LinearLayout>
</RelativeLayout>
My activity:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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/main_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:orientation="vertical"
tools:context=".MainActivity">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/TabLayout">
<android.support.design.widget.TabItem
android:id="#+id/tabItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_1" />
<android.support.design.widget.TabItem
android:id="#+id/tabItem2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_2" />
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</LinearLayout>
How to force the ImageView to resize according to the screen size to make all of the views fit on the screen?
[EDIT]: My attempt to create a ConstraintLayout, which didn't solve the problem (the ImageView still keeps its original size):
<?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"
tools:context=".DataInputFragment">
<ImageView
android:id="#+id/img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitStart"
android:src="#drawable/image"
android:adjustViewBounds="true"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/input_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/input_label_text"
app:layout_constraintTop_toBottomOf="#id/img"/>
<namespace.InputEditText
android:id="#+id/input_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/input_label">
<requestFocus />
</namespace.InputEditText>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/submit"
app:layout_constraintTop_toBottomOf="#id/input_edit_text"/>
</android.support.constraint.ConstraintLayout>
I've created an Android Project from scratch on Android Studio 4.0, using the "Tabbed Activity" template and uploaded it to GitHub.
I've had no issues with the resize taking place when the activity is resized.
What Did I change?
In the manifest.xml I added android:windowSoftInputMode="adjustResize"
I modified the default layout for the fragment in the tab to include an ImageView (called imageToShrink) and an EditText (called editLayout).
I left the existing TextView untouched, except that since it's at the top, I made it the HEAD of the vertical Chain, and gave it a 0.0 BIAS to be aligned at the top, rather at the center.
When you tap on the cyan EditText at the bottom, the keyboard pops (I made it number only so it's even taller) and you can see how the image is re-drawn after its new size is recomputed.
This is how it looks when it opens: (beautiful color palette!)
And this is how it looks when I tap the "edit field" to pop the keyboard:
your ImageView should not have wrap_content attributes, because it will always have constant size and wont be able to resize automatically. I would suggest using ConstraintLayout and use app:layout_constraintDimensionRatio. Other option is use LinearLayout weight (not recommending).
Ant third option is to detect when keyboard is visible, when not with ViewTreeObserver.OnGlobalLayoutListener and do stuff programmaticaly.
Try this:
<?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=".DataInputFragment">
<ImageView
android:id="#+id/img"
android:layout_width="match_parent"
android:layout_height="0dp"
android:adjustViewBounds="true"
android:scaleType="fitStart"
android:src="#drawable/image"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="3:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/input_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/input_label_text"
app:layout_constraintTop_toBottomOf="#id/img" />
<EditText
android:id="#+id/input_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/input_label">
<requestFocus />
</EditText>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/submit"
app:layout_constraintTop_toBottomOf="#id/input_edit_text" />
</android.support.constraint.ConstraintLayout>
I want to separate the 4 icon with equal space like pic1.
And the XML code for pic1 is:
However, at the first time, I set the Blank View height as wrap_content, then the result showed like this:
.
The code for pic2 is:
.
The only difference is highlight by red rectangle.
In the case of this layout, you will get more from a ConstraintLayout.
Specifically, setting your icons within a ConstraintLayout would look like this to get the balanced look you're going for:
<?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:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/image_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/check"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/image_2"
app:layout_constraintHorizontal_chainStyle="spread_inside"/>
<ImageView
android:id="#+id/image_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/check"
app:layout_constraintStart_toEndOf="#id/image_1"
app:layout_constraintEnd_toStartOf="#id/image_3"
app:layout_constraintHorizontal_chainStyle="spread_inside" />
<ImageView
android:id="#+id/image_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/check"
app:layout_constraintStart_toEndOf="#id/image_2"
app:layout_constraintEnd_toStartOf="#id/image_4"
app:layout_constraintHorizontal_chainStyle="spread_inside" />
<ImageView
android:id="#+id/image_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/check"
app:layout_constraintStart_toEndOf="#id/image_3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_chainStyle="spread_inside"/>
</androidx.constraintlayout.widget.ConstraintLayout>
The takeaways from this snippet that get your look are:
horizontal Orientation for the ConstraintLayout
Constraints for each ImageView that attach them to the one before and after
First view is constraint to the parent, specially, as is the last view
app:layout_constraintHorizontal_chainStyle="spread_inside", says to spread them out evenly within the available space.
If you don't want them touching the sides, add padding to the left/right of the parent ConstraintLayout.
Use this code in place of that linearlayout containing all the icons:
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content">
<!--keep your first icon code here-->
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content">
<!--keep your second icon code here-->
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content">
<!--keep your third icon code here-->
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content">
<!--keep your fourth icon code here-->
</LinearLayout>
</LinearLayout>
I already have ConstraintLayout and I want to add few buttons for colour pick. But the button I add is always at the very top left and can't seem to find a solution.. hot to put them under everything else
That's the .xml i have:
<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:id="#+id/activity_editor_main"
android:layout_height="match_parent">
<!-- Overview category -->
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view">
<!-- Label -->
<TextView
style="#style/PlayerTextStyle"
android:padding="16dp"
android:text="#string/player_1" />
<EditText
style="#style/InputTextStyle"
android:hint="#string/player_name"
android:inputType="textCapWords"
android:textAppearance="?android:textAppearanceMedium" />
</LinearLayout>
<!-- Label -->
<TextView
android:id="#+id/player_colour"
style="#style/PlayerTextStyle"
android:padding="16dp"
android:text="#string/player_colour"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout2" />
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:orientation="horizontal"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/player_colour">
</LinearLayout>
</android.support.constraint.ConstraintLayout>
That's the button i want to add in the last LinearLayout:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/colour_button_editor"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageButton
android:layout_width="60dp"
android:layout_height="60dp"
android:background="#drawable/a"
android:gravity="center_vertical|center_horizontal" />
</FrameLayout>
I want to use LayoutInflater to inflate like 10-12 different colours to pick from and add them under few TextViews. I don't want a dialog! Any suggestions how to make it work??
When you add view dynamically to a layout whose parent is ConstarintLayout the default position is top-left corner.
You can use ConstraintLayout.LayoutParams to set constraints dynamically.
My understanding was that the wrap_content take as much space as needed by its contents. But doesn’t this apply to TextViews as well?
In the following layout why when I change the font of TextView with id real_status to 24 the text is partially hidden? I was expecting that due to the wrap content the enclosing TextView it would wrap around the 24 sp and display the text fine. It is fine with 18sp.
Layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<TextView
android:id="#+id/real_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/full_display_name"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/full_display_name"
android:gravity="center_vertical"
android:textSize="24sp"
android:textStyle="bold"
tools:text="Active"
/>
<TextView
android:id="#+id/full_display_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#id/real_status"
android:gravity="center_vertical"
android:text="The real user status:"
android:textSize="16sp"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/full_display_name"
android:gravity="right"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:visibility="gone"
tools:text="Just a text view"
tools:visibility="visible" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
With 18sp:
With 24sp:
UPDATE:
Following the answers I removed the layout top/bottom and the font adjusted but now I see that the TextView overlaps with the next widget. Adding red background is more visible.
I thought that by “growning” the TextView the rest would move down and not overlap
whenever You suffering from this type of problem You can LiniarLayout is best if You understand it very well. because of wrap_content and match_parent is simple to handle in LiniarLayout.
lets understand it.(For Your case)..
1.take two LiniarLayout(parent have verticle orientation..)
i give Id LL1(horizontal) and id LL2 for your case
2.in first layout two textview #+id/full_display_name and #+id/real_status
in real_status have match_parent in width so it easy to divide parent(fill_parent) and set its android:gravity="right"
3.LiniarLayout as it is without relate
See belove XML code...
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/LL1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/full_display_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="The real user status:"
android:textSize="16sp" />
<TextView
android:id="#+id/real_status"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:text="Active"
android:textSize="26sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/LL2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/real_status"
android:gravity="right" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="Just a text view" />
</LinearLayout>
</LinearLayout>
It will help you Your GUI give bestView in All devices with any size of text
Hope it help You
Remove these two line will fix your problem
android:layout_alignBottom="#+id/full_display_name"
android:layout_alignTop="#+id/full_display_name"
Yes the wrap_content will take as much space needed by the view. It will also applied to the TextView also. The problem here is you written android:layout_alignBottom="#+id/full_display_name" to real_status text view. This attribute is overriding the wrap_content So remove allignBottom attribute from the text view.
UPDATE
For your bottom linear layout update the line
android:layout_below="#+id/full_display_name"
with
android:layout_below="#+id/real_status"
I have a TextView with some text that has URL's. I have used Linkify to turn them into clickable URL's:
Linkify.addLinks(bodyTextView, Linkify.WEB_URLS);
However, when I click on text that is NOT a URL the text color changes. This also happens with the textview is set to AutoLink.
Here is my layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:id="#+id/headerLinearLay"
android:orientation="horizontal" android:padding="4px">
<ImageView
android:id="#+id/avatarImageView"
android:layout_height="48px" android:layout_width="48px"></ImageView>
<TextView
android:id="#+id/usernameTextView"
android:text="TextView"
android:paddingLeft="4dp"
android:layout_toRightOf="#id/avatarImageView"
android:layout_height="wrap_content"
android:layout_width="wrap_content"></TextView>
</RelativeLayout>
<TextView android:text="TextView" android:layout_height="wrap_content" android:id="#+id/bodyTextView" android:textSize="24sp" android:layout_width="fill_parent" android:autoLink="web"></TextView>
<TextView android:text="TextView" android:layout_height="wrap_content" android:id="#+id/dateTextView" android:layout_width="fill_parent" android:layout_weight="1"></TextView>
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:id="#+id/toolbarLinearLayout" android:background="#color/solid_yellow" android:padding="5dip">
<Button android:layout_width="fill_parent" android:layout_weight="1" android:layout_height="wrap_content" android:id="#+id/replyButton" android:text="Reply"></Button>
<Button android:layout_width="fill_parent" android:layout_weight="1" android:layout_height="wrap_content" android:text="RT" android:id="#+id/rtButton"></Button>
<Button android:id="#+id/dmButton" android:layout_width="fill_parent" android:layout_weight="1" android:layout_height="wrap_content" android:text="DM"></Button>
</LinearLayout>
</LinearLayout>
Adding:
android:textColor="#ffffff"
to TextView element in xml solves problem... it seems that overriding textcolor overrides other color styles related to element... see this question: Android text view color doesn't change when disabled
That is the default behaviour. You can set the text colour explicitly using the android:textColor attribute, but then you do not see any visual change to the link when it is clicked. One solution is to set android:textHighlightColor to match the normal text colour. The non-link text stays the same, and you see a visual cue when the link is clicked (the background of the link turns the colour of the rest of the text).