Develop Reference

Timepicker cut off on phone

I'm creating a very basic alarm clock in Android. The timepicker is for some reason cut off in the middle when I build and load on my phone.
I've tried changing the height in the xml, setting the height as a value, as well as wrap_content.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:showIn="#layout/activity_main">
<TimePicker
android:id="#+id/timePicker"
android:layout_width="wrap_content"
android:layout_height="700dp"
android:layout_marginBottom="294dp" />
<EditText
android:id="#+id/artist_input"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:layout_marginTop="350dp"
android:inputType="textPersonName"
android:hint="Enter Artist" />
<EditText
android:id="#+id/song_input"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="400dp"
android:ems="10"
android:hint="Enter Song or Album"
android:inputType="textPersonName" />
</RelativeLayout>
enter image description here

It seems you are using margins the wrong way.
Delete all the margins and take a look at RelativeLayout Guide.

Apps not looking same when i run them in actual device

I am new to android programming but I know how everything works, recently I was trying to create an app just like uber after I finished creating the launch activity i tested it on my actual device just to check whether everything looks fine but when I launched it on my device everything (layouts, imageViews, Textviews..etc) were misplaced, I have never had this problem before its just this time. could anyone please tell me where am I going wrong?
I am attaching screenshots below.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
tools:context="com.example.keyur.uber.MainActivity">
<LinearLayout
android:id="#+id/layout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/layout1"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/showtext"
android:layout_width="300dp"
android:layout_height="50dp"
android:layout_marginLeft="30dp"
android:layout_marginTop="20dp"
android:background="#ffffff"
android:fontFamily="monospace"
android:text="#string/get_moving_with_uber"
android:textColor="#000000"
android:textSize="20sp"
android:typeface="monospace" />
<ImageView
android:layout_width="40dp"
android:id="#+id/imgv"
android:layout_height="30dp"
android:layout_below="#id/showtext"
android:layout_marginLeft="30dp"
android:background="#drawable/india"
/>
<TextView
android:layout_width="40dp"
android:id="#+id/countrycode"
android:layout_height="30dp"
android:layout_centerVertical="true"
android:layout_marginStart="13dp"
android:layout_toEndOf="#+id/imgv"
android:text="#string/_91"
android:textColor="#000000"
android:textSize="22sp"
android:fontFamily="monospace"
/>
<EditText
android:id="#+id/editText"
android:layout_width="250dp"
android:layout_height="40dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:background="#ffffff"
android:fontFamily="monospace"
android:hint="#string/enter_your_mobile_number"
android:textColor="#000000"
android:textColorHint="#484848"
android:textSize="17sp"
android:inputType="number"
/>
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/layout1"
android:layout_width="match_parent"
android:layout_height="400dp"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imgone"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#drawable/layoutbg" />
</RelativeLayout>
</LinearLayout>
screenshots-
this is what the app looks on pixel 4 as it is set on default.
enter image description here
this is what it looks when I switch it to pixel xl, everything gets messed up
enter image description here

Due do you are fixing the layout hight an width so each and very device have different screen size. You should use match_parent and wrap_content. If you want to split all device space in the same manner, you have to use weight.
How to use weight reference

Either you can go for "Weight Sum", or you should set your
TextView for country-code "layout_toRightOf" to image view
instead of "layout_toEndOf".

TextView Vertical Gravity not working in ScrollView

