Develop Reference

ImageView displays above the ListView

I have a layout which consists of a ListView and an Image. I want to place the Image above Listview (in top left corner), but on running the app only Listview is visible and Image goes behind the Listview.
I want to show image instead of first item of the list. Any suggestions?
Below is the layout file:
<LinearLayout 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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:background="#android:color/background_light"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="100">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:background="#drawable/back"
android:id="#+id/back_button"
android:layout_marginLeft="15dp"
android:layout_marginTop="10dp"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_gravity="left"
android:focusable="true"
/>
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:choiceMode="multipleChoice">
</ListView>
</FrameLayout>
</RelativeLayout>
</LinearLayout>

<LinearLayout 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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:background="#android:color/background_light"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:background="#drawable/back"
android:id="#+id/back_button"
android:layout_marginLeft="15dp"
android:layout_marginTop="10dp"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_gravity="left"
android:focusable="true"
/>
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:choiceMode="multipleChoice">
</ListView>
</LinearLayout>

<LinearLayout 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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:background="#android:color/background_light"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="100">
<FrameLayout
android:id="#+id/frameLayoutImagevIew"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:background="#drawable/back"
android:id="#+id/back_button"
android:layout_marginLeft="15dp"
android:layout_marginTop="10dp"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_gravity="left"
android:focusable="true"
/>
</FrameLayout>
<FrameLayout
android:layout_below="#id/frameLayoutImagevIew"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:choiceMode="multipleChoice">
</ListView>
</FrameLayout>
</RelativeLayout>
</LinearLayout>

Try to set an elevation value in the ImageView. For example: android:elevation="5dp". This should solve your problem. Hope it helps.

You can use headerview to add the image at the top like
listview.addHeaderView(view);// view which contains that image
Try this.

Fragment gets cut off in TabbedActivity

This is the preview in the designer.
But when I run the app on a device (Galaxy S4 with 5.0.1) the bottom part of the fragment gets cut off.
chat_fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ListView
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stackFromBottom="true"
android:transcriptMode="alwaysScroll"
android:layout_marginBottom="48dip"
android:background="#1b184b"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="48dip"
android:layout_alignParentBottom="true"
android:padding="0dp"
android:layout_margin="0dp"
android:background="#753636"
android:orientation="horizontal">
<EditText
android:layout_width="345dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:hint="Send a message"
android:id="#+id/newmsg"
/>
<ImageButton
android:id="#+id/newmsgsend"
android:src="#drawable/ic_send"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:scaleType="fitEnd"
android:backgroundTintMode="multiply"
android:backgroundTint="#400202" />
</LinearLayout>
</RelativeLayout>
Is this because of something that I should handle from the layout of the fragment?

I changed youx xml code. Just little changes . Use this layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ListView
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stackFromBottom="true"
android:transcriptMode="alwaysScroll"
android:background="#1b184b"
android:layout_alignParentTop="true"
android:layout_above="#+id/edit_linear_layout"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="48dip"
android:layout_alignParentBottom="true"
android:padding="0dp"
android:layout_margin="0dp"
android:background="#753636"
android:orientation="horizontal"
android:id="#+id/edit_linear_layout"
>
<EditText
android:layout_width="345dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:hint="Send a message"
android:id="#+id/newmsg"
/>
<ImageButton
android:id="#+id/newmsgsend"
android:src="#drawable/ic_send"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:scaleType="fitEnd"
android:backgroundTintMode="multiply"
android:backgroundTint="#400202" />
</LinearLayout>
</RelativeLayout>

You can add bottom margin to your bottom most item to resolve the "cut off" issue.
android:layout_marginBottom="50dp"
In your case, change your ImageButton to the following
<ImageButton
android:id="#+id/newmsgsend"
android:src="#drawable/ic_send"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:scaleType="fitEnd"
android:backgroundTintMode="multiply"
android:backgroundTint="#400202"
android:layout_marginBottom="50dp" />

