Develop Reference

Android Studio shows wrong layout in layout preview (ActionBarOverlayLayout?!)

I have a nice FrameLayout as main container and some other views inside it's hierarchy.
But the preview shows a simple ActionBarOverlayLayout.
What is that? Why is it here?
I have Android Studio 3.0.0
I have tried:
Restart Android Studio. Refresh the preview by resizing. Changed the preview device, changed the SDK of the preview, changed the blueprint\design options, pressed "force refresh layout" Button.
XML:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingTop="8dp">
<com.makeramen.roundedimageview.RoundedImageView
android:layout_width="match_parent"
android:layout_height="#dimen/walk_list_item_height"
android:adjustViewBounds="false"
android:cropToPadding="false"
android:scaleType="centerCrop"
app:layout_heightPercent="25%"
app:layout_marginLeftPercent="0%"
app:layout_marginTopPercent="0%"
app:layout_widthPercent="100%"
app:riv_corner_radius="#dimen/corner_radius"
android:id="#+id/walk_iv" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#drawable/gradient"
android:orientation="vertical"
android:paddingBottom="16dp"
android:paddingTop="16dp">
<TextView
android:id="#+id/walk_name_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center_vertical"
android:padding="16dp"
android:text="New Text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#fff" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingLeft="16dp"
android:paddingRight="16dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#drawable/ic_duration_icon" />
<TextView
android:id="#+id/duration_tv"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:gravity="center|left"
android:text="TextView"
android:textColor="#fff" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#drawable/ic_marker"
android:layout_marginLeft="16dp" />
<TextView
android:id="#+id/stops_tv"
android:layout_gravity="center"
android:layout_marginLeft="8dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="TextView"
android:textColor="#fff" />
</LinearLayout>
</LinearLayout>
</FrameLayout>

That is because there is a broken build in your earlier build. It is coming from the intermediate files which is because the files are not proper in your xml files. There might be a broken link or a - in the drawables names.
Until you resolve this you cannot proceed to see the layout of your app in the layout-editor.
Moreover Android Studio will not show you any error in the error log or any other terminal.
Start from the styles/themes of the app, it might contain something which is missing from the gradle or resources of the project. Due to the support library still in the project it partially showcases it as missing control of XML files, but it will not let you load the xml editor visually for the project.
You have see that by yourself, start first from drawables and then move to values folder, if not check your gradle and then come back to Java files for the error.

Had to raise
buildToolsVersion to 26.0.0
previous was bugged (25.0.2)

I faced the same problem and, In my case, it was simpler than that. I just received a warning message recommending to remove the explict reference to the BuildToolsVerison from build.gradle file so I just did it, then saved all file, Menu >> Run >> Make a project and it worked fine.

imageview in xml causing app to crash on launch

First off let me apologize for any layout/formatting errors, I'm doing this on my cell.
That being said, I cannot for the life of me figure out what is wrong with the below xml. With it in my layout file, the app crashes on load, but if I cut it out, the app loads and runs fine. Any help in figuring out the problem would be greatly appreciated.
Note: The drawables are all .jpg files in the drawable folder.
Note: This section is cut from within another vertical linearlayout
Not sure if can/how to copy logcat from Aide. However, the logcat finally popped and it is an out of memory exception. I will try reducing the image size and come back.
<TextView
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="wrap_content"
android:text="Current Favorites"/>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="horizontal"
android:gravity="center">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:orientation="vertical"
android:gravity="center">
<ImageView
android:layout_height="100dp"
android:layout_width="wrap_content"
android:src="#drawable/mia_sollis"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Mia Sollis"/>
</LinearLayout>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:orientation="vertical"
android:gravity="center">
<ImageView
android:layout_height="100dp"
android:layout_width="wrap_content"
android:src="#drawable/pepper_kester"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Pepper Kester"/>
</LinearLayout>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:orientation="vertical"
android:gravity="center">
<ImageView
android:layout_height="100dp"
android:layout_width="wrap_content"
android:src="#drawable/jayme"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Jayme Langford"/>
</LinearLayout>
</LinearLayout>

The possible answer is,
<ImageView
android:layout_height="100dp"
android:layout_width="wrap_content"
android:src="#drawable/mia_sollis"/>
image "mia_sollis" is too big and hence is giving out of memory error.
Try out with smaller size image, it will solve your problem.

Possible reasons based on your XML layout:
1) You forgot to add this on top of your layout file
xmlns:android="http://schemas.android.com/apk/res/android"
2) Second and the most important
You have multiple root tag, TextView and LinearLayout both of them is your root. However, you MUST have one root layout and inside it, do what ever you want.
Cheers!

You have to post your Log
I guess
maybe the size of images is too big for your app memory.
add this to your Application tag in Manifest
<application
.......
android:largeHeap="true"
........ >

Making the Button's align_parentBottom = "true" when other view's height is not Zero

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/

How to port RelativeLayout from Android source code?

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?

Cannot resolve symbol 'container' - Android Studio

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.