Android Keyboard, custom popuplayout in Nougat - layout

i developed a keyboard that works without issue on MM and lower. By the way on Nougat i have a layout issue, check this images to understand better: http://imgur.com/a/IHfeZ.
The 1st image is on Nougat ( the popup isn't showed completely) the 2nd is like appeared on MM ( all the lines are showed correctly ).
I used this xml to customize the popup:
<?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="wrap_content"
android:orientation="horizontal"
android:background="#color/aosp_pressed">
<android.inputmethodservice.KeyboardView
android:layout_gravity="bottom"
android:id="#android:id/keyboardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:keyPreviewLayout="#layout/preview"
android:keyBackground="#drawable/key_background"
android:keyTextColor="#fff"
android:background="#color/aosp_background"
android:keyTextSize="25sp"/>
<ImageButton android:id="#android:id/closeButton"
android:background="#color/aosp_pressed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:clickable="true"
android:src="#drawable/ic_close_black" />
</LinearLayout>
As you can see the issue is caused by the position of the popup that isn't showed outside the keyboard. How can i solve this issue?
Thanks in advance to everyone.

What is your #layout/preview like?
My theory is that in between Android 6 and 7, the time when wrap_content chooses it's size changed.
Before when using
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal">
<TextView
android:id="#+id/xxxxx"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
</LinearLayout> //PARTIAL CODE!
there were no problems in 6.0. The text view would expand to fit the text and then be centered.
However, in 7, the text gets displayed completely vertically suggesting that the initial LinearLayout was getting set to a width of 0 and not adjusting.
Try playing with the height in your #layout/preview, or in your closeButton. Set them to manual heights and see if things change accordingly!

Related

In Android Studio the widgets are moving up on the screen during emulation

I am new to both Stack Overflow and Android Studio and learning to code now.
I did a basic user and password layout in Android Studio like this:
When I ran this on emulator, it displays the widgets like this:
I tried to change the width of the EditText fields, buttons, but nothing I have tried seems to be working.
How do I solve this?
What am I missing or am I doing something wrong ?
Layout code:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="233dp"
android:scaleType="fitStart"
android:visibility="visible"
app:srcCompat="#drawable/worldcurrency" />
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Enter ammount"
android:textSize="18sp" />
<EditText
android:id="#+id/dollar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="numberDecimal" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="convert"
android:text="Convert" />
<TextView
android:id="#+id/rupees"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Your layout's parent is a ConstraintLayout, but it's lacking every constraint. ConstraintLayout is characterised by the ability to set constraints to every view, forcing its behaviour across screens of different sizes and orientations.
If you really want to use a ConstraintLayout I suggest taking a look at the ConstraintLayout Documentation. Once you've properly set the constraints, you should have an xml like this (note the constraint* attributes in my Views.
So, your layout has no constraints, it's likely it will end at "random" positions. Moreover, you've set the views coordinates with tools, which is valid only for the layout preview, not for runtime. And moreover, the use of absolute coordinates is very not recommended, since it can cause problems across different screen sizes.
If ConstraintLayout is an optional choice for you, you can change the layout parent to a LinearLayout with vertical orientation, I think it's more suitable for the layout you're building (I'm assuming this by your screenshots).Hope I helped, let me know. Good luck and happy coding!

Custom action icon on android devices

I am developing custom menu item by calling action layout, but when i am taping that action menu that pressing color is not applying total height giving some top and bottom margin.
Below is my code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<ImageView
android:minWidth="56dp"
android:id="#+id/voicemailNotificationCounter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="center"
android:clickable="true"
android:background="#drawable/ab_pressedicon_bgcolor"
android:contentDescription="#string/voicemailnotification"
android:src="#drawable/ab_voicemail">
</ImageView>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/vmNotificationTextCounter"
android:text="1"
android:visibility="visible"
android:layout_alignRight="#+id/voicemailNotificationCounter"
android:layout_marginRight="10dp"
android:gravity="center"
android:textColor="#fff"
android:includeFontPadding="false"
android:background="#drawable/notification_alertbg"
android:textSize="12sp"/>
</RelativeLayout>
Part of the problem is that you're not using an ImageButton.
Combining an image with text is possible with an ImageButton. You can even independently adjust the text and the image inside that ImageButton.
Hopefully, an ImageButton will work inside an action menu, I haven't actually tested that part yet.

Layout not working out as planned. Weights are set but going over edge of screen

I'm trying to create a new layout. My last layout that I used was GridLayout and basically created a table with 3 columns and 8 rows. With rowspan I was able to achieve the look that I wanted within Eclipse however, my screen is a little longer on my phone then Eclipse is and it shows that column 1 and 2 look good, but 3 was stretched to the right.
The new layouts looks like this:
** You can see the arrow on the right side is well over the edge of the screen and I don't know why. I'm trying to create a layout that when used on different devices will scale appropriately.
The XML code is as follows:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightsum="1.0" >
<ImageView
android:id="#+id/arrowLeft"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".33"
android:src="#drawable/arrowleftoff" />
<Space
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".34" />
<ImageView
android:id="#+id/arrowRight"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".33"
android:src="#drawable/arrowrightoff" />
</LinearLayout>
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
</LinearLayout>
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
</LinearLayout>
</TableRow>
</TableLayout>
The issue was caused by a lack of understanding how Eclipse works regarding layout. First, the screen shown in the Eclipse visual layout editor is an "example" of what it would look like given the selected device at the top of the window (in my case Nexus S).
Second, the Layout I was using was not anchoring to certain elements or to the parent. Therefore when the screen dimensions changed, the layout changed with it.
Conclusion: I am now using and understanding RelativeLayout and it works wonders once you figure it out.
Here is a great resource which really helped me understand what was going on: Mobile Tuts Plus: Layout Basics

Android app RelativeLayout not showing

so im trying to use a relative layout (for basic app tabs at the bottom of the screen) and it is not showing when i place it inside the LinearLayout after 2 other layouts (a LinearLayout and a ScrollView). The ScrollView contains several textViews and scrolls nicely on its own and the linearlayout before it also works nicely, but the relativelayout that i have tried to place at the bottom of the screen does not work.
Here is the general code for what i am trying to do:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:orientation="vertical"
android:background="#drawable/common_bg"
android:layout_height="fill_parent">
<LinearLayout android:layout_width="fill_parent"
android:layout_height="50dp">
<TextView android:layout_height="50dp"
android:text="Heading"
android:gravity="center"
android:textSize="17dp"
android:textColor="#color/white"
android:textStyle="bold"
android:layout_width="fill_parent">
</TextView>
</LinearLayout>
<ScrollView android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbars="none"
android:layout_gravity="top"
android:layout_marginBottom="60dp">
<LinearLayout android:layout_width="fill_parent"
android:orientation="vertical"
android:paddingTop="15dp"
android:layout_weight="1"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:layout_height="fill_parent">
<TextView android:layout_width="wrap_content"
android:textColor="#color/white"
android:textSize="18dp"
android:textStyle="bold"
android:text="#string/text"
android:layout_height="wrap_content">
</TextView>
</LinearLayout>
</ScrollView>
<RelativeLayout
android:id="#+id/bottomMenu"
android:layout_width="wrap_content"
android:layout_height="60dp" />
</LinearLayout>
UPDATE: the Relative layout that im using is custom in a way that i cant actually show the code for it here, but it contains a radio group with several buttons.
UPDATE 2: Ok, so I solved the problem by manipulating the layout_height="wrap_content" on the 3 layouts (the first linear, the one holding the scroller, and the bottom relativelayout) as well as manipulating the layout_wieght of each of them until I was satisfied with the way it looked... it doesnt seem like this is the best possible solution, but it worked so i cant complain too much lol...
The relative layout in itself wont be displayed in an xml graphical layout or when you are running the app, it needs a child element to occupy the parent layout, try putting a text view inside the relative layout, it'll be displayed, position it right below the linear layout having the scroll view, it'll work properly, i just tried it with your code and it works

Relative Layout Android

I have 6 textviews,3 editboxes and two spinners in a Relativelayout.I am trying to add further editboxes in the app. But the app is not showing the additional boxes.
My code is:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollview"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<TextView
android:id="#+id/EditText01"
android:text="#string/type1"
android:layout_alignParentLeft="true"
android:layout_width="fill_parent"
android:textSize="18sp"
android:layout_toLeftOf="#+id/Button01"
android:layout_height="wrap_content"></TextView>
<EditText
android:id="#+id/Button01"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_height="wrap_content"></EditText>
<TextView
android:id="#+id/EditText02"
android:text="#string/type2"
android:layout_alignParentLeft="true"
android:layout_below="#id/EditText01"
android:layout_width="fill_parent"
android:textSize="18sp"
android:layout_toLeftOf="#+id/Button01"
android:layout_height="wrap_content"></TextView>
<EditText
android:id="#+id/Button02"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#id/Button01"
android:layout_height="wrap_content"></EditText>
<TextView
android:id="#+id/EditText03"
android:text="#string/type3"
android:layout_alignParentLeft="true"
android:layout_below="#id/EditText02"
android:layout_width="fill_parent"
android:textSize="18sp"
android:layout_toLeftOf="#+id/Button01"
android:layout_height="wrap_content"></TextView>
<EditText
android:id="#+id/Button03"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#id/Button02"
android:layout_height="wrap_content"></EditText>
<TextView
android:id="#+id/EditText04"
android:text="#string/property"
android:layout_below="#id/EditText03"
android:layout_width="fill_parent"
android:textSize="18sp"
android:layout_height="wrap_content"></TextView>
<Spinner
android:id="#+id/spinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/Button03"
android:prompt="#string/property"></Spinner>
<TextView
android:id="#+id/EditText05"
android:text="#string/propage"
android:layout_below="#id/spinner"
android:layout_width="fill_parent"
android:textSize="18sp"
android:layout_height="wrap_content"></TextView>
<Spinner
android:id="#+id/widget"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/EditText05"
android:prompt="#string/propage"></Spinner>
<TextView
android:id="#+id/EditText06"
android:text="#string/income"
android:layout_alignParentLeft="true"
android:layout_below="#+id/widget"
android:layout_width="fill_parent"
android:textSize="18sp"
android:layout_toLeftOf="#+id/Button04"
android:layout_height="wrap_content"></TextView>
<EditText
android:id="#+id/Button04"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_height="wrap_content"></EditText>
</RelativeLayout>
</ScrollView>
The last editbox or any element further added is not showing in the app.
Please help.
Can you please update the correct and complete xml file content?
Also, from the GUI designer's point of view, I think these many controls are atrocious on a limited display. Though you have used a ScrollView, I would suggest to rethink over your GUI design.
I think they are actually showing but they may be overlapping previous edit boxes. As a test, I replaced all the #strings with sequential numbers as strings and added an extra edit box to the end of your code and it does appear in the layout but overlaps the last one. Try doing the same thing as a test and you will see what I mean. Hope it goes well for you.
Cheers,
Things that strike me as odd about the last EditText:
It's ID'd as a button. Consider using Button if it's a button.
It has no content, unless it's set programmatically. So wrap_content
on the width will give it a width of 0 (so it's invisible).
It's in a RelativeLayout, but you haven't said which other element it should
be placed relative to. I think the default is that it'll overlap
elements, and just go at the top. But because it has a width of 0,
you won't even be able to see it there.
Hope this helps. Death to RelativeLayout. (Not really, it's useful, but I hate it).

Resources