Develop Reference

How to position this in a coordinator layout?

I'm struggling with making a coordinator layout work. Can someone help me with this?
I just want a simple layout of :
NameLabel, AgeLabel
(Below) Profile pic
(Below)
TextLabel
(Below)
ImageView
instead I get this: and my ageLabel and nameLabel are god knows where.
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_home"
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"
tools:context=".HomeActivity">
<include
layout="#layout/toolbar_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<com.android.volley.toolbox.NetworkImageView
android:id="#+id/home_fb_pic_thumbnail"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_gravity="top|center"
/>
<TextView
android:id="#+id/nameTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="name" />
<TextView
android:id="#+id/ageTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="age" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="248dp"
android:layout_height="200dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_gravity="bottom"
android:onClick="startRecording"
app:srcCompat="#drawable/intro_camera_2" />
<TextView
android:id="#+id/introductionTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:text="Introduce Yourself! Video Introductions Last 24 Hours"
android:textAppearance="#android:style/TextAppearance.Material.Medium" />

Those two text views will appear in the design tab if you can notice. But the problem is you haven't specified any constraints as to their placement like you have done for your other views. Place constraints to position them on screen where you want it to for example set left, right,top and bottom margins or align it below some images you already have.Hope that helps.

Adding margins to listview

I am following a tutorial and I did not understand why exactly the margins that I applied to a list view contained within a relative layout does not affect the look when I test it on a device. However, if I put everything in a LinearLayout container it looks as it should. I don't understand why the layout does not work without this LinearLayout.
This is my code in layout for my listView:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/inbox_horizontal_margin"
android:layout_marginRight="#dimen/inbox_horizontal_margin"
android:layout_marginTop="#dimen/inbox_vertical_margin"
android:background="#android:color/white">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/messageIcon"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/message_list_item_vertical_margin"
android:paddingBottom="#dimen/message_list_item_vertical_margin"
android:layout_alignParentStart="true"
android:contentDescription="#string/content_desc_message_icon"
android:src="#drawable/ic_action_picture"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Medium Text"
android:id="#+id/senderLabel"
android:layout_centerVertical="true"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:layout_toRightOf="#+id/messageIcon"
android:layout_toEndOf="#+id/messageIcon"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text=" created at: 03.17.15"
android:id="#+id/createdAtLabel"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/senderLabel"
android:layout_toEndOf="#+id/senderLabel"/>
</RelativeLayout>
</LinearLayout>
This is the result of the code:
this is the code without the LinearLayout:
<?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="wrap_content"
android:layout_marginLeft="#dimen/inbox_horizontal_margin"
android:layout_marginRight="#dimen/inbox_horizontal_margin"
android:layout_marginTop="#dimen/inbox_vertical_margin"
android:background="#android:color/white">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/messageIcon"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/message_list_item_vertical_margin"
android:paddingBottom="#dimen/message_list_item_vertical_margin"
android:layout_alignParentStart="true"
android:contentDescription="#string/content_desc_message_icon"
android:src="#drawable/ic_action_picture"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Medium Text"
android:id="#+id/senderLabel"
android:layout_centerVertical="true"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:layout_toRightOf="#+id/messageIcon"
android:layout_toEndOf="#+id/messageIcon"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text=" created at: 03.17.15"
android:id="#+id/createdAtLabel"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/senderLabel"
android:layout_toEndOf="#+id/senderLabel"/>
</RelativeLayout>
And this is the result of this layout:

Margin is outside a view , ListView uses AbsListView.LayoutParams by default, which doesn't include any margin support, just the height and width, thats why, it simply ignores the params value for margins. Try using padding for your relative layout instead

Make scrollview in layout (crash)

I'm trying to make a screen scrollable with scroll view but my application keeps crashing.
What I've done is to replace RelativeLayout by ScrollView, but it doesn't work.
I need your help with this. Here is the code of the screen:
<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:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="0dp"
android:background="#drawable/background01"
tools:context=".MainActivity"
android:id="#+id/relativeLayout">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/id"
android:background="#drawable/lightcontainer"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:weightSum="1"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:layout_marginBottom="16dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/mainTitle1"
android:id="#+id/textView"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dp"
android:textSize="20sp"
android:textColor="#ffffff"
android:shadowColor="#000000"
android:shadowRadius="1.5"
android:shadowDx="2"
android:shadowDy="2"/>
</LinearLayout>

what you are trying to do is not an scrollable view it's just a relative layout. Try to put your code inside a ScrollView component, like this:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<!-- PUT YOUR CODE HERE -->
</ScrollView>
Make sure you close all tags correctly as well (your relative layout is not closed).
<RelativeLayout>
Content
</RelativeLayout> <-- This closing tag is always necessary

