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:
Related
need to give margin for each grid. given below grid single view. am using this view in each grid here i need to get 2dp margin between all grids. when i use android:layout_margin = "2dp" there occurs a problem for inner grids there will be about 4dp(2dp+2dp)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:orientation="vertical"
android:gravity="center"
android:background="#ffffff">
<ImageView
android:id="#+id/grid_image"
android:layout_width="50dp"
android:layout_gravity="center"
android:layout_height="50dp"
>
</ImageView>
<TextView
android:id="#+id/grid_text"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:textSize="9sp"
android:textColor="#android:color/black"
>
</TextView>
</LinearLayout>
If you are using Gridview than normally add horizontalSpacing and verticalSpacing.
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/albums_gridView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:choiceMode="singleChoice"
android:horizontalSpacing="20dp"
android:listSelector="#android:color/transparent"
android:numColumns="2"
android:overScrollMode="never"
android:scrollbars="none"
android:verticalSpacing="20dp" />
Or what are you using as parent grid view ?
So you just want to have 2dp margin between one grid and another one and not 4dp?
What if you put android:layout_marginTop="2dp" at you LinearLayout.
a i think i am getting it, did you try to put 1dp margin to each Content item and 1dp margin to the linear layout? so they should end up right 2dp at the outer grid and 2 at the inner
I have a list and I want on the left part of a list item to show an image and on the right of the image
a series of widgets aligned vertically, one of which is an include:#layout
Having a relative layout I can add widgets using layout to right of the pic but:
1) I can not align the linear layout to the right of pic as there seems to be no such attribute
2) Without nesting the widgets in a linear layout and placing them only just to the right of the pick and one of top of the other I can not place the include:#layout where I want as it does not have a layout_bellow etc attribute.
How can I create such layouts?
Update:
++++++++ ++++++++++++++++++++
+IMAGE + TEXTVIEW +
+ + LAYOUT FILE +
+ + TEXTVIEW+
+++++++++++++++++++ TEXTVIEW+
UPDATE:
<?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/thumb"
android:layout_alignParentLeft="true"
/>
<TextView
android:id="#+id/friend_name”
android:layout_toRightOf="#id/thumb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill_horizontal"
android:gravity="top"
/>
<ViewStub
android:id="#+id/stub_friend_status”
android:inflatedId="#+id/friend_status”
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/thumb"
android:layout_below="#id/friend_name"
android:layout="#layout/friend_status”/>
<TextView
android:id="#+id/latest_date”
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/stub_friend_status"
android:layout_toRightOf="#id/thumb"
/>
<ViewStub
android:id="#+id/stub_general_info”
android:inflatedId="#+id/general”
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#id/latest_date"
android:layout_alignParentBottom="true"
android:layout="#layout/general_info”/>
</RelativeLayout>
Here is layout, you can make left/right part equally, left part put image and right part you can put layout vertically:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
//left part
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
>
<FrameLayout
android:id="#+id/image_frame"
android:layout_width="img_width"
android:layout_height="img_height"
android:gravity="center"
>
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/your_img"/>
</FrameLayout>
</LinearLayout>
//right part
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1"
android:gravity="center_vertical"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/view_1"
... ...
android:layout_gravity="left"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/view_2"
... ...
android:layout_gravity="left"
/>
... ...
</LinearLayout>
</LinearLayout>
If you want left part smaller than right, then you can change the layout_weight of left/right as 1/2 or 2/3 ...
Hope this help!
My current layout looks the following:
MY XML layout looks like:
<?xml version="1.0" encoding="utf-8"?>
<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="vertical" >
<TextView
android:id="#+id/tvLetter"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="5dp"
android:layout_weight="3"
android:text=""
android:gravity="center"
android:textSize="#dimen/letter_size"
android:textColor="#FFFFFF"
android:background="#drawable/bd" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="5dp"
android:layout_weight="1" >
<Button
android:id="#+id/colorButton"
android:layout_width="#dimen/btn_action"
android:layout_height="#dimen/btn_action"
android:layout_centerInParent="true"
android:background ="#drawable/colors"
android:layout_alignParentLeft="true" />
<Button
android:id="#+id/soundButton"
android:layout_width="#dimen/btn_action"
android:layout_height="#dimen/btn_action"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:background="#drawable/sound" />
<Button
android:id="#+id/eraserButton"
android:layout_width="#dimen/btn_action"
android:layout_height="#dimen/btn_action"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:background="#drawable/eraser" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="5dp"
android:layout_weight="2" >
<ImageView
android:id="#+id/ivIcon"
android:layout_width="#dimen/letter_icon"
android:layout_height="#dimen/letter_icon"
android:scaleType="fitXY"
android:layout_alignParentLeft="true"
android:background="#drawable/zebra" />
<LinearLayout
android:id="#+id/actionHolder"
android:layout_toRightOf="#+id/ivIcon"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
android:id="#+id/wordSound"
android:layout_width="#dimen/btn_action"
android:layout_height="#dimen/btn_action"
android:background="#drawable/sound" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
My #dimen/letter_icon is being used for different sizes based on the screen size. I am trying to make it compatible with both phone and tablet (different size screen). How do I achieve the following in my layout:
Let's say the ZEBRA text is inside a textview and the sound is in a button.
I am thinking the bottom ImageView has to be inside another layout, linearleayout maybe? and take up 3/4 of the space of the screen width.
Put your ZEBRA and SPEAKER buttons in vertical LinearLayout. Set buttons' height to match_parent and layout_weight to 1 and you should have what you want
and if you want to distribute width among your buttons' container and ImageView, set them width to match_parent and play with layout_weight there.
I'm trying to have a VideoView fixed on the upper left with a TextView immediately to the right of it. Below both of those I want a scrollable list of checkboxes, and below that two buttons "prev" and "next". The VideoView and TextView should not scroll, just the checkboxes and buttons. I can't seem to make this work with Linear layouts so i tried RelativeLayout but it seem kinda clunky because I'm hard coding all the relative stuff. What's the best way of laying out this type of thing?
thanks,
Justin
Here is a basic layout that fits your description:
<?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" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<VideoView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<CheckBox android:id="#+id/chk1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<CheckBox
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/chk1"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>
</ScrollView>
</LinearLayout>
If the VideoView is to big maybe you'll want to limit the space available to it by using the 0dp value and layout_weight attribute on the enclosing LinearLayout.
My layout design is a TextView with long text and a ImageView to the right of the TextView. I want to center the ImageView in its parent vertically, so I used android:layout_centerVertical="true", but it turned out that the ImageView was aligned to the bottom of its parent. If I don't use layout_centerVertical property, the ImageView will be aligned to the top of its parent. How can I solve this problem? Thanks.
<?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="wrap_content"
android:background="#000000">
<ImageView android:id="#+id/t3" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:src="#drawable/arrow_right"
android:layout_alignParentRight="true" android:background="#ff0000"
android:layout_centerVertical="true" android:scaleType="centerInside" />
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="This a very very very very very very very very very very very very very very very very long sentence"
android:textColor="#231ACC" android:layout_toLeftOf="#id/t3" />
</RelativeLayout>
Try android:layout_gravity="center_vertical"
Add this xml attribute to the child you wish to center within it's parent:
android:layout_centerInParent="true"
This will center it vertically/horizontally.
change android:layout_height="wrap_content" to android:layout_height="fill_parent" of RelativeLayout and add android:layout_centerVertical="true" to TextView, it will work like charm.
You could use a LinearLayout with layout_width and layout_height set to fill_parent and gravity set to vertical_center.
Something like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_vertical|center_horizontal"
android:orientation="horizontal">
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/input_field"
android:gravity="left"
android:layout_weight="1"
android:text="Left Aligned"/>
<EditText
android:id="#+id/input_field"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:layout_weight="1"
android:text="Right Aligned"/>
</LinearLayout>
</LinearLayout>
This will put your image to the vertical center of it's parent:
android:layout_gravity="center_vertical"
Demo:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="64dp"
android:orientation="horizontal">
<ImageView
android:layout_width="48dip"
android:layout_height="48dip"
android:src="#drawable/ic_launcher"
android:contentDescription="Application icon"
android:layout_gravity="center_vertical" />
</LinearLayout>
Simply add this:
android:layout_gravity="center_vertical|center_horizontal"
I found this question while building in Android Studio 4.2.1 and the solution after some tinkering was:
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
this way, constraining to both sides automatically centers the widget and satisfies the need for constraints. The same is true when centering vertically, by using:
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"