GridView not conforming to Relativelayout alignment - java

I'd like to right align this gridview so that it's flush against the right side of the screen, but it seems to always immediately follow whichever textview I set it to the right of. Not only that, but all of the textviews are displayed on top of each other.
<?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="fill_parent">
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="#string/time_left"
android:textSize="30sp"
android:layout_alignParentLeft="true"
android:id="#+id/time_left_label"/>
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/time_left"
android:layout_alignParentLeft="true"
android:layout_below="#id/time_left_label"/>
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="#string/progress"
android:textSize="30sp"
android:layout_alignParentLeft="true"
android:layout_below="#id/time_left"
android:id="#+id/progress_label" />
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/progress"
android:layout_alignParentLeft="true"
android:layout_below="#id/progress_label"/>
<GridView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/main_grid"
android:numColumns="2"
android:layout_alignParentRight="true"
android:layout_toRightOf="#id/time_left_label"
android:stretchMode="none" />
</RelativeLayout>
Here's a picture of what I want drawn quickly in paint!
http://imgur.com/x7Ypr

I'd like to right align this gridview
How exactly do you want it aligned? You mention what it does, but not what you want.
it seems to...follow whichever textview I set it to the right of
Welll, you're using layout_alignParentRight and layout_toRightOf.
the textviews are displayed on top of each other.
Placing your TextViews underneath each other won't stack them. You can use a LinearLayout with its orientation set to vertical or you could use layout_below to place them under each other.

Related

How to keep views from disappearing in wrap_content

I have a problem where a view of mine is disappearing in my RecyclerView when the layout of that view is wrap_content. The RecyclerView is match_parent both directions, and uses a LinearLayout that inflates the below xml file. Here is what each piece of the RecyclerView is supposed to look like:
And here is the XML for that:
<?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="wrap_content"
android:layout_margin="10dp">
<View
android:id="#+id/scheduleBlockColor"
android:layout_width="15dp"
android:layout_height="match_parent"
android:layout_alignBottom="#+id/scheduleBlockText"
android:background="#color/colorCougarRed" />
<RelativeLayout
android:id="#+id/scheduleBlockText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toEndOf="#id/scheduleBlockColor"
android:layout_toRightOf="#id/scheduleBlockColor"
android:paddingEnd="0dp"
android:paddingLeft="5dp"
android:paddingRight="0dp"
android:paddingStart="5dp">
<TextView
android:id="#+id/scheduleBlockTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="2dp"
android:text="#string/schedule_block_time_default"
android:textSize="16sp" />
<TextView
android:id="#+id/scheduleBlockClassName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/scheduleBlockTime"
android:ellipsize="end"
android:padding="2dp"
android:singleLine="true"
android:text="#string/schedule_block_class_default"
android:textColor="#000000"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:id="#+id/scheduleBlockRoom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/scheduleBlockClassName"
android:padding="2dp"
android:text="#string/schedule_block_room_default"
android:textSize="16sp" />
</RelativeLayout>
</RelativeLayout>
My question is, how do I keep that colored piece from disappearing when the RecyclerView loads? If I have the parent RelativeLayout above set to match_parent, it works fine. I've tried this answer, but haven't had the same success
It is because of the height set on the <View>. It gets messed up (even with match_parent) by the fact that it doesn't have content. Since the intention is to have a vertical stripe, you could anchor it to the top and bottom of the parent. You already are doing it for the bottom part (kind of, aligning it to the bottom of the text view container), so you only need to take care of the top anchoring:
<View
android:id="#+id/scheduleBlockColor"
...
android:layout_alignParentTop="true"
... />
Instead of padding using layout_margin inside your RelativeLayout.

Android: Placing imageButton over a Button

