I have android layout with three parts (imageview, textview, imageview) and I want the last part move to right side, now its near the second element.
My code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/menu_button_bg"
android:orientation="horizontal"
android:paddingLeft="13dp" >
<ImageView
android:id="#+id/menuItemIcon"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginBottom="13dp"
android:layout_marginRight="13dp"
android:layout_marginTop="13dp"
android:contentDescription="#string/menuItemDesc"
android:gravity="center_vertical" />
<TextView
android:id="#+id/menuItemTitle"
android:layout_width="wrap_content"
android:layout_height="70dp"
android:gravity="center_vertical"
android:textSize="16sp" >
</TextView>
<ImageView
android:id="#+id/menuItemIconRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="13dp"
android:layout_marginRight="13dp"
android:layout_marginTop="13dp"
android:layout_weight="0.1"
android:contentDescription="#string/menuItemDesc"
android:gravity="right" />
</LinearLayout>
You can give the TextView the following attributes:
android:layout_width="0dp"
android:layout_weight="1"
This will make the TextView stretch to use up the space between the two ImageViews. The other alternative is to use a RelativeLayout instead of a LinearLayout, but this should work for your needs.
Related
I have the xml code shown below. Everything is working as it should except the final textView( id locationTextView) which won't stay right. I want it to stay as right as possible, but I can't do that(it still appears straight after the linear Layout).Should I set a left margin?. And for the textView1 how can I make it to show only a certain part of the whole text, because I have texts of different lengths and they ruin the layout.
<?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="#color/product_list_item_bg"
android:descendantFocusability="blocksDescendants">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:id="#+id/icon"
android:layout_width="72dip"
android:layout_height="72dip"
android:layout_margin="3dip"
android:adjustViewBounds="true"
android:contentDescription="#string/descr_image"
android:scaleType="centerCrop" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"
android:padding="2dp"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#33CC33" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="TextView" />
</LinearLayout>
<TextView
android:gravity="right"
android:layout_width="72dip"
android:layout_height="72dip"
android:layout_marginTop="0dp"
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="#+id/locationTextView"
android:layout_gravity="right" />
</LinearLayout>
</RelativeLayout>
Try android:layout_weight="1" or some other value for your locationTextView. You can also try out android:weightSum="3" (or that is appropriate instead of 3) on your root LinearLayout. Assign proper weights to your different child views. You can get help here
For showing text in a presentable way, you could use android:ellipsize="marquee" or other options available.
This is edited version! I'm new to programming Android apps and I think that this is really difficult, not the java but ui. I am trying to get a list of categories. They can be checkboxes with textview inside the listView or something else. Idea is that an user can just press the boxes/tags/checkboxes/buttons, multiselect. I ended up with checkboxes, because it felt the easiest way, any suggestions how to get easiest solution for end users? User can add categories of his own, so the last row is like button where user can add new categories.
PROBLEM
How can I get a layout where those category checkboxes not overlap settings bar, buttons etc.
Partly solved: I changed the framelayout to LinearLayout and I changed my splash image from imageView to android:background to layout. Now I can see everything but the order is not right. If I move topframe to top (where it should be), I got the error message like this:
ERROR:
java.lang.ClassCastException: android.widget.LinearLayout cannot be cast to android.widget.Button
ACTIVITY.xml
<LinearLayout
android:id="#+id/buttonContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom"
android:orientation="vertical" >
<Button
android:id="#+id/category"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_marginBottom="5dp"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:background="#drawable/white_button"
android:minHeight="40dp"
android:text="#string/category"
android:textColor="#ffffff"
android:textStyle="bold" />
<Button
android:id="#+id/tak"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:background="#drawable/white_button"
android:minHeight="40dp"
android:text="#string/take"
android:textColor="#ffffff"
android:textStyle="bold" />
<Button
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_marginBottom="5dp"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:background="#drawable/white_button"
android:minHeight="40dp"
android:text="#string/list"
android:textColor="#ffffff"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:id="#+id/topframe"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#99a8b3b9" >
<Button
android:id="#+id/settings_button"
android:layout_width="43dp"
android:layout_height="37dp"
android:background="#drawable/ic_sysbar_quicksettings" />
<TextView
android:id="#+id/top_category"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:text="#string/no_category_text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#FFFFFF" />
</LinearLayout>
Don't use a FrameLayout to build an UI like this. A FrameLayout puts all childs in the top left corner, that's why your views are overlapping. What I have seen a LinearLayout with vertical orientation should do the job.
Use one like this for example:
<LinearLayout
...
android:orientation="vertical">
...
<LinearLayout
android:id="#+id/topframe"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#99a8b3b9" >
<Button
android:id="#+id/settings_button"
android:layout_width="43dp"
android:layout_height="37dp"
android:background="#drawable/ic_sysbar_quicksettings" />
<TextView
android:id="#+id/top_category"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:text="#string/no_category_text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#FFFFFF" />
</LinearLayout>
<ListView
android:id="#+id/listView1"
android:layout_width="fill_parent"
android:layout_height="377dp" >
</ListView>
...
</LinearLayout>
In a vertical linear layout, I have 2 textviews, then a button and then a frame layout.
I would like the button to be on the left of the frame layout. I tried putting the button in a relative layout, but how do I tell the frame layout to be on the right?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/content_container_white"
android:orientation="vertical" >
<TextView
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="30dp"
android:text="#string/t0"
android:textColor="#color/black"
android:textSize="30dp" />
<TextView
android:id="#+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/t1"
android:textColor="#color/black" />
<RelativeLayout
android:id="#+id/RelativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/buybtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_marginLeft="30dp"
android:text="#string/buy_button" />
</RelativeLayout>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|right"
android:layout_marginTop="10dp" >
<ImageButton
android:id="#+id/videothumb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:src="#drawable/button_play_on" />
<ImageView
android:id="#+id/videothumbimage"
android:layout_width="380dp"
android:layout_height="170dp"
android:scaleType="centerCrop"
android:src="#drawable/demo_thumb_home" />
</FrameLayout>
</LinearLayout>
You can do it by simply telling your FrameLayout android:layout_toRightOf="#+id/#+id/buybtn", but your FrameLayout must be inside a RelativeLayout too.
<RelativeLayout
android:id="#+id/RelativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/buybtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_marginLeft="30dp"
android:text="#string/buy_button" />
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|right"
android:layout_marginTop="10dp"
android:layout_toRightOf="#+id/#+id/buybtn" >
<ImageButton
android:id="#+id/videothumb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:src="#drawable/button_play_on" />
<ImageView
android:id="#+id/videothumbimage"
android:layout_width="380dp"
android:layout_height="170dp"
android:scaleType="centerCrop"
android:src="#drawable/demo_thumb_home" />
</FrameLayout>
</RelativeLayout>
Push FrameLayout into RelativeLayout or just put button and frame together in horizontal LinearLayout - what would be more simple
ps - kepp your code clean, use ctrl+shift+F (if using Eclipse) to auto-arrange it
Put your framelayout within Relativelayout and then set property align parent right.
The question makes no sense. From the documentation:
FrameLayout is designed to block out an area on the screen to display a single item.
Emphesis mine.
If you want your layout to contain more than one item, do not use a frame layout. Use something else.
Shachar
Having a lot of trouble getting an icon to huddle into the position I want it in. I looked at 3 different Stack Overflow questions and tried placing the image in a RelativeLayout, LinearLayout, and a TableRow. All with various XML options. Never managed to get the icon to go right and center itself between top and bottom of the allotted space. In the pic below, red is where it is now, blue is where I want it. Here's a pic (of how it looks now, which is incorrect) and the code (imageView1 is what I want to align):
And the code:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:id="#+id/loginScrollView">
<TableLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="vertical"
android:padding="5dp">
<ImageView android:id="#+id/logoImageView"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:src="#drawable/logo" android:contentDescription="#string/app_name" />
<TextView android:id="#+id/demoTextView"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="#string/logDetails" android:gravity="center_horizontal|center" />
<EditText android:id="#+id/emailEditText"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:hint="#string/loginHint" android:imeOptions="actionNext"
android:inputType="textEmailAddress" android:padding="20dp" />
<EditText android:id="#+id/passEditText"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:hint="#string/password" android:imeOptions="actionDone"
android:inputType="textPassword" android:padding="20dp" />
<TableRow android:id="#+id/rememberTableRow"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<TextView android:id="#+id/rememberTextView"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="#string/rememberDetails" android:layout_gravity="center" />
<CheckBox android:id="#+id/rememberCheckBox"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:padding="20dp" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="showPopup"
android:src="#drawable/abs__ic_menu_moreoverflow_holo_dark" android:layout_weight="1" android:layout_gravity="center|right"/>
</TableRow>
<TableRow android:id="#+id/buttonTableRow"
android:layout_width="match_parent" android:layout_height="wrap_content">
<Button android:id="#+id/registerButton" android:layout_width="0dip"
android:layout_height="wrap_content" android:layout_gravity="bottom"
android:layout_weight="1" android:text="#string/register" />
<Button android:id="#+id/loginButton" android:layout_width="0dip"
android:layout_height="wrap_content" android:layout_gravity="bottom"
android:layout_weight="1" android:text="#string/login" />
</TableRow>
</TableLayout>
</ScrollView>
Here are the SO questions I've already looked at and tried to use as solutions:
Aligning ImageView to right of the layout android
Aligning with center in android with hierarchical Layouts
Android ImageButton not displaying on right side of the screen
There are multiple options, as far as I can tell. I'll give you two:
First option is to set a scaletype on the ImageView containing the overflow icon. You make it take up all remaining available space and set the scaletype to fitEnd. This will position the icon all the way at the right.
<ImageView android:id="#+id/imageView1"
android:layout_width="0dp" android:layout_height="wrap_content"
android:layout_gravity="center_vertical" android:scaleType="fitEnd"
android:layout_weight="1" android:onClick="showPopup"
android:src="#drawable/abs__ic_menu_moreoverflow_normal_holo_dark" />
You can accomplish the same effect by setting a weight of 1 on the CheckBox, which will make it 'push' the ImageView with the overflow icon all the way to the right (thanks to a TableRow behaving similarly to a LinearLayout). You can then simply make the ImageView wrap its content. You may want to double check if there are no weird side effects to the clickable region in this case though.
<TableRow android:id="#+id/rememberTableRow"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<TextView android:id="#+id/rememberTextView"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="center" android:text="#string/rememberDetails" />
<CheckBox android:id="#+id/rememberCheckBox"
android:layout_width="0dp" android:layout_height="wrap_content"
android:layout_weight="1" android:padding="20dp" />
<ImageView android:id="#+id/imageView1"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="center_vertical" android:onClick="showPopup"
android:src="#drawable/abs__ic_menu_moreoverflow_normal_holo_dark" />
</TableRow>
I want to lay two TextView to the left, and one button to the right inside a linear layout, is this possible?
The following is my code where I had to hardcode the leftMargin of the button, this is inflexible. Is it possible to layout children that flows in different directions?
<LinearLayout
android:id="#+id/widget43"
android:layout_width="fill_parent"
android:layout_height="100px"
>
<TextView
android:id="#+id/tc_buttom_text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Time elapsed"
>
</TextView>
<TextView
android:id="#+id/tc_buttom_text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="00:00:00 00"
>
</TextView>
<Button
android:id="#+id/tc2_home"
android:layout_width="70px"
android:layout_height="wrap_content"
android:layout_marginLeft="200px"
android:layout_marginRight="10px"
android:text="Home"
android:layout_weight="0.5"
>
</Button>
</LinearLayout>
I want to lay two TextView to the
left, and one button to the right
inside a linear layout, is this
possible?
Not with a single LinearLayout. You either need two LinearLayouts (one for a column of two TextViews on the left), or one RelativeLayout.
Is it possible to layout children that
flows in different directions?
If by "different directions" you mean both vertical and horizontal simultaneously, a single LinearLayout can only go in one direction. Either use nested LinearLayouts or a RelativeLayout.
Either use two linear layout(one with horizontal orientation and other with vertical orientation) or use Relative Layout. Relative Layout is stronger than linear and easy to use
You need to use Table layout. look at table layout example in API demos.
Table layout - with 'stretch columns' = 1,
-- Table row - with width = fill_parent,
-- Text View,
-- Text View,
-- Button,
This will keep your right button pushed to the right edge of the screen
Use Following:
<LinearLayout
android:id="#+id/widget43"
android:layout_width="fill_parent"
android:layout_height="100px"
android:layout_margin="16dp"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/tc_buttom_text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Time elapsed"></TextView>
<TextView
android:id="#+id/tc_buttom_text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="00:00:00 00"></TextView>
</LinearLayout>
<Button
android:id="#+id/tc2_home"
android:layout_width="70px"
android:layout_height="wrap_content"
android:layout_marginLeft="200px"
android:layout_marginRight="10px"
android:layout_weight="0.5"
android:text="Home"></Button>
</LinearLayout>
For More Android Layouts Tutorial and Example: http://www.viralandroid.com/2015/11/android-layouts.html
LinearLayout has an orientation attribute. Try something like this:
<LinearLayout
android:id="#+id/widget43"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="100px"
>
I use two LinearLayouts like this:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="#0099cc"
tools:context=".FullscreenActivity">
<!-- The primary full-screen view. This can be replaced with whatever view
is needed to present your content, e.g. VideoView, SurfaceView,
TextureView, etc. -->
<TextView
android:id="#+id/fullscreen_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:keepScreenOn="true"
android:text="#string/dummy_content"
android:textColor="#33b5e5"
android:textSize="50sp"
android:textStyle="bold" />
<!-- This FrameLayout insets its children based on system windows using
android:fitsSystemWindows. -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/background_dark"
android:fitsSystemWindows="true">
<LinearLayout
android:id="#+id/fullscreen_content_controls"
style="?metaButtonBarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:background="#color/black_overlay"
android:baselineAligned="false"
android:orientation="vertical"
tools:ignore="UselessParent">
<LinearLayout
android:id="#+id/fullscreen_choose_controls"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:id="#+id/fullscreen_esop"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:text="#string/vs_esop"
android:textAllCaps="false"
android:textColor="#android:color/holo_blue_dark"
android:textSize="50sp"
android:textStyle="bold" />
<Button
android:id="#+id/dummy_button"
style="?metaButtonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="0.3"
android:ellipsize="end"
android:gravity="center"
android:text="#string/dummy_button"
android:textColor="#android:color/holo_red_dark"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="#+id/fullscreen_android"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:text="#string/vs_android"
android:textAllCaps="false"
android:textColor="#android:color/holo_blue_dark"
android:textSize="50sp"
android:textStyle="bold" />
</LinearLayout>
<TextView
android:id="#+id/fullscreen_make_your_choice"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:text="#string/vs_make_your_choice"
android:textColor="#android:color/holo_red_dark"
android:textSize="50sp"
android:textStyle="bold" />
</LinearLayout>
</FrameLayout>
</FrameLayout>
Demo