Develop Reference

How can I prevent FrameLayout from shadowing my Views?

My interface looks like this:
XML:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/profile_fields_container"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/account_person_name_label" />
<EditText
android:id="#+id/person_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="150dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="#string/account_person_emailId_label" />
<EditText
android:id="#+id/person_emailId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:minWidth="150dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="#string/account_person_phoneNo_label" />
<EditText
android:id="#+id/person_phoneNo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="phone"
android:maxLength="10"
android:minWidth="150dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="#string/account_person_password_label" />
<EditText
android:id="#+id/password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:minWidth="150dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="#string/account_person_retypePassword_label" />
<EditText
android:id="#+id/retype_password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:minWidth="150dp"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/learner_tutor_status_label" />
<android.support.v7.widget.AppCompatSpinner
android:id="#+id/learner_tutor_status_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
</LinearLayout>
</ScrollView>
<!--Floating Button-->
<Button
android:id="#+id/create_account"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="#string/create_account_string"
style="#style/Widget.AppCompat.Button.Colored"/>
</FrameLayout>
Now, you can see at the bottom there is I am here to.... This is a dropdown and when I choose one of the options, my code dynamically adds a few views to the hierarchy but the problem is they are not visible(not all of them; just I am a... is visible.)
I checked the layout hierarchy through the Layout inspector and turns out that the hierarchy is alive but the floating button(Create Account) has overshadowed it.
Now, I know if I were to replace the root FrameLayout with a LinearLayout, it would be visible but the problem is that if then I would click on a EditText button, the keypad would cover the screen with the Create Account button as covered too. I actually want this button to be on the screen at all times.
Does anyone how can I get around this problem?

Your layout is not totally correct because your floating button hides the bottom of your ScrollView all the time. You should replace the FrameLayout with a vertical LinearLayout (just like you said) and then specify the window behavior of your activity when the soft keyboard pops up with the windowSoftInputMode attribute in your activity element on the AndroidManifest.xml file. If you use android:windowSoftInputMode="adjustResize", the window will resize accordingly and the button should be always visible.

Android Textview moves other views out of the layout

In my layout I need to have a textview with two buttons next to that and one cancel button at right side (refer below image)
But when the text view is too long then the buttons near to the textview goes behind the cancel button(refer the below image)
Attached xml file for your reference,
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content" android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World, MActivity"
android:singleLine="true"
android:paddingTop="10dp"
android:textAppearance="#android:style/TextAppearance.DeviceDefault.Large"
android:ellipsize="end"/>
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="yes" />
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="no" />
</LinearLayout>
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="cancel" />
</LinearLayout>

This question has been asked multiple times, but there should have no basic layout solution to handle this. You have to write custom code to completely solve this problem.
You can use a workaround, set android:maxWidth for TextView
e.g.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="150dp"/>

ListView and layout. Why ListView overlaps everything?

This is edited version! I'm new to programming Android apps and I think that this is really difficult, not the java but ui. I am trying to get a list of categories. They can be checkboxes with textview inside the listView or something else. Idea is that an user can just press the boxes/tags/checkboxes/buttons, multiselect. I ended up with checkboxes, because it felt the easiest way, any suggestions how to get easiest solution for end users? User can add categories of his own, so the last row is like button where user can add new categories.
PROBLEM
How can I get a layout where those category checkboxes not overlap settings bar, buttons etc.
Partly solved: I changed the framelayout to LinearLayout and I changed my splash image from imageView to android:background to layout. Now I can see everything but the order is not right. If I move topframe to top (where it should be), I got the error message like this:
ERROR:
java.lang.ClassCastException: android.widget.LinearLayout cannot be cast to android.widget.Button
ACTIVITY.xml
<LinearLayout
android:id="#+id/buttonContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom"
android:orientation="vertical" >
<Button
android:id="#+id/category"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_marginBottom="5dp"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:background="#drawable/white_button"
android:minHeight="40dp"
android:text="#string/category"
android:textColor="#ffffff"
android:textStyle="bold" />
<Button
android:id="#+id/tak"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:background="#drawable/white_button"
android:minHeight="40dp"
android:text="#string/take"
android:textColor="#ffffff"
android:textStyle="bold" />
<Button
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_marginBottom="5dp"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:background="#drawable/white_button"
android:minHeight="40dp"
android:text="#string/list"
android:textColor="#ffffff"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:id="#+id/topframe"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#99a8b3b9" >
<Button
android:id="#+id/settings_button"
android:layout_width="43dp"
android:layout_height="37dp"
android:background="#drawable/ic_sysbar_quicksettings" />
<TextView
android:id="#+id/top_category"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:text="#string/no_category_text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#FFFFFF" />
</LinearLayout>

