I use Code A to design UI with constraint layout, the top of the UI is google AD and the bottom of the UI is toolbar.
I hope the RecyclerView control named mRecyclerView fill in all other space, how can I do?
BTW, Code B is generated by Android Studio 3.01 automatically when I drag and drop RecyclerView control to UI. It's a hard code for layout_width and layout_height.
Code A
<?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">
<com.google.android.gms.ads.AdView xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="#+id/adView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
ads:layout_constraintTop_toTopOf="parent"
ads:adSize="SMART_BANNER"
ads:adUnitId="#string/ad_unit_id"
/>
<LinearLayout
android:id="#+id/linearLayoutToolBar"
style="#style/myToolbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<Button
android:id="#+id/btnBackup"
style="#style/myTextMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:text="#string/BtnBackup" />
<Button
android:id="#+id/btnExit"
style="#style/myTextMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:text="#string/BtnExit" />
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/mRecyclerView"
android:layout_width="368dp"
android:layout_height="396dp"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="58dp" />
</android.support.constraint.ConstraintLayout>
Code B
<android.support.v7.widget.RecyclerView
android:id="#+id/mRecyclerView"
android:layout_width="368dp"
android:layout_height="396dp"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="58dp" />
Replace your RecyclerView code like below to fill the free space:
<android.support.v7.widget.RecyclerView
android:id="#+id/mRecyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#id/adView"
app:layout_constraintBottom_toTopOf="#id/linearLayoutToolBar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
Related
Whenever I'll scroll my activity, I want toolbar should remain stable and else everything should go below the toolbar. I have used CollapsingToolbarLayout and AppBarLayout, but still I'm not getting proper solution.
Here in this code, CircleImageView and CardView are comming above the toolbar while scrolling.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/contact_photo_height"
android:elevation="8dp">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsideToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorAccent"
app:title="back"
app:titleEnabled="false"
>
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="200dp"
android:src="#drawable/verify_image"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:fitsSystemWindows="true"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<androidx.appcompat.widget.Toolbar
android:id="#+id/tool_bar"
app:title="back"
app:titleTextColor="#color/white"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentInsetStartWithNavigation="0dp"
android:theme="#style/ToolbarTheme"
app:layout_collapseMode="pin"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.cardview.widget.CardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"
app:cardElevation="5dp"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="bottom|center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</androidx.cardview.widget.CardView>
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:elevation="8dp"
android:src="#drawable/bg4"
app:layout_anchor="#+id/cardView"
app:layout_anchorGravity="top|center" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
You are missing one of the most important property app:layout_behavior in card view.
If you want eveything else like cardview, circular ImageView and rest to scroll till toolbar then club them in Relative or LinearLayout and assign app:layout_behavior="#string/appbar_scrolling_view_behavior".
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.cardview.widget.CardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"
app:cardElevation="5dp"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="bottom|center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:elevation="8dp"
android:src="#drawable/bg4"
app:layout_anchor="#+id/cardView"
app:layout_anchorGravity="top|center" />
</LinearLayout>
Now, everything will just scroll properly. Hope it helps.
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.
I am struggling big time with trying to make a simple layout with two TextView:s under each other on the left and corresponding two TimePicker:s under each other on the right. However, whichever view I use or attributes I choose that seem relevant I do not get the desired outcome. Here is my current try:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1"
>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
>
<TextView
android:layout_column="1"
android:id="#+id/text_start_time"
android:text="#string/start_time"
android:gravity="center_horizontal"
/>
<TimePicker
android:id="#+id/time_picker_start"
android:timePickerMode="spinner"
android:layout_marginTop="-25dp"
android:layout_marginBottom="-25dp"
android:layout_gravity="center"
/>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
>
<TextView
android:layout_column="1"
android:id="#+id/text_end_time"
android:text="#string/end_time"
android:layout_gravity="center_horizontal"
/>
<TimePicker
android:id="#+id/time_picker_end"
android:timePickerMode="spinner"
android:layout_marginTop="-25dp"
android:layout_marginBottom="-25dp"
/>
</TableRow>
<TableRow>
<Button
android:layout_column="2"
android:layout_width="match_parent"
android:text="#string/button_calculate"
android:gravity="center"
android:onClick="calculateWorkingTime"
/>
</TableRow>
</TableLayout>
This gives the following output
Where is "Start"?
As you can see "Start" is not even shown! I would like to align "Start" with the vertical center of the TimePicker spinner. How to do that?
First, don't use a TableLayout. Use Linears, as you are a beginner and they're easier to use and understand. Here's what you should do:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/text_start_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/start_time"
android:gravity="center_horizontal"
/>
<TimePicker
android:id="#+id/time_picker_start"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:timePickerMode="spinner"
android:layout_marginTop="-25dp"
android:layout_marginBottom="-25dp"
android:layout_gravity="center"
/>
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/text_end_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/end_time"
android:gravity="center_horizontal"
/>
<TimePicker
android:id="#+id/time_picker_end"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:timePickerMode="spinner"
android:layout_marginTop="-25dp"
android:layout_marginBottom="-25dp"
android:layout_gravity="center"
/>
</LinearLayout>
<Button
android:layout_column="2"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:text="#string/button_calculate"
android:gravity="center"
android:onClick="calculateWorkingTime"
/>
</LinearLayout>
What I've done is creating a Linear Layout and, into it, another two with orientation:horizontal, which makes the elements appear one next to each other.
Also, I've put width and height to all the elements, what is very important.
I've put wrap_content, if you want to change it, no problem.
I didn't test it, if there's any error, just coment
Hope it helps!
I would like to align the view element in the current layout with the view element which I included through tag in Android.
Layout1: (Layout1.xml)
<?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="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/click_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/desc"
android:padding="4dp"
android:src="#drawable/icon_click" />
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:gravity="bottom"
android:paddingLeft="8dp"
android:paddingTop="6dp"
android:text="#string/textview1"
/>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView1"
android:text="#string/textView2"
/>
</RelativeLayout>
</LinearLayout>
Layout2:
<?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" >
<include
android:id="#+id/includedLayout"
layout="#layout/Layout1" />
<View
android:id="#+id/seperator"
android:layout_width="wrap_content"
android:layout_height="1dp"
android:alpha="0.3"
android:background="#FFFFFF" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<!-- I want to align this layout with relative layout present in the
Layout1.xml file which is included above -->
</LinearLayout>
</LinearLayout>
I want to align the second LinearLayout in the Layout2.xml with the RelativeLayout in the Layout1.xml file which is included in the Layout2.xml file.
Please let me know if anyone knows the solution.
Thanks.
whay dont you try putting the layout part that you want to align in to another file and only include that file in to the your layout2.xml and manually coding remining part in the layout2.xml.
What i mean is to take
`
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:gravity="bottom"
android:paddingLeft="8dp"
android:paddingTop="6dp"
android:text="#string/textview1"
/>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView1"
android:text="#string/textView2"
/>
</RelativeLayout>`
this part in to another separate file and manually add imageview in to layout2.xml
Is there a way to create a visual divider in a relative layout similar to the way you can using a list divider?
This is what I have currently.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_height="wrap_content"
android:text="Screen Ratio:"
android:id="#+id/ScreenRatio"
android:layout_width="100dip"
android:layout_alignTop="#+id/ratio_spinner"
android:layout_alignBottom="#+id/ratio_spinner"
android:gravity="center_vertical"/>
<Spinner android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/ScreenRatio"
android:id="#+id/ratio_spinner"/>
<TextView
android:layout_height="wrap_content"
android:text="Units:"
android:id="#+id/Units"
android:layout_width="wrap_content"
android:layout_toLeftOf="#+id/unit_spinner"
android:layout_alignTop="#+id/unit_spinner"
android:layout_alignBottom="#+id/unit_spinner"
android:gravity="center_vertical"
android:layout_alignParentLeft="true"/>
<Spinner android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/ScreenRatio"
android:layout_below="#+id/ratio_spinner"
android:id="#+id/unit_spinner"/>
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Clear"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:gravity="fill"
android:paddingLeft="50dip"
android:paddingRight="50dip"/>
</RelativeLayout>
So far , i have tried to add separator inside the TableLayout using the below code:
<View android:id="#+id/view_separator"
android:background="#FFFFFF"
android:layout_centerVertical ="true"
android:layout_width = "fill_parent"
android:layout_height="2dip"
android:layout_alignParentTop="true"/>
It may helps you, just try it.