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.
Related
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
I am new in android development and i am using eclipse java to develop an app.My problem is that i want to locate the elements like image view or button to wherever i want like it is in the Adobe Flash.How can i do that.Relative layout puts elements relative to other objects.Should i change the relative layout and what should i change it into?( i mean which layout)
Thanks
Here is my 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:background="#ff8D8D8D"
tools:context="com.example.deniz.MainActivity" >
<ImageView android:id="#+id/imageView1" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:scaleType="fitXY" android:src="#drawable/back"/>
<ImageView android:id="#+id/close" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_alignParentTop="true" android:onClick="close_app" android:src="#drawable/exit"/>
<ImageView android:id="#+id/new_project" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_marginLeft="22dp" android:layout_marginTop="24dp" android:onClick="open_new" android:src="#drawable/buttonm"/>
<ImageView android:id="#+id/little" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="#+id/new_project" android:layout_below="#+id/new_project" android:layout_marginLeft="16dp" android:layout_marginTop="18dp" android:src="#drawable/buttonm"/>
<ImageView android:id="#+id/ImageView01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginBottom="16dp" android:layout_toRightOf="#+id/new_project" android:scaleType="fitCenter" android:src="#drawable/buttonm"/>
</RelativeLayout>
I'm not a veteran Android developer (which my Reputation clearly reflects), but with the humble experience that I have, I think I'll give your problem a shot.
You should stick to RelativeLayout and use any of/a mix of these functions:
setX(float x) / setY(float y) - Available for versions above HoneyComb
setLayoutParams(LayoutParams params)
One not much recommended or used ViewGroup is the AbsoluteLayout which, in definition, is exactly what you're looking for.
Though mostly used layouts - say, LinearLayout, RelativeLayout - have enough possibility to implement most designs, I hope my answer helps you achieve what you're aiming to do.
Happy development!
Cheers!
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've got layout in my app which will contain scrolling banner (it is not finnished yet if you look in my XML), and this banner will be used in other activities. So I want to make it a custom layout so I dont copypaste it X number of times.
here is my XML (well... I am not sure if all is correct so any criticism in this part is appreciated)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:id="#+id/baseID">
<RelativeLayout
android:layout_centerInParent="true"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:id="#+id/id1"
android:background="#ff00ff">
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="25dp"
android:layout_marginRight="25dp"/>
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_alignTop="#id/id1"
android:layout_alignBottom="#id/id1"
android:id="#+id/id2"
android:background="#08000000"
android:orientation="horizontal">
<Button
android:id="#+id/button1"
android:layout_width="20dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:onClick="onClick"
android:text="1" />
<TextView
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:text="to jest moj tekst"
android:layout_weight="16"/>
<Button
android:id="#+id/button2"
android:layout_width="20dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:onClick="onClick"
android:text="1" />
</LinearLayout>
</RelativeLayout>
For now this layout contains only banner, but there will be more stuff.
THe question is: How do I put it to an external class ?
I know that I have to make a new class which extends RelativeLayout(int this case). But what then ? How do I set layout to this class ?
Also I've made some research but I didnt find any simple and accurate tutorial for this. If you know any - please post it.
You could use <include> like:
<include layout="#layout/menu" />
You could even rewrite attributes of the root tag of the included xml layout, like in
<include android:id="#+id/my_menu" layout="#layout/menu" />
See the Developers Blog for a more detailed explanation at
http://android-developers.blogspot.com.es/2009/02/android-layout-tricks-2-reusing-layouts.html
you'll have to work with Fragment:
http://developer.android.com/reference/android/app/Fragment.html
Fragments enable developers to split VIEW/Controller into differents classes.
So, you will add to your xml will differents fragments and each fragment are in charge of his owns components (textview, button...).
Bit of a newbie when it comes to android, only been working on it properly for a few days but even after all the searching I've done im stumped and nobody seems to know how to help me. I have this so far:
http://img263.imageshack.us/i/sellscreen.jpg
How can I move the text to be besides each icon rather than underneath it? Hoping the gallery won't be moved either. Here is the code i have:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scroller"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true" >
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<Gallery xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gallery"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<ImageView
android:id="#+id/test_image"
android:src="#drawable/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="The offcial UK driving theory test application. Over 190 questions."
/>
<ImageView
android:id="#+id/test_image"
android:src="#drawable/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="The offcial UK driving theory test application. Over 190 questions."/>
<ImageView
android:id="#+id/test_image"
android:src="#drawable/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="The offcial UK driving theory test application. Over 190 questions."/>
<ImageView
android:id="#+id/test_image"
android:src="#drawable/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="The offcial UK driving theory test application. Over 190 questions."/>
<ImageView
android:id="#+id/test_image"
android:src="#drawable/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="The offcial UK driving theory test application. Over 190 questions."
/>
</LinearLayout>
</ScrollView>
Top half of my code doesn't seem to be showing for some reason but it's just the opening of the linear layout.
I will be forever grateful to anyone that can help, i've been racking my brains for days and getting nowhere. Really getting stressed out by it. Thanks in advance!!
You need to wrap each ImageView/TextView pair in a linearlayout
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/test_image"
android:src="#drawable/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="The offcial UK driving theory test application. Over 190 questions."
/>
</LinearLayout>
It's also pretty clear that you didn't ask anyone who knew android, because this is pretty trivial.
Have you read through the android layout tutorials? Lots of stuff on the dev site, like declaring layout, common layout objects, and the hello views tutorials.
There are a number of ways to accomplish this, depending on your goals.
Is it a list of items of unknown size that may want to scroll? Use a ListView. You can provide a custom layout to the ListView with your things side by side.
Do you have a finite set of things? Use a RelativeLayout. Tell each TextView to layout below the one above, and each ImageView to layout to the right of it's TextView.
You could also accomplish that with nested LinearLayouts, one vertical and a bunch of horizontal, but that is less efficient than using a RelativeLayout.