How to prevent overlapping of buttons and other objects? - java

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" />

Related

button below a layout still clickable

I have a screen with vertical button. nothing fancy but it does the job. One of the button is sign-out. during the sign-out process, I want to display a progress circle... this working but the buttons underneath are still clickable and I do not want to. None of the buttons should be clickable when the loading screen appear.
<?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"
android:background="#drawable/teal_background"
android:paddingLeft="16dp"
android:paddingTop="16dp"
android:paddingRight="16dp"
android:paddingBottom="16dp">
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="-16dp"
android:paddingRight="-16dp">
<ImageButton
android:id="#+id/back_button"
android:layout_width="52dp"
android:layout_height="52dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:padding="12dp"
android:scaleType="fitCenter"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/back" />
<LinearLayout
android:id="#+id/top_nav"
android:layout_width="match_parent"
android:layout_height="52dp"
android:gravity="center_vertical"
android:orientation="horizontal"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Settings"
android:textAlignment="center"
android:textColor="#android:color/white"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
...
<Button
android:id="#+id/firebase_cloud_messaging_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/transparent_bg_bordered_button"
android:text="Firebase Cloud Messaging"/>
<Button
android:id="#+id/vehicle_signals_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/transparent_bg_bordered_button"
android:text="Vehicle Signals"/>
<Button
android:id="#+id/notifications_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/transparent_bg_bordered_button"
android:text="Notifications"/>
<Button
android:id="#+id/sign_out_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/transparent_bg_bordered_button"
android:text="Sign out"/>
</androidx.appcompat.widget.LinearLayoutCompat>
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorAccent"
android:visibility="visible"
android:clickable="false">
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyle"
android:layout_gravity="center"
android:layout_width="36dp"
android:layout_height="36dp" />
</androidx.appcompat.widget.LinearLayoutCompat>
Any idea on how to make sure there is no clicks button when loading is visibile>
Thankgs
Update you code in xml add attribute clickable = true.
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorAccent"
android:visibility="visible"
android:clickable="true">
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyle"
android:layout_gravity="center"
android:layout_width="36dp"
android:layout_height="36dp" />
</androidx.appcompat.widget.LinearLayoutCompat>

Android layout_weight iframe and scroll

sorry for my poor english in advance
I have a design problem on android studio.
I used multiples devices (From version 8 to 10) and it works fine, and one device (version 6) which has a different output (you can check my screens below)wrong display click here
good display click here
unfortunately i don't know why it goes wrong, it might be a problem with layout_weight, in my code i use a Frame layout to switch out between differents Views, it looks like the Framelayout doesn't take any height (i want it to take the available space)
Thanks in advance
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/choose_model"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0">
<Spinner
android:id="#+id/select_your_model"
android:layout_width="43dp"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/text_model_title"
android:layout_alignParentEnd="true" />
<TextView
android:id="#+id/text_model_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="5dp"
android:layout_marginTop="20dp"
android:text="#string/choose_mod"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="#+id/Spinner_model_preference_text"
android:layout_width="160dp"
android:layout_height="26dp"
android:layout_alignTop="#+id/select_your_model"
android:layout_alignParentEnd="true"
android:layout_marginEnd="45dp"
android:gravity="center"
android:textColor="#android:color/darker_gray"
android:textSize="16sp"
android:textStyle="bold" />
</RelativeLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="15dp"
android:layout_weight="1"
android:background="#FAFAFA">
<FrameLayout
android:id="#+id/Frame_layout_preferences_setting"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp" />
</ScrollView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_weight="0">
<Button
android:id="#+id/save_user_preferences"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="#string/save" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.2">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view_preferences_model"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
<View
android:id="#+id/divider2"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_above="#+id/recycler_view_preferences_model"
android:layout_alignParentStart="true"
android:background="?android:attr/listDivider" />
</RelativeLayout></LinearLayout>
You have the problem, because you have a FrameLayout inside a fragment. I recommend the next
If you only want to have a view and it has different content, you can have a activity
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0">
<Spinner
android:id="#+id/select_your_model"
android:layout_width="43dp"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/text_model_title"
android:layout_alignParentEnd="true" />
<TextView
android:id="#+id/text_model_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="5dp"
android:layout_marginTop="20dp"
android:text="#string/choose_mod"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="#+id/Spinner_model_preference_text"
android:layout_width="160dp"
android:layout_height="26dp"
android:layout_alignTop="#+id/select_your_model"
android:layout_alignParentEnd="true"
android:layout_marginEnd="45dp"
android:gravity="center"
android:textColor="#android:color/darker_gray"
android:textSize="16sp"
android:textStyle="bold" />
</RelativeLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="15dp"
android:layout_weight="1"
android:background="#FAFAFA">
<FrameLayout
android:id="#+id/Frame_layout_preferences_setting"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp" />
</ScrollView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_weight="0">
<Button
android:id="#+id/save_user_preferences"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="#string/save" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.2">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view_preferences_model"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
<View
android:id="#+id/divider2"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_above="#+id/recycler_view_preferences_model"
android:layout_alignParentStart="true"
android:background="?android:attr/listDivider" />
</RelativeLayout></LinearLayout>
Replace the FrameLayout with an imageview
if you want to have fragments. i recommend the next
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/main_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
Call the fragment in activity
getSupportFragmentManager().beginTransaction()
.replace(R.id.main_container, fragment, fragment.getClass().getSimpleName()).addToBackStack(null).commit();

