Develop Reference

Android - Layout not appearing as expected [duplicate]

This question already has answers here:
ConstraintLayout views in top left corner
(5 answers)
Closed 5 years ago.
This(1st image) is how the layout is appearing in content_main.xml
https://s8.postimg.org/8ie65tzdh/Untitled1.png
But this(2nd image) is how it appears in the virtual device.
https://s8.postimg.org/wywc0enad/Untitled.png
I'm a beginner so I might be missing many things here. All kind of help will be appreciated.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="com.example.shanu.namerank.MainActivity"
tools:showIn="#layout/activity_main">
<Button
android:id="#+id/submit"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="216dp"
android:layout_marginBottom="246dp"
android:layout_marginLeft="132dp"
android:layout_marginRight="132dp"
android:text="#string/submit"
tools:layout_editor_absoluteX="136dp"
tools:layout_editor_absoluteY="217dp" />
<EditText
android:id="#+id/name"
android:layout_width="279dp"
android:layout_height="70dp"
android:layout_marginTop="128dp"
android:layout_marginBottom="310dp"
android:layout_marginLeft="40dp"
android:layout_marginRight="40dp"
android:digits="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"
android:ems="10"
android:inputType="textPersonName"
android:text="#string/enter_name"
tools:layout_editor_absoluteX="41dp"
tools:layout_editor_absoluteY="129dp" />
<Button
android:id="#+id/check"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/check"
android:layout_marginTop="283dp"
android:layout_marginBottom="176dp"
android:layout_marginLeft="124dp"
android:layout_marginRight="124dp"
tools:layout_editor_absoluteX="126dp"
tools:layout_editor_absoluteY="284dp" />
<TextView
android:id="#+id/result"
android:layout_width="194dp"
android:layout_height="67dp"
android:layout_marginTop="356dp"
android:layout_marginBottom="88dp"
android:layout_marginLeft="80dp"
android:layout_marginRight="80dp"
android:text="#string/result"
tools:layout_editor_absoluteX="83dp"
tools:layout_editor_absoluteY="357dp" />
</android.support.constraint.ConstraintLayout>
enter image description here

You need to add "android:layout_marginBottom= x dp".
Bottom/Top/Start(for left)/End(for right) for all 4 sides. And for every element.
Or if you like more design side, just pull arrows from elements to the sides and then move elements over layout.

You have constrains on your views that are only for showing in the xml layout editor but will be ignored when running on an actual device. Android studio should be giving you warnings regarding the usage of anything with the text "layout_editor_". You need to give the view real constraints.

Android TimePicker - hour line is not align to center

I used Android TimePicker in my custom dialog.
The hours line is not align to center.
As you see the xml is look ok for center controller.
Is it possible at all to change the timepicker properties from custom dialog and not from FragmentDialog? How should i center it?
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:minHeight="50dp"
android:orientation="horizontal">
<TextView
android:id="#+id/titleDateAndTime"
android:layout_width="wrap_content"
android:layout_height="25dp"
android:layout_gravity="center"
android:gravity="center"
android:text="Today"/>
<ImageView
android:id="#+id/changeDateAndTimeState"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:src="#drawable/arrow"/>
</LinearLayout>
<TimePicker
android:id="#+id/time_picker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
<Button
android:id="#+id/date_time_set"
style="#style/Button.Buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/ripple_or_holo"
android:text="#string/call_reminder_set_button"/>
Custom dialog screenshot

The option to center each of the element inside the TimePicker is not supported.
My last resort was to make custom view for the time picker with my layout.

https://developer.android.com/reference/android/widget/TimePicker.html:
If you look here you will not find such methods or parameters.
Futher more, If you find a bug to setup this value, I do not, based on my experiance, really recommend to use something exapt default behavour. Because of there are a lot of different implementations for TimePicker.
Use the default behaviour or do nothing.
I only solutions: is to write your own timepicker using numberpicker, etc.

How to place buttons in Android XML Layout file like in a Grid View

I am trying to place 12 buttons in Grid View. Here is my layout XML file.
How could I use RelativeLayout to achieve this? I am new to Android programming.
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
android:id="#+id/bAries"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Aries"
android:drawableTop="#drawable/aries" />
<Button
android:id="#+id/bTauras"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tauras"
android:drawableTop="#drawable/tauras" />
<Button
android:id="#+id/bGemini"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gemini"
android:drawableTop="#drawable/gemini" />

