How to create this kind of layout for android

How to create this kind of layout for android - android

I have design of andorid layout I have no idea how to start the UI use what (grid, table layout or ). by this
Please give me example.
Here is the design!

One way to do this is with nested LinearLayouts:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:background="#dddddd" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:gravity="center" >
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#ff4000" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:gravity="center" >
<TextView
android:layout_width="100dp"
android:layout_height="100dp"
android:textColor="#000000"
android:text="text here text here text here text here text here text here text here text here text here"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:orientation="vertical"
android:background="#cccccc" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<ImageButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:layout_margin="5dp"
android:background="#ff8000" />
<ImageButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:layout_margin="5dp"
android:background="#ffbf00" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<ImageButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:layout_margin="5dp"
android:background="#ff4000" />
<ImageButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_margin="5dp"
android:background="#facc2e" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<ImageButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_margin="5dp"
android:background="#ffbf00" />
<ImageButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_margin="5dp"
android:background="#ff8000" />
<ImageButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_margin="5dp"
android:background="#ffbf00" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

I hope that this tutorial can help you : http://www.chess-ix.com/blog/the-use-of-layout_weight-with-android-layouts/ , any way you can use only LinearLayout horizontal and vertical to do your UI

Related

Android - How to remove unwanted gaps when using LinearLayout with weights

I have a vertical LinearLayout that contains 2 horizontal LinearLayouts. Below the vertical LL, I have another horizontal LL. Since I'm using the weight attribute, I've made either the height or width attributes of the layouts = 0dp.
Code -
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.2"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:id="#+id/buttonBack"
android:text="back" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:id="#+id/buttonRefresh"
android:text="refresh" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:id="#+id/buttonScore1"
android:text="Score: " />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:id="#+id/buttonScore2"
android:text="Score: " />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.1"
android:orientation="horizontal">
<Button
android:id="#+id/buttonPlayer1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:text="P1"
/>
<Button
android:id="#+id/buttonPlayer2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:text="P2" />
</LinearLayout>
This is how it looks -
As you can see, there are unwanted gaps (and rounded corners) between the elements. How do I remove the white spaces?

Replace All your buttons with material buttons
app:cornerRadius="0dp" this will remove corners
And android:background="#000000" this is for expand the buttons to full height
<com.google.android.material.button.MaterialButton
android:layout_width="0dp"
app:cornerRadius="0dp" //
android:layout_height="match_parent"
android:layout_weight="0.25"
android:background="#000000"
android:id="#+id/buttonRefresh"
android:text="refresh" />

Use this code I just added a background to your Linear Layout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.2"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5"
android:background="#color/purple_500"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:id="#+id/buttonBack"
android:text="back" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:id="#+id/buttonRefresh"
android:text="refresh" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:layout_marginTop="10dp"
android:background="#color/purple_500"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:id="#+id/buttonScore1"
android:text="Score: " />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:id="#+id/buttonScore2"
android:text="Score: " />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.1"
android:layout_marginTop="10dp"
android:background="#color/purple_500"
android:orientation="horizontal">
<Button
android:id="#+id/buttonPlayer1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:text="P1"
/>
<Button
android:id="#+id/buttonPlayer2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:text="P2" />
</LinearLayout>

Like this?
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="horizontal">
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_gravity="center"
android:layout_weight="1.0">
<Button
android:layout_height="match_parent"
android:layout_width="match_parent"
android:text="BACK"
android:padding="1px"
android:layout_weight="1.0"
android:id="#+id/buttonBack"/>
<Button
android:layout_height="match_parent"
android:layout_width="match_parent"
android:text="SCORE:"
android:padding="1px"
android:layout_weight="1.0"
android:id="#+id/buttonScore1"/>
<Button
android:layout_height="match_parent"
android:layout_width="match_parent"
android:text="P1"
android:padding="1px"
android:layout_weight="1.0"
android:id="#+id/buttonPlayer1"/>
</LinearLayout>
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_gravity="center"
android:layout_weight="1.0">
<Button
android:layout_height="match_parent"
android:layout_width="match_parent"
android:text="REFRESH"
android:padding="1px"
android:layout_weight="1.0"
android:id="#+id/buttonRefresh"/>
<Button
android:layout_height="match_parent"
android:layout_width="match_parent"
android:text="SCORE:"
android:padding="1px"
android:layout_weight="1.0"
android:id="#+id/buttonScore2"/>
<Button
android:layout_height="match_parent"
android:layout_width="match_parent"
android:text="P2"
android:padding="1px"
android:layout_weight="1.0"
android:id="#+id/buttonPlayer2"/>
</LinearLayout>
</LinearLayout>
I've put a padding of 1px for each Button because of Android bugs on rendering text in a Button.