Progress bar height

I try to integrate progress bar in my layout. The progress bar cannot fix all screen size. I try to tune the height many times. But no one is suitable for every device. So how can I fix the progress bar height in all screen size.
main.xml
<?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:background="#drawable/gray_bg"
android:orientation="vertical">
<ImageView
android:id="#+id/bg_pushup"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0.7"
android:background="#android:color/background_dark"
android:src="#drawable/image_push_up"
android:visibility="gone" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/btn_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/counter_button_close" />
<ImageView
android:id="#+id/btn_sound"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/counter_button_mute" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/txt_start"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="START PUSH-UPS"
android:textColor="#android:color/background_light" />
<RelativeLayout
android:id="#+id/layout_pushup"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/txt_start"
android:layout_centerInParent="true"
android:src="#drawable/counter_bg"
android:visibility="gone" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:orientation="vertical">
<TextView
android:id="#+id/txt_pushup_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="0"
android:textAlignment="center"
android:textColor="#android:color/background_light"
android:textSize="36sp"
android:textStyle="bold" />
<TextView
android:id="#+id/txt_pushup_timer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="false"
android:layout_centerVertical="false"
android:layout_gravity="center_horizontal"
android:text="0:00"
android:textAlignment="center"
android:textColor="#b5b4ad"
android:textSize="30sp" />
</LinearLayout>
<ProgressBar
android:id="#+id/progressBar2"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:max="100"
android:progress="75"
android:progressDrawable="#drawable/style_circular"
android:secondaryProgress="100" />
<TextView
android:id="#+id/textView19"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/progressBar2"
android:layout_alignBottom="#+id/progressBar2"
android:layout_centerHorizontal="true"
android:text="TextView"
android:textAlignment="center" />
<ImageView
android:id="#+id/img_shade"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView19"
android:layout_centerHorizontal="true"
android:layout_centerInParent="false"
android:layout_weight="0.05"
android:src="#drawable/counter_shade" />
<ImageView
android:id="#+id/btn_question_mark"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/progressBar2"
android:layout_alignParentEnd="true"
android:layout_weight="1"
android:src="#drawable/question_mark" />
</RelativeLayout>
Progress bar
Please help me to design the xml for all screen size device.
putting the progress bar inside a container and then doing the size will work fine! try like this
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight = 1>
<ProgressBar
android:id="#+id/progressBar2"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:max="100"
android:progress="75"
android:progressDrawable="#drawable/style_circular"
android:secondaryProgress="100" />
</LinearLayout>

Error on android UI

I'm Learner and designing an interface but there is little problem can some one help me out, attaching screen shot original and my design and also code.
I'm unable to adjust the button position in layout, and also if some one have links or stuff related beginners then also share
thanks.
Here is my 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:id="#+id/activity_home__screen"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.sofagold.mrdeveloper.sofagold.Home_Screen"
android:background="#android:color/black">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.8">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/home_header"
android:layout_weight="1.3">
<Button
android:layout_width="62dp"
android:layout_height="wrap_content"
android:id="#+id/button3"
android:background="#drawable/home_home"
android:layout_gravity="start"
android:padding="5dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#drawable/home_small_logo"
android:id="#+id/imageView"
android:adjustViewBounds="true"
android:baselineAlignBottom="false"
android:layout_gravity="center"
android:layout_weight="5000" />
<Button
android:layout_width="59dp"
android:layout_height="wrap_content"
android:id="#+id/button8"
android:background="#drawable/home_back"
android:layout_gravity="start"
android:padding="5dp" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.2">
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/button24"
android:layout_toEndOf="#+id/button25"
android:layout_marginStart="64dp"
android:layout_marginTop="8dp"
android:id="#+id/button22"
android:layout_wieght="5"
android:background="#drawable/home_btn_bg" />
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignStart="#+id/button22"
android:layout_marginBottom="48dp"
android:id="#+id/button24"
android:button_size="5dp"
android:background="#drawable/home_btn_bg" />
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/button24"
android:id="#+id/button25"
android:button_size="5dp"
android:background="#drawable/home_btn_bg" />
RelativeLayout(end of)
</LinearLayout>
</LinearLayout>

Change the view of TabHost + Format buttons like a real keypad || Android

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!

Categories