Put Action Bar like line above buttons and line between two buttons - android

Currently I having some trouble putting a thin line between my two buttons and a line above both of them similar to the one from the action bar.
Right now my buttons looks like this:
I am trying to get this:
Not exactly sure what to do. I am trying to implement this but no luck:
android how to make some space between buttons and make white line above each of them
Here is my xml file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:id="#+id/block_button"
style="?android:attr/borderlessButtonStyle"
android:layout_width="170dp"
android:layout_height="100dp"
android:layout_weight="1"
android:drawableLeft="#drawable/ic_action"
android:gravity="center_horizontal|center_vertical"
android:text="#string/block_apps"
android:textSize="20sp"
android:layout_alignTop="#+id/start_button"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
<Button
android:id="#+id/start_button"
style="?android:attr/borderlessButtonStyle"
android:layout_width="170dp"
android:layout_height="100dp"
android:layout_gravity="right"
android:layout_weight="1"
android:drawableLeft="#drawable/ic_timer"
android:gravity="center_horizontal|center_vertical"
android:text="#string/start_apps"
android:textSize="20sp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>

you just have to draw a line with width set to 1 and height to match_parent`
<LinearLayout
android:layout_marginTop="20sp"
android:orientation="horizontal"
android:background="#color/app_yellow"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:gravity="center"
android:layout_width="0sp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Login"
android:id="#+id/btnlogin"
android:layout_gravity="center_vertical"
android:background="#color/app_yellow"
android:textColor="#color/white"
android:onClick="Login"
android:stateListAnimator="#null"
/>
<View
android:background="#ffffff"
android:layout_marginTop="4sp"
android:layout_marginBottom="4sp"
android:layout_width="1sp"
android:layout_height="match_parent"/>
<Button
android:layout_width="0sp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Register"
android:id="#+id/button7"
android:background="#color/app_yellow"
android:layout_gravity="center_vertical"
android:textColor="#color/white"
android:onClick="goDash"
android:stateListAnimator="#null"
/>
</LinearLayout>`

Use FrameLayout as delimiter.
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#dddddd"
android:layout_marginBottom="5dp">
</FrameLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button"
android:layout_weight="1"/>
<FrameLayout
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#dddddd"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp">
</FrameLayout>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button2"
android:layout_weight="1"
/>
</LinearLayout>
</LinearLayout>

Related

how to implement this layout design where views are on top of another view