First time posting here. Sorry if this has already been asked. I searched for days, and while some posts seemed relevant, they did not seem to address my exact issue.
I have a RelativeLayout inside a ScrollView. Inside the RelativeLayout, I have some TextViews. I have set the TextView gravities to center_vertical. Everything works fine when the page's contents fit on a single page without the need to activate the ScrollView. However, whenever the content exceeds the page and the ScrollView gets activated, the center_vertical gravity gets ignored. The funny thing is, the left/right (start/end) gravities are not being ignored, only the center_vertical ones.
Here's the main part of my code:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/ScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:fillViewport="true" >
<RelativeLayout
android:id="#+id/RelativeLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="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" >
<TextView
android:id="#+id/cup1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/cup1"
android:textColor="#21386f"
android:textSize="24sp"
android:textStyle="bold" />
<Space
android:id="#+id/Space1"
android:layout_width="match_parent"
android:layout_height="24dp"
android:layout_below="#id/cup1" />
<ImageView
android:id="#+id/canadienslogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#id/Space1"
android:contentDescription="#string/logo"
android:src="#drawable/canadienslogo" />
<TextView
android:id="#+id/score1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/canadienslogo"
android:layout_alignTop="#id/canadienslogo"
android:layout_below="#id/Space1"
android:layout_centerInParent="true"
android:gravity="center_vertical|center_horizontal"
android:paddingLeft="16sp"
android:paddingRight="16sp"
android:text="#string/score1"
android:textSize="24sp"
android:textStyle="bold" />
<TextView
android:id="#+id/team_canadiens"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/canadienslogo"
android:layout_alignTop="#id/canadienslogo"
android:layout_toEndOf="#id/canadienslogo"
android:layout_toLeftOf="#id/score1"
android:layout_toRightOf="#id/canadienslogo"
android:layout_toStartOf="#id/score1"
android:gravity="center_vertical|start"
android:paddingLeft="2sp"
android:paddingRight="2sp"
android:text="#string/team_canadiens"
android:textSize="14sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/rosebudslogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_below="#id/Space1"
android:contentDescription="#string/logo"
android:src="#drawable/rosebudslogo" />
<TextView
android:id="#+id/team_rosebuds"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/rosebudslogo"
android:layout_alignTop="#id/rosebudslogo"
android:layout_toEndOf="#id/score1"
android:layout_toLeftOf="#id/rosebudslogo"
android:layout_toRightOf="#id/score1"
android:layout_toStartOf="#id/rosebudslogo"
android:gravity="center_vertical|end"
android:paddingLeft="2sp"
android:paddingRight="2sp"
android:text="#string/team_rosebuds"
android:textSize="14sp"
android:textStyle="bold" />
Below this, there is another Space followed by a TableLayout. If the table is too big to fit on a single page, the center_vertical gravity above gets ignored. The gravity does not appear to be affected within the table.
Here are two screenshots of the issue. The first has the issue, the second does not (because all the contents fit on a single page)...
Issue
No Issue
Notice how the text "Montreal Canadiens" "3 - 2" and "Portland Rosebuds" gets moved up. The center_vertical gravity is not being applied.
For the record, I only took screenshots in landscape mode because it would force ScrollView to kick in and show the issue. If I were to have bigger tables, the same issue occurs in portrait mode as well, so it's not an orientation issue. I've modified my code countless times but nothing seems to fix it. I'm sure it's something simple, I just can't figure it out. It might have something to do with the overall density of the height, since that's really the only thing that changes when ScrollView kicks in. I enabled the "Show layout bounds" under Developer Options and the actual containers are fine, it's just the contents that get pushed up. The weird thing is, both Eclipse and Android Studio do not show the issue in Design Mode. FWIW, I've tested it on my Galaxy Nexus and a Galaxy Tab 3 Lite, same thing occurs on both.
Hopefully one of you can make me look foolish and resolve it promptly.
Thanks in advance for all the help.
Regards,
EDIT: New working code...
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/ScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:fillViewport="true" >
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="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" >
<TextView
android:id="#+id/cup1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/cup1"
android:textColor="#21386f"
android:textSize="24sp"
android:textStyle="bold" />
<Space
android:id="#+id/Space1"
android:layout_width="match_parent"
android:layout_height="24dp" />
<LinearLayout
android:id="#+id/LinearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/canadienslogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/logo"
android:src="#drawable/canadienslogo" />
<TextView
android:id="#+id/team_canadiens"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical|start"
android:paddingLeft="2sp"
android:paddingRight="2sp"
android:text="#string/team_canadiens"
android:textSize="14sp"
android:textStyle="bold" />
<TextView
android:id="#+id/score1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical|center_horizontal"
android:text="#string/score1"
android:textSize="24sp"
android:textStyle="bold" />
<TextView
android:id="#+id/team_rosebuds"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical|end"
android:paddingLeft="2sp"
android:paddingRight="2sp"
android:text="#string/team_rosebuds"
android:textSize="14sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/rosebudslogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/logo"
android:src="#drawable/rosebudslogo" />
</LinearLayout>

cannot say that it will solve your problem but you have a few quirks:
android:id="#+id/score1"
android:layout_alignBottom="#id/canadienslogo"
android:layout_alignTop="#id/canadienslogo"
You cannot align both bottom and top. if you want to match the height of 2 Views - then give them an height
another layout with the same issue:
android:id="#+id/team_canadiens"
android:layout_alignBottom="#id/canadienslogo"
android:layout_alignTop="#id/canadienslogo"
android:layout_toEndOf="#id/canadienslogo"

Layout Alignment Issue in android 5.0

