I am using constraint layout and i am a beginner ,can anyone help me for creating a single layout that will look same on both horizontal and vertical view,i have created this but this is looking different on view.
Do i need to create separate layout for both?
My code of xml for 5 inch screen:-
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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:padding="16dp"
tools:context=".MainActivity">
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="1dp"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5"/>
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="53dp"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
android:layout_marginTop="85dp"
app:layout_constraintTop_toBottomOf="#+id/button2"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent" />
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
android:layout_marginTop="88dp"
app:layout_constraintTop_toBottomOf="#+id/button3"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintVertical_bias="0.0" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline2"
app:layout_constraintGuide_begin="1097dp"
android:orientation="horizontal" />
Use code like this
<android.support.constraint.ConstraintLayout
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:padding="16dp"
tools:context=".MainActivity">
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="#+id/button3"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="#+id/button4"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintTop_toBottomOf="#+id/button2" />
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginEnd="8dp"
app:layout_constraintTop_toBottomOf="#+id/button3" />
</android.support.constraint.ConstraintLayout>
This should work on both screen orientations.
NOTE
With ConstraintLayout, using the layout editor is far easier than using the text editor.
Related
I tried to stick counter to nameText while counter should not exceed the container from the right side.
I want to only use the xml and no programmatically change it.
I played with the layout.xml
code example:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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/wrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:background="#99776633"
tools:ignore="MissingDefaultResource">
<TextView
android:id="#+id/nameText"
android:layout_width="0dp"
android:layout_height="0dp"
android:ellipsize="end"
android:foreground="#66ff0000"
android:lines="1"
android:textSize="17dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_default="wrap"
tools:text="James BondJameames " />
<View
android:id="#+id/seperator"
android:layout_width="1dp"
android:layout_height="1dp"
app:layout_constraintLeft_toRightOf="#id/nameText"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/counter"
android:layout_width="0dp"
android:layout_height="0dp"
android:foreground="#9900fff0"
android:lines="1"
android:text="(47)"
android:textSize="17dp"
app:layout_constraintLeft_toRightOf="#id/seperator"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_default="wrap" />
</androidx.constraintlayout.widget.ConstraintLayout>
The results:
With short text:
With long text:
The expected result should be something like that:
Try placing the three views into a horizontal chain while shifting the horizontal bias of nameText to zero.
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/wrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:background="#99776633"
tools:ignore="MissingDefaultResource">
<TextView
android:id="#+id/nameText"
android:layout_width="0dp"
android:layout_height="0dp"
android:ellipsize="end"
android:foreground="#66ff0000"
android:lines="1"
android:textSize="17dp"
app:layout_constraintEnd_toStartOf="#+id/counter"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_default="wrap"
tools:text="Short text" />
<View
android:id="#+id/seperator"
android:layout_width="1dp"
android:layout_height="1dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/counter"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/counter"
android:layout_width="0dp"
android:layout_height="0dp"
android:foreground="#9900fff0"
android:lines="1"
android:text="(47)"
android:textSize="17dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintEnd_toStartOf="#+id/seperator"
app:layout_constraintStart_toEndOf="#+id/nameText"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_default="wrap" />
</androidx.constraintlayout.widget.ConstraintLayout>
See the documentation on chains.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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/wrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:background="#99776633"
tools:ignore="MissingDefaultResource">
<TextView
android:id="#+id/nameText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:foreground="#66ff0000"
android:lines="1"
android:textSize="17dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_default="wrap"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/seperator"
tools:text="James BondJameames " />
<View
android:id="#+id/seperator"
android:layout_width="1dp"
android:layout_height="1dp"
app:layout_constraintEnd_toStartOf="#id/counter"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/counter"
android:layout_width="0dp"
android:layout_height="0dp"
android:foreground="#9900fff0"
android:lines="1"
android:text="(47)"
android:textSize="17dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_default="wrap" />
</androidx.constraintlayout.widget.ConstraintLayout>
I try to write a to-do list app using ListView. But there is a problem when I use the keyboard on my phone and try to add something to the list the first elements are not visible. After I add 3 or 4 elements, I am able to see the to-do list items. How I can adjust the listview that it won't go up when I use the keyboard.
Here is the XML code
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
tools:context=".MainActivity">
<ListView
android:id="#+id/listView"
android:layout_width="0dp"
android:layout_height="450dp"
android:layout_marginStart="32dp"
android:layout_marginLeft="32dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="32dp"
android:layout_marginRight="32dp"
android:focusableInTouchMode="false"
android:isScrollContainer="false"
app:layout_constraintBottom_toTopOf="#+id/editText"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.403" />
<Button
android:id="#+id/button"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="73dp"
android:background="#drawable/custom_button"
android:onClick="add"
android:text="+"
android:textSize="40sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/editText" />
<EditText
android:id="#+id/editText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginLeft="32dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="75dp"
android:ems="10"
android:hint="Click to add..."
android:inputType="textPersonName"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
I am have following code in the layout. There are 3 edittext one below the other.
The first 2 edit text are visible but the third one is behind the second one. Can you please suggest something?
I meant, the third edit text is completely hidden.
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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"
tools:context=".Activities.Auth.MainActivity">
<EditText
android:id="#+id/username"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="96dp"
android:layout_marginEnd="24dp"
android:inputType="textEmailAddress"
android:selectAllOnFocus="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/password"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="24dp"
android:imeOptions="actionDone"
android:inputType="textPassword"
android:selectAllOnFocus="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/username" />
<EditText
android:id="#+id/password1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="24dp"
android:inputType="text"
android:selectAllOnFocus="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/password" />
</androidx.core.widget.NestedScrollView>
Your code should look like this:
You can't set many items inside <NestedScrollView > or <ScrollView> without a container.
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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"
tools:context=".Activities.Auth.MainActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="#+id/username"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="96dp"
android:layout_marginEnd="24dp"
android:inputType="textEmailAddress"
android:selectAllOnFocus="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/password"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="24dp"
android:imeOptions="actionDone"
android:inputType="textPassword"
android:selectAllOnFocus="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/username" />
<EditText
android:id="#+id/password1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="24dp"
android:inputType="text"
android:selectAllOnFocus="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/password" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
The apps top component has 4 TableRows under a TableLayout and each has a nested TextView and a Switch.
Each of these is set to Visibility:visible
And they show as expected in the Design mode for all available resolutions say NexusS(4.0,480x800,hdpi)
but when started on my Marshmallow device of the same resolution and size, only the switches show up and in their correct positions, those 4 textviews dissappear..
(http://i.stack.imgur.com/xmPqk.png)
(http://i.stack.imgur.com/6UNBo.png)![on device]
Heres the relevant xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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/MainPage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bb"
android:hapticFeedbackEnabled="false"
android:minHeight="320dp"
android:minWidth="240dp"
android:visibility="visible"
tools:context=".MainActivity">
<Button
android:id="#+id/play"
android:layout_width="120dp"
android:layout_height="34dp"
android:layout_marginBottom="188dp"
android:layout_marginEnd="205dp"
android:layout_marginStart="24dp"
android:background="#ad000000"
android:hapticFeedbackEnabled="false"
android:text="#string/playBtn"
android:textAllCaps="true"
android:textColor="#android:color/white"
android:textStyle="bold"
android:typeface="monospace"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.272"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/settings"
android:layout_width="120dp"
android:layout_height="38dp"
android:layout_marginTop="8dp"
android:background="#ad000000"
android:hapticFeedbackEnabled="false"
android:text="#string/setBtn"
android:textAllCaps="true"
android:textColor="#android:color/white"
android:textStyle="bold"
android:typeface="monospace"
android:visibility="visible"
app:layout_constraintStart_toStartOf="#+id/play"
app:layout_constraintTop_toBottomOf="#+id/play" />
<Button
android:id="#+id/quit"
android:layout_width="120dp"
android:layout_height="38dp"
android:layout_marginTop="8dp"
android:background="#ad000000"
android:hapticFeedbackEnabled="false"
android:text="#string/quitBtn"
android:textAllCaps="true"
android:textColor="#android:color/white"
android:textStyle="bold"
android:typeface="monospace"
android:visibility="visible"
app:layout_constraintStart_toStartOf="#+id/settings"
app:layout_constraintTop_toBottomOf="#+id/settings" />
<TextView
android:id="#+id/Title"
android:layout_width="wrap_content"
android:layout_height="178dp"
android:layout_marginBottom="20dp"
android:layout_marginTop="20dp"
android:fontFamily="#font/owaw"
android:textColor="#android:color/white"
android:textSize="120sp"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="#+id/play"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.418"
tools:text="#string/app_name" />
<TableLayout
android:id="#+id/OptionsLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/black"
android:gravity="center_vertical|start"
android:orientation="vertical"
android:paddingEnd="0dp"
android:paddingStart="100dp"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/Title"
app:layout_constraintVertical_bias="0.0">
<TableRow
android:id="#+id/Option1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginTop="24dp"
android:orientation="horizontal"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="#+id/Option2"
app:layout_constraintEnd_toEndOf="#+id/Option2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/Option2"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="150dp"
android:layout_height="wrap_content"
android:paddingBottom="20dp"
android:textAppearance="#style/TextAppearance.AppCompat.Button"
android:textColor="#android:color/white"
android:textSize="20sp"
android:textStyle="bold"
android:visibility="visible"
tools:text="#string/opt1" />
<Switch
android:id="#+id/tutorialSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:allowUndo="true"
android:alpha="0.8"
android:background="#android:color/black"
android:checked="true"
android:hapticFeedbackEnabled="false"
android:padding="0dp"
android:showText="false"
android:splitTrack="false"
android:switchMinWidth="20dp" />
</TableRow>
<TableRow
android:id="#+id/Option2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="#+id/Option3"
app:layout_constraintEnd_toEndOf="#+id/Option3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/Option3"
app:layout_constraintTop_toBottomOf="#+id/Option1">
<TextView
android:layout_width="150dp"
android:layout_height="wrap_content"
android:paddingBottom="20dp"
android:textAppearance="#style/TextAppearance.AppCompat.Button"
android:textColor="#android:color/white"
android:textSize="20sp"
android:textStyle="bold"
android:visibility="visible"
tools:text="#string/opt2" />
<Switch
android:id="#+id/musicSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:layout_marginEnd="-70dp"
android:allowUndo="true"
android:alpha="0.8"
android:background="#android:color/black"
android:checked="true"
android:hapticFeedbackEnabled="false"
android:padding="0dp"
android:showText="false"
android:splitTrack="false"
android:switchMinWidth="20dp" />
</TableRow>
<TableRow
android:id="#+id/Option3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="#+id/Option4"
app:layout_constraintEnd_toEndOf="#+id/Option4"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/Option4"
app:layout_constraintTop_toBottomOf="#+id/Option2">
<TextView
android:layout_width="150dp"
android:layout_height="wrap_content"
android:paddingBottom="20dp"
android:textAppearance="#style/TextAppearance.AppCompat.Button"
android:textColor="#android:color/white"
android:textSize="20sp"
android:textStyle="bold"
android:visibility="visible"
tools:text="#string/opt3" />
<Switch
android:id="#+id/hapticSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:allowUndo="true"
android:alpha="0.8"
android:background="#android:color/black"
android:checked="false"
android:hapticFeedbackEnabled="false"
android:padding="0dp"
android:showText="false"
android:splitTrack="false"
android:switchMinWidth="20dp" />
</TableRow>
<TableRow
android:id="#+id/Option4"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="#+id/Option5"
app:layout_constraintEnd_toEndOf="#+id/Option5"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/Option5"
app:layout_constraintTop_toBottomOf="#+id/Option3">
<TextView
android:layout_width="150dp"
android:layout_height="wrap_content"
android:paddingBottom="20dp"
android:textAppearance="#style/TextAppearance.AppCompat.Button"
android:textColor="#android:color/white"
android:textSize="20sp"
android:textStyle="bold"
android:visibility="visible"
tools:text="#string/opt4" />
<Switch
android:id="#+id/sfxSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:allowUndo="true"
android:alpha="0.8"
android:background="#android:color/black"
android:checked="true"
android:hapticFeedbackEnabled="true"
android:padding="0dp"
android:showText="false"
android:splitTrack="false"
android:switchMinWidth="20dp" />
</TableRow>
<TableRow
android:id="#+id/Option5"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="horizontal"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/Option4">
<TextView
android:id="#+id/saveOption"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="60dp"
android:layout_marginTop="20dp"
android:clickable="true"
android:focusable="true"
android:hapticFeedbackEnabled="false"
android:paddingBottom="20dp"
android:textAppearance="#style/TextAppearance.AppCompat.Button"
android:textColor="#android:color/white"
android:textSize="20sp"
android:textStyle="bold"
android:visibility="visible"
tools:text="#string/opt5" />
</TableRow>
</TableLayout>
</android.support.constraint.ConstraintLayout>
UPDATE:
I added the font family property to each of those and now the text is visible on device but I dont understand how it matters, since there is already a default option there.
I am trying to implement similar screen. Unable to add different items at proper place. I want to add shoes at the proper place.
Layout
<?xml version="1.0" encoding="utf-8"?><RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:padding="0dp">
<ImageView
android:id="#+id/imgBody"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:scaleType="fitXY"
android:src="#drawable/dress" />
<ImageView
android:id="#+id/imgFeet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imgBody"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="0dp"
android:src="#drawable/ic_shoe1"
android:visibility="gone" />
<ImageView
android:id="#+id/imgFace"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:layout_marginLeft="55dp"
android:layout_marginTop="0dp"
android:src="#drawable/ic_head"
android:visibility="gone" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/white"/>
Try to user Table layout for split a screen in two part. like below :
Here i have use android:layout_weight="0.5" for screen size.
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#EBEBEB"
android:stretchColumns="2"
android:weightSum="2">
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="0.5"
android:background="#FFFFFF"
android:orientation="vertical">
<!--Write your xml Right side xml code here-->
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="0.5"
android:background="#FFFFFF">
<!--Write your xml Left side xml code here-->
</RelativeLayout>
</TableRow>
</TableLayout>
Use Constraint Layout it will be easy for you to Design your Requirement
Add this dependency in your Project
compile 'com.android.support.constraint:constraint-layout:1.0.2'
Here I have added a code for your design
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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">
<ImageView
android:id="#+id/imageView3"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/guideline4"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0"
app:srcCompat="#drawable/splash" />
<android.support.constraint.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp" />
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:minHeight="55dip"
app:layout_constraintLeft_toLeftOf="#+id/guideline4"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Left" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Center" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Right" />
</android.support.design.widget.TabLayout>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Review"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="#+id/guideline4"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteX="265dp"
tools:layout_editor_absoluteY="463dp" />
<android.support.v7.widget.RecyclerView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_marginTop="0dp"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="#+id/guideline4"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tabLayout"
app:layout_constraintVertical_bias="0.0" />
</android.support.constraint.ConstraintLayout>
I think instead of layout you should try to use canvas in left preview screen. On selecting any item should update left canvas by adding item in canvas and rendering elements.
Please have a look over canvas and drawing images over canvas.