I have <.ImageView>enter code heres(icons) in my android layout xml file, which are encompassed by a <ScrollView>.
Eg.
<.ScrollView><br>
<.LinearLayout><br>
<.ImageView> ...<./ImageView><br>
<./LinearLayout><br>
<./ScrollView>
To this layout, i want to attach a fixed footer. Basically a small tab present on the bottom on the screen which stays even when I scroll to the all the way down or all the way to the top.
I tend to write up layouts like this with a LinearLayout as root element and weights on the children to dynamically allocate screen estate. It keeps the layout definition compact and doesn't require defining extra ids.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView ... />
<ImageView ... />
...
<ImageView ... />
</LinearLayout>
</ScrollView>
<!-- footer here -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
...
</LinearLayout>
</LinearLayout>
Using a RelativeLayout as root element, with the ScrollView positioned 'above' the bottom-aligned footer, however, is probably slightly better in terms of performance, although I doubt it'll make a noticable different in the case of a simple view hierarchy like this. The RelativeLayout approach does require assigning some ids (to at least the footer, I'd say).
something like this..
<.ScrollView>
<.LinearLayout>
<.ImageView> ...<./ImageView>
<./LinearLayout>
<./ScrollView>
<LinearLayout>
<-- your footer here -->
</LinearLayout>
U can try like this also..
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</ScrollView>
<RelativeLayout
android:id="#+id/relativeLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/blackbg"
android:layout_alignParentBottom="true" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Button" />
</RelativeLayout>
</RelativeLayout>
Related
When i preview with android emulator, the layout preview is ok. But when I install the app in my mobile the views overlaps. It may be because of lack of space in the mobile screen but I have no idea. Please help me out. And also help me with making this app to work with all screen sizes. Thanks in advance.
First image is emulator preview 2nd is mobile preview
Here is the xml code :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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:paddingBottom="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="16dp"
android:orientation="vertical"
android:background="#drawable/newbackground"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="300dp">
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="40dp"
app:srcCompat="#drawable/dicee_logo" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/dicee_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="#drawable/dice1" />
<ImageView
android:id="#+id/dicee_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="#drawable/dice2" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="#+id/roll_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="61dp"
android:background="#color/colorPrimary"
android:text="#string/button_text"
android:textColor="#android:color/white" />
<Button
android:id="#+id/next_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="#+id/roll_button"
android:layout_alignParentBottom="true"
android:layout_alignRight="#+id/roll_button"
android:layout_marginBottom="25dp"
android:background="#android:color/holo_blue_light"
android:text="Next page" />
</RelativeLayout>
</LinearLayout>
This will keep the 2 textview to bottom and will expand in whatever view you use
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scaleType="centerInside"
android:src="#drawable/ic_word" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/dicee_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="#drawable/ic_word" />
<ImageView
android:id="#+id/dicee_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="#drawable/ic_pdf" />
</LinearLayout>
<Button
android:id="#+id/roll_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:background="#color/colorPrimary"
android:text="text"
android:textColor="#android:color/white" />
<Button
android:id="#+id/next_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="30dp"
android:background="#android:color/holo_blue_light"
android:text="Next page" />
</LinearLayout>
Try the below modified code. Since you want the buttons below each other. You cannot place one on right of other, so remove the alignRight.
<Button
android:id="#+id/roll_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
**android:layout_marginTop="21dp"**
android:background="#color/colorPrimary"
android:text="#string/button_text"
android:textColor="#android:color/white" />
<Button
android:id="#+id/next_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="#+id/roll_button"
android:layout_alignParentBottom="true"
**android:layout_alignRight="#+id/roll_button"**
android:layout_marginBottom="25dp"
android:background="#android:color/holo_blue_light"
android:text="Next page" />
Hello stackoverflow members. i am trying to achieve this:http://imgur.com/dqwOAOf
But for some reason the two texts cant take these positions like this http://imgur.com/lyYg8Ei
Could anyone explain what i am doing wrong?
and please forgive my artistic talents.
i have added the whole xml file.
The idea is that the two textviews timer and typegekookt are displayed in the center of backgroundtypegekookt evenly spaced out.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:orientation="vertical"
android:id="#+id/eggContainer"
android:layout_height="wrap_content"
android:padding="15dp">
<ImageView android:id="#+id/eggtimerimage"
android:src="#drawable/eiwit"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:gravity="center_vertical"
/>
<ImageView android:id="#+id/backgroundtypegekookt"
android:src="#drawable/timerwijzer"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
/>
<TextView
android:id="#+id/typegekookt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="zacht"
android:textSize="20sp"
android:textStyle="bold"
android:textColor="#android:color/black"
android:layout_alignTop="#+id/divider2"
android:layout_centerHorizontal="true"/>
<TextView
android:id="#+id/timer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="10:00"
android:textSize="22sp"
android:textStyle="bold"
android:textColor="#android:color/black"
android:layout_centerHorizontal="true"
android:layout_alignBottom="#+id/divider2"
/>
<TextView
style="?android:listSeparatorTextViewStyle"
android:id="#+id/divider1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/eggtimerimage"
android:layout_marginBottom="-30dp"
/>
<TextView
style="?android:listSeparatorTextViewStyle"
android:id="#+id/divider2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignLeft="#+id/backgroundtypegekookt"
android:layout_alignStart="#+id/backgroundtypegekookt"
android:layout_alignRight="#+id/backgroundtypegekookt"
android:layout_alignEnd="#+id/backgroundtypegekookt" />
</RelativeLayout>
Instead of using the ImageView android:id="#+id/backgroundtypegekookt", use a RelativeLayout (or a LinearLayout) with that background (android:background="#drawable/timerwijzer"), and put your TextViews in it
This is what I mean:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:id="#+id/eggContainer"
android:layout_height="wrap_content"
android:padding="15dp"
>
<ImageView
android:id="#+id/eggtimerimage"
android:src="#drawable/eiwit"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:gravity="center_vertical"
/>
<LinearLayout
android:id="#+id/backgroundtypegekookt"
android:background="#drawable/timerwijzer"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:orientation="vertical"
>
<TextView
android:id="#+id/typegekookt"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:text="zacht"
android:textSize="20sp"
android:textStyle="bold"
android:textColor="#android:color/black"
android:layout_centerHorizontal="true"
/>
<TextView
android:id="#+id/timer"
android:below="#id/typegekookt"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:text="10:00"
android:textSize="22sp"
android:textStyle="bold"
android:textColor="#android:color/black"
android:layout_centerHorizontal="true"
/>
</LinearLayout>
<!-- You can use 2 Views instead of 2 TextViews, more efficiently -->
<!-- Anyway, in your screenshots I only see 1 - I guess you'll have to fix that -->
<TextView
style="?android:listSeparatorTextViewStyle"
android:id="#+id/divider1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="-30dp"
/>
<TextView
style="?android:listSeparatorTextViewStyle"
android:id="#+id/divider2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignLeft="#id/backgroundtypegekookt"
android:layout_alignStart="#id/backgroundtypegekookt"
android:layout_alignRight="#id/backgroundtypegekookt"
android:layout_alignEnd="#id/backgroundtypegekookt"
/>
</RelativeLayout>
I also fixed the deprecated fill_parent to match_parent and #+id (anticipated reference) to #id (reference), where needed.
Also see my comments in the layout avout the 2 last views.
How do i align the arrows to be right above/below the numbers? Does each arrow need to have it's own linear layout? Is there a way to set this without setting a static amount of padding? I would like this to be generic enough to be used and show up properly on different devices...
I'm relatively new to android development - especially the UI portion of it... so any help would be appreciated!
What I See (Above)
What I Would Like To See (Above)
You can nest another LinearLayout (with orientation:vertical) inside your LinearLayout (with orientation:horizontal).
<?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="horizontal" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical" >
<ImageButton
android:id="#+id/number_picker_up_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/up"
android:background="#drawable/up" />
<TextView
android:id="#+id/one"
android:text="100"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/OffWhite"
android:textSize="40sp"
/>
<ImageButton
android:id="#+id/number_picker_down_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/down"
android:background="#drawable/down" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical" >
<ImageButton
android:id="#+id/number_picker_up_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/up"
android:background="#drawable/up" />
<TextView
android:id="#+id/two"
android:text="100"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/OffWhite"
android:textSize="40sp"
/>
<ImageButton
android:id="#+id/number_picker_down_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/down"
android:background="#drawable/down" />
</LinearLayout>
</LinearLayout>
Note that nesting too many layouts inside a layout is discouraged. Reference:
http://developer.android.com/training/improving-layouts/optimizing-layout.html
But having 2 layout hierarchy is totally fine.
You need to nest two vertical LinearLayouts inside of your horizontal LinearLayout. Here's one where I do the same thing but I have empty Views on each side and one in the middle. You can take those out if you don't want them and obviously change your ids, backgrounds, and such
<LinearLayout
android:id="#+id/mpImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_margin="10dp">
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".5"/>
<LinearLayout
android:id="#+id/mpLL"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="4"
android:layout_gravity="left"
android:orientation="vertical">
<ImageButton
android:id="#+id/mpUpBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
style="#style/UpArrow"
android:onClick="cycleUp"/>
<TextView
android:id="#+id/mpTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="breakfast"
android:gravity="center"
android:layout_gravity="center"
android:textSize="40sp"
android:textColor="#drawable/black"/>
<ImageButton
android:id="#+id/mpDownBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:onClick="cycleDown"
style="#style/DownArrow"/>
</LinearLayout>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".5"/>
<LinearLayout
android:id="#+id/catLL"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="4"
android:layout_gravity="left"
android:orientation="vertical">
<ImageButton
android:id="#+id/catUpBtn"
style="#style/UpArrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:onClick="cycleUp" />
<TextView
android:id="#+id/catTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Beef"
android:gravity="center"
android:layout_gravity="center"
android:textSize="40sp"
android:textColor="#drawable/black" />
<ImageButton
android:id="#+id/catDownBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:onClick="cycleDown"
style="#style/DownArrow" />
</LinearLayout>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".5"/>
</LinearLayout>
You will notice I have also used weight and a 0dp for the width of the nested LinearLayouts and for the View to give them the separation I wanted and to look right on different screen sizes. You can change those depending on your needs.
You can have nested layouts. Be careful not to have too many, however two should be fine. Here is an example of what I think you are looking for. The arrows and text should be aligned thanks to RelativeLayout.
<?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="horizontal" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageButton
android:id="#+id/number_picker_up_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#drawable/up"
android:src="#drawable/up" />
<TextView
android:id="#+id/one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/number_picker_up_one"
android:text="100"
android:textColor="#color/OffWhite"
android:textSize="40sp" />
<ImageButton
android:id="#+id/number_picker_down_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/one"
android:layout_centerHorizontal="true"
android:background="#drawable/down"
android:src="#drawable/down" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageButton
android:id="#+id/number_picker_up_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#drawable/up"
android:src="#drawable/up" />
<TextView
android:id="#+id/two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/number_picker_up_two"
android:text="100"
android:textColor="#color/OffWhite"
android:textSize="40sp" />
<ImageButton
android:id="#+id/number_picker_down_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/two"
android:layout_centerHorizontal="true"
android:background="#drawable/down"
android:src="#drawable/down" />
</RelativeLayout>
</LinearLayout>
Alright.. To start off, I'm new with Eclipse, new with Android Development, Java..
I have to make a VoIP Application, I set up some tabs (Yes the text is messed up) :
And here's my XML 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:orientation="vertical" >
<TabHost
android:id="#+id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</TabWidget>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:orientation="horizontal"
android:id="#+id/Recents"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Recents">
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:id="#+id/Keypad"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Keypad" >
<Button
android:id="#+id/bNumber1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1" />
<Button
android:id="#+id/bNumber2"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2" />
<Button
android:id="#+id/bNumber3"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3" />
<Button
android:id="#+id/bNumber4"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4" />
<Button
android:id="#+id/bNumber5"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5" />
<Button
android:id="#+id/bNumber6"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="6" />
<Button
android:id="#+id/bNumber7"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="7" />
<Button
android:id="#+id/bNumber8"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="8" />
<Button
android:id="#+id/bNumber9"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="9" />
<Button
android:id="#+id/bNumber0"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0" />
<Button
android:id="#+id/bCall"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Call" />
<Button
android:id="#+id/bSMS"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="SMS" />
<Button
android:id="#+id/bClear"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="C" />
<TextView
android:id="#+id/etNumberField"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ems="10"
>
</TextView>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:id="#+id/Sms"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="SMS">
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:id="#+id/Ratings"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Ratings">
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:id="#+id/Account"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Account">
</LinearLayout>
</FrameLayout>
</LinearLayout>
</TabHost>
</LinearLayout>
Now, My problem is that I'll have to position all the "Number"-Buttons (1,2,3,4 etc..) and make them look like a real key-pad.
My problem is, I can't really "See" on the graphical layout how it's getting positioned.
I Can't code the buttons out of memory either, since I'm still new to it.
Is there anyone that could help me with the code, formatting them to a key-pad like format?
Or even give me a solution on how I could SEE the positioning as I'm coding it?
Thanks in Advance,
Paramone!
Alright, After some research I've figured it out.
If anyone was wondering how to change the Tab-View as they're coding, and be able to see how it looks like..-
Simply create An .XML file, and design it as you want the tab to look like.
Before this solution, I had to Edit my tab-views looking at this:
Later, you need to put in <include layout="#layout/recents" /> ("recents" is the .XML Layouts name.) in your Linear layout.
Mine looks like this:
<LinearLayout
android:id="#+id/Keypad"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:text="Keypad">
<include layout="#layout/keypad" />
//"keypad" is the name of the .xml file.
</LinearLayout>
And That's how you "Change" the view.
Also, Since I'm new to Android Developing, I wanted to know how I could format my so they'd look like a legit Key-pad.
Thanks to the include code, I could actually SEE the tab as I was coding and designing it.
Screenshots:
What I did:
- Put all the buttons in Sets of 3.
So 1 LinearLayout would cover Buttons 1, 2 and 3.
The other one would cover 4,5 and 6 (And so forth)
- Put Weights on the LinearLayouts
This helped me "Push" them to the bottom.
I know that it's probably not the correct or safest way to do it, but as long as it works, I'm happy with it.
The XML 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:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="5"
android:paddingTop="10dp" >
<TextView
android:id="#+id/etNumberField"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ellipsize="end"
android:ems="100"
android:singleLine="true"
android:textSize="23dp" />
<Button
android:id="#+id/bContact"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:padding="10dp"
android:text="Contact" />
</LinearLayout>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:padding="1dp">
<Button
android:id="#+id/bNumber1"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="1"
android:padding="10dp" />
<Button
android:id="#+id/bNumber2"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="2"
android:padding="10dp"/>
<Button
android:id="#+id/bNumber3"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="3"
android:padding="10dp" />
</LinearLayout>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:padding="1dp">
<Button
android:id="#+id/bNumber4"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="4" />
<Button
android:id="#+id/bNumber5"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="5" />
<Button
android:id="#+id/bNumber6"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="6" />
</LinearLayout>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:padding="1dp">
<Button
android:id="#+id/bNumber7"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="7" />
<Button
android:id="#+id/bNumber8"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="8" />
<Button
android:id="#+id/bNumber9"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="9" />
</LinearLayout>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:padding="1dp">
<Button
android:id="#+id/bNumberStar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="*" />
<Button
android:id="#+id/bNumber0"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="0" />
<Button
android:id="#+id/bNumberHash"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#" />
</LinearLayout>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="1dp">
<Button
android:id="#+id/bSMS"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="SMS" />
<Button
android:id="#+id/bCall"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Call"
android:textColor="#00FF00"
/>
<Button
android:id="#+id/bClear"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="C"
/>
</LinearLayout>
</LinearLayout>
If you have any questions regarding this solution, or how I could possibly help you, feel free to post a comment below!
i have this layout for bottom bar of my app:
but i want to make it like this:
actually i can but i want that , this layout works in every screen size. in fact, left icon sticks to left, right icon sticks to right, two center icon stay at center but all of them stay with a nice distance to each other. i don't use absolute values and i want this icons dynamically change his distance from others. my problem is how to layout them to achieve my goal.
this is my xml for this section:
<LinearLayout
android:id="#id/bar_l2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:gravity="center_horizontal" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bottom_bar" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/bar1" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/bar2" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/bar3" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="#drawable/bar4" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</LinearLayout>
This is what you need to do :
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal" xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/bottom_bar"
android:gravity="center_horizontal"
android:orientation="horizontal"
android:padding="30dp" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/bar1" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/bar2" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/bar3" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="#drawable/bar4" />
</LinearLayout>
What I have done here is set the background of parent LinearLayout as the background image and its orientation as horizontal.Most importantly its width as fill_parent .
Hence it will cover the entire width of the parent .Padding will help you add desired spacing between image views.
To make it fit all screen size properly instead of padding use android:weight attribute .
Hope it helps !
This works fine
<LinearLayout
android:id="#id/bar_l2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:gravity="center_horizontal" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bottom_bar" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_gravity="center"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/bar1" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_gravity="center"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/bar2" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_gravity="center"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/bar3" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_gravity="center"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imageView4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="#drawable/bar4" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</LinearLayout>