I am developing an Android application for the SPen . I am having some trouble getting the bottom menu within a LinearLayout to show up below the SCanvasView within a ReletiveLayout. It must be an attribute I set within canvas_container since I can show the bottom menu when I set the height of the canvas_container to a specific size.
The attribute I am giving the bottom menu is android:layout_alignParentBottom="true".
To simplify the layout: I just want a menu bar on top and the bottom (both containing ImageViews) and the space in between them to be filled with a SCanvasView and an ImageView (both the same size).
Here is some simplified code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:id="#+id/menu1"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:gravity="left"
android:id="#+id/iv_top1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/topimage1"
android:layout_weight=".25"/>
<ImageView
android:gravity="left"
android:id="#+id/iv_top2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/topimage2"
android:layout_weight=".25"/>
</LinearLayout>
<LinearLayout
android:id="#+id/menu4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="1.0"
android:layout_alignParentBottom="true">
<ImageView
android:gravity="left"
android:id="#+id/iv_bottom1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/bottomimage1"
android:layout_weight=".25"/>
<ImageView
android:gravity="left"
android:id="#+id/iv_bottom1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/bottomimage1"
android:layout_weight=".25"/>
</LinearLayout>
<RelativeLayout
android:id="#+id/canvas_container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.samsung.spensdk.SCanvasView
android:id="#+id/canvas_view"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
<ImageView
android:id="#+id/imgView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"/>
</RelativeLayout>
</RelativeLayout>
I think I misunderstood but a LinearLayout with vertical orientation would probably be better in this situation. This way you can use weightSum. Set the weightSum to 4 then the weight of each LinearLayout for the menus to 1 and the RelativeLayout weight to 2 or adjust that according to what you want.
Also note that RelativeLayout doesn't have an orientation property. And when using weights and weightSum you want your width for each View to be 0 dp for horizontal orientation and height set to 0dp for vertical orientation
Related
I am using the following layout:
<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="wrap_content"
android:layout_margin="2dp"
android:layout_marginTop="10dp"
android:background="#drawable/cardview_shadow"
android:elevation="2dp"
android:gravity="center_vertical"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:gravity="fill_horizontal"
android:orientation="horizontal">
<ImageView
android:id="#+id/ic_find_previous_holo_dark"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="left"
android:src="#drawable/ic_find_previous_holo_dark" />
<ViewFlipper xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/view_flipper"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/emoji_u1f33c" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/emoji_u1f33c" />
</ViewFlipper>
<ImageView
android:id="#+id/ic_find_next_holo_dark"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right"
android:src="#drawable/ic_find_next_holo_dark" />
</LinearLayout>
</LinearLayout>
I want left arrow to the left & right arrow to the right & center layout to fill the center gap without giving exact width in dp, px etc but i m not able to achieve this layout. i need this type of layout most of the time
In your case you need to give android:layout_weight=1 to your ViewFlipper So that it can take rest of the space left by your other 2 image views (Will push both views to the sides since ViewFlipper is the middle view). A better explanation is given here https://developer.android.com/guide/topics/ui/layout/linear.html check the Layout Weight section.
I have a relative layout that sits at the bottom of screen
It has 3 elements horizontal
firstElement - fixed width
middleElement - width as fill_parent
last element - fixed width
MiddleElement is edit text with maxLines = 5. It starts with fixed width and then expands as typed.
With the layout below, I use center_vertical for left/right and they adjust accordingly to center.
My goal is to keep left/right elements to bottom while the edit text expands. I could not make it work,
Below is just one example of layout I tried. I have tried align_parentBottom, layout_gravity=bottom, gravity=bottom.
I could not make it work.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/bottomComponent"
android:background="#color/red"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="50dp">
<LinearLayout
android:background="#color/green_theme"
android:id="#+id/firstElement"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:gravity="center"
android:clickable="true"
android:layout_width="50dp"
android:layout_height="50dp">
<LinearLayout
android:gravity="center"
android:orientation="vertical"
android:layout_gravity="center"
android:layout_width="20dp"
android:layout_height="20dp">
<ImageView
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter"
android:src="#drawable/firstImage" />
</LinearLayout>
</LinearLayout>
<EditText
android:id="#+id/middleElement"
android:layout_centerVertical="true"
android:layout_marginTop="7.5dp"
android:layout_marginBottom="7.5dp"
android:maxLines="5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:minHeight="35dp"
android:layout_toLeftOf="#+id/lastElement"
android:layout_toRightOf="#+id/firstElement"
android:paddingLeft="6dp"
android:paddingRight="0dp"/>
<Button
android:id="#+id/lastElement"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_width="65dp"
android:layout_height="50dp"
android:textColor="#color/title_gray"
android:background="#color/green_theme"
android:textSize="18dp"
android:textAllCaps="false"
android:text="#string/lastElement" />
</RelativeLayout>
Ok this post solved my issue Android LinearLayout fill-the-middle
What I did not know that for linearlayout layout_weight=1 will work as fill_parent in relative layout
I don't know how to align 3 elements side by side. I would like to have :
One view with a thin width on the left
One linearLayout with text content on the middle
One imageView always on the right
Like this :
And today, i got this :
Here is my code :
<?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:background="#color/gris_clair"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#color/blanc" >
<View
android:id="#+id/view1"
android:layout_width="7dp"
android:layout_height="90dp"
android:background="#color/green_normal" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<ImageView
android:id="#+id/imageView1"
android:layout_width="80dp"
android:layout_height="90dp"
android:layout_gravity="right"
android:scaleType="centerCrop"
android:src="#drawable/test2" />
</LinearLayout>
</LinearLayout>
You can simplify your layout by setting the root LinearLayout to a horizontal orientation:
<?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="wrap_content"
android:background="#color/gris_clair"
android:layout_margin="5dp"
android:orientation="horizontal" >
<View
android:id="#+id/view1"
android:layout_width="7dp"
android:layout_height="match_parent"
android:background="#color/green_normal" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="TextView" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="80dp"
android:layout_height="90dp"
android:layout_gravity="right"
android:scaleType="centerCrop"
android:src="#drawable/test2" />
</LinearLayout>
You may want to tweak the colors or sizes to fit your desired end result.
I set the parent View's height to wrap the content, first two Views to match the parent view's height and the image to your size. This means that your image will decide the parent View's height.
If you want to evenly space/scale the views horizontally on your screen and use up all the space they have available you should look at the android:layout_weight attribute. You would set android:layout_width="0dp" for each View you want to scale with screen size and add android:layout_weight="x" where x is a number.
The number you choose will depend on how you want to divide up the available space each View will use. As an example if you wanted one View to use 1/3rd of the available space with a second using 2/3rds then set the first to 1 and the second to 2. 1+2=3 so 1 of a total 3 units and 2 of a total 3 units.
For your textview use weight to fill up space:
<TextView
android:id="#+id/textView1"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView" />
You can use relative layout for that. and for the image view add alignparentright rule.
<RelativeLayout >
<View />
<LinearLayout/>
</LinearLayout>
<ImageView
android:alignParentRight="true" />
</RelativeLayout>
or use the weight for linearlayout, put 1 for textview and rest 0.
You can easy solve this problem using weight in LinearLayout, or make your parent RelativeLayout and place middle layout toLeftOf your left view and toRightOf your right view.
You can use relative Layout instead of linear layout to design custom design of your page.
It might help you.
<?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:background="#color/gris_clair"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#color/blanc" >
<View
android:id="#+id/view1"
android:layout_width="7dp"
android:layout_height="90dp"
android:background="#color/green_normal" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView1"
android:layout_width="80dp"
android:layout_height="90dp"
android:scaleType="centerCrop"
android:src="#drawable/test2"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
</LinearLayout>
check this it might help you
I am creating a layout as below but the checkbox element is not visible on the scren where am i goign wrong ?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<SeekBar android:id="#+id/seek"
android:layout_width="300dip"
android:layout_height="wrap_content"
android:progress="50"/>
...and a few more elements here.
</LinearLayout>
<CheckBox android:id="#+id/CheckBox"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="somestring" />
</LinearLayout>
The LinearLayout before the CheckBox has its height set to MATCH_PARENT(and it fills all the parent's height) and the parent LinearLayout of both has the orientation set to vertical so the CheckBox is pushed out of the screen.
Set the height of the LinearLayout containing the SeekBar to WRAP_CONTENT for example.
You need to set your inner Linear Layout's height and width to wrap content.
Try this.
<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="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<SeekBar
android:id="#+id/seek"
android:layout_width="300dip"
android:layout_height="wrap_content"
android:progress="50" />
</LinearLayout>
<CheckBox
android:id="#+id/CheckBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="somestring" />
</LinearLayout>
Try This :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:weightSum="10" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="9"
android:orientation="horizontal" >
<SeekBar
android:id="#+id/seek"
android:layout_width="300dip"
android:layout_height="wrap_content"
android:progress="50" />
</LinearLayout>
<CheckBox
android:id="#+id/CheckBox"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="somestring" />
</LinearLayout>
In your layout chose one element that you want to be flexible in size, say height wise. Then make its height="0dp" and weight="1". Make heights of rest of elements: height="wrap_content".
Also you may have given discreet size of some dp to your other elements, and hence their total height runs out of available screen space OR there are too many elements that they go beyond your screen height. In this case, wrap your layout in a ScrollView.
change your LinerLayout definition it cannot be android:layout_height="match_parent"
<LinearLayout android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1">
if you set match_parent for linearlayout it consumes all content so wrap_content is better.
But if you set it as I wrote checkbox will be at bottom page a linearlayout will consumes remaing part of screen.
I have the following layout for a custom title bar. However, the problem is this: both the imageview and the imagebutton are coming at the centre. I was expecting the imagebutton to be at the extreme right. Can anyone kindly let me know what I did wrong here ? Thanks.
<?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="35dip"
android:gravity="center_vertical"
android:paddingLeft="5dip"
android:background="#323331">
<ImageView
android:src="#drawable/header"
android:id="#+id/header"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:gravity="center_horizontal">
</ImageView>
<ImageButton
android:id="#+id/saveButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/savetap"
android:background="#null"
android:gravity="right"
android:layout_above="#+id/header">
</ImageButton>
</LinearLayout>
Your layout is only 35dip tall, so pressumibly if you show your ImageView the ImageButton gets positioned outside the screen. Consider changing your layout_height to wrap_content, if appropiate.
You're using a vertically oriented LinearLayout, all View will be presented in a vertical fashion. Use a RelativeLayout so that you'll have more control over where Views are positioned. If you'd still like to use a LinearLayout, you'll have to use horizontal orientation so that the Views can be on the same "line".
Use layout_gravity to layout the item to the right, just gravity is used by the contents of the view.
At first if width is set to fill parent it really fills parent so it use all the width.
Second: why not RelativeLayout? It provides more options and control.
Maybe this is what you looking for:
`
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="35dip"
android:gravity="center_vertical"
android:paddingLeft="5dip"
android:background="#323331">
<ImageView
android:src="#drawable/header"
android:id="#+id/header"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="left">
</ImageView>
<ImageButton
android:id="#+id/saveButton"
android:layout_height="wrap_content"
android:src="#drawable/savetap"
android:background="#null"
android:layout_marginLeft="20dp"
android:layout_width="wrap_content" android:layout_alignParentRight="true">
</ImageButton>
</RelativeLayout>
`