I'm using textview objects to hold labels such as Score, Level etc on my game screen but they don't seem to be displayed where I want them to be. I understand about view hierarchies (parents, children) and am using the gravity tags in the XML layout file but it doesnt seem to have any effect.
Could someone just quickly provide a guide to positioning a textview object on the screen, and also linking it in the code so that its contents can be programmatically controlled (I believe this would by done via =(TextView) findViewById(r.id.resourcename))?
Many thanks
XML:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.gesture.GestureOverlayView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gestures"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gestureStrokeWidth="2.0"
android:gestureStrokeType="multiple"
android:eventsInterceptionEnabled="true">
<com.darius.android.distractions.DistractionsView
android:id="#+id/distractions_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/text"
android:text="Hello"
android:visibility="visible"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center_horizontal"
android:textColor="#88ffffff"
android:textSize="24sp"/>
<TextView
android:id="#+id/textLevel"
android:text="#string/level_count"
android:visibility="visible"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="bottom"
android:textColor="#EB0000"
android:textSize="10sp"/>
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="#string/concentration_bar"
android:textColor = "#EB0000"
android:textSize="10sp"
android:id="#+id/conbartext"
android:visibility="visible"
></TextView>
</RelativeLayout>
</android.gesture.GestureOverlayView>
</FrameLayout>
These are some really helpful tutorials on getting started with android layout and widgets: http://developer.android.com/resources/tutorials/views/index.html
Documentation and a guide on the layout itself is here:
http://developer.android.com/guide/topics/ui/declaring-layout.html
Common Layout Objects is a good guide to the basics of layouts. The gravity tag only has meaning in certain layout types.
Another useful tool is the Heirarchy Viewer, found in the tools folder of your Android installation. This allows you to visualize the View heirarchy of your running activity.
If you post your layout XML, and a mockup of what you are trying to accomplish, we might be able to help you accomplish it.
Related
I'm trying this now days and it still doesn't work. I read lots of tutorials about the Relative layout but I still can't do it. Please give me an idea, what I can do. I want a simple layout like in the picture.![enter image description here][1]
edit: Looks like I can't upload images ... :(
Its a layout for a simple quiz App with these widgets below each other. A ProgressBar, a TextView for a question, 4 Buttons for the answers. The TextView should take all the place the other widgets don't need. The Button should be always at the end.
I tried with alignParentTop, Bottom, nested LinearLayouts and it still doesn't work. What can I do? It would be REALLY REALLY great to have an idea? Thanks a lot!
Good idea: I uploaded the image: http://imgur.com/Z0YmLw2
Here is the actual code. (I edited it about 20x times)
<?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">
<ProgressBar
android:id="#+id/answerProgressBar"
style="#android:style/Widget.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/countdownTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/answerProgressBar"
android:text="00:00:00" />
<ImageView
android:id="#+id/questionImageView"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_below="#id/countdownTextView"
android:layout_margin="5dp"
android:background="#drawable/ic_launcher"
android:scaleType="fitCenter" />
<TextView
android:id="#+id/questionTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/answerProgressBar"
android:layout_margin="5dp"
android:layout_toRightOf="#id/questionImageView"
android:text="jfh rhguijfhg fhge hugutbh r rut hruteruzt dkjfh uzdt ggu zguzg zuh ftz huuh rh grhtughrtu thiohjriwetk lkj rgjrjkrjek"
android:textSize="22dp" />
<Button
android:id="#+id/answert1Button"
style="#style/answerButton"
android:text="answer 1" />
<Button
android:id="#+id/answer2Button"
style="#style/answerButton"
android:text="answer 2" />
<Button
android:id="#+id/answer3Button"
style="#style/answerButton"
android:text="answer 3" />
<Button
android:id="#+id/answer4Button"
style="#style/answerButton"
android:text="answer 4 Butto d uzrr rd drtd gzugt ffzft drtn" />
</RelativeLayout>
With RelativeLayout it's the easiest way to position your widgets to the screen. However, it may take some time until you master it. Since if you're designing your layout with Graphic Tool, it will be harder.
Try editing it in XML Text. Make sure to read this Android Dev Tutorial on all the options you can access with using RelativeLayout.
I am sure you did check it, but I'm also quite sure that you were only searching for the obvious solutions. Sometimes, some not so obvious options will lead you to your goal - so be patient and try to do it from scratch with help of the tutorial.
Otherwise you could also use FrameLayout which divides your screen into several frames. BUT, again, it might complicate things for you in your App.
First, to make it easier, remove countdownTextView and questionImageView, and let's try.
I think you need to place layout_alignParentTop attribute with the ProgressBar:
<ProgressBar
android:id="#+id/answerProgressBar"
style="#android:style/Widget.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" />
And put all Buttons in a vertical LinearLayout with layout_alignParentBottom:
<LinearLayout
android:id="#+id/answerButtons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical" >
<Button
android:id="#+id/answerButton1"
style="#style/answerButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="answer1" />
(...)
</LinearLayout>
And at last, the TextView has to have both layout_below and layout_above attributes with setting layout_height="match_parent":
<TextView
android:id="#+id/questionTextView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="R.id.answerProgressBar"
android:layout_above="R.id.answerButtons"
android:text="blah blah blah" />
I am trying to design the layout of my Android project, but I must have done something wrong. Now when I try to drag the text boxes around, they just would not move on the screen. I am guessing it is one of the format setting, but not sure which one it is.
This is the XML file of how it looks:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.oldimagerevieal.MainActivity"
tools:ignore="MergeRootFrame" >
<TextView
android:id="#+id/textLat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textLong"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
</FrameLayout>
FrameLayouts use gravity to position items on a screen using the
android:layout_gravity="left|top" //whatever you want.
Unless you need the FrameLayout, you can change the root element to a RelativeLayout or LinearLayout (don't forget to specify orientation), and you should be able to drag things around like normal.
I would high recommend getting familiar with building views in XML. It will significantly help you.
Enable "Autoconnection to parent" by clicking on the magnet button in the design tools section.
I want to create a list view layout with a image and title in it. I want a layout like listview in google io 2014 app. It should be a tiled listview with some colour till the image gets loaded, after the image is loaded it should be shown in the upper half of the listview and title should be shown below with some background colour. I am attaching the screenshot of google io app here.
Updated: If somebody can point me some template custom layout for this listview it would be helpful!
Create a custom list with all the needed controls in separate layout and inflate it using a custom adapter you can find a small example here
you could create a custom layout something like this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:background="#drawable/images"
android:layout_height="match_parent"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#862c10">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:textSize="15sp"
android:layout_marginLeft="10dip"
android:textStyle="bold"
android:text="HTML5 everywhere how and why android users use the webplatform" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:textSize="15sp"
android:layout_marginLeft="10dip"
android:layout_marginTop="10dip"
android:text="Wed 5 2001" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:textSize="15sp"
android:layout_marginLeft="10dip"
android:layout_marginTop="10dip"
android:text="Steven roberts and mark robinson " />
</LinearLayout>
</LinearLayout>
(this should not be the answer, but forgive me I could not add a comment, and actually I hope this will give him the answer).
First of all I guess you didn't get on well with using ListView and Adapter in Android. So I suggest you to read the following article first:
ListView tutorial 1
ListView tutorial 2
They will teach you how to use xml to define your custom row view. Then you will know how to use George Thomas's xml. Try how to implement the getView() method.
Ok, so I'm pretty noobish to android but starting to get the hang of it. Before I move on I would like to ask for some general feedback for creating android GUI using API views, lists and layouts. For the sake of exercise I will use GUI as an example:
http://imgur.com/71NmI
Let's say I want the buttons (and perhaps the "Something") to be able to interact with whatever is in the RelativeLayout. In general, what is best practice for creating such a GUI and what API elements would you use to achieve it?
[Removed unnecessary questions]
Any comments, both general and specific, as well as examples are highly appreciated!
Edit: I have looked through your guide, #Mark Lapasa, thanks for an introduction of the basics. My suggested xml-file is then like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView android:id="#+id/header"
android:layout_width="match_parent"
android:background="#drawable/header" android:layout_height="30dp">
</ImageView>
<RelativeLayout android:id="#+id/leftLayout"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_alignParentLeft="true" android:layout_below="#id/header">
<Button android:text="Left btn1"
android:id="#+id/leftBtn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"/>
<Button
android:text="Left btn2"
android:id="#+id/leftBtn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/leftBtn1"/>
<Button
android:text="Left btn3"
android:id="#+id/leftBtn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/leftBtn2"/>
</RelativeLayout>
<RelativeLayout android:id="#+id/rightLayout"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_alignParentRight="true" android:layout_below="#id/header">
<Button android:text="Right btn1"
android:id="#+id/rightBtn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" android:layout_marginTop="5dp"/>
<Button
android:text="Right btn2"
android:id="#+id/rightBtn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/rightBtn1"/>
<Button
android:text="Right btn3"
android:id="#+id/rightBtn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/rightBtn2"/>
</RelativeLayout>
<ImageView android:id="#+id/footer"
android:layout_width="match_parent"
android:background="#drawable/footer" android:layout_height="20dp" android:layout_alignParentBottom="true">
</ImageView>
<RelativeLayout android:id="#+id/gameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/footer"
android:layout_below="#id/header"
android:layout_toLeftOf="#id/rightLayout"
android:layout_toRightOf="#id/leftLayout">
</RelativeLayout>
</RelativeLayout>
This works fine. However, this isn't best practice. I now have a total of four RelativeLayouts to work with. Is there some smooth solution to achieve this without using unnecessary system resources and power like this? Also, how is the best way to set the widths and heights so that they are device independent?
Looks like you are new to Relative Layouts. You might want to try my visual tutorial on it cause I had a hard enough time with the docs:
A Visual Guide to Relative Layouts In Android
http://knowledge.lapasa.net/?p=334
I have used some time on this and think the best way to achieve such results is to use fragments.
I am trying to achieve this in an android app layout.
So far I have managed to get the buttons the way I wish, but I am having trouble working out how I am going to implement the divider and the layout on the right side of it.
Here is what I have so far:
<?xml version="1.0" encoding="utf-8"?>
<!-- this is main activity's layout. a main menu of sorts. -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" android:gravity="center" android:background="#drawable/background">
<RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:id="#+id/layout_maintest2_relativelayoutleft">
<Button android:text="#string/string_main_NewCalculation" android:drawableLeft="#drawable/calculator5" android:onClick="onClickButton_NewCalculation" android:id="#+id/button_main_NewCalculation" android:layout_width="300px" android:layout_height="90px" android:drawablePadding="0px"></Button>
<Button android:text="#string/string_main_Help" android:drawableLeft="#drawable/question" android:onClick="onClickButton_Help" android:id="#+id/button_main_Help" android:layout_width="150px" android:layout_height="90px" android:drawablePadding="0px" android:layout_below="#id/button_main_NewCalculation"></Button>
<Button android:text="#string/string_main_Share" android:drawableLeft="#drawable/share" android:onClick="onClickButton_Share" android:id="#+id/button_main_Share" android:layout_width="150px" android:layout_height="90px" android:drawablePadding="0px" android:layout_below="#id/button_main_NewCalculation" android:layout_toRightOf="#id/button_main_Help"></Button>
</RelativeLayout>
<RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="#+id/layout_maintest2_relativelayoutright" android:layout_toRightOf="#id/layout_maintest2_relativelayoutleft" android:layout_alignTop="#id/layout_maintest2_relativelayoutleft">
<TextView android:layout_width="wrap_content" android:textSize="24px" android:textStyle="bold" android:layout_height="match_parent" android:id="#+id/textView_calculator_CalculatorTitle" android:text="#string/string_calculator_CalculatorTitle"></TextView>
</RelativeLayout>
</LinearLayout>
Its hard to tell from the image you uploaded but are you trying to keep the two relative layouts side by side?
You can try to position the layouts by declaring them to be drawn to one side of the parent or the other. I cant remember off the top of my head at the moment and I know thats a crappy answer but I think the answer is somewhere in here
http://developer.android.com/guide/topics/ui/layout-objects.html
Take a look at the android:layout_alignParentRight="true" declaration.
Im pretty sure I used something similar to position multiple views and buttons in the same parent before. Try it out and when I get back to my work computer on monday Ill look through my projects and see which one I know works the best.