I have to code a layout, where on the view overlaps on another view.
In the design when I click on bt1 Linearlayout will we visible on exactly below the bt1 with small animation. I can design the animation and everything of the layout except on a thought how to put the LinearLayout on bt3 and bt4.
<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"
android:background="#drawable/background">
<TableLayout
android:id="#+id/lv1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/custom_toolbar"
android:layout_marginTop="5dp"
android:orientation="horizontal">
<TableRow>
<Button
android:id="#+id/bt1"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_marginEnd="2.5dp"
android:layout_marginStart="3dp"
android:layout_weight="1"
android:background="#color/darkgrey"
android:fontFamily="#font/brandon_re"
android:text="button1"
android:textColor="#color/defaultWhite"
android:textSize="15dp" />
<Button
android:id="#+id/bt2"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_marginEnd="3dp"
android:layout_marginStart="2.5dp"
android:layout_weight="1"
android:background="#color/darkgrey"
android:fontFamily="#font/brandon_re"
android:text="button2"
android:textColor="#color/defaultWhite"
android:textSize="15dp" />
</TableRow>
</TableLayout>
<LinearLayout
android:id="#+id/lv2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/lv1"
android:layout_alignBottom="#+id/lv1">
<TextView
android:layout_width="match_parent"
android:layout_height="130dp"
/>
</LinearLayout>
<Button
android:id="#+id/bt3"
android:layout_width="match_parent"
android:layout_height="35dp"
android:layout_marginEnd="3dp"
android:layout_marginStart="2.5dp"
android:layout_weight="1"
android:background="#color/darkgrey"
android:fontFamily="#font/brandon_re"
android:layout_below="#+id/lv1"
android:layout_marginTop="20dp"
android:text="button3"
android:textColor="#color/defaultWhite"
android:textSize="15dp" />
<Button
android:id="#+id/bt4"
android:layout_width="match_parent"
android:layout_height="35dp"
android:layout_marginEnd="3dp"
android:layout_marginStart="2.5dp"
android:layout_weight="1"
android:background="#color/darkgrey"
android:fontFamily="#font/brandon_re"
android:layout_below="#+id/bt3"
android:layout_marginTop="20dp"
android:text="button4"
android:textColor="#color/defaultWhite"
android:textSize="15dp" />
</RelativeLayout>
Use layout_below property of relative layout.
Change your linear layout code to after button code & add buttons inside one layout.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
>
...
/* buttons */
</RelativeLayout>
<LinearLayout
android:id="#+id/lv2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/lv1">
<TextView
android:layout_width="match_parent"
android:layout_height="130dp"
/>
</LinearLayout>
Complete Code
<?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">
<TableLayout
android:id="#+id/lv1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal">
<TableRow>
<Button
android:id="#+id/bt1"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_marginEnd="2.5dp"
android:layout_marginStart="3dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="2.5dp"
android:layout_weight="1"
android:text="button1"
android:textSize="15dp" />
<Button
android:id="#+id/bt2"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_marginEnd="3dp"
android:layout_marginStart="2.5dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="2.5dp"
android:layout_weight="1"
android:text="button2"
android:textSize="15dp" />
</TableRow>
</TableLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<Button
android:id="#+id/bt3"
android:layout_width="match_parent"
android:layout_height="35dp"
android:layout_marginEnd="3dp"
android:layout_marginStart="2.5dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="2.5dp"
android:layout_weight="1"
android:layout_marginTop="20dp"
android:text="button3"
android:textSize="15dp" />
<Button
android:id="#+id/bt4"
android:layout_width="match_parent"
android:layout_height="35dp"
android:layout_marginEnd="3dp"
android:layout_marginStart="2.5dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="2.5dp"
android:layout_weight="1"
android:layout_below="#+id/bt3"
android:layout_marginTop="20dp"
android:text="button4"
android:textSize="15dp" />
</RelativeLayout>
<LinearLayout
android:id="#+id/lv2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
>
<TextView
android:layout_width="match_parent"
android:layout_height="130dp"
/>
</LinearLayout>
</RelativeLayout>
You must use background of overlap layout to see overlaping..
First of all, you have to use more than one layout in your main layout for this purpose.
First, make your parent layout orientation vertical
then
In the first layout design your button.
in the second layout View.

how to stop components in android GUI not to overlap

I am trying to make the image button fix completely on the screen and the spinner. It seems to have a problem with the weight sum and weight layout. I have tried to fix it, but haven't gotten anywhere. This is my code:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context=".ElderActivity"
android:orientation="vertical"
android:weightSum="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/first"
android:background="#ffab7c74"
android:layout_weight="1">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Smart House"
android:id="#+id/textView"
android:gravity="center"
android:autoText="true"
android:textColor="#fffff7f4" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/environment"
android:layout_weight="1"
android:id="#+id/imageButton" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/law"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/spinner"
android:layout_weight="1" />
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/spinner1"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/consumer"
android:layout_weight="1"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/educations"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/spinner2"
android:layout_weight="1" />
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/spinner3"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
[screem shot of screen][1]: https://i.stack.imgur.com/tPFDi.jpg
It is very bad practice to use the weight option, especially if you have weight options in deep hierarchy of layout. For your example you need to use RelativeLayout or even TableLayout.
But if you want a mess up for your bottom part you can use tricky thing like:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<View android:id="#+id/strut"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"/>
<Button
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text1"
android:layout_alignEnd="#id/strut"
android:layout_alignParentStart="true"
/>
<Button
android:id="#+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="#+id/strut"
android:layout_alignParentEnd="true"
android:text="#string/text2"
/>
</RelativeLayout>

Two button one close to other at the bottom of RelativeLayout - Android