nested linearlayout is not working properly

i want edittext and send button in one row but image in other row ...but using this code edit text,send button,and image are displaying in one row..can you please tell me what should i do to display image in other row
<LinearLayout 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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:orientation="horizontal"
tools:context=".MainActivity" >
<EditText
android:id="#+id/edit_message "
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="#string/edit_message"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_send"
android:onClick="sendMessage" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/logo" />
</LinearLayout>
</LinearLayout>

You could wrap your EditText and Button in a LinearLayout
<LinearLayout
android:orientation="vertical"
...>
<LinearLayout
...>
<EditText
.../>
<Button
.../>
</LinearLayout>
<ImageView
.../>
</LinearLayout>
But I would probably use a RelativeLayout
<RelativeLayout
...>
<EditText
android:id="#+id/et"
.../>
<Button
android:layout_toRightOf="#id/et"
.../>
<ImageView
android:layout_below="#id/et"
.../>
</RelativeLayout>
But that also depends on exactly where you want things.

<LinearLayout 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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:orientation="vertical"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<EditText
android:id="#+id/edit_message "
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="#string/edit_message"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_send"
android:onClick="sendMessage" />
</LinearLayout>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/logo" />
</LinearLayout>

To get the ImageView to display in a row beneath the EditText and Button, you need to set the orientation for your outer LinearLayout to be Vertical and then wrap the EditText and Button in a Linear layout with a horizontal orientation.

Android Relative Layout with sticky footer

I'm relatively new to Android development and I'm having a hard time putting together a certain interface. I've looked through many similar questions but none of them give me the answer i'm looking for.
I want to put together an XML interface like the following:
I want a LinearLayout that acts like a sticky footer that will contain two Buttons. This part will always align to the bottom and and will always be 60dp high. The RelativeLayout would then be on top of the footer, but it's height should scale depending on the screen size.
I've tried the following:
<LinearLayout 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"
android:orientation="vertical"
tools:context=".DartboardActivity">
<RelativeLayout
android:id="#+id/game_layout"
android:layout_width="match_parent"
android:layout_height="506dp"
android:background="#drawable/background"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin">
<ImageView
android:id="#+id/Dartboard"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/desc_dartboard"
android:src="#drawable/dartboard" />
<hhs.week3.dartboard.VerticalSeekBar
android:id="#+id/seekBarVertical"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="bottom"
android:thumb="#drawable/thumbhorizontal"
android:layout_marginBottom="40dp" />
<SeekBar
android:id="#+id/seekBarHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:thumb="#drawable/thumbhorizontal" />
</RelativeLayout>
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#333">
<Button
android:id="#+id/fire"
style="#style/button"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:text="#string/fire" />
<Button
android:id="#+id/settings"
style="#style/button"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:text="#string/settings" />
</LinearLayout>
</LinearLayout>
I got it working half decently, but it requires me to give the RelativeLayout bit a fixed height, making it look right on my phone, but not on others.
How do I best approach this?

Use the LinearLayout layout_weight mechanism to assign all remaining space to your RelativeLayout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1"
... />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
... />
</LinearLayout>

Try following code
<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"
android:orientation="vertical"
tools:context=".DartboardActivity" >
<RelativeLayout
android:id="#+id/game_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/buttons"
android:layout_alignParentTop="true"
android:background="#drawable/ic_launcher"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin" >
</RelativeLayout>
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:background="#333"
android:orientation="vertical" >
</LinearLayout>
</RelativeLayout>
I removed LinearLayout and replaced with RelativeLayout. This will allow you to set your LinearLayout stick to bottom.

I was able to achieve the same result by using below code. Basically, the parent layout is one Linear layout and the first child element is a scrollview so it can squeeze its content when the keyboard is shown. Also note the use of the android:layout_height="0dp" and android:layout_weight="1" used with the scrollview
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/wrap"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ScrollView
android:id="#+id/wrap2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
</LinearLayout>
</ScrollView>
<FrameLayout
android:id="#+id/buttonsPanel"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#333" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="action buttons" />
</FrameLayout>
</LinearLayout>

