My app was first developed for Android 2.3, but has been updated many times and currently targets V21. So I was surprised when my Nexus 5 received the Marshmallow update and found that a critical feature of my app was broken. I have a screen with a line at the top where I want two buttons at the far right and an EditText box (for search text) filling up the remainder of the screen to the left. This was my first app and I was unclear about various layout techniques, but from Android 2.3 to 5.1 this code has continued to work:
<RelativeLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/upper_detail_section"
android:elevation="#dimen/upper_elevation"
>
<Button android:id="#+id/sort"
style="#style/large_cust_btn"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="#string/sort"
/>
<Button android:id="#+id/clear"
style="#style/large_cust_btn"
android:layout_toLeftOf="#+id/sort"
android:layout_alignParentTop="true"
android:layout_alignWithParentIfMissing="true"
android:text="#string/clear"
/>
<EditText android:id="#+id/lookup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/clear"
android:layout_alignBaseline="#+id/clear"
android:singleLine="true"
android:hint="#string/item_search_hint"
android:scrollHorizontally="true"
android:textSize="16sp"
android:inputType="textFilter"
/>
</RelativeLayout>
Bringing this screen up in Android 6.0, the buttons are there but the EditText field completely disappears! Knowing what I know now it turned out to be a simple fix using a LinearLayout and weighting:
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/upper_detail_section"
android:orientation="horizontal"
android:elevation="#dimen/upper_elevation"
>
<EditText android:id="#+id/lookup"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:singleLine="true"
android:hint="#string/item_search_hint"
android:scrollHorizontally="true"
android:textSize="16sp"
android:inputType="textFilter"
/>
<Button android:id="#+id/clear"
style="#style/large_cust_btn"
android:text="#string/clear"
android:onClick="clearClicked"
/>
<Button android:id="#+id/sort"
style="#style/large_cust_btn"
android:text="#string/sort"
android:onClick="sortClicked"
/>
</LinearLayout>
So all is well now and I'm updating the store with a new APK, but I thought I'd warn people that some layout tricks that used to work may now be broken.
If I'm understanding and reproducing your problem correctly, it's quite simple to fix your issues with RelativeLayout as well. Marshmallow only handles a width of match_parent differently. So just set it to something else like with the LinearLayout and alignParentLeft to true:
<EditText android:id="#+id/lookup"
android:layout_alignParentLeft="true"
android:layout_width="0dp"
[...] />
This yielded the same layout for me like in pre Marshmallow.
Related
I'm developing a code on Android, and testing it on two cell phones of different brands. Sorry these screens are not in English language, okay?
You can see that in the screenshot below, it's from a mobile phone brand A. It's showing the GUI without any problem.
In the screenshot below, it's from a brand of cellphone B. And it's showing the SAME Graphical Interface with problems:
Code:
<?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:app="http://schemas.android.com/apk/res-auto"
android:background="#color/corDeFundo">
<TextView
android:id="#+id/textoDosSintomas1"
android:layout_width="match_parent"
android:layout_height="230dp"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_marginEnd="0dp"
android:layout_marginBottom="501dp"
android:text="#string/textodossintomas"
android:textColor="#color/corPreta"
android:textSize="20sp"
android:textStyle="bold" />
<CheckBox
android:id="#+id/doresNoCorpo"
android:layout_width="204dp"
android:layout_height="wrap_content"
android:layout_below="#+id/textoDosSintomas1"
android:layout_alignParentEnd="true"
android:layout_marginTop="-450dp"
android:layout_marginEnd="111dp"
android:text="#string/doresNoCorpo"
android:textColor="#color/corPreta"
android:textSize="20sp"
android:textStyle="bold" />
<CheckBox
android:id="#+id/perdaDePaladarOuOlfato"
android:layout_width="363dp"
android:layout_height="wrap_content"
android:layout_below="#+id/doresNoCorpo"
android:layout_alignParentEnd="true"
android:layout_marginTop="43dp"
android:layout_marginEnd="-48dp"
android:text="#string/perdaDePaladarOuOlfato"
android:textColor="#color/corPreta"
android:textSize="20sp"
android:textStyle="bold" />
<CheckBox
android:id="#+id/dorDeCabeca"
android:layout_width="204dp"
android:layout_height="wrap_content"
android:layout_below="#+id/perdaDePaladarOuOlfato"
android:layout_alignParentEnd="true"
android:layout_marginTop="38dp"
android:layout_marginEnd="113dp"
android:text="#string/dorDeCabeca"
android:textColor="#color/corPreta"
android:textSize="20sp"
android:textStyle="bold" />
<CheckBox
android:id="#+id/diarreia"
android:layout_width="121dp"
android:layout_height="wrap_content"
android:layout_below="#+id/dorDeCabeca"
android:layout_alignParentEnd="true"
android:layout_marginTop="39dp"
android:layout_marginEnd="196dp"
android:text="#string/diarreia"
android:textColor="#color/corPreta"
android:textSize="20sp"
android:textStyle="bold" />
<Button
android:id="#+id/botaoPaginaAnterior2"
android:layout_width="147dp"
android:layout_height="62dp"
android:layout_below="#+id/diarreia"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:layout_marginStart="35dp"
android:layout_marginTop="70dp"
android:layout_marginEnd="229dp"
android:foreground="#drawable/seta_esquerda"
android:text="Button" />
<Button
android:id="#+id/botaoProximo2"
android:layout_width="106dp"
android:layout_height="65dp"
android:layout_below="#+id/diarreia"
android:layout_alignParentEnd="true"
android:layout_marginTop="68dp"
android:layout_marginEnd="56dp"
android:foreground="#drawable/seta_direita"
android:text="Button" />
</RelativeLayout>
In the following screenshot of mobile brand A, it is showing the Graphical Interface without any problems:
In the following screenshot of mobile brand B, it is showing the SAME Graphical Interface with problems:
Please what can I do to fix it?
Maybe it's not a problem with XML, as on mobile brand A, the GUI is working without any problems.
Is there any programming code that facilitates Responsiveness (ie adapting to different screen sizes) on Android please?
Yeah, you should not be setting a fixed width for those checkboxes. Make them match_parent and allow them to fill the space they need to fit the text.
Additionally, even if you do this it isn't guaranteed to take the same space on all devices- users can change the size of the font in settings. People with vision problems use that to be able to actually see your app. You should write your layout to help make this possible, not try to prevent it.
I cannot see your xml so I'm going to assume you set
android:layout_width="xdp"
So you can change it to
android:layout_width="match_parent"
If this is not the case please edit your question and add your xml
I've created a notification out of custom view.
The problem is that it looks fine on a Nexus 5X device but it looks broken on Samsung Galaxy S4 device.
My notification contains Hebrew content, so it needs to be with a right-to-left direction (meaning buttons are on the left and text is on the right).
This is what the notification looks like on the Nexus 5X device (just like I meant it to look):
This is what the notification looks like on the Samsung Galaxy S4 device:
As you can see, the notification on the Galaxy S4 is differently (the buttons on the right, the text indentation is off and so on)
I have to say that most of the app looks fine on both of the devices.
This is the only thing that set the two apart.
In addition, both of the devices are set to the same language and locale.
This is the code of the layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1"
android:layout_marginTop="-4dip"
android:layoutDirection="locale">
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="59dp"
android:text="סבבה"
android:layout_height="227dp"
android:id="#+id/attendButton"
android:layout_marginLeft="-5dip"
android:layout_marginTop="-72dip" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="59dp"
android:text="לא טוב"
android:layout_height="245dp"
android:id="#+id/declineButton"
android:layout_marginLeft="-7dip"
android:layout_marginTop="-80dip" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Event Name"
android:tag="event"
android:id="#+id/eventName"
android:textColor="#android:color/black"
android:textSize="21sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:text="TextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/textView"
android:layout_weight="1"
android:visibility="invisible"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="EventTime"
android:id="#+id/eventTimeTxt"
android:textColor="#000000"
android:gravity="right"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="EventDayOfWeek"
android:id="#+id/eventDayOfTheWeekTxt"
android:textColor="#000000"/>
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="yesFromInvited"
android:textColor="#000000"
android:id="#+id/yesFromInvitedTxt"/>
</LinearLayout>
</LinearLayout>
I'm thinking that the location of the text and the buttons in the notification might have something to do with the fact that the content is in Hebrew (Right-to-Left language).
I have tried it on two different Galaxsy S4 devices, both of them have Android 5.0.1, and it looks the same in both of them. All of the devices are the same language and locale.
What can I do in order to fix this issue?
I won't refer to the fact that your design not following the design recommendation for Notification (as you can read here).
What I will say is that, regarding the fact that you declared that your content will be Hebrew, you just didn't design your xml attributes properly. You should use:
android:layoutDirection="rtl"
And also make sure to add android:supportsRtl="true" in the Application tag in the manifest.
And your buttons need to be inserted at the end of the root LinearLayout, not in the start.
Your xml should be something like that:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/eventName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:tag="event"
android:text="שם האירוע"
android:textColor="#android:color/black"
android:textSize="21sp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="TextView"
android:visibility="invisible"/>
<TextView
android:id="#+id/eventTimeTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:text="EventTime"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#000000"/>
<TextView
android:id="#+id/eventDayOfTheWeekTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="EventDayOfWeek"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#000000"/>
</LinearLayout>
<TextView
android:id="#+id/yesFromInvitedTxt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="yesFromInvited"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#000000"/>
</LinearLayout>
<Button
android:id="#+id/attendButton"
style="?android:attr/buttonStyleSmall"
android:layout_width="59dp"
android:layout_height="227dp"
android:layout_marginLeft="-5dip"
android:layout_marginTop="-72dip"
android:text="סבבה"/>
<Button
android:id="#+id/declineButton"
style="?android:attr/buttonStyleSmall"
android:layout_width="59dp"
android:layout_height="245dp"
android:layout_marginLeft="-7dip"
android:layout_marginTop="-80dip"
android:text="לא טוב"/>
In your samsung device RTL is getting applied, its possible because samsung customize android framework.
Here I think you should disable RTL by setting android:layoutDirection="ltr" property in XML.
First, open the Galaxy S4's Developer Options page from the Android Settings menu and check "Force RTL layout direction". Check if the notification changes in any way - if it does, it means that the device does not correctly recognize the layout as being RTL in the first place.
Alternatively, you will need to check whether your device actually supports RTL locales. Keep in mind that a locale is not just <language>_<country>, but also has the notion of scripts, variants and extensions. Easiest way to check this:
Configuration config = getResources().getConfiguration();
if(config.getLayoutDirection() == View.LAYOUT_DIRECTION_RTL) {
//in Right To Left layout
}
Apart from that, when you create layouts that are meant to work with RTL locales, avoid using android:gravity="right" or android:gravity="left". Use end and start instead.
First the title may look senseless but I don't know how I describe my problem well in the title.
I have a Relative layout which has 2 buttons (Past games and Upcoming Games) and 2 listviews. Whenever a button is pressed the associated listview is collapsed (height will be zero) if it is already expanded or the reverse will happen. ( i used this solution)
Problem:
Everything is fine when I run it on a 5-inch screen phone. Please see the following picture:
[![][2]][2]
But if I run it on a 10-inch tablet it looks like this:
[![][3]][3]
The same will happen when it will run on less than 5-inch phone.
My questions
Do I need to make another layout for the tablet? like in the layout-large folder?
or I can use some event(s) in Jave file that dynamically set the buttons align parent bottom property when the listview is not collapsed.
or it can be fixed in my current XML
Below is the code for that part I am asking for help
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_marginTop="10dp"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/btnPastGames"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_centerHorizontal="true"
android:layout_marginLeft="15dp"
android:layout_marginStart="15dp"
android:background="#color/YellowColor"
android:text="Past Games"
android:textAllCaps="false"
android:textSize="15sp" />
<ListView
android:id="#+id/lvPastGames"
android:layout_width="match_parent"
android:layout_height="255dp"
android:layout_below="#+id/btnPastGames"
android:layout_centerHorizontal="true"
android:layout_marginLeft="17dp"
android:layout_marginStart="17dp"
android:layout_marginTop="5dp"
android:divider="#null" />
<Button
android:id="#+id/btnUpcommigGames"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_below="#+id/lvPastGames"
android:layout_centerHorizontal="true"
android:layout_marginLeft="15dp"
android:layout_marginStart="15dp"
android:background="#color/YellowColor"
android:text="Up Coming Games"
android:textAllCaps="false"
android:textSize="15sp" />
<ListView
android:id="#+id/lvUpcomingGames"
android:layout_width="match_parent"
android:layout_height="255dp"
android:layout_below="#+id/btnUpcommigGames"
android:layout_centerHorizontal="true"
android:layout_marginLeft="17dp"
android:layout_marginStart="17dp"
android:divider="#null" />
</RelativeLayout>
</LinearLayout>
If you guys can give me some advice on making the user interface that will run on all screen sizes and densities I will be very thankful
Thanks to anyone who will help me
You are trying to workaround functionality of ExpandableListView. Look at the following page:
http://www.androidhive.info/2013/07/android-expandable-list-view-tutorial/
Background
I have a card-like UI on my app, which uses a RelativeLayout.
The problem
Recently I've discovered that on at least one device ( or rom, or andorid version), when I switch to an RTL language (such as Hebrew), everything got messed up.
This has happened only on LG G2 with Android V4.2.2 .
Here's what I see:
If you compare it to the screenshots of the app, you can see this is not how it should look like.
That's even though on all Android devices that I've checked, and on all emulators, I've never seen it (even when switching to Hebrew).
What I've tried
I've tried to fix it by using a GridLayout instead, but that wasn't working well (link here).
I've also tried to use a LinearLayout, but considering there might be issues with it, I've used LinearLayoutCompat instead. It works, but it's not recommended to use so many.
Another thing I've tried is to port the RelativeLayout of Android source code, but this gives me a lot of warnings and errors that are quite hard to handle.
Here's the original XML of the layout, BTW (I've removed the irrelevant stuff, to make it shorter) :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:descendantFocusability="afterDescendants" >
<ImageView
android:id="#+id/appIconImageView"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:adjustViewBounds="true"
android:src="#android:drawable/sym_def_app_icon" />
<LinearLayout
android:id="#+id/appDetailsContainer"
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#+id/appIconImageView"
android:layout_toLeftOf="#+id/overflowView"
android:layout_toRightOf="#+id/appIconImageView"
android:layout_toStartOf="#+id/overflowView"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:text="label" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="description" />
</LinearLayout>
<ImageView
android:id="#+id/overflowView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:src="#android:drawable/sym_def_app_icon" />
<ImageView
android:id="#+id/isSystemAppImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:src="#android:drawable/sym_def_app_icon" />
</RelativeLayout>
The question
As I use RelativeLayout, how can I port the code from the official source code of Android?
Is there maybe a library that does it?
I am very novice in android platform.I am trying to design an application.For the design purpose i have taken RelativeLayout .But the unique thing that i am noticing is while seeing it in graphical Layout in eclipse ,Buttons and EditText are at different position while it is at right position when seeing in emulator.
Here is my code..
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/pnr_bg"
android:orientation="vertical"
android:padding="0dp" >
<ImageButton
android:id="#+id/ImageButton01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="100dp"
android:layout_marginTop="220dp"
android:maxHeight="30dp"
android:src="#drawable/pnr_normal" />
<ImageButton
android:id="#+id/ImageButton01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="266dp"
android:layout_marginTop="220dp"
android:maxHeight="30dp"
android:src="#drawable/tenq_normal" />
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:ems="10" >
<requestFocus />
</EditText>
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/editText1"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"
android:src="#drawable/submit" />
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_column="0"
android:layout_columnSpan="6"
android:layout_gravity="right|bottom"
android:layout_row="6"
android:layout_height="match_parent"
android:textColor="#0f0f0f" />
Why is this happening.Will it do any impact on the different size of the mobile screens.
Please help me..
Yes that's correct thing. Whatever layout/UI you see, it won't be the same in emulator or real device. Reason being is android comes with multiple and variety of resolutions. The layout which you see while designing is just to preview the design or we can say just a sample preview of UI with controls/widgets you have taken.
You can consider it as an advantage of designing UI/layout in android for different resolutions/multiple screens.
When I say advantage, it means you can design just a single layout and can preview it for multiple screens, and so you would be having better idea.
Update:
Just check the image and do the same thing as depicted in image, to preview all screens. Once again I am repeating, the preview which you are seeing is just a preview, it would looks somewhat different in real devices.