I am facing a problem with android layout.
I have a relative layout with a textview and an image overlapped and I would like to add two button at the bottom of the view, one close to other and that fill all the width of the view. Here below the manifest.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
android:orientation="vertical"
android:id="#+id/RecordAccelDataLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:layout_gravity="center"
android:longClickable="false"
android:layout_width="283dp"
android:layout_height="418dp"
android:src="#mipmap/bg_thand"
android:adjustViewBounds="false"
android:alpha="0.1" />
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/rectangle">
<TextView
android:textSize="20sp"
android:gravity="center_horizontal"
android:id="#+id/rec_progress_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:text="#string/title_activity_record_accel_data"
/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.adrenergic.tremorsense.circleGraph
android:layout_gravity="center"
android:id="#+id/progressgraph"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"/>
<TextView
android:textSize="20sp"
android:id="#+id/accelText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/recording"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:textIsSelectable="true"
/>
<Button
android:textColor="#ffffff"
android:layout_width="100dp"
android:id="#+id/back"
android:layout_height="50dp"
android:text="#string/back"
android:layout_gravity="center"
android:layout_marginBottom="3dip"
android:onClick="goBack"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
<Button
android:textColor="#ffffff"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:text="#string/stats"
android:onClick="goBack"
android:id="#+id/stats"
android:layout_marginBottom="3dip"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#+id/back"/>
</RelativeLayout>
</LinearLayout>
</FrameLayout>
The layout appears in this way.
I would like that the two button appear in the same position but centered and that they fill equally the view in width.
Hope you will help me.
Can u modify your button layout impl. with the below sample and try.
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:weightSum="1">
<Button
android:textColor="#ffffff"
android:layout_width="0dp"
android:id="#+id/back"
android:layout_weight="0.5"
android:layout_height="50dp"
android:text="#string/back"
android:layout_gravity="center"
android:layout_marginBottom="3dip"
android:onClick="goBack"/>
<Button
android:textColor="#ffffff"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_weight="0.5"
android:layout_gravity="center"
android:text="#string/stats"
android:onClick="goBack"
android:id="#+id/stats"
android:layout_marginBottom="3dip"/>
</LinearLayout>
Hi you can put buttons in linear layout and align parent bottom:
<?xml version="1.0" encoding="utf-8"?>
<ImageView
android:layout_width="283dp"
android:layout_height="418dp"
android:layout_gravity="center"
android:adjustViewBounds="false"
android:alpha="0.1"
android:longClickable="false"
android:src="#mipmap/bg_thand" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/rectangle"
android:orientation="vertical">
<TextView
android:id="#+id/rec_progress_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:gravity="center_horizontal"
android:text="#string/title_activity_record_accel_data"
android:textSize="20sp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.adrenergic.tremorsense.circleGraph
android:id="#+id/progressgraph"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center" />
<TextView
android:id="#+id/accelText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="#string/recording"
android:textIsSelectable="true"
android:textSize="20sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
<Button
android:id="#+id/back"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:layout_marginBottom="3dip"
android:layout_weight="1"
android:onClick="goBack"
android:text="#string/back"
android:textColor="#ffffff" />
<Button
android:id="#+id/stats"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:layout_marginBottom="3dip"
android:layout_toRightOf="#+id/back"
android:layout_weight="1"
android:onClick="goBack"
android:text="#string/stats"
android:textColor="#ffffff" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
check this it will help.
android:weight is what you may be looking for. Enclose the two buttons inside a linear layout and add android:weight =1 for both of them. An example would be :
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<Button android:id="#+id/button1"
...
android:layout_weight="1"/>
<View
android:id="#+id/space"
...
android:layout_weight=".1"/>
<Button android:id="#+id/button2"
...
android:layout_weight="1"/>
</LinearLayout>
You need to add spacer in in center bottom and align two button to that spacer like this :
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.adrenergic.tremorsense.circleGraph
android:layout_gravity="center"
android:id="#+id/progressgraph"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"/>
<TextView
android:textSize="20sp"
android:id="#+id/accelText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:textIsSelectable="true"
/>
//Aligh Space in center with align to bottom
and set relation of two button to this spacer
<Space
android:layout_width="1px"
android:layout_height="1px"
android:layout_above="#+id/back"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:id="#+id/space"/>
<Button
android:textColor="#ffffff"
android:layout_width="100dp"
android:id="#+id/back"
android:layout_height="50dp"
android:text="Back"
android:layout_gravity="center"
android:onClick="goBack"
android:layout_alignParentBottom="true"
android:layout_alignStart="#+id/accelText"/>
<Button
android:textColor="#ffffff"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:text="Status"
android:onClick="goBack"
android:id="#+id/stats"
android:layout_alignParentBottom="true"
android:layout_toStartOf="#+id/space"/>
</RelativeLayout>
Use this layout changes made with Button added inside Linear Layout and filled it with weight with android:gravity="bottom" and android:orientation="horizontal".
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RecordAccelDataLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="283dp"
android:layout_height="418dp"
android:layout_gravity="center"
android:adjustViewBounds="false"
android:alpha="0.1"
android:longClickable="false"
android:src="#drawable/common_ic_googleplayservices" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/common_ic_googleplayservices"
android:orientation="vertical">
<TextView
android:id="#+id/rec_progress_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:gravity="center_horizontal"
android:text="Progress"
android:textSize="20sp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.adrenergic.tremorsense.circleGraph
android:id="#+id/progressgraph"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center" />
<TextView
android:id="#+id/accelText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="REcording"
android:textIsSelectable="true"
android:textSize="20sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
android:orientation="horizontal"
android:weightSum="1">
<Button
android:id="#+id/back"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_weight="0.50"
android:onClick="goBack"
android:text="Back"
android:textColor="#ffffff" />
<Button
android:id="#+id/stats"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_weight="0.50"
android:onClick="goBack"
android:text="Stats"
android:textColor="#ffffff" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</FrameLayout>

