how to autosize text in buttons wrapped into a linearlayout? - android-layout

I would like to autosize the text in a button. I tried with android:autosize properties in the layout, but did not succeed.
Can anyone help me?
My layout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<Button
android:id="#+id/add_bookmark"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:autoSizeTextType="uniform"
android:autoSizeMaxTextSize="12sp"
android:autoSizeMinTextSize="5sp"
android:drawableLeft="#drawable/ic_bookmark"
android:text="add bookmark longer text as expected!"/>
<Button
android:id="#+id/bookmarks_close"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:autoSizeTextType="uniform"
android:autoSizeMaxTextSize="12sp"
android:autoSizeMinTextSize="5sp"
android:drawableLeft="#drawable/ic_dialog_close_dark"
android:text="close"/>
</LinearLayout>
How it looks like in the Design view:
How it looks like on the device:
I expected the text to be smaller so that the text fits into the button.
What am I doing wrong?

The Support Library 26.0 provides full support to the autosizing TextView feature on devices running Android versions prior to Android 8.0 (API level 26). The library provides support to Android 4.0 (API level 14) and higher. The android.support.v4.widget package contains the TextViewCompat class to access features in a backward-compatible fashion.

Related

How to add XML Google Pay Button in Flutter

My Flutter app uses Google Pay as a payment method. Following these guidelines, they provide XML buttons (which I have never dealt with).
How can I add one of these button to a flutter widget using dart?
There are different implementations for laying out content for Android versus Flutter.
The layout/googlepay_button.xml layout effectively describes the way the button appears, and drawable/googlepay_button_content.xml contains VectorDrawable file for the Google Pay button. flutter_svg should help you render the contents of the image.
To get this to work with Flutter, you would need to reproduce the xml layout as a Flutter widget tree.
Sample layout black/res/layout/googlepay_button.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:clickable="true"
android:focusable="true"
android:layout_width="match_parent"
android:layout_height="48sp"
android:background="#drawable/googlepay_button_no_shadow_background"
android:paddingTop="2sp"
android:contentDescription="#string/googlepay_button_content_description">
<LinearLayout
android:duplicateParentState="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2"
android:gravity="center_vertical"
android:orientation="vertical">
<ImageView
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:scaleType="fitCenter"
android:duplicateParentState="true"
android:src="#drawable/googlepay_button_content"/>
</LinearLayout>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:duplicateParentState="true"
android:src="#drawable/googlepay_button_overlay"/>
</RelativeLayout>
It looks like SVG. Try to open all these XML files like SVG, and add it to assets folder in your project.

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!

Rotated Button (anim) disappears after Banner Ad appears

I have a button in the center of my screen, a spinner and a banner ad at the bottom. The app works perfectly on any phone that I've tried and also works fine in a galaxy 10.1 tablet. The button acts like a compass so I rotate it as the device moves. I load it on to an ASUS MeMo Pad 7" 800 x 1280 and it works great until the adMob banner shows up. At that point, the button appears to get overlayed and go invisible. Occasionally when the compas makes an adjustment to its rotation, the button flickers back - on/off.
This app works on 5.1, 4.4.2 and passes the app store prelaunch tests. I've used the virtual device in Studio using Nexus 7 (800 x 1280) with 4.4.4 and it works. I can't determine if there is something different in the ASUS tablet or a bug in 4.4.4.
My layout looks like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:ads="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:id="#+id/point"
tools:context=".MainPlay">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
android:layout_alignParentTop="true"
android:id="#+id/baseView">
</ImageView>
<com.google.android.gms.ads.AdView
android:id="#+id/adView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
ads:adSize="SMART_BANNER"
ads:adUnitId="#string/adUnitId"
tools:layout_gravity="center_horizontal">
</com.google.android.gms.ads.AdView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical"
android:layout_above="#+id/adView"
android:layout_alignParentTop="true"
android:id="#+id/bView"
android:background="#color/clear"
android:weightSum="1">
<TextView
android:id="#+id/filler"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight="0.56">
</TextView>
<Button
android:id="#+id/target"
android:layout_width="300dp"
android:layout_height="300dp"
android:background="#drawable/pointer"
android:gravity="center"
android:text="#string/shake"
android:textColor="#FFFFFF"
android:textSize="18sp" />
<TextView
android:id="#+id/filler1"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight="0.35">
</TextView>
<Spinner
android:id="#+id/spinner"
android:layout_width="250dp"
android:layout_height="60dp"
android:background="#color/dark_background"
android:popupBackground="#color/light_background"
android:layout_gravity="center_horizontal|center"/>
<TextView
android:id="#+id/spinnerText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textStyle="italic"
tools:textColor="#color/myWhite"
android:layout_weight="0.14"
/>
</LinearLayout>
</RelativeLayout>
I've tried to reorder the layout but all that acts as expected. Putting the adview first makes it disappear under the imageview (expected). The code waits for a little while before displaying the ad (loadAd). If I don't load the ad, the button stays fine. If the ad takes a half-second to load next one, the button appears briefly.
Has anyone seen this behavior anywhere? Any suggestions on how to approach? This may only be an issue on this device but how is that possible and how would I know?
Thank you.
Edit: I found another app on the Play Store that exhibits this same behavior when spinning a button only on the ASUS MeMo Pad 7 LTE. I've found a few spinning button apps that appear to work fine.
I've tried many different layout files but no matter what level I put the Ad on it still makes the button disappear after I rotate it. I've tried animation utils (RotateAnimation) as well as 9 old android libraries. No difference.
PROGRESS (but no fix)-: It seems that if I do not animate the button, it stays visible. I'm assuming that something in the animation code is interacting with the button's Z level when the Ad shows up. As soon as I start the animation (either by clicking or rotating the device) the button disappears. (sigh)
After much searching on related issues, I found how to stop the flickering/disappearing button when Admob shows up using:
adView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
See this answer from 2014.
Hope this helps.

Android Keyboard, custom popuplayout in Nougat

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!

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

Resources