I have the following activity_main.xml file, and I want to align the three buttons inside the LinearLayout to the bottom of the page. I've tried layout_alignParentBotton="true"
but that doesn't work.. is there any setting that would let me bring the linearLayout to the bottom of the activity?
thanks
<?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:background="#color/blueBackground"
tools:context="org.pctechtips.george.dailyquotes.MainActivity">
<TextView
android:id="#+id/main_title"
android:layout_width="368dp"
android:layout_height="wrap_content"
android:text="Daily Quotes"
android:textSize="30dp"
android:textColor="#color/whiteText"
android:textAlignment="center"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="16dp" />
<ImageView
android:id="#+id/main_image"
android:layout_width="100dp"
android:layout_height="100dp"
app:srcCompat="#mipmap/ic_launcher_round"
android:layout_centerHorizontal="true"
tools:layout_editor_absoluteY="89dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent" />
<TextView
android:id="#+id/quote_text"
android:layout_width="368dp"
android:layout_height="wrap_content"
android:text="This is a random text"
android:textColor="#color/whiteText"
android:textSize="20dp"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="246dp" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true">
<ImageView
android:id="#+id/previous_quote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#android:drawable/ic_media_previous"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="473dp" />
<ImageView
android:id="#+id/share_quote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="473dp" />
<ImageView
android:id="#+id/next_quote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#android:drawable/ic_media_next"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="473dp" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
Change android:layout_alignParentBottom="true" to app:layout_constraintBottom_toBottomOf="parent". Here is an example that also stretches that layout to the width of the parent and centers the views within it
...
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
...
Add following Constraints to Your Linear layout .
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
Some of your views are not constraints properly. If you want to use RelativeLayout then try the solution below .
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/blueBackground"
tools:context="org.pctechtips.george.dailyquotes.MainActivity">
<TextView
android:id="#+id/main_title"
android:layout_width="368dp"
android:layout_height="wrap_content"
android:text="Daily Quotes"
android:textSize="30dp"
android:textAlignment="center"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="16dp" />
<ImageView
android:id="#+id/main_image"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_below="#+id/main_title"
app:srcCompat="#mipmap/ic_launcher_round"
android:layout_centerHorizontal="true"
/>
<TextView
android:id="#+id/quote_text"
android:layout_width="match_parent"
android:layout_below="#+id/main_image"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_centerHorizontal="true"
android:text="This is a random text"
android:textSize="20dp"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true">
<ImageView
android:id="#+id/previous_quote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#android:drawable/ic_media_previous"
/>
<ImageView
android:id="#+id/share_quote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<ImageView
android:id="#+id/next_quote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#android:drawable/ic_media_next"
/>
</LinearLayout>
</RelativeLayout>
Replace the parent constraint layout with a RelativeLayout
Try editing your layout this way:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"
android:orientation="vertical" android:background="#color/blueBackground" tools:context="org.pctechtips.george.dailyquotes.MainActivity">
<LinearLayout android: layout_weight="1" android orientation="vertical" android:layout_width="match_parent" android:layout_height="0dp">
<TextView android:id="#+id/main_title" android:layout_width="368dp" android:layout_height="wrap_content" android:text="Daily Quotes" android:textSize="30dp" android:textColor="#color/whiteText" android:textAlignment="center" /> <ImageView android:id="#+id/main_image" android:layout_width="100dp" android:layout_height="100dp" app:srcCompat="#mipmap/ic_launcher_round" /> <TextView android:id="#+id/quote_text" android:layout_width="368dp" android:layout_height="wrap_content" android:text="This is a random text" android:textColor="#color/whiteText" android:textSize="20dp"/>
</LinearLayout>
<LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_alignParentBottom="true"> <ImageView android:id="#+id/previous_quote" android:layout_width="wrap_content" android:layout_height="wrap_content" app:srcCompat="#android:drawable/ic_media_previous"/> <ImageView android:id="#+id/share_quote" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <ImageView android:id="#+id/next_quote" android:layout_width="wrap_content" android:layout_height="wrap_content" app:srcCompat="#android:drawable/ic_media_next"/> </LinearLayout> </LinearLayout>
Note the layout weight in the Linear Layout.
Your root layout is a ConstraintLayout so you should position its children using the appropriate constraints listed in the documentation. In order to position the LinearLayout at the bottom center and wrap its content you should use the following:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
You can also optimize your layout by removing the LinearLayout altogether and constraining the three ImageViews in a horizontal chain as direct children of the root ConstraintLayout like this:
<ImageView
android:id="#+id/previous_quote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#android:drawable/ic_media_previous"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/share_quote"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="#+id/share_quote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/next_quote"
app:layout_constraintStart_toEndOf="#id/previous_quote"/>
<ImageView
android:id="#+id/next_quote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#android:drawable/ic_media_next"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/share_quote" />
Try this..
<?xml version="1.0" encoding="utf-8"?><?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:background="#android:color/holo_blue_light">
<TextView
android:id="#+id/main_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Daily Quotes"
android:textAlignment="viewStart"
android:textColor="#android:color/white"
android:textSize="30dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="#+id/main_image"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:srcCompat="#mipmap/ic_launcher_round"
tools:layout_editor_absoluteY="89dp" />
<TextView
android:id="#+id/quote_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:text="This is a random text"
android:textColor="#android:color/white"
android:textSize="20dp"
app:layout_constraintTop_toBottomOf="#id/main_image" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<ImageView
android:id="#+id/previous_quote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#android:drawable/ic_media_previous" />
<ImageView
android:id="#+id/share_quote"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/next_quote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#android:drawable/ic_media_next" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
Related
How can I make the Linear layout's background transparent?
I want to make the area around the share button transparent. I have tried various solutions like
android:background="#android:color/transparent"
and
android:alpha="0"
and many other solutions but none of these seems working.
How can I make this area transparent over the image and other elements?
I have also tried the Frame Layout but it also doesn't work.
Here is my XML code:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="#style/Theme.MaterialComponents"
tools:context=".ReadMoreActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingBottom="100dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/readMoreImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitCenter" />
<TextView
android:id="#+id/readMoreTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Card Title"
android:textAlignment="center"
android:textColor="#000000"
android:textSize="30dp" />
<TextView
android:id="#+id/readMoreDesc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:paddingBottom="20dp"
android:text="Card description"
android:textAlignment="textStart"
android:textColor="#000000" />
</LinearLayout>
</ScrollView>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_gravity="center"
android:layout_marginTop="-100dp"
android:orientation="horizontal">
<com.google.android.material.button.MaterialButton
android:id="#+id/shareButton"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:paddingLeft="50dp"
android:paddingRight="50dp"
android:text="Share"
android:textColor="#ffff"
android:textSize="25dp"
app:backgroundTint="#9C27B0"
app:strokeColor="#9C27B0"
app:strokeWidth="2dp" />
</LinearLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
If I undestood You correclty You can do it like this:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="#style/Theme.MaterialComponents"
>
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher_background"
/>
<TextView
android:id="#+id/readMoreTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Card Title"
android:textAlignment="center"
android:textColor="#000000"
android:textSize="30sp"
/>
<TextView
android:id="#+id/readMoreDesc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:text="#string/long_card_desc"
android:textAlignment="textStart"
android:textColor="#000000"
>
</TextView>
</LinearLayout>
</ScrollView>
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:backgroundTint="#880E4F"
android:text="Share"
android:textColor="#FFF9C4"
app:cornerRadius="15dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:strokeColor="#006064"
app:strokeWidth="1dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
Now Button sticks to the bottom of the screen and You can scroll the content.
Result (left with a scrolled view and right starter look):
I have one FloatingActionButton. I want it to be end|bottom like
What I want
this.
Currently, My design is like this
What I have
I want it to be at the exact end|bottom of the screen. How to do that?
Which layout is best to use?
This is my whole xml code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:padding="30dp">
<ImageView
android:id="#+id/post_request_back_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/general_back_icon" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:fontFamily="#font/muli_black"
android:text="#string/_post_request_header_name"
android:textAllCaps="true"
android:textColor="#color/colorAccent"
android:textSize="30sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="#string/how_requests_work"
android:textColor="#color/colorAccent"
android:textSize="10sp" />
<ListView
android:id="#+id/postlist"
android:layout_width="match_parent"
android:layout_height="420dp"
android:layout_marginStart="0dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="0dp"
app:layout_constraintBottom_toTopOf="#+id/postadd"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/postadd"
android:layout_marginTop="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"
android:src="#drawable/postrequest_add_btn" />
</LinearLayout>
You can wrap your FAB button into a RelativeLayout and keep other views in your LinearLayout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="30dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/post_request_back_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/general_back_icon" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:fontFamily="#font/muli_black"
android:text="#string/_post_request_header_name"
android:textAllCaps="true"
android:textColor="#color/colorAccent"
android:textSize="30sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="#string/how_requests_work"
android:textColor="#color/colorAccent"
android:textSize="10sp" />
<ListView
android:id="#+id/postlist"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp" />
</LinearLayout>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/postadd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_margin="16dp"
android:layout_marginTop="20dp"
android:src="#drawable/postrequest_add_btn" />
</RelativeLayout>
Note: I removed the Constraints you added to the ListView as they are related to ConstraintLayout, also made its height as wrap_content
And here is with the ConstraintLayout
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="30dp">
<ImageView
android:id="#+id/post_request_back_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/general_back_icon"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_post_request_header_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:fontFamily="#font/muli_black"
android:text="#string/_post_request_header_name"
android:textAllCaps="true"
android:textColor="#color/colorAccent"
android:textSize="30sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/post_request_back_button" />
<TextView
android:id="#+id/id_how_requests_work"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="#string/how_requests_work"
android:textColor="#color/colorAccent"
android:textSize="10sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_post_request_header_name" />
<ListView
android:id="#+id/postlist"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/id_how_requests_work" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/postadd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_margin="16dp"
android:layout_marginTop="20dp"
android:src="#drawable/postrequest_add_btn" />
</androidx.constraintlayout.widget.ConstraintLayout>
I am using a fragment to display cardview and a common Bottomnavigation for all fragments. Here I have more than 5 cards as per my data but I am not able to scroll to see all cards. only scrollable up to the second card and the second one is also not fully visible due to the bottom navigation.
main_activity.xml
<?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"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff293353"
android:paddingTop="20dp">
<fragment
android:id="#+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_above="#id/nav_view"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="#navigation/mobile_navigation" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/nav_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:background="#drawable/bottom_tab_style"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/bottom_nav_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>
Then Recycleview
<?xml version="1.0" encoding="utf-8"?>
<ScrollView android:layout_height="wrap_content"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginTop="5dp"
android:orientation="horizontal"
android:layout_marginBottom="10dp"
android:weightSum="1"
android:layout_marginStart="70dp"
android:layout_marginEnd="70dp"
android:layout_gravity="center"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:background="#drawable/left_enabled"
android:layout_weight="0.5"
android:textAlignment="center"
android:id="#+id/btn_normal"
android:text="#string/normal"
android:textColor="#color/white"
android:textStyle="bold" />
<TextView
android:id="#+id/btn_cognitive"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:background="#drawable/right_disabled"
android:gravity="center"
android:text="#string/cognitive"
android:textAlignment="center"
android:textColor="#color/white"
android:textStyle="bold" />
</LinearLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_marginTop="5dp"
android:layout_height="wrap_content">
</androidx.recyclerview.widget.RecyclerView>
</LinearLayout>
</ScrollView>
Then cardview content
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:layout_width="match_parent"
android:background="#drawable/cardstyle"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
>
<com.google.android.material.card.MaterialCardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/transparent"
card_view:cardBackgroundColor="#color/transparent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
card_view:cardCornerRadius="12dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#3f4865"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="35dp"
>
<TextView
android:id="#+id/txt_recordTitle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fontFamily="#font/poppins"
android:paddingStart="12dp"
android:text="Normal Test 01"
android:gravity="center_vertical"
android:textColor="#color/white"
android:textSize="14sp" />
</LinearLayout>
<LinearLayout
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center_vertical"
android:layout_marginEnd="10dp"
android:src="#drawable/ic_card_walk" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/parameter1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/poppins"
android:letterSpacing="0.12"
android:text="No: of gait cycles"
android:textColor="#cecece"
android:textSize="12sp" />
<TextView
android:id="#+id/p1_value"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/poppins"
android:letterSpacing="0.16"
android:text="Details"
android:textColor="#FFF"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginEnd="10dp"
android:src="#drawable/ic_card_walk" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/parameter2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/poppins"
android:letterSpacing="0.12"
android:text="Stride Length"
android:textColor="#cecece"
android:textSize="12sp" />
<TextView
android:id="#+id/p2_value"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/poppins"
android:letterSpacing="0.16"
android:text="Details"
android:textColor="#FFF"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginEnd="10dp"
android:src="#drawable/ic_card_walk" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/parameter3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/poppins"
android:letterSpacing="0.12"
android:text=" Gait time"
android:textColor="#cecece"
android:textSize="12sp" />
<TextView
android:id="#+id/p3_value"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/poppins"
android:letterSpacing="0.16"
android:text="p2"
android:textColor="#FFF"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:background="#drawable/info_button_style"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="#string/total_n_gait_score"
android:textAlignment="center"
android:textColor="#FFF" />
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<ProgressBar
android:id="#+id/card_progressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_centerInParent="true"
android:layout_marginTop="10dp"
android:background="#drawable/circle_shape"
android:indeterminate="false"
android:max="100"
android:progress="65"
android:progressDrawable="#drawable/card_progress" />
<TextView
android:id="#+id/text_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="60%"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#color/white" />
</FrameLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:orientation="horizontal"
android:paddingBottom="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ellipsize="end"
android:maxLines="1"
android:id="#+id/card_date"
android:text="date"
android:textColor="#FFF"
android:textSize="1sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:ellipsize="end"
android:maxLines="1"
android:text="time"
android:id="#+id/card_time"
android:textColor="#FFF"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</com.google.android.material.card.MaterialCardView>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Please check my code and help me with this.
This is wrong in your main_activity.xml for fragment android:layout_above="#id/nav_view", it is used for RelativeLayout. Instead use app:layout_constraintBottom_toTopOf="#id/nav_view". This will solve your second issue(the second one is also not fully visible due to the bottom navigation).
Change your ScrollView to NestedScrollView.
In your cardview content you don't need ConstraintLayout, LinearLayout is sufficient as root element (remove ConstraintLayout as you are not utilising its power of flat view hierarchy). And if your LinearLayout background can be moved to background for MaterialCardView then you don't need LinearLayout too.
For your recyclerview set the nestedScrollingEnabled to false either through xml or by code. Try these things, it will solve your problem.
I'm trying to create the following layout:
Basically, I have two TextViews and two icons. The icons are on the same row as the mobile header and the the mobile number. I have created the following XML:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/phone_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/primaryDarkColor"
android:textStyle="bold"
android:text="Phone number"
android:textSize="18sp"
android:layout_marginBottom="5dp" />
<TextView
android:id="#+id/phone_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15sp"
android:textStyle="bold"
android:layout_alignBottom="#id/phone_header" />
<ImageView
android:id="#+id/phone_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/phone_info"
android:layout_alignEnd="#id/phone_info"
app:srcCompat="#drawable/ic_call_white_24dp" />
<ImageView
android:id="#+id/message_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/phone_icon"
android:layout_alignEnd="#id/phone_icon"
app:srcCompat="#drawable/ic_meessage_white_24dp" />
</RelativeLayout>
But it didn't set the layout properly. What is the best way would be to set the icons on the same row as the two TextViews?
I made something like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="mobile" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+1 32004 1001" />
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:srcCompat="#drawable/ic_baseline_info_24" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:srcCompat="#drawable/ic_baseline_info_24" />
</LinearLayout>
And it looks like this:
Or just do it like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="40dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_toStartOf="#+id/img1"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="mobile" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+1 32004 1001" />
</LinearLayout>
<ImageView
android:layout_toStartOf="#+id/img2"
android:id="#+id/img1"
android:adjustViewBounds="true"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:srcCompat="#drawable/ic_baseline_info_24" />
<ImageView
android:adjustViewBounds="true"
android:id="#+id/img2"
android:layout_alignParentEnd="true"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:srcCompat="#drawable/ic_baseline_info_24" />
</RelativeLayout>
Second way I think is better and ll not affect your icons if the screen is small and text wide
This gets you
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat 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="wrap_content"
android:orientation="horizontal"
tools:context=".MainActivity">
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text 1 " />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text 2 " />
</androidx.appcompat.widget.LinearLayoutCompat>
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:gravity="center_vertical|end"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Icon 1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Icon 2 " />
</androidx.appcompat.widget.LinearLayoutCompat>
</androidx.appcompat.widget.LinearLayoutCompat>
design
You can simply do this using constraint layout like below.
<?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:layout_width="match_parent"
android:background="#color/color_black"
android:padding="10dp"
android:layout_height="wrap_content"
tools:context=".ui.activities.MainActivity">
<TextView
android:id="#+id/phone_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/color_white"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:text="Mobile"
android:textSize="18sp" />
<TextView
android:id="#+id/phone_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
app:layout_constraintStart_toStartOf="parent"
android:text="+1 302024 101"
android:textColor="#color/color_white"
android:layout_marginTop="2dp"
app:layout_constraintTop_toBottomOf="#id/phone_header"
android:textStyle="bold"/>
<ImageView
android:id="#+id/phone_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="#id/message_icon"
app:layout_constraintBottom_toBottomOf="#id/message_icon"
android:layout_marginEnd="5dp"
app:layout_constraintEnd_toStartOf="#id/message_icon"
app:srcCompat="#drawable/ic_check_white_24dp" />
<ImageView
android:id="#+id/message_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:srcCompat="#drawable/ic_error_white_24dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
output:
Is it possible to use ConstraintLayout inside CardView for so that I can inflate it for a RecyclerView?
Current layout is like this but I want to display it inside a CardView.
https://i.stack.imgur.com/MeArp.png
Reference XML code:
<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="wrap_content"
android:minHeight="?android:attr/listPreferredItemHeight"
android:background="#drawable/touch_selector"
android:paddingBottom="#dimen/list_item_padding_vertical"
android:paddingLeft="#dimen/list_item_padding_horizontal"
android:paddingRight="#dimen/list_item_padding_horizontal"
android:paddingTop="#dimen/list_item_padding_vertical">
<ImageView
android:id="#+id/weather_icon"
android:layout_width="#dimen/list_icon"
android:layout_height="#dimen/list_icon"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline"
tools:src="#drawable/art_clouds"/>
<TextView
android:id="#+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/list_item_date_left_margin"
android:layout_marginStart="#dimen/list_item_date_start_margin"
android:textAppearance="#style/TextAppearance.AppCompat.Subhead"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintLeft_toRightOf="#+id/weather_icon"
tools:text="Today, April 03"/>
<TextView
android:id="#+id/weather_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/secondary_text"
app:layout_constraintLeft_toLeftOf="#+id/date"
app:layout_constraintTop_toTopOf="#+id/guideline"
tools:text="Rainy"/>
<TextView
android:id="#+id/high_temperature"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/forecast_temperature_space"
android:layout_marginRight="#dimen/forecast_temperature_space"
android:fontFamily="sans-serif-light"
android:textColor="#color/primary_text"
android:textSize="#dimen/forecast_text_size"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintRight_toLeftOf="#+id/low_temperature"
app:layout_constraintTop_toTopOf="#+id/guideline"
tools:text="19\u00b0"/>
<TextView
android:id="#+id/low_temperature"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-light"
android:gravity="end"
android:textSize="#dimen/forecast_text_size"
app:layout_constraintBottom_toBottomOf="#+id/guideline"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline"
tools:text="10\u00b0"/>
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5"/>
</android.support.constraint.ConstraintLayout>
Yep, it's possible! Put your ConstraintLayout xml code inside CardView. You can also check out various card view implementations done in compliance with Material design guidelines.
You have ConstraintLayout in the parent. Use it inside CardView for having ConstraintLayout.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/animals" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintTop_toBottomOf="#id/imageView">
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title" />
<TextView
android:id="#+id/totalJokes"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="100" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
</FrameLayout>
For Androidx use it like this:
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_margin="#dimen/card_margin"
android:clickable="true"
android:elevation="8dp"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
card_view:cardCornerRadius="#dimen/card_radius">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<androidx.constraintlayout.widget.Guideline
android:id="#+id/firsthline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/firstvline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.3" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/secondvline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.7" />
<ImageView
android:id="#+id/image"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="8dp"
android:scaleType="fitCenter" />
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="bottom"
android:paddingStart="#dimen/text_padding"
android:paddingEnd="#dimen/text_padding"
android:textColor="#android:color/black"
android:textSize="#dimen/cuvantprincipal"
android:textStyle="bold" />
<TextView
android:id="#+id/subtitle"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_below="#id/title"
android:gravity="top"
android:paddingStart="#dimen/text_padding"
android:paddingEnd="#dimen/text_padding"
android:textColor="#android:color/black"
android:textSize="#dimen/cuvantsecundar" />
<ImageView
android:id="#+id/playbutton"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginEnd="32dp"
android:src="#drawable/play" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>