I want to create layout where I have two images at left and at right and text in center.
I have tried to do it with relative layout but unfortunetly it was unsuccessfully. Could anybody provide me an example?
Have you tried something like?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/img1"
android:layout_width="50dip"
android:layout_height="50dip"
android:layout_alignParentLeft="true"
android:src="#drawable/image1"/>
<ImageView
android:id="#+id/img2"
android:layout_width="50dip"
android:layout_height="50dip"
android:layout_alignParentRight="true"
android:src="#drawable/image2"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/img1"
android:layout_toLeftOf="#id/img2"
android:layout_alignTop="#id/img1"
android:text="I'm between!"/>
</RelativeLayout>
If you don't need more things on your view, you could want to use LinearLayout instead, since it's more easier to implement. In that case, you just have to play with the layout_weight attribute.
Related
I'm currently using a Card View inside a recycler and the text is left-alligned despite my efforts.
Here is the Book Item Layout.
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="match_parent"
app:cardCornerRadius="4dp"
app:cardElevation="5dp"
app:cardUseCompatPadding="true"
app:cardBackgroundColor="#color/white">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/bookTitleTextView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_gravity="center_horizontal"
/>
</LinearLayout>
</androidx.cardview.widget.CardView>
Here is the recycler itself.
<?xml version="1.0" encoding="utf-8"?>
<androidx.recyclerview.widget.RecyclerView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/bookRecycler" />
This is the current output.
enter image description here
As you can see the text is not centered.
I tried using layout gravity to center the text which didn't work.
I also tried using a constraint layout on the text view and using constraints to center the text without any luck.
android:layout_gravity = "center" has already been attempted.
Any advice on what I'm overlooking would be great.
Thank you.
add android:gravity="center" for LinearLayout and you are good to go
I see your LinearLayout have only one child and no special attributes, so you can even remove whole LinearLayout - place TextView straight inside CardView, which extends FrameLayout. For centering childs inside FrameLayout you may also use android:gravity="center" for parent and/or android:layout_gravity="center" for child
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:gravity="center"
app:cardCornerRadius="4dp"
app:cardElevation="5dp"
app:cardUseCompatPadding="true"
app:cardBackgroundColor="#color/white">
<TextView
android:layout_gravity="center"
... rest of code
android:gravity="center" is the correct code, instead of android:layout_gravity="center_horizontal"
So I'm creating a list view that grows and shrinks based off of the user input and I need four buttons but I don't know how to have buttons that are aligned with the bottom of the list view and are in a 2x2 grid fashion. I've already tried relative layout and it didn't seem to work. Thank you
I've created the XML according to what I believed you wanted to see.
Please check the following screen shot:
The following is the XML file:
<?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"
tools:context=".MainActivity">
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true">
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="BUTTON3"/>
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="BUTTON4"/>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_above="#id/linearLayout1">
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="BUTTON1"/>
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="BUTTON2" />
</LinearLayout>
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/linearLayout2">
</ListView>
</RelativeLayout>
As you can see that I am using the RelativeLayout as the base wrapper and within the RelativeLayout, I have 2 linearlayouts for the buttons (2 each) and finally the list view. The purpose for the LinearLayout is simply to add weight to the buttons so they would share the equal amount of horizontal space. If that does not fit your criteria, feel free to remove them. The main thing to learn is that relative layout allows you to use attributes such as alignParenBottom, layout_above, layout_below and so on. These attributes allow you to place your elements anywhere on the screen and adjust them according to these attributes.
Let me know if you have any questions.
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
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.
I have some problem with multiple screen support, I work with dp(dpi) for specify the layout_heigth and layout_width and I hope that is the better way to support multiple screen, but when I tried with two smartphone I meet two different result.
I give an example, this is a layout I use:
<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/cities_main_layout"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:id="#+id/citieslist"
android:layout_width="wrap_content"
android:layout_height="320dip"
android:layout_gravity="center_vertical"
android:layout_below="#id/cities_main_layout"
/>
<LinearLayout
android:id="#+id/cities_button_layout"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/citieslist"
android:layout_gravity="center_vertical">
<Button
android:id="#+id/bycountry"
android:layout_height="50dip"
android:layout_width="105dip"
android:background="#drawable/buttonmarket"
android:text="#string/button_bycountry"
/>
<Button
android:id="#+id/top10"
android:layout_height="50dip"
android:layout_width="105dip"
android:background="#drawable/buttonmarket"
android:text="#string/button_top10"
/>
<Button
android:id="#+id/recommended"
android:layout_height="50dip"
android:layout_width="105dip"
android:background="#drawable/buttonmarket"
android:text="#string/button_recommended"
/>
</LinearLayout>
</RelativeLayout>
The button are at the bottom of the layout, and I see two different result:
http://img600.imageshack.us/img600/5513/htcmagicg2.png http://img600.imageshack.us/img600/5513/htcmagicg2.png
http://img441.imageshack.us/img441/6440/samsunggalaxys.png http://img441.imageshack.us/img441/6440/samsunggalaxys.png
In the last smartphone I can see the buttons, instead in the first I cannot...what's wrong?
I have to write a layout for any set of screen??!!!
Your ListView has
android:layout_height="320dip"
Now if the phone screen is smaller, it will not fit.
Try doing this instead: (Edited due to comments. This is displayed correcty in eclipse)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relative"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:id="#+id/listview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FF0000"
android:layout_above="#+id/linlay">
</ListView>
<LinearLayout
android:id="#+id/linlay"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="30dip"
android:background="#00FF00"
android:layout_alignParentBottom="true">
</LinearLayout>
</RelativeLayout>
Thant should fix it I think.
Cheers
As others have indicated, your problem is that you hardwired in a size for the ListView. If you want a business rule of "have the buttons at the bottom and have the ListView fill up the rest", you actually need to write code that implements "have the buttons at the bottom and have the ListView fill up the rest".
There are two main approaches here:
Use a LinearLayout parent for the buttons and the ListView. Use
android:layout_height="0px" and android:layout_weight="1" for the
ListView. Use a regular android:layout_height for the buttons (presumably in their own LinearLayout) and no
android:layout_weight for for them
Use a RelativeLayout parent for the buttons and the ListView.
Define the buttons as having android:layout_alignParentBottom="true".
Define the ListView as having android:layout_alignParentTop="true"
and android:layout_above="...", where the ... is the ID of the buttons' LinearLayout.
I would say it's because you are specifically declaring a height for your ListView and then laying the LinearLayout that holds your buttons at the bottom. Try changing it instead of being at the bottom of the ListView to something like
<LinearLayout
android:id="#+id/cities_button_layout"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:alignparentbottom="true"
android:layout_gravity="center_vertical">
I'm not entirely sure if align_parent_bottom is the 100% correct spelling of that.
Well, others have beaten me to it while I was typing, haha, but yeah, you're hardwiring a lot of things that shouldn't be, both the ListView and the Buttons. Take a look at this:
<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/cities_main_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:id="#+id/cities_button_layout"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
>
<Button
android:id="#+id/bycountry"
android:layout_height="50dip"
android:layout_width="fill_parent"
android:layout_weight="1"
android:background="#drawable/buttonmarket"
android:text="#string/button_bycountry"
/>
<Button
android:id="#+id/top10"
android:layout_height="50dip"
android:layout_width="fill_parent"
android:layout_weight="1"
android:background="#drawable/buttonmarket"
android:text="#string/button_top10"
/>
<Button
android:id="#+id/recommended"
android:layout_height="50dip"
android:layout_width="fill_parent"
android:layout_weight="1"
android:background="#drawable/buttonmarket"
android:text="#string/button_recommended"
/>
</LinearLayout>
<ListView
android:id="#+id/citieslist"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/cities_button_layout"
/>
</RelativeLayout>
You have android:orientation on your RelativeLayout, which isn't actually an attribute that RelativeLayout contains.
You should use the layout_weight attribute rather than hardwiring sizes for the Buttons. In my example, all buttons have a width of fill_parent, and a weight of 1. This makes them distribute the space evenly.
List the fixed button layout first, setting it to alignParentBottom="true". Then set the ListView to fill_parent, and layout_above your button layout. This keeps the button layout at the bottom, and makes the ListView take all the space above your buttons.
Tada!