I am just starting to develop android apps. I have a layout question. I want to create the main screen for my app. It is a menu with 7 options, each options would be an icon at the left, a short text and a check at the left (on/off component).
I have written it in a list view element, I have created a simple adapter with this layout:
<?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" >
<ImageView android:id="#+id/icon"
android:layout_width="?android:attr/listPreferredItemHeight"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:src="#drawable/ic_action_io"/>
<TextView android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/icon"
android:layout_alignParentTop="true"
android:textAppearance="?android:attr/textAppearanceLarge"
android:singleLine="true" />
</RelativeLayout>
Menu will have always 7 options, I would like that the listview filled the height of the screen. Each element with the same height. Is it possible that with listview? Or, perhaps would be better making the menu out of a list view?
I have been reading about linear layout and the weight property. Please, could you help me? It is my first layout, I would thank any advice aboput layout I should use.
Thanks a lot, best regards!
P.D: Sorry for my english.
I would use a Linearlayout and inside i put all the items to be displayed...
Something like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<RelativeLayout android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<ImageView android:id="#+id/icon"
android:layout_width="?android:attr/listPreferredItemHeight"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/ic_launcher"/>
<TextView android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/icon"
android:layout_alignParentTop="true"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Texto"
android:singleLine="true" />
</RelativeLayout>
<RelativeLayout android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<ImageView android:id="#+id/icon"
android:layout_width="?android:attr/listPreferredItemHeight"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/ic_launcher"/>
<TextView android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/icon"
android:layout_alignParentTop="true"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Texto"
android:singleLine="true" />
</RelativeLayout>
<!-- Repeat the item five times more -->
</LinearLayout>
if you want all the items to be displayed (without a scroll) then there's no use in a ListView. use a LinearLayout instead and set the layout_weight of each menu item to 1.
As the others guys said is better use the LinearLayout. And like you mentioned you can use weight attribute too.
Equally weighted children
To create a linear layout in which each child uses the same amount of space on the screen, set the android:layout_height of each view to "0dp" (for a vertical layout) or the android:layout_width of each view to "0dp" (for a horizontal layout). Then set the android:layout_weight of each view to "1".
As you are trying to implement a Menu, I think the best approach is substitute each RelativeLayout(with textview and imageview) for a button. So, your layout will be like that:
<?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"
android:weightSum="7.0" > //Defines the maximum weight sum
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:height="0dp"
android:layout_weight="1"
android:text="Option 1"
android:drawableLeft="#drawable/icon1"
android:onClick="handleOption"/> // method to handle onClick
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:height="0dp"
android:layout_weight="1"
android:text="Option 2"
android:drawableLeft="#drawable/icon2"
android:onClick="handleOption"/> // method to handle onClick
//Add more five buttons
.
.
.
In your activity, you should load this layout, using setContentView() and you must implement a method handleOption like below to handle onClick event of each button.
public view handleOption(View view)
{
switch(view.getId()) ....
}
In that way, you do not need implement onClickListener Interface, have one method to each button and set the onClickListener for each button.
Related
I got following simple Layout. The problem can be reproduced in the android studio designer:
<?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">
<TextView
android:id="#+id/x"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginEnd="#dimen/margin_small"
android:layout_marginRight="#dimen/margin_small"
android:text="#string/long_string"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<CheckBox
android:id="#+id/y"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/x"
android:layout_toEndOf="#+id/x"
android:layout_centerVertical="true" />
</RelativeLayout>
This layout works fine if the text length of the textview is short. The checkbox is placed on the right of the textview. But if the text gets long and even wraps maybe, then the checkbox is pushed out of the view. It is not visible anymore. I would like that the checkbox is always visible on the right of the textview even, if it fills the whole width of the screen.
I tried to rewrite the layout with a LinearLayout which doesn't work either.
<?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="horizontal">
<TextView
android:id="#+id/x"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/margin_small"
android:layout_marginRight="#dimen/margin_small"
android:text="#string/long_string"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<CheckBox
android:id="#+id/y"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
Do you know a trick to to achieve this with relative layout? I would somehow expect this behaviour from relative layout by default. Thanks ;)
This is working for me: make checkBox alignParentRight and make TextView toLeftOf it:
<?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">
<TextView
android:id="#+id/x"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/y"
android:text="This is very-very-very looooooooooooong stringgggg, very-very, long-long"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<CheckBox
android:id="#+id/y"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"/>
</RelativeLayout>
Edit. You can include this Relative Layout into other (parent) layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:gravity="left">
<TextView
android:id="#+id/x"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/y"
android:text="this is veryyyyy yyyyyyyyyy yyyyyy yyy loooooo oooooooo ooon nnggggg gggg striiii iiiiin gggggg ggggg ggggggg ggg"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<CheckBox
android:id="#+id/y"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true" />
</RelativeLayout>
</RelativeLayout>
It's also working. If you put android:gravity="left" into Relative layout, it will locate its content on the left side.
One way out would be to put the textview and checkbox in a linear layout with orientation horizontal. Set width of checkbox to be whatever you want (a constant) and the width of textbox to be 0dp and layout_weight of 1.
You should put the property layout_weight to make your views (TextView and Checkbox) have a deff space in the screen instead of use a hard value
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/x"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.9"
android:layout_marginEnd="#dimen/margin_small"
android:layout_marginRight="#dimen/margin_small"
android:text="#string/long_string"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<CheckBox
android:id="#+id/y"
android:layout_weight="0.1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
I guess the desired layout is not possible by default. I tried to do this using RelativeLayout, LinearLayout and TableLayout. It is technically understandable that the these layout do not support that behaviour. The relative layout would have to explicitly respect the case that an element on the left or right is minimal visible inside the parent even it is placed to left or right. Another solution would be if the table layout would allow a column to consume the rest of the space but respects min width of other columns as well.
For my case i wrote a workaround. I used the initial relative layout of my question but set a max width to the textview using following calculation:
DisplayMetrics displaymetrics = new DisplayMetrics();
context.getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
int displayWidth = displaymetrics.widthPixels;
That guarantees the checkbox to be visible. I know the solution could be hardly possible in scenarios where the given layout is embedded in a more complex layout.
I have a Linear layout then programatically I'm adding some spinners and buttons and so on, but I have xml button Wrap content (width) and then on java I add spinner (or anything else) and it goes below this view even if both views are wrap content:
progBar = new ProgressBar(this);
pBarToca = new ProgressBar(this);
pBarToca.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
linToca = (LinearLayout) findViewById(R.id.tetoca);
linToca.addView(pBarToca);
and it's placed under the button of xml:
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" android:layout_marginTop="6dp"
android:id="#+id/tetoca">
<TextView style="#style/StylePartida"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/te_toca_jugar" />
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#A7E9A9" android:onClick="callJugar"
android:text="#string/jugar" />
</LinearLayout>
edit!!!!!!
I want textview on first line then on next line button + progressbar (for example)
You have android:orientation=vertical so the Views will be laid out starting at the top and going down.
If you want them to all be next to each other, remove that from your xml since the default orientation for a LinearLayout is horizontal. If you do this, you will obviously need to change the android:width to wrap_content for your TextView or else it will take up the entire screen.
After your comment, a RelativeLayout would work best here.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<TextView
style="#style/StylePartida"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/te_toca_jugar"
android:id="#+id/tvID" /> // give it an id
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:id="#+id/tetoca"
android:layout_below="#/id=tvID"> // place it below the TV
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#A7E9A9" android:onClick="callJugar"
android:text="#string/jugar" />
</LinearLayout>
</RelativeLayout>
Note the changes in the comments. Now when you add your progressbar to the LL, it should be next to the Button. You may need some changes but this should give you approximately what you want.
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:id="#+id/tetoca">
<TextView style="#style/StylePartida"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/te_toca_jugar"
android:text="#string/te_toca_jugar" />
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#A7E9A9" android:onClick="callJugar"
android:text="#string/jugar" />
</LinearLayout>
In your textView you are matching the parent
android:layout_width="match_parent"
This will cause the textview to take up the entire width of the parent view.
android:layout_width="wrap_content"
and
android:orientation="horizontal"
android:orientation="vertical" will cause the elements to be stacked.
If you are using "horizontal" it's important not to have a child element with width matching parent.
EDIT:
After OPs change to question:
I have used a textview, two buttons and listview to give you an idea of how you can format it. There are many ways to achieve the same thing, this is one suggestion.
The internal linearlayout has a horizontal orientation (by default).
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="te_toca_jugar"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#A7E9A9"
android:text="jugar"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#A7E9A9"
android:text="jugar2"/>
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/lv">
</ListView>
</LinearLayout>
</LinearLayout>
This is my custom dialog which consist of the following
list view,button and finally a textview used when the list is empty.
My problem is the listview seems to take up more space than it needs to when only 1 item exists.
The image below shows this.
My XML code
<?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" >
<ListView
android:id="#+id/lvRaffles"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/bCloseDialog"
android:layout_alignParentTop="true" >
</ListView>
<Button
android:id="#+id/bCloseDialog"
style="?android:attr/buttonStyleSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="#drawable/alert_dialog_button_style"
android:text="Close" />
<TextView
android:id="#+id/tvRaffleEmpty"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:gravity="center"
android:text="No Raffle Code Found With That Search"
android:textAppearance="?android:attr/textAppearanceMedium"
android:visibility="gone" />
</RelativeLayout>
I have tried the following.
List View height on wrap_content, 0dp does not help.
I know you fixed this with LinearLayout but to answer your question, the reason it appears as if your listview is taking up too much space is because you used layout_alignParentBottom="true" if you want the button to appear below the listview you would need to use layout_below="#id/lvRaffles" You also have two elements aligned to parentTop, which can cause the elements to overlap.
I have a list view with 2 radio button items. When inflated it from a layout, it is happening to be scrollable even if there is a lot of space as shown below.
As shown in screenshot, I have 2 radio buttons.
1. Distance
2. Rating
But the "rating" radio button is not visible and I have to scroll to see it. Why is this happening. I tried to setting the layout height to wrap content, fill parent and match parent. But that didn't solve the problem. Any idea why is this happening?
here i am referencing the list view :
ListView radio_list = (ListView) view.findViewById(R.id.RadioList);
radio_list.setAdapter(new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_single_choice,
radio_list_items));
radio_list.setItemsCanFocus(true);
radio_list.setChoiceMode(ListView.CHOICE_MODE_SINGLE);
my xml:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:paddingLeft="10dp"
android:text="SEARCH"
android:textColor="#FF3300"
android:textSize="20dp" >
</TextView>
</LinearLayout>
<RelativeLayout
android:id="#+id/searchTextLayout"
android:layout_width="match_parent"
android:layout_height="50dip"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginBottom="20dip"
android:layout_marginLeft="20dip"
android:layout_marginRight="20dip"
android:layout_marginTop="20dip"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/searchTextButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:background="#685E5C"
android:contentDescription="Sample"
android:scaleType="fitCenter"
android:src="#drawable/abs__ic_search" />
<EditText
android:id="#+id/searchText"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toRightOf="#id/searchTextButton"
android:background="#drawable/background_black_border_full"
android:padding="8dp"
android:textColor="#android:color/white" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:paddingLeft="10dp"
android:text="SORT BY"
android:textColor="#FF3300"
android:textSize="20dp" >
</TextView>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ListView
android:id="#+id/RadioList"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
</LinearLayout>
</LinearLayout>
Your layout xml file is weird,
first of all you should simplify it :
there is no point of having one single element in a LinearLayout => it means the corresponding linear layout is useless.
second point : if there is 2 child in a linear layout, and the first one has a height of "match_parent" without any layout_weight set, the second one will be pushed out because there isn't any space left. ( its probably your problem here)
third point : your are using a relative layout as a linearlayout, proof is the android:orientation parameter you try to use on it. it is useless. position of relative layout childs are given by relative positioning between them. in your case you can use a LinearLayout with orientation horizontal instead of the RelativeLayout
best advise to help you : simplify your layout xml.
More on this topic.
In a layout resource XML, I have 3 RelativeLayout(s) which are inside a main RelativeLayout. The view will be shown vertically. These 3 RelativeLayout() are set next to each other, and I want them to fill the whole screen, doesnt matter what will be the screen size. My, layout view:
<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="#drawable/backg"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="#dimen/top_mr_image"
android:src="#drawable/temp" />
<RelativeLayout
android:id="#+id/r1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView1"
android:layout_marginLeft="10dp"
android:background="#drawable/r1bg"
android:layout_weight="1"
>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="#dimen/txt_mr_right"
android:layout_marginRight="#dimen/txt_mr_right"
android:layout_marginTop="39dp"
android:text="S"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#id/textView1"
android:layout_marginLeft="#dimen/txt_mr_right"
android:layout_marginRight="#dimen/txt_mr_right"
android:text="T"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/r2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignTop="#+id/r1"
android:layout_toRightOf="#+id/r1"
android:layout_weight="1" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/r3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignTop="#+id/r2"
android:layout_toRightOf="#+id/r2"
android:layout_weight="1" >
</RelativeLayout>
I set weight=1 and layout_width=0dp for each relativeLayout and this technique works with buttons, I thought the same will be with relativeLayout, seems my thoughts were wrong. Any idea?
UPD1: I have added an image of what I would like to have
RelativeLayout does not pay attention to android:layout_weight. (That's a property of LinearLayout.LayoutParams, but not of RelativeLayout.LayoutParams.)
You should be able to get the layout you want with a much simpler view hierarchy. It's not clear what you are trying to do, since the last two RelativeLayouts are empty. If you need a purely vertical organization, I'd suggest using LinearLayout instead of RelativeLayout.
EDIT Based on your edit, it looks like you want a horizontal layout of three compound views, each one clickable. I think something like the following will work:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<!-- First column -->
<LinearLayout
android:id="#+id/firstColumn"
android:orientation="vertical"
android:gravity="center_horizontal"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="..." />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="text 1"
. . . />
</LinearLayout>
<!-- Second column -->
<LinearLayout . . . >
. . .
</LinearLayout>
</LinearLayout>
If the contents of the buttons aren't correct, you can replace the second-level LinearLayout views with RelativeLayout if that helps organize the layout better.
RelativeLayouts do not support weight. You need to use a LinearLayout as a parent container if you want to use weights.
Solution is very simple. I have been looking for weight distribution in relative layout.
It's a small trick for all these kind situations.
Use LinearLayout with android:orientation="horizontal"
You can use Horizontally oriented LinearLayout Manager in the Recycler View, and place each RelativeLayout in each item, of its Adapter.
The Link: How to build a Horizontal ListView with RecyclerView?
If your RelativeLayouts are set to a fixed width and height, that is to the size of the Screen, that you can get from DisplayMatrics, that will be OK.
The Link: Get Screen width and height
If the contents of your RelativeLayouts are different, then you can use getItemViewType() method.
Please see: How to create RecyclerView with multiple view type?
Happy Coding :-)