I have a layout in which a button is aligned at the bottom of the RelativeLayout as in below code :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="250dp"
android:background="#color/background_material_light"
android:layout_height="match_parent">
<View
android:layout_alignParentLeft="true"
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#color/strokeColor"/>
<RelativeLayout
android:id="#+id/rlHeaderFilter"
android:layout_width="match_parent"
android:layout_height="#dimen/abc_action_bar_default_height_material">
<View
android:id="#+id/separator"
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#color/strokeColor"/>
<TextView
android:background="#color/actionbar_background"
android:id="#+id/tvFilterText"
style="#style/textStyleHeading2"
android:layout_toRightOf="#+id/separator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:gravity="center"
android:textColor="#color/white"
android:text="Filter Search" />
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:src="#drawable/refresh"
android:id="#+id/resetLeadsFilter"
android:contentDescription="#string/emptyString"
android:layout_centerVertical="true"
android:padding="6dp"/>
</RelativeLayout>
<TextView
android:layout_below="#+id/rlHeaderFilter"
android:layout_marginTop="10dp"
android:id="#+id/tvBudgetFromFilter"
style="#style/textSpinnerStyleHeading"
android:layout_margin="8dp"
android:hint="Budget From"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:layout_below="#+id/tvBudgetFromFilter"
android:layout_marginTop="10dp"
android:id="#+id/tvBudgetToFilter"
style="#style/textSpinnerStyleHeading"
android:layout_margin="8dp"
android:hint="Budget To"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<include
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:layout_below="#+id/tvBudgetToFilter"
android:id="#+id/sourceLayout"
layout="#layout/source_layout" />
<include
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/statusLayout"
android:layout_margin="8dp"
android:layout_below="#+id/sourceLayout"
layout="#layout/status_layout" />
<Button
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:layout_marginTop="10dp"
android:textColor="#color/white"
android:background="#color/actionbar_background"
android:text="SEARCH"
android:id="#+id/bFilterLeads"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
I can see the button at the bottom of the layout as shown in the screenshot .It displays like this in pre Lollipop devices(below < 5.0 devices) :
But in Lollipop the button at the bottom does not appear as shown in following screenshot :
I am not able to get the reason for that Please help me out . Thanks in advance .

I have solved my problem ! In fact, the LinearLayout was behind the navigationBar. To fix it, just add this line to the Activity (after setContentView();)
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION);

I'm not sure why the layout behaves differently between Lollipop/pre-Lollipop (unless there's some other piece that's not shown). I will point out though that I don't think layoutGravity is valid for views within a RelativeLayout -- that's something you'd use with a LinearLayout. I'd first remove that property and see how it behaves on pre-Lollipop, and then see about correcting the layout once that's done. It could be that layoutGravity is causing some sort of incorrect behavior pre-Lollipop.

Number picker in android not showing properly

I'm starting to build an app with android studio and right away I'm having a bit of an issue. Currently my number pickers look like this in the XML preview:
But when I run the app (on the emulator) it looks like this:
There is a text view that you can't see in the preview but appears when the app is run, that is why you see the text "Time's up" in the emulator screenshot. What I'm wondering is why are the number pickers so close to my textview and off to the left? I don't mind the change in style (in fact I welcome it) but I can't figure out why they moved. Any help is greatly appreciated! Here is my XML 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: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.skytbest.intervaltrainer.MainActivity">
<TextView
android:id="#+id/timer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:paddingRight="10dip"
android:paddinBottom="50dip"
android:textSize="50dp"
/>
<Button
android:id="#+id/button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Start" />
<NumberPicker
android:id="#+id/numberPicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/timer"
android:layout_toLeftOf="#+id/timer"
android:paddingTop="50dp" />
<NumberPicker
android:id="#+id/numberPicker2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/numberPicker"
android:layout_toRightOf="#+id/numberPicker"
android:paddingTop="50dp" />
</RelativeLayout>

Here is a working layout using the suggestion in my comment. Note that it is helpful to put some text in the TextView to better enable the UI designer to show the layout. Even then it sometimes does not match what you see on screen, especially when you have invalid combinations of layout constraints.
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context="com.skytbest.intervaltrainer.MainActivity">
<TextView
android:id="#+id/timer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"
android:text="Label"
android:paddingBottom="50dp"
android:paddingTop="50dp"
android:textSize="50dp"
/>
<Button
android:id="#+id/button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Start"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#id/timer">
<NumberPicker
android:id="#+id/numberPicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<NumberPicker
android:id="#+id/numberPicker2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>

You need to set setMinValue and setMaxValue otherwise it will get stack on 0.