Why am I getting a gray border around my image button?

I want to display the image as the button, but when I use ImageButton, it displays a gray border around button. I want it to be all black so that it looks like it's just the flashlight in the image! Any ideas? (The image file is just a PNG file)
Here's my fragment_display_message.xml:
<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:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context="com.example.myfirstapp.DisplayMessageActivity$PlaceholderFragment"
android:gravity="center_horizontal"
android:orientation="vertical"
android:weightSum="1"
android:background="#color/black" >
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:layout_gravity="center_horizontal" />
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:text="\n It's a bit dark in here,\n don't you think?\n\nLet's light it up by tapping\n the flashlight!\n\n\n"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/flashlight"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
</LinearLayout>

remove these lines from you layout
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"

It may help to set a the ImageButton Style to Borderless.
style="#style/Widget.AppCompat.Button.Borderless"

use ImageView instead of ImageButton

Button not displayed on emulator or on Device

I am a beginner on Android. I have created 2 activities. First activity has 1 button (say Button1) and 1 TextView (say TextView1) and the Second activity has 1 TextView (say TextView2). The text value for TextView in 1st activity is "Hello World!", when the Button1 is pressed opens up 2nd Activity passing the value of the TextView1 (i.e. "Hell World!"). The 2nd Activity assigns the obtained value to the TextView2 and displays.
All of this is working fine.
When I add a new Button (say Button2) to the 1st activity and write a onClick() method to change the text of TextView1 from "Hello World!" to "Hello Android!" and vice versa. Now when I run this on my device or emulator I cannot see this added button (Button2) it still works as earlier when I click Button1, but I cannot see Button2.
Can anyone help me on this ?
XML Layout : MainActivity
<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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="#string/hello_world" />
<Button
android:id="#+id/ourButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/textView"
android:layout_below="#+id/textView"
android:layout_marginRight="37dp"
android:onClick="buttonClick"
android:text="#string/button_string" />
<Button
android:id="#+id/ourButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView"
android:layout_below="#+id/textView"
android:layout_marginLeft="50dp"
android:focusable="false"
android:onClick="buttonClick2"
android:text="#string/button_string2" />
</RelativeLayout>

It's because you have android:layout_below="#+id/textView" twice. Try this instead:
<!-- below the previous view : ourButton -->
<Button
android:id="#+id/ourButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/textView"
android:layout_below="#id/ourButton"
android:layout_marginLeft="50dp"
android:focusable="false"
android:onClick="buttonClick2"
android:text="#string/button_string2" />
Also, don't use #+id/ for align your layout. You use it right when you add an id but when the id is created, you just have to align on it as android:layout_toLeftOf="#id/prevId" with #id.
Example:
Here the layout:
|---- text -----|
<- both are below text
|---- view1 ----|| <- view align right
view align left -> ||---- view2 ----|
As you can see, the left and right alignment are on the "border" of the TextView because you set an alignment below the TextView. So it looks like this:
|------ text ------|
<- both are below text
view1 align left -> ||---- view 1&2 ----|| <- view2 align right
Your views are overlapping each other. If you want to have the two buttons below the text and side by side, try to add a container, like this following:
<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:gravity="center_horizontal|center_vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/textView"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<Button
android:id="#+id/ourButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="50dp"
android:onClick="buttonClick"
android:text="#string/button_string" />
<Button
android:id="#+id/ourButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="buttonClick2"
android:text="#string/button_string2" />
</LinearLayout>
</RelativeLayout>
Hope this helps.

Please try to remove
android:layout_marginRight="37dp"
and then try. Are you able to see output on xml graphical layout ? When I tried this on my xml I am able to see in Graphical Layout(I used the same code which you mentioned along with your question).

<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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="#string/hello_world" />
<Button
android:id="#+id/ourButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/textView"
android:layout_below="#+id/textView"
android:layout_marginRight="37dp"
android:onClick="buttonClick"
android:text="#string/button_string" />
<Button
android:id="#+id/ourButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/ourButton"
android:layout_marginLeft="50dp"
android:focusable="false"
android:onClick="buttonClick2"
android:text="#string/button_string2" />
</RelativeLayout>

// try this way
<?xml version="1.0" encoding="utf-8"?>
<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"
android:gravity="center"
android:padding="5dp"
tools:context=".MainActivity" >
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp">
<Button
android:id="#+id/ourButton"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="buttonClick"
android:layout_marginRight="5dp"
android:text="#string/button_string" />
<Button
android:id="#+id/ourButton2"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:focusable="false"
android:onClick="buttonClick2"
android:text="#string/button_string2" />
</LinearLayout>
</LinearLayout>