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?
Related
I’ve created a widget with the wizard. Then I’ve customized the layout.
I tried to run but all I got is the error view of the widget “Problem loading widget”.
Checking the log I found this error:
W/AppWidgetHostView: updateAppWidget couldn't find any view, using error view
It says that the system could not find any view, but my layout is defined in res/layout/ and declared in widget info xml file.
What am I missing? Here is the project on GitHub.
You're not doing much that's wrong. The entire app widget is setup correctly. It is purely a layout issue. It doesn't seem to be happy with the complexity of the playback_widget.xml file. I changed the file to the following:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/playback_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/poster_imageview"
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#drawable/ic_headset_mic_light_black_140dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/title_textview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/app_name"
android:textAlignment="center"
android:textColor="#color/primaryTextColor"
android:textSize="16sp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="#dimen/default_text_padding">
<ImageView
android:id="#+id/player_previous"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginEnd="32dp"
android:layout_marginRight="32dp"
android:layout_toLeftOf="#+id/player_play_pause"
android:src="#drawable/ic_skip_previous_white_32dp" />
<ImageView
android:id="#+id/player_play_pause"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/ic_play_arrow_white_40dp" />
<ImageView
android:id="#+id/player_next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="32dp"
android:layout_marginStart="32dp"
android:layout_toRightOf="#id/player_play_pause"
android:src="#drawable/ic_skip_next_white_32dp" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
The widget views appear fine now. I realise this probably isn't the exact layout that you're after, but you'll just have to play around with it until you find something that it is happy with.
Home screen widgets can be a bit tricky because you have a more limited set of views and less flexibility in terms of the layout.
Also I haven't checked but I'm not sure that the following view is allowed in homescreen widgets:
<View
android:layout_width="match_parent"
android:layout_height="4dp"
android:background="?colorAccent" />
Also if you have trouble getting that error to go away. Destroy the home screen widget and restart the phone. They sometimes get into a dorked up state during development.
But in any event your project is working fine for me after the playback_widget.xml change. Android 8.0.
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.
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/
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.
I just created a new projet, building some layouts, writing some code. Everything was fine except I got this error as shown in the picture below.
I tried to remove and type it again and when typing 'R.id.', there was no 'container' showing up in the list. So that means theres no problem with my R file, just that the 'container' word lost somewhere.
Those code above are actually default code in onCreate() method in your main activity everytime you create a new project in Android Studio. (I actually tried to create a new project to compare and yes it's the same, and without error as it's brand new.).
All I did was comment out the if statement block so the error goes away, and the application has run just fine on the emulator. I just don't know why I got that problem and how I can handle it as I may need to do that in the future. Thank you!
Edit after #Raghunandan has mentioned: Below is my xml.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/provide_information"
android:id="#+id/provideInfoButton"
android:layout_alignParentTop="true" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/take_picture"
android:id="#+id/takePictureButton"
android:layout_below="#+id/provideInfoButton"
android:layout_alignParentLeft="true" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:layout_below="#+id/takePictureButton"
android:layout_centerHorizontal="true"
android:layout_marginTop="28dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:id="#+id/classNameTextView"
android:layout_above="#+id/personNametextView2"
android:layout_centerHorizontal="true"
android:layout_marginBottom="44dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_marginBottom="38dp"
android:layout_above="#+id/emailTextView"
android:layout_alignLeft="#+id/emailTextView"
android:id="#+id/personNameTextView" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:id="#+id/emailTextView"
android:layout_alignParentBottom="true"
android:layout_alignLeft="#+id/classNameTextView"
android:layout_marginBottom="82dp" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/send_button"
android:id="#+id/sendButton"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
The reason is that I changed the root layout to RelativeLayout (the default of Android Studio was FrameLayout which has an id of "container"). My bad :). Thanks for mentioning about posting the xml file. I have not noticed that as I'm not as familiar with Android Studio as with Eclipse yet.