I would like to place 2 small icons (with actions) over a big Button that take the 1/3 of the screen. The 2 icons and the button have to support actions when we click on them. I'm pretty sure I have to use imageButton for the icons. However I can't find any way to keep the icons (imageButton) on top of the button.
Here is my code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="0dp">
<ImageButton
android:id="#+id/icon1"
android:src="#drawable/ic1"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:contentDescription="#string/ic1"
android:layout_width="48dp"
android:layout_height="48dp"
android:onClick="action1"/>
<ImageButton
android:id="#+id/icon2"
android:src="#drawable/ic2"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:contentDescription="#string/ic2"
android:layout_width="48dp"
android:layout_height="48dp"
android:onClick="action2"/>
<com.myapp.CustomViews.myButton
android:id="#+id/big_button1"
android:text="#string/text_big_button1"
android:background="#drawable/changing_button1"
android:textColor="#color/white"
android:layout_height="match_parent"
android:textSize="#dimen/font_size_buttons"
android:layout_width="match_parent"
android:gravity="center"
android:textAllCaps="false"
android:capitalize="none"
android:onClick="bigAction1"/>
</RelativeLayout>
The "#drawable/changing_button1" on the big Button allows me to put one color for the button and a different one when focused or pressed.
I tried so many different things and I couldn't find a way while I'm sure there is a simple solution. The icons remain hidden behind the big Button.
Thank you for your help!
You could use FrameLayout to overlay views. For example:
<FrameLayout
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="0dp">
<com.myapp.CustomViews.myButton
android:layout_gravitiy="center"
.../>
<ImageButton
android:layout_gravitiy="left|center_vertical"
.../>
<ImageButton
android:layout_gravitiy="right|center_vertical"
.../>
</FrameLayout>
Here is a slightly modified version of your layout, which works fine.
I replaced all your custom stuff with plain android and standard buttons, and moved the big button up in the layout, because if it is at the bottom, it has a higher z-index and overlays the two small buttons.
<?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">
<Button
android:id="#+id/big_button1"
android:text="BIG BUTTON"
android:background="#android:color/holo_blue_dark"
android:textColor="#color/white"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:gravity="center"
android:textAllCaps="false"
android:capitalize="none"
android:onClick="bigAction1"/>
<Button
android:id="#+id/icon1"
android:text="BT1"
android:background="#android:color/holo_red_dark"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_width="48dp"
android:layout_height="48dp"
android:onClick="action1"/>
<Button
android:id="#+id/icon2"
android:text="BT2"
android:background="#android:color/holo_green_dark"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_width="48dp"
android:layout_height="48dp"
android:onClick="action2"/>
</RelativeLayout>
How about changing order in the layout ? Place your Button widget on top, then declare 2 icons after that ?
You should add android:translationZ="5dip" for the 2 imageButton. It works (you should run and see, it didn't appear so on the IDE)
I finally found a way to do it.
The solution is to use the RelativeLayout as a button and replace the Button by a simple TextView:
<RelativeLayout
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="0dp"
android:background="#drawable/custom_button_changing_color"
android:clickable="true"
android:focusable="true"
android:id="#+id/button_layout"
android:onClick="bigAction1">
<TextView
android:id="#+id/text_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/text"
android:gravity="center"
android:layout_centerVertical="true"
android:textColor="#color/white"
android:textSize="#dimen/font_size_buttons"
android:textAllCaps="false"
android:background="#color/transparent"/>
<ImageButton
android:id="#+id/icon1"
android:src="#drawable/ic1"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:contentDescription="#string/ic1"
android:layout_width="48dp"
android:layout_height="48dp"
android:onClick="action2"/>
<ImageButton
android:id="#+id/icon2"
android:src="#drawable/ic2"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:contentDescription="#string/ic2"
android:layout_width="48dp"
android:layout_height="48dp"
android:onClick="action3"/>
</RelativeLayout>
I hope this helps! :)

how to differentiate two "views" from overlapping each other

i am beginner to android programming and trying to build a simple app program.
whenever i try to make more than one views they stack on each other.
I am trying to make a text field and a button, but when i run it, the text field and button overlap each other however, i want them to be separated by some distance.
i am using the following code.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:android1="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
tools:context="com.example.new1.MainActivity" >
<EditText android:id="#+id/edit_message"
android:layout_weight= "1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="#string/edit_message" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_send" />
</RelativeLayout>
i am checking this code on Samsung Galaxy S2.
does anybody knows the solution to this problem and can guide me where i am doing it wrong.
Either use LinearLayout so that elements stack horizontally or vertically, or use attributes such as android:layout_toRightOf="#id/edit_message" to control placement within a RelativeLayout.
Find out more about LinearLayout here: http://developer.android.com/guide/topics/ui/layout/linear.html and RelativeLayout here: http://developer.android.com/guide/topics/ui/layout/relative.html
RelativeLayout positions views relative to each other. So if you do not specify the relationship between view, all the views will be put one above the other. You can either use LinearLayout with orientation attribute or define relationship between views. Following can be your working code
<?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="fill_parent" >
<EditText
android:id="#+id/edit_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:hint="#string/edit_message"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/edit_message"
android:text="#string/button_send" />
</RelativeLayout>
Here android:layout_toRightOf="#id/edit_message" lets your button to be positioned to right of your edittext
Depending on what you want, a horizontal layout or vertical, you need a fitting layout xml.
You use relativeLayout, where you have to specify the parents to layout like:
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
If your beginner better take a look at a linear layout in vertical or horizontal mode.
You dont have to specify this then.
Like this:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="100"
>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/bResults"
android:text="Try Command"
android:layout_weight="20" />
<ToggleButton
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/tbPassword"
android:layout_weight="80"
android:checked="true"
/>
</LinearLayout>
This will put your two buttons nexto each other