Try this
<LinearLayout 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"
android:orientation="vertical"
tools:context=".DartboardActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:layout_weight="1"
android:background="#drawable/background"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin">
<ImageView
android:id="#+id/Dartboard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="#string/desc_dartboard"
android:src="#drawable/dartboard"
android:adjustViewBounds="true"/>
<hhs.week3.dartboard.VerticalSeekBar
android:layout_marginTop="10dp"
android:id="#+id/seekBarVertical"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:thumb="#drawable/thumbhorizontal"/>
<SeekBar
android:id="#+id/seekBarHorizontal"
android:layout_width="match_parent"
android:layout_marginTop="10dp"
android:layout_height="wrap_content"
android:thumb="#drawable/thumbhorizontal" />
</LinearLayout>
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#333333">
<Button
android:id="#+id/fire"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:layout_weight="1"
android:text="#string/fire"/>
<Button
android:id="#+id/settings"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:layout_weight="1"
android:text="#string/settings"/>
</LinearLayout>
</LinearLayout>

Android ScrollView fillViewport not working

I have a simple layout with a name on the top, and a button which I want to be at the bottom of the screen, or beyond that in case I add more items.
So I am using a ScrollView with a LinearLayout as follows:
<ScrollView 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"
android:background="#android:color/white"
android:fillViewport="true"
android:focusableInTouchMode="true"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
tools:context=".ItemDetailActivity" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!-- Name -->
<RelativeLayout
android:id="#+id/top_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top" >
<TextView
android:id="#+id/name_label"
style="#style/Header_Label_TextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/name" />
<TextView
android:id="#+id/name_value"
style="#style/Value_Label_TextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/name_label" />
</RelativeLayout>
<!-- button -->
<RelativeLayout
android:id="#+id/ButtonLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" >
<Button
android:id="#+id/add_button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10sp"
android:onClick="editItem"
android:text="#string/button_edit" />
</RelativeLayout>
<requestFocus />
</LinearLayout>
This is what I get:
How do I make it so that the button appears at the bottom of the screen or beyond. Upon searching online, most answers were to set the `android:fillViewport="true", but that is not helping. What am I doing wrong?

Change your Button layout like this:
<RelativeLayout
android:id="#+id/ButtonLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="bottom" >
<Button
android:id="#+id/add_button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10sp"
android:onClick="editItem"
android:layout_alignParentBottom="true"
android:text="#string/button_edit" />
</RelativeLayout>

This should work -
Use Relative layout as a child for the scroll view .
Set layout_alignParentBottom = true for the Button.
Sample XML
<ScrollView 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"
android:background="#android:color/white"
android:fillViewport="true"
android:focusableInTouchMode="true"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
tools:context=".ItemDetailActivity" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<!-- Name -->
<RelativeLayout
android:id="#+id/top_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top" >
<TextView
android:id="#+id/name_label"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Name" />
<TextView
android:id="#+id/name_value"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/name_label" />
</RelativeLayout>
<!-- button -->
<RelativeLayout
android:id="#+id/ButtonLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<Button
android:id="#+id/add_button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10sp"
android:onClick="editItem"
android:text="Edit" />
</RelativeLayout>
</RelativeLayout>
</ScrollView>

In scroll view, use RelativeLayout instead of LinearLayout and set your bottom view property
android:layout_alignParentBottom="true"

If you're using LinearLayout (which is more performant than RelativeLayout), you should set android:gravity="bottom" & android:layout_height="match_parent" like this:
<LinearLayout
android:id="#+id/ButtonLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="bottom" >
<Button
android:id="#+id/add_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10sp"
android:onClick="editItem"
android:text="#string/button_edit" />
</LinearLayout>
Reference: https://demonuts.com/android-fillviewport/