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...).
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
<RelativeLayout
android:id="#+id/component1"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginTop="50dp"
android:background="#drawable/my_shape">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello" />
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/ic_launcher" />
<RelativeLayout
android:id="#+id/component2"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginTop="50dp"
android:background="#drawable/my_shape"
android:visibility="gone">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello" />
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
</RelativeLayout>
android:id="#+id/component2"
visibility is gone; which I want to attach in
android:id="#+id/component1"
at runtime; not a single one but N-numbers of component 2 (changing property)
All I mean to say, I want to make cloning of component2
Can anyone please assist me with snip of code ?
Thanks in Advance.
I thnik you are looking for re-using layout
you can create all your component in one layout and call that using include tag
<include layout="#layout/component"/>
<include layout="#layout/component"/>
<include layout="#layout/component"/>
link here
Even with two different layouts for different rows, you still can use a ListView and use different ViewTypes in the ListAdapter.
An other way would be to have just a container layout in your layout xml (e.g. LinearLayout wrapped in a ScrollView) and add the components programmatically. You could have the layout for the component in a separate layout xml and in code, inflate that layout xml to a View (or ViewGroup), set the texts or whatever and finally add the component view to the container view.
I can provide code examples too, if one of the suggestions makes sense for you.
I am new in Android and I tried to create a tab using FragmentActivity from codes that I found online.
http://thepseudocoder.wordpress.com/2011/10/04/android-tabs-the-fragment-way/
This is my FragmentActivity http://pastie.org/pastes/5170802/text?key=jhowuevxe2fshlwu5tisg
I would like to use a custom layout that uses an image and text.
//tab_indicator.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dip"
android:layout_height="55dip"
android:layout_weight="1"
android:orientation="vertical"
android:background="#drawable/tab_indicator"
android:padding="5dp">
<ImageView android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/icon"/>
<TextView android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
style="?android:attr/tabWidgetStyle"/>
</RelativeLayout>
I found a similar question here : create custom tab in FragmentActivity but I couldn't figure it out how to apply the solution in my codes. Can someone teach me how? Thank you.
Update:
I managed to inflate the custom layout in my codes. But I faced another error. This is my latest codes http://pastie.org/pastes/5187362/text?key=74r87diquysvruwsam1tq tweaked to FragmentActivity, from AdilSoomro http://adilsoomro.blogspot.com/2011/06/iphone-like-tabs-in-android.html codes (which uses TabActivity) with some references from
http://android.codeandmagic.org/2011/07/android-tabs-with-fragments/
http://thepseudocoder.wordpress.com/2011/10/04/android-tabs-the-fragment-way/
My latest codes successfully inflate the layout like this, with the setting http://pastie.org/pastes/5187408/text?key=qxxa5xxrhsburebllyhmw for its layout (tab_indicator.xml)
but I need to align my tab to the bottom. When I align it to the bottom, the code layout_gravity="bottom" worked on Graphical Layout but when I run it, my relative layout's background fill the whole screen, like this with the code http://pastie.org/pastes/5187445/text?key=6dz2tsiggey9se51d2thtq
can someone tell me what I did wrong?
Solved it! Finally! After testing other resources that I referred to, I realized that layout_alignParentBottom in RelativeLayout does not give any outcome. Hence I tried aligning the TabWidget to the bottom instead, and it worked!
This is my main.xml that contain TabHost and TabWidget.
http://pastie.org/pastes/5188297/text?key=lqfp3jnofs5kgsvslm3yg
Keep the tab_indicator.xml / the settings for the text and image like this : http://pastie.org/pastes/5187408/text?key=qxxa5xxrhsburebllyhmw
And here is the a custom iPhone tab that uses FragmentActivity :
P/S : Sorry if my Java file is confusing, I'm new and if there is anything I did wrong, do tell me.
try this Honey >
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="55dp"
android:layout_weight="1"
android:orientation="vertical"
android:layout_gravity="bottom"
android:background="#android:drawable/title_bar"
android:padding="5dp">
<TextView android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
style="?android:attr/tabWidgetStyle"/>
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_action_search" />
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="49dp"
android:src="#drawable/ic_action_search" />
</RelativeLayout>
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.
If I have a layout called bottom.xml,
bottom.xml:(simply contain a textview and edit text view)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation="vertical"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:text="#string/username"
/>
<EditText
android:id="#+id/name"
android:layout_width="120dip"
android:layout_height="50dip"
android:layout_gravity="center_horizontal"
/>
</LinearLayout>
Is there any way to embed the above bottom.xml layout inside other layouts instead of repeatly writing the same code in several layout files (when other layouts have a part which contains the same layout as bottom.xml)?
For example, if my admin.xml layout also contain part of the layout which looks exactly the same as bottom.xml, how to just embed the bottom.xml inside admin.xml instead of writing the same code again?
admin.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
...
...
<!--How to embed bottom.xml here-->
...
</LinearLayout>
If there is no way to do it in Android, what could be the workaround??
----------Update-----------
Like #xevincent suggested, I can reuse the bottom.xml by use <include> tag,
But How to change the id of the elements inside the resued layout?
For example, insdie bottom.xml, I would like to change the id of <editText android:id="#+id/name"> to <editText android:id="#+id/other_name"> when I reuse the bottom.xml layout in other layout, how to change the id ?
See this doc reusing layouts.
Just upvote xevincent's anwser. I added this answer because SO recommends to "Always quote the most relevant part of an important link, in case the target site is unreachable or goes permanently offline."
So, basically, his link explains that you should use <include />.
<com.android.launcher.Workspace
android:id="#+id/workspace"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
launcher:defaultScreen="1">
<include android:id="#+id/cell1" layout="#layout/workspace_screen" />
<include android:id="#+id/cell2" layout="#layout/workspace_screen" />
<include android:id="#+id/cell3" layout="#layout/workspace_screen" />
</com.android.launcher.Workspace>
And know that you can override the layout parameters:
<include android:layout_width="fill_parent" layout="#layout/image_holder" />
Have a look on this doc, Link updated
http://android-developers.blogspot.com/2009/02/android-layout-tricks-2-reusing-layouts.html