How to get the screen height and adjust view to fit proportionately

I have a requirement where i need to add multiple views to a screen with only top and bottom padding as 10. The first view which is a banner should occupy one third of the screen, while the rest 3 view should fill the entire screen with proportionate heights of each. How can i dynamically calculate the screen height and adjust my view accordingly.

Assuming your parent layout is LinearLayout,
Set the banner's properties as
layout_height="0dp"
layout_weight="3"
For each of the remaining 3 views, set properties as
layout_height="0dp"
layout_weight="2"
Doing this will make sure the banner has 1/3rd of the screen height, and the remaining 3 views are proportionately sized.
(This answer is not to find Height of screen dynamically. But based on your question, it looks like this is what you wanted to acheive.)

You can follow this example code to modify your own 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:circular="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/bg_simple"
android:orientation="vertical"
android:weightSum="10"
tools:context="com.batterysaver.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="6"
android:orientation="vertical"
android:weightSum="2">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:paddingRight="15dp"
android:weightSum="2">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginTop="10dip"
android:layout_weight="1"
android:orientation="horizontal">
<com.lylc.widget.circularprogressbar.CircularProgressBar
android:id="#+id/battery_percentage"
style="#style/Widget.ProgressBar.Holo.CircularProgressBar"
android:layout_width="110dip"
android:layout_height="110dip"
circular:cpb_subtitle="Battery"
circular:cpb_title="Title" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<ImageView
android:id="#+id/optimize_Button"
android:layout_width="wrap_content"
android:layout_height="150dp"
android:layout_centerVertical="true"
android:src="#drawable/save_power" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#drawable/panel"
android:orientation="vertical"
android:weightSum="2">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="3">
<TextView
android:id="#+id/temp_degree"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:textColor="#android:color/white"
android:textSize="20dp"
android:textStyle="bold" />
<TextView
android:id="#+id/voltage_meter"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:textColor="#android:color/white"
android:textSize="20dp"
android:textStyle="bold" />
<TextView
android:id="#+id/level_value"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:textColor="#android:color/white"
android:textSize="20dp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="3">
<TextView
android:id="#+id/temp_text"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center|top"
android:text="Temp"
android:textColor="#android:color/white"
android:textSize="20dp"
android:textStyle="bold" />
<TextView
android:id="#+id/voltage_text"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center|top"
android:text="Voltage"
android:textColor="#android:color/white"
android:textSize="20dp"
android:textStyle="bold" />
<TextView
android:id="#+id/level_text"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center|top"
android:text="Level"
android:textColor="#android:color/white"
android:textSize="20dp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:orientation="vertical"
android:weightSum="3">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="4">
<ImageView
android:id="#+id/wifi_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="10dp" />
<ImageView
android:id="#+id/blutooth_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="10dp" />
<ImageView
android:id="#+id/brightness_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="10dp"
android:src="#drawable/ic_light_normal" />
<ImageView
android:id="#+id/rotate_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="10dp"
android:src="#drawable/ic_rotate_normal" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="4">
<ImageView
android:id="#+id/mode_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="10dp"
android:src="#drawable/ic_sound_normal" />
<ImageView
android:id="#+id/screen_timout_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="10dp"
android:src="#drawable/ic_timeout" />
<ImageView
android:id="#+id/location_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="10dp"
android:src="#drawable/ic_location_normal" />
<ImageView
android:id="#+id/sync_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="10dp"
android:src="#drawable/ic_saintic_normal" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="4">
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<ImageView
android:id="#+id/flightmode_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="10dp"
android:src="#drawable/ic_airplanmode_normal" />
<ImageView
android:id="#+id/mobiledata_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="10dp"
android:src="#drawable/ic_data_normal" />
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

Scrollview inside viewpager scroll vertical not working