Splitting Android Layout Vertically Adding Gravity To Both Sides To Center Objects

I have an android layout I'd like to split down the middle vertically and then add gravity so I can center items within the left and the right halves of the layout.
Can someone explain or post an example of how this might be accomplished?
Thus far I've created a layout and a horizontal layout. My problem is the horizontal layout needs balance so I'd like to figure out a way to change my current layout (show below) to include a way of centering the objects within the left and right halves of the screen.
SOURCE:
<?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"
android:background="#drawable/background"
android:orientation="vertical" >
<ImageView
android:id="#+id/emblem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="24dp"
android:gravity="center"
android:scaleType="fitStart"
android:src="#drawable/apn_app_logo" />
<Button
android:id="#+id/go_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/emblem"
android:layout_alignParentRight="true"
android:layout_marginBottom="23dp"
android:layout_marginRight="22dp"
android:background="#drawable/apn_app_go_button" />
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/go_button"
android:gravity="center"
android:text="#string/start_text2"
android:textColor="#000000"
android:textSize="18sp" />
</RelativeLayout>
First of all android:orientation attribute will not work in Relative Layout.If you want to split the screen half into two equal layout your parent layout will be a linear layout with android:orientation= horizontal. Then inside that have 2 LinearLayout with each android:orientation= vertical. Inside 1st Linear layout you can have the ImageView , Button and TextView with each of their layout_gravity=center.
Hope this helps. If you want to do something in the 2nd half of teh screen , do all teh stuffs in the 2nd LinearLayout.
Happy Coding.
Here's some code which should be self-explanotory:
<LinearLayout 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:orientation="horizontal"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#00dd00"
android:gravity="center"
>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#dd0000"
android:gravity="center_horizontal"
>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
</LinearLayout>
and here's what you'll achieve:

How to center Textview inside Listview using RelativeLayout?

ArrayAdapter<String> arrayAdapter = new ArrayAdapter<String>(this,R.layout.activity_haltestellen, R.id.tvHaltestellen, HaltestellenListe);
lvH.setAdapter(arrayAdapter);
this is how the stuff is set and .xml:
<?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/lvHaltestellen"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" >
</ListView>
<TextView
android:id="#+id/tvHaltestellen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
/>
I get the StringArray from a database.
so how can center the tv inside the listview? realy bad thing
Try to add this one: android:layout_centerInParent="true"
<TextView
android:id="#+id/tvHaltestellen"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
I'm not quite sure what do you want to do, but if you want to center the TextView inside the RelativeLayout then remove
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
from TV and try adding something like android:layout_centarInParent="true", and in the relative layout change match_parent to wrap_contents
You could anchor the TextView to the top and bottom of the ListView (and optionally left and right too, depending on the desired effect). That will make the TextView equally tall (and optionally wide), so use a center gravity to position the text in the middle.
<?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/lvHaltestellen"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
<TextView
android:id="#+id/tvHaltestellen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/lvHaltestellen"
android:layout_alignBottom="#+id/lvHaltestellen"
android:layout_alignLeft="#+id/lvHaltestellen"
android:layout_alignRight="#+id/lvHaltestellen"
android:gravity="center" />
</RelativeLayout>
If you're planning to add a background colour to the TextView, you'll need to wrap it inside another transparent container (e.g. a FrameLayout), to avoid the colour from obscuring what's displayed in the list. Something like:
<?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/lvHaltestellen"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/lvHaltestellen"
android:layout_alignLeft="#+id/lvHaltestellen"
android:layout_alignRight="#+id/lvHaltestellen"
android:layout_alignTop="#+id/lvHaltestellen" >
<TextView
android:id="#+id/tvHaltestellen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#android:color/black" />
</FrameLayout>
</RelativeLayout>
Alternatively, if you decide to make the ListView fill up the whole height of the RelativeLayout, you don't need to anchor the TextView to the list anymore. As already pointed out by #user1796624, you can then just center the TextView.
As per your earlier comment on someone else's answer:
the textview is shown inside the listview.
I understand what you're trying to say here, but please do realize that the TextView does not sit inside the ListView, but rather floats on top of it.

Categories