According to your question, I assume following are your requirements, hope they are aligned with what you really need:
12 Buttons to be seen as a Grid
how to use RelativeLayout?
Note:
For a simple thing like this, especially where you know you only need to have a definite number of elements(12 buttons) and that number is static, you don't really need to use a complex layout like GridView, where you must have to implement a ListAdapter to provide the dynamically adding buttons. So the most simplest solution you have is as you have also asked, use a RelaiveLayout as I have provided bellow.
I tried something like following:
<?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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.androxp.randika.main.MainActivity"
tools:showIn="#layout/activity_main">
<Button
android:id="#+id/bAquarius"
android:layout_height="wrap_content"
android:layout_width="110dp"
android:layout_marginLeft="5dp"
android:text="Aquarius"/>
<Button
android:id="#+id/bPisces"
android:layout_toRightOf="#+id/bAquarius"
android:layout_height="wrap_content"
android:layout_width="115dp"
android:layout_marginLeft="5dp"
android:layout_marginRight=""
android:text="Pisces"/>
<Button
android:id="#+id/bAries"
android:layout_toRightOf="#+id/bPisces"
android:layout_height="wrap_content"
android:layout_width="110dp"
android:layout_marginRight="5dp"
android:text="Aries"/>
<Button
android:id="#+id/bTaurs"
android:layout_height="wrap_content"
android:layout_width="110dp"
android:text="Taurs"
android:layout_below="#+id/bAquarius"
android:layout_alignLeft="#+id/bAquarius"
android:layout_alignStart="#+id/bAquarius" />
<Button
android:id="#+id/bGemini"
android:layout_height="wrap_content"
android:layout_width="115dp"
android:text="Gemini"
android:layout_alignTop="#+id/bTaurs"
android:layout_alignRight="#+id/bPisces"
android:layout_alignEnd="#+id/bPisces" />
<Button
android:id="#+id/bCancer"
android:layout_height="wrap_content"
android:layout_width="110dp"
android:text="Cancer"
android:layout_below="#+id/bAries"
android:layout_alignRight="#+id/bAries"
android:layout_alignEnd="#+id/bAries" />
<Button
android:id="#+id/bLeo"
android:layout_height="wrap_content"
android:layout_width="110dp"
android:text="Leo"
android:layout_below="#+id/bTaurs"
android:layout_alignLeft="#+id/bTaurs"
android:layout_alignStart="#+id/bTaurs"/>
<Button
android:id="#+id/bVirgo"
android:layout_height="wrap_content"
android:layout_width="115dp"
android:text="Virgo"
android:layout_alignTop="#+id/bLeo"
android:layout_alignLeft="#+id/bGemini"
android:layout_alignStart="#+id/bGemini" />
<Button
android:id="#+id/bLibra"
android:layout_height="wrap_content"
android:layout_width="110dp"
android:text="Libra"
android:layout_below="#+id/bCancer"
android:layout_alignRight="#+id/bCancer"
android:layout_alignEnd="#+id/bCancer"/>
<Button
android:id="#+id/bScorpio"
android:layout_height="wrap_content"
android:layout_width="110dp"
android:text="Scorpio"
android:layout_below="#+id/bLeo"
android:layout_alignLeft="#+id/bLeo"
android:layout_alignStart="#+id/bLeo" />
<Button
android:id="#+id/bSagittarius"
android:layout_height="wrap_content"
android:layout_width="115dp"
android:text="Sagittarius"
android:layout_below="#+id/bVirgo"
android:layout_toLeftOf="#+id/bAries"
android:layout_toStartOf="#+id/bAries" />
<Button
android:id="#+id/bCapricorn"
android:layout_height="wrap_content"
android:layout_width="110dp"
android:text="Capricorn"
android:layout_below="#+id/bLibra"
android:layout_alignRight="#+id/bLibra"
android:layout_alignEnd="#+id/bLibra"/>
</RelativeLayout>
Above layout may render out something similar to the following screen:
Clue:
However, I created this using Android Studio. If you are using Eclipse, I recommend you to start using Android Studio as you are just beginning Android App Development.
For Android RelativeLayouts, please read the following References:
Android official documentation for Relative Layout
An excellently matching Tutorial for your requirement
And you may find ton of tutorials for this purpose just by a single search of Google.
Word of Advice:
Whatever you go through to learn Android development, try to use up-to-date materials.