Below is my code but its not working properly, want a viewpager with scrollview in all fragment. Scrolling of the scrollview is not working,facing problem from last 2 hrs and not getting a solution.Please help me its urgent.Not able to solve this issue i tried adding nested scrollview but it is also not working.
<?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:id="#+id/toolbar_ll"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_myjeenees"
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="#android:color/white"
android:minHeight="?attr/actionBarSize">
<TextView
android:id="#+id/toolbarShuffle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Shuffle Money"
android:textColor="#color/black"
android:textSize="18sp" />
</android.support.v7.widget.Toolbar>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="UserName"
android:textSize="25sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="May 15,Birthday" />
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginRight="10dp"
android:background="#mipmap/ic_forward" />
</LinearLayout>
<com.android.jeenees.utils.CustomScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:fillViewport="true"
>
<android.support.v4.view.ViewPager
android:id="#+id/shufflePager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white" />
</com.android.jeenees.utils.CustomScrollView>
<!--</LinearLayout>-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/colorPrimary"
android:padding="10dp"
android:src="#mipmap/ic_action_tick" />
<ImageButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/colorPrimary"
android:padding="10dp"
android:src="#mipmap/ic_back" />
</LinearLayout>
<?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:fillViewport="true"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="10dp"
android:layout_weight="1"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:id="#+id/firstwish"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="IPhone 5s" />
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<TextView
android:id="#+id/costfirst"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Rs 5300/32777" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<SeekBar
android:id="#+id/seekfirst"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="100"
android:maxHeight="10dp"
android:progress="50"
android:progressDrawable="#drawable/progress_draw"
android:splitTrack="false"
android:thumb="#mipmap/ic_thumb"></SeekBar>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:id="#+id/secondwish"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="IPhone 5s" />
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<TextView
android:id="#+id/costsecond"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Rs 5300/32777" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<SeekBar
android:id="#+id/seeksecond"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="100"
android:maxHeight="10dp"
android:progress="50"
android:progressDrawable="#drawable/progress_draw"
android:splitTrack="false"
android:thumb="#mipmap/ic_thumb"></SeekBar>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:id="#+id/thirdwish"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="IPhone 5s" />
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<TextView
android:id="#+id/costthird"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Rs 5300/32777" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<SeekBar
android:id="#+id/seekthird"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="100"
android:maxHeight="10dp"
android:progress="50"
android:progressDrawable="#drawable/progress_draw_red"
android:splitTrack="false"
android:thumb="#mipmap/ic_red_thumb"></SeekBar>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:text="Rs 1700"
android:textSize="25sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:text="Released Money"
android:textSize="25sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:drawableLeft="#mipmap/ic_actin_add"
android:gravity="center"
android:padding="15dp"
android:text="Top Up"
android:textColor="#android:color/white" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

Each view take parent event first if your view pager is swipe horizonatly for change the page tab than you can not use horizonatl scroll in child fragment . It is not write practice you can arrange your page content as vertical and use vertical scroll view.
Or second option you will have to disable swipe event for view pager and only tab click is uesd to change page than you can use horizontal scroll view.

about cutoff textview by relative layout baselines

I developed an android app and in which I have create relative layout and I want to display multiple textviews but it can cutoff by vertical and horizontal baseline of relative layout
here is my xml file
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:background="#drawable/single_mode_border"
android:orientation="vertical"
tools:context="com.rabble.MainActivity"
tools:ignore="MergeRootFrame" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="0.087"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".762"
android:adjustViewBounds="true"
android:src="#drawable/single_player_image" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.237"
android:adjustViewBounds="true"
android:src="#drawable/message_setting_image" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.283"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".283"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".418"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".5"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".106"
android:orientation="horizontal" >
</LinearLayout>
<ImageView
android:id="#+id/imageView7"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:layout_weight=".243"
android:src="#drawable/clock_image" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".65"
android:orientation="vertical" >
<TextView
android:id="#+id/timeLeft"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".267"
android:gravity="center_horizontal"
android:text="Time left"
android:textColor="#android:color/black"
android:textSize="12dp" />
<TextView
android:id="#+id/timerText"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".732"
android:gravity="center"
android:text="TextView"
android:textColor="#android:color/black"
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".5"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".156" >
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".843"
android:orientation="vertical" >
<TextView
android:id="#+id/currentPoint"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".315"
android:gravity="center_horizontal"
android:text="Current points"
android:textColor="#android:color/black"
android:textSize="12dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".684" >
<ImageView
android:id="#+id/imageView8"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight=".274"
android:adjustViewBounds="true"
android:src="#drawable/coin_image" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".118" >
</LinearLayout>
<TextView
android:id="#+id/scoreText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_weight=".370"
android:background="#drawable/textview_white_rectangle_border"
android:gravity="center"
android:textColor="#android:color/black"
android:textSize="20dp"
android:text="0" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.237" >
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".283"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.187"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".540"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".053"
android:orientation="horizontal" >
</LinearLayout>
<ImageView
android:id="#+id/nextbutton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_weight=".062"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/white_arrow"
android:text="Button" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.884" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".460" >
<LinearLayout
android:id="#id/fillInBlanksLinear"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".906"
android:gravity="center" >
</LinearLayout>
<ImageView
android:id="#+id/checkView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight=".093"
android:src="#drawable/game_check_right"
android:visibility="gone"/>
</LinearLayout>
</LinearLayout>
<RelativeLayout
android:id="#+id/textrelative"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="0.441"
android:layout_gravity="fill">
</RelativeLayout>