Don't use a FrameLayout to build an UI like this. A FrameLayout puts all childs in the top left corner, that's why your views are overlapping. What I have seen a LinearLayout with vertical orientation should do the job.
Use one like this for example:
<LinearLayout
...
android:orientation="vertical">
...
<LinearLayout
android:id="#+id/topframe"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#99a8b3b9" >
<Button
android:id="#+id/settings_button"
android:layout_width="43dp"
android:layout_height="37dp"
android:background="#drawable/ic_sysbar_quicksettings" />
<TextView
android:id="#+id/top_category"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:text="#string/no_category_text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#FFFFFF" />
</LinearLayout>
<ListView
android:id="#+id/listView1"
android:layout_width="fill_parent"
android:layout_height="377dp" >
</ListView>
...
</LinearLayout>

How to layout a custom listviewitem with variable textview and two buttons on one line

I've created a custom listview. All works fine though I struggle with the layout of the listitem.
The idea is to have a textview which can have a variable length (multilines is possible) and two buttons next to the textview all on one line.
This is what I have:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:layout_weight=".80" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
android:layout_weight=".10"
android:layout_toRightOf="#id/textView1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
android:layout_weight=".10"
android:layout_toRightOf="#id/button1" />
This works fine though my problem is that the textview fills out the parent and pushes the buttons of the screen. (when I have a short text the buttons are vissible)
So basically, what I need is a 80% wide textview aligned to the left and two 10% wide buttons aligned to the right. Can anyone guide me in the right direction?
Thanks

You can't use layout_weight with RelativeLayout. Try this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="16sp"
android:layout_weight="1" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B" />
</LinearLayout>

Change to LinearLayout. You cannot use layout_weight with RelativeLayout.
Good Luck

android can android:gravity do this?

Searched all day and came up with a poor solution i think.
i want three ImageButton placed on the right sida of the screen.
Not centered but just above center position..
With the code below i get the result i want but,
If the user have a bigger screen they will not have this position right?
I have tried the android:gravityall day and all i can do with it is
to center the three buttons very nicely.
What should i use to make the three buttons always stay at the positions that
they are on the image belove.
i have the button image in 3 different sizes in hdpi,mdpi,xhdpi folder.
<RelativeLayout
android:id="#+id/rightRelativeLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<ImageButton
android:id="#+id/btn_A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:text="A"
android:src="#drawable/drawer_1"
android:background="#android:color/transparent"
android:layout_alignParentRight="true"
/>
<ImageButton
android:id="#+id/btn_B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="B"
android:src="#drawable/drawer_1"
android:background="#android:color/transparent"
android:layout_alignParentRight="true"
android:layout_below="#+id/btn_A"
/>
<ImageButton
android:id="#+id/btn_C"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="C"
android:src="#drawable/drawer_1"
android:background="#android:color/transparent"
android:layout_alignParentRight="true"
android:layout_below="#+id/btn_B"
/>
</RelativeLayout>
Picture of the three buttons placed on the right side, and my daughter of course.

One option would be to put all three buttons within a LinearLayout (for simplicity's sake) and then set the layout of this container programmatically.
You can see the size of the screen using getResources().getDisplayMetrics().heightPizels and then set the top margin accordingly.

You could add a LinearLayout inside the RelativeLayout, and then use the following properties on the LinearLayout:
android:layout_alignParentRight="true"
android:layout_gravity="center_vertical"
EDIT: Ok, I've done some testing and found a way of doing what you want without the use of styling it programatically, here's the xml:
<RelativeLayout
android:id="#+id/rightRelativeLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="80dip"
>
<LinearLayout
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true">
<ImageButton
android:id="#+id/btn_A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
android:src="#drawable/icon"
android:background="#android:color/transparent"
/>
<ImageButton
android:id="#+id/btn_B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
android:src="#drawable/icon"
android:background="#android:color/transparent"
/>
<ImageButton
android:id="#+id/btn_C"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C"
android:src="#drawable/icon"
android:background="#android:color/transparent"
/>
</LinearLayout>
</RelativeLayout>