Adding borderless buttons in Android xml with divider

I'm trying to follow the guidelines laid out by the Android team from this document:
https://docs.google.com/file/d/0Bz3qX4EBhUvwZWlHekI3Y0wxSUk/edit
According to the doc I should use these framework resources.
This is my code, but none of the borders show. Any ideas?
<LinearLayout
android:id="#+id/buttonLayout"
style="?android:buttonBarButtonStyle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:divider="?android:dividerVertical"
android:orientation="horizontal"
android:showDividers="middle" >
<Button
android:id="#+id/button1"
style="?android:buttonBarButtonStyle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Test" />
<Button
android:id="#+id/button2"
style="?android:buttonBarButtonStyle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Test" />
</LinearLayout>
Note: I understand there is a similar/exact question, but my resource seems to be more recent, yet the solution presented by the Google team doesn't work.
The top border is a "divider" which separates elements in a linear layout. If your buttons bar is on the bottom of a vertical layout, you have to activate the display of the divider, in the vertical layout. Generally, I do that by adding these attributes:
android:showDividers="middle"
android:divider="?android:dividerHorizontal"
android:dividerPadding="8dp"
The full layout code:
<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:divider="?android:dividerHorizontal"
android:dividerPadding="8dp"
android:orientation="vertical"
android:showDividers="middle" >
<TextView
android:id="#+id/url"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:text="dummyText" />
<LinearLayout
style="?android:buttonBarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/button1"
style="?android:buttonBarButtonStyle"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button1" />
<Button
android:id="#+id/button2"
style="?android:buttonBarButtonStyle"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button2" />
</LinearLayout>
</LinearLayout>
You have the wrong style in LinearLayout. It should be
style="?android:buttonBarStyle"
Not...
style="?android:buttonBarButtonStyle"
Example:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/buttonLayout"
style="?android:attr/buttonBarStyle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Test"/>
<TextView
android:layout_height="wrap_content"
android:text="TextView (Place Holder)"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:layout_margin="15dp"/>
<LinearLayout
style="?android:attr/buttonBarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/button2"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Test"/>
<Button
android:id="#+id/button3"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Test"/>
</LinearLayout>
</LinearLayout>
Example 2 (ListView):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/buttonLayout"
style="?android:attr/buttonBarStyle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ListView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_weight="1.0"/>
<LinearLayout
style="?android:attr/buttonBarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/button2"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Test"/>
<Button
android:id="#+id/button3"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Test"/>
</LinearLayout>
</LinearLayout>
I ran into the same issue following the document. The solution provided by user3055552 will give the middle divider but no top divider when there aren't other views on buttons.
Try:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="?android:attr/dividerVertical"/>
<LinearLayout style="?android:buttonBarStyle"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button style="?android:buttonBarButtonStyle"
android:id="#+id/back"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="#string/back"/>
<Button style="?android:buttonBarButtonStyle"
android:id="#+id/next"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="#string/next"/>
</LinearLayout>
</LinearLayout>
Preview
You can create this without using a button with just color of views.Try this
<LinearLayout
android:id="#+id/bottom_bar"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_alignParentBottom="true"
android:background="#2B1B17" >
<TextView
android:id="#+id/tv_cancel"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="Cancel"
android:textColor="#drawable/text_changepassword_selector"
android:textSize="19sp" />
<View
style="#style/Divider"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp" />
<TextView
android:id="#+id/tv_apply"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="Select"
android:textColor="#drawable/text_changepassword_selector"
android:textSize="19sp" />
</LinearLayout>