You should use a ScrollView at the root level.Get more information from here.
http://developer.android.com/reference/android/widget/ScrollView.html
Also I see that you have got a lot of linear layouts .They should be clubbed together into lesser number of RelativeLayouts.

How can i create a grid of buttons with a textview below

Hi,
I want to create a screen like I've (tried to) drawn above.
A,b,c,d,e,f,g and h are buttons, and p is a EditText.
Now what I want to accomplish is that when deployed on a larger or smaller screen, or rotated, the following will happen:
element 'p' stays the same height but sizes horizontally (gets
wider/smaller)
elements a-h (the buttons) all size horizontally and
vertically. So when the screen gets twice as wide, the buttons are
two times wider, and when it's twice as high, the buttons are twice
as high.
I've been able to create one row of buttons to size horizontally (with a lineairlayout and a android:layout_weight, but I am not getting any further.

Try it out,hope it works:
<?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="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<EditText
android:layout_width="match_parent"
android:layout_height="50dp" />
</LinearLayout>

Here's a solution that will work:
Set the EditText height as you wish.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<EditText
android:layout_width="match_parent"
android:layout_height="40dp" />
</LinearLayout>

One quick solution is to make use of nested layouts and nested weights. An example of this could be:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
However, nested weights aren't recommended as they are computationally heavy. An alternative (superior) layout could be based on relative layouts to replace nested LinearLayouts and their weights. A hidden center component is used to split the relative layout in two. An example of this is posted below:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<!-- Hidden center view used to split relative layout in half -->
<View
android:id="#+id/hiddenView1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerInParent="true"/>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="#id/hiddenView1" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toRightOf="#id/hiddenView1" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<!-- Hidden center view used to split relative layout in half -->
<View
android:id="#+id/hiddenView2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerInParent="true"/>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="#id/hiddenView2" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toRightOf="#id/hiddenView2" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<!-- Hidden center view used to split relative layout in half -->
<View
android:id="#+id/hiddenView3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerInParent="true"/>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="#id/hiddenView3" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toRightOf="#id/hiddenView3" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<!-- Hidden center view used to split relative layout in half -->
<View
android:id="#+id/hiddenView4"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerInParent="true"/>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="#id/hiddenView4" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toRightOf="#id/hiddenView4" />
</RelativeLayout>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
The solution using RelativeLayout was inspired by the answer from DeeV in this SO question: Making two LinearLayouts have 50% of the screen each without using layout_weight
If you want to avoid the soft keyboard from showing when the layouts are inflated you can do the following to your parent LinearLayout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:focusableInTouchMode="true">

// try this
<?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:padding="5dp"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:text="a"
android:layout_weight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:text="b"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_marginTop="5dp"
android:layout_weight="1"
android:layout_height="0dp">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:text="c"
android:layout_weight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:text="d"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_marginTop="5dp"
android:layout_weight="1"
android:layout_height="0dp">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:text="e"
android:layout_weight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:text="f"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_marginTop="5dp"
android:layout_weight="1"
android:layout_height="0dp">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:text="g"
android:layout_weight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:text="h"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:hint="p"/>
</LinearLayout>

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

How to create this kind of layout for android - android

I have design of andorid layout I have no idea how to start the UI use what (grid, table layout or ). by this Please give me example. Here is the design!

I hope that this tutorial can help you : http://www.chess-ix.com/blog/the-use-of-layout_weight-with-android-layouts/ , any way you can use only LinearLayout horizontal and vertical to do your UI

Related

Android - How to remove unwanted gaps when using LinearLayout with weights

How to get the screen height and adjust view to fit proportionately

Scrollview inside viewpager scroll vertical not working

about cutoff textview by relative layout baselines

How can i create a grid of buttons with a textview below

Categories

Resources