You should use GridView class for this. Here's an official doc and sample

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.

How to Create Borderless Buttons in Android [duplicate]

This question already has answers here:
How to create standard Borderless buttons (like in the design guideline mentioned)?
(19 answers)
Closed 9 years ago.
The Android Design Guidelines say to use borderless buttons (see picture below), but don't really explain how. Someone asked this same question a few weeks ago here: How to create standard Borderless buttons (like in the design guidline mentioned)? and there was an answer marked as "the" answer, but I am still lost and I don't see a way to add comments to a question that has been "closed"
The answer-er said
"Look into the theme attributes buttonBarStyle,
buttonBarButtonStyle, and borderlessButtonStyle"
but I still can't figure out how to actually use those things. I Googled around a bit and couldn't find anything so I figured I'd just ask the question again, and hopefully someone can provide a little more detail on how this works.

I thought I had this solved when I looked here a few weeks ago and noticed the answer about using a transparent background but it isn't quite good enough because it prevents the button from being highlighted when pressed.
Also, setting the style to Widget.Holo.Button.Borderless isn't appropriate because it makes the button boundaries to big.
To figure this out once and for all, I check the android source code for the standard Calendar app and found that it uses the following:
android:background="?android:attr/selectableItemBackground"
Doing it this way ensures the button is borderless and the correct size.

Look at this: http://developer.android.com/guide/topics/ui/controls/button.html#Borderless
The attribute on your Button or ImageButton tag:
style="?android:attr/borderlessButtonStyle"

If you use ActionbarSherlock...
<Button
android:id="#+id/my_button"
style="#style/Widget.Sherlock.ActionButton" />

Some days ago a stumbeled over this again.
Here my solution:
This is done in 2 steps: Setting the button background attribute to android:attr/selectableItemBackground creates you a button with feedback but no background.
android:background="?android:attr/selectableItemBackground"
The line to divide the borderless button from the rest of you layout is done by a view with the background android:attr/dividerVertical
android:background="?android:attr/dividerVertical"
For a better understanding here is a layout for a OK / Cancel borderless button combination at the bottom of your screen (like in the right picture above).
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_alignParentBottom="true">
<View
android:layout_width="match_parent"
android:layout_height="1dip"
android:layout_marginLeft="4dip"
android:layout_marginRight="4dip"
android:background="?android:attr/dividerVertical"
android:layout_alignParentTop="true"/>
<View
android:id="#+id/ViewColorPickerHelper"
android:layout_width="1dip"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="4dip"
android:layout_marginTop="4dip"
android:background="?android:attr/dividerVertical"
android:layout_centerHorizontal="true"/>
<Button
android:id="#+id/BtnColorPickerCancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#id/ViewColorPickerHelper"
android:background="?android:attr/selectableItemBackground"
android:text="#android:string/cancel"
android:layout_alignParentBottom="true"/>
<Button
android:id="#+id/BtnColorPickerOk"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="?android:attr/selectableItemBackground"
android:text="#android:string/ok"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#id/ViewColorPickerHelper"/>
</RelativeLayout>

This code works for me:
<View
android:layout_width="match_parent"
android:layout_height="1dip"
android:background="?android:attr/dividerVertical" />
<LinearLayout
style="?android:attr/buttonBarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:measureWithLargestChild="true"
android:orientation="horizontal"
android:paddingLeft="2dip"
android:paddingRight="2dip"
android:paddingTop="0dip" >
<Button
android:id="#+id/cancel"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="onClickCancel"
android:text="#string/cancel" />
<Button
android:id="#+id/info"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="onClickInfo"
android:visibility="gone"
android:text="#string/info" />
<Button
android:id="#+id/ok"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="onClickSave"
android:text="#string/save" />
</LinearLayout>
I show 3 buttons at the bottom

android:background="#android:color/transparent"

<Button android:id="#+id/my_button" style="#android:style/Widget.Holo.Button.Borderless" />

You should also set margins and padding of the picture to 0.
Also look at the second, not marked answer at How to create standard Borderless buttons (like in the design guidline mentioned)?