How to prevent layout moving?

I have one main layout in my quiz game and in it 3 more nested layout, one below another, vertical. In the top one I have a text view for the question, the middle one with four buttons vertically arranged. Now, when I have one line question everything is fine, but as soon as question goes to two line, my buttons move down one row. How to prevent this? I want everything below my question to be fixed, static, not to move.
<?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="#drawable/background"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="404dp"
android:orientation="vertical"
android:weightSum="2"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1" >
<TextView
android:id="#+id/tvPitanje"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="20dp"
android:gravity="center"
android:text="#string/tvPitanje"
android:textSize="22sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1" >
<Button
android:id="#+id/bOdgovor1"
android:layout_width="260dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:background="#drawable/buttons"
android:text="#string/bOdgovor1"
android:textSize="26sp" />
<Button
android:id="#+id/bOdgovor2"
android:layout_width="260dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:background="#drawable/buttons"
android:text="#string/bOdgovor2"
android:textSize="26sp" />
<Button
android:id="#+id/bOdgovor3"
android:layout_width="260dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:background="#drawable/buttons"
android:text="#string/bOdgovor3"
android:textSize="26sp" />
<Button
android:id="#+id/bOdgovor4"
android:layout_width="260dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:background="#drawable/buttons"
android:text="#string/bOdgovor4"
android:textSize="26sp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" >
<Button
android:id="#+id/bIzlazIzKviza"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="15dp"
android:background="#drawable/buttons"
android:text="#string/bIzlazKviz"
android:textSize="23sp" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/tvCountdown"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="#string/tvCountdown"
android:textColor="#ff0000"
android:textSize="29sp" />
<TextView
android:id="#+id/tvSkor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="#string/tvSkor"
android:textSize="23sp" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" >
<TextView
android:id="#+id/tvBrojPitanja"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="30dp"
android:text="1"
android:textSize="32sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
A little later, but here we go, there are several solutions for this problem I will point out here two of them that probably are the most user friendly:
Use a scrollview for everything, IMHO this is the most user friendly solution.
Use scrollview just for text and buttons with a defined height, and put the below text and buttons static underneath, make use of a relative layout then.
Marquee text view
the first option I will put out here, with some layout refactoring included, the second one I wont recommend to use, put pretty simple to achieve if you have example one:
<?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="#android:color/background_light"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/tvPitanje"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="20dp"
android:gravity="center"
android:text="long text that will automaticly scroll and make sure all content will be displayed right in the scrollview this is the best case scenario"
android:textSize="22sp"/>
<Button
android:id="#+id/bOdgovor1"
android:layout_width="260dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:text="one"
android:textSize="26sp"/>
<Button
android:id="#+id/bOdgovor2"
android:layout_width="260dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:text="two"
android:textSize="26sp"/>
<Button
android:id="#+id/bOdgovor3"
android:layout_width="260dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:text="three"
android:textSize="26sp"/>
<Button
android:id="#+id/bOdgovor4"
android:layout_width="260dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:text="four"
android:textSize="26sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<Button
android:id="#+id/bIzlazIzKviza"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="15dp"
android:text="left"
android:textSize="23sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/tvCountdown"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="next"
android:textColor="#ff0000"
android:textSize="29sp"/>
<TextView
android:id="#+id/tvSkor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="middle"
android:textSize="23sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<TextView
android:id="#+id/tvBrojPitanja"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="30dp"
android:text="right"
android:textSize="32sp"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
Marquee solution less nice
android:singleLine="true"
android:ellipsize="marquee"
android:marqueeRepeatLimit ="marquee_forever"
android:scrollHorizontally="true"
android:focusable="true"
android:focusableInTouchMode="true"

Categories

Resources