I'm making an Custom Dialog. I have 2 buttons, "Select Other Cards" and "Ok" but somehow the "Ok" button won't show. I'm quite new using LineairLayouts. I have a horizontal layout in an vertical one.
What the dialog shows:
What I want the dialog to show:
<?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:padding="5dp"
android:background="#color/colorLightBlue"
android:onClick="selectOtherCardsButtonClick">
<TextView
android:id="#+id/finishedTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:fontFamily="#font/patrickhand_regular"
android:text="#string/finishedCards"
android:textColor="#color/colorWhite"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/selectOtherButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:padding="5dp">
<Button
android:id="#+id/selectOtherButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:background="#drawable/button_background"
android:text="#string/selectOtherCards"
android:textColor="#color/colorWhite"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/okButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:background="#drawable/button_background"
android:text="#string/ok"
android:textColor="#color/colorWhite"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/selectOtherButton"
app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>
</LinearLayout>
I hope anyone knows what my problem is.
Thankyou for helping!
Probably selectOtherButton covers all the horizontal space and the okButton is under selectOtherButton.
Define weights for the space that will cover each button, something like 4 to 1 (or adjust it to suit your design) with the android:layout_weight attribute for both buttons:
<Button
android:id="#+id/selectOtherButton"
android:layout_weight="4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:background="#drawable/button_background"
android:text="#string/selectOtherCards"
android:textColor="#color/colorWhite"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/okButton"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:background="#drawable/button_background"
android:text="#string/ok"
android:textColor="#color/colorWhite"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/selectOtherButton"
app:layout_constraintTop_toTopOf="parent" />
Try to lower your text size for example try with:
android:textSize="14sp"
or use less words like: select others. Weight might convert the button to two rows. And it might not look good in the end.
Related
I am using a constraint layout and card views in it, but on different screen sizes the card views are not in the same place. I thought the idea of constraint is that you only have to arrange the card view for one time and it automatically aligns to the different device sizes. The first picture shows the screen I want to have on every device size and the other picture shows you the result of a different size where the CardViews are obviously not in the right place.
I already tried using guidelines but it doesn't help. Or is it better to use another Layout like RelativeLayout? But what's then the point of a ConstraintLayout?
Design as it should be
Result with different size
Thank you for your help!
Here is my 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".spielen_uebersicht">
<TextView
android:id="#+id/spieler_suche"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="Spieler suchen:"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.484"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.cardview.widget.CardView
android:id="#+id/cardView3"
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_margin="8dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="20dp"
app:cardElevation="7dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/spieler_suche">
<SearchView
android:id="#+id/searchView_spieler_suchen"
android:layout_width="match_parent"
android:layout_height="50dp"
android:clickable="true"
android:focusable="true"
android:gravity="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:queryBackground="#android:color/transparent" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/zufälliger_spieler"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginStart="36dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="20dp"
app:cardElevation="7dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cardView3"
app:layout_constraintVertical_bias="0.198">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="Zufälliger Spieler"
android:textAlignment="center"
android:textSize="20sp" />
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:src="#mipmap/zufaelliger_spieler" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/cardView"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginStart="32dp"
android:layout_marginTop="8dp"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="20dp"
app:cardElevation="7dp"
app:layout_constraintBottom_toBottomOf="#+id/zufälliger_spieler"
app:layout_constraintStart_toEndOf="#+id/zufälliger_spieler"
app:layout_constraintTop_toBottomOf="#+id/cardView3"
app:layout_constraintVertical_bias="1.0">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="Freunde einladen"
android:textAlignment="center"
android:textSize="20sp" />
<ImageView
android:id="#+id/imageView"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:src="#mipmap/freunde_einladen" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/cardViewFreundesübersicht"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginStart="32dp"
android:layout_marginTop="36dp"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="20dp"
app:cardElevation="7dp"
app:layout_constraintStart_toEndOf="#+id/cardView2"
app:layout_constraintTop_toBottomOf="#+id/cardView">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:text="Freundes-\nübersicht"
android:textAlignment="center"
android:textSize="20sp" />
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:src="#mipmap/freundes_uebersicht" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/cardView2"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginStart="36dp"
android:layout_marginTop="36dp"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="20dp"
app:cardElevation="7dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/zufälliger_spieler">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:text="Anfragen"
android:textAlignment="center"
android:textSize="20sp" />
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:src="#mipmap/freundes_anfragen" />
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>```
You don't see your layout the same way on different phones because your cardviews dimensions are a fixed size , why is it bad?
Different phones got different screen size, in your layout you are using fixed size on your view (fixed size is 50dp for example) and the result is that what may look good on one screen (your android studio preview screen) will not look good on another screen (your actual phone).
How to fix it:
You can just use app:layout_constraintWidth_percent and app:layout_constraintHeight_percent on your cardviews to give the size in precents according to the screen.
Something 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button7"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"
app:layout_constraintHeight_percent=".5"
app:layout_constraintBottom_toTopOf="#+id/button3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"
app:layout_constraintHeight_percent=".5"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button2" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"
app:layout_constraintHeight_percent=".5"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"
app:layout_constraintHeight_percent=".5"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/button7" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="20dp"
app:layout_constraintGuide_percent=".5" />
</androidx.constraintlayout.widget.ConstraintLayout>
In this example, I have 4 buttons that represent your cardViews.
They are all equal in size and will be responsive to all screen sizes.
This layout will look like this (the arrow points to the guideline, to make it more understandable):
For Future Visitors, Chains are the magical word when trying to simulate Linear layout form. using horizontal chains with vertical ones along with using dynamic View sizes as Tamir Abutbul mentioned should be the best practice.
<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">
<TextView
android:id="#+id/textView24"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:gravity="center"
android:text="Title"
android:textColor="#android:color/black"
android:textSize="?android:attr/actionBarSize"
android:textStyle="bold"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.button.MaterialButton
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableBottom="#android:drawable/ic_media_play"
android:text="text 4"
android:textSize="24sp"
android:padding="50dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/btn3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btn3"
app:layout_constraintTop_toTopOf="#+id/btn3" />
<com.google.android.material.button.MaterialButton
android:id="#+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableBottom="#android:drawable/ic_media_play"
android:text="text 2"
android:textStyle="bold"
android:textSize="24sp"
android:padding="50dp"
app:layout_constraintBottom_toBottomOf="#+id/btn4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btn4"
app:layout_constraintTop_toTopOf="#+id/btn4" />
<com.google.android.material.button.MaterialButton
android:id="#+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableBottom="#android:drawable/ic_media_play"
android:text="text 3"
android:textStyle="bold"
android:textSize="24sp"
android:padding="50dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/btn4"
app:layout_constraintEnd_toStartOf="#+id/btn1"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btn4" />
<com.google.android.material.button.MaterialButton
android:id="#+id/btn4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableBottom="#android:drawable/ic_media_play"
android:text="text 1"
android:textStyle="bold"
android:textSize="24sp"
android:padding="50dp"
app:layout_constraintBottom_toTopOf="#+id/btn3"
app:layout_constraintEnd_toStartOf="#+id/btn2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView24"/></androidx.constraintlayout.widget.ConstraintLayout>
Best of luck ;)
I am new in Android development. I have a View that has black background color that also has opacity 75% so it will make like a shadow above the edit text, text view and button.
as you can see in the component tree, I have placed the button at the top, and the shadow view in the bottom. I expect that green button will be overlaid below the shadow view, but as you can see, it still on the top of the shadow view
here is the xml I use:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
tools:context=".Fragments.Search.SearchFragment"
android:id="#+id/constraintLayout_search">
<Button
android:text="Cari Acara"
android:layout_width="0dp"
android:layout_height="50dp" android:id="#+id/button_search_event_search"
android:layout_marginTop="32dp"
app:layout_constraintTop_toBottomOf="#+id/editText_event_city_search"
app:layout_constraintStart_toStartOf="parent" android:layout_marginStart="16dp"
app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="16dp"
android:background="#drawable/rounded_button"
android:textColor="#ffffff" app:layout_constraintHorizontal_bias="0.0"/>
<View
android:layout_width="0dp"
android:layout_height="48dp"
android:id="#+id/view_outer_search_bar_search_fragment"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" android:background="?attr/colorPrimary"
app:layout_constraintTop_toTopOf="parent"/>
<View
android:layout_width="0dp"
android:layout_height="35dp"
android:id="#+id/view_inner_rounded_search_fragment"
android:background="#drawable/round_outline_search_view"
app:layout_constraintEnd_toEndOf="#+id/view_outer_search_bar_search_fragment"
app:layout_constraintStart_toStartOf="#+id/view_outer_search_bar_search_fragment"
android:layout_marginEnd="16dp"
app:layout_constraintHorizontal_bias="0.0"
android:layout_marginStart="16dp"
app:layout_constraintTop_toTopOf="parent"/>
<ImageView
android:src="#drawable/ic_search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView_search_icon_search_bar_search_fragment"
app:layout_constraintStart_toStartOf="#+id/view_inner_rounded_search_fragment"
android:layout_marginStart="8dp"
app:layout_constraintTop_toTopOf="#+id/view_inner_rounded_search_fragment"
app:layout_constraintBottom_toBottomOf="#+id/view_inner_rounded_search_fragment"/>
<EditText
android:layout_width="0dp"
android:layout_height="0dp"
android:inputType="textPersonName"
android:ems="10"
android:id="#+id/editText_search_keyword_search_fragment"
android:hint="Ketik nama acara, ustadz atau lokasi" android:textSize="12sp"
app:layout_constraintStart_toEndOf="#+id/imageView_search_icon_search_bar_search_fragment"
android:layout_marginStart="4dp" android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="#+id/view_inner_rounded_search_fragment"
app:layout_constraintTop_toTopOf="#+id/view_inner_rounded_search_fragment"
app:layout_constraintBottom_toBottomOf="#+id/view_inner_rounded_search_fragment"
android:background="#android:color/transparent"
android:imeOptions="actionSearch"
android:maxLines="1"/>
<TextView
android:text="Jenis Acara"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView_event_type_label_search"
android:layout_marginTop="24dp" app:layout_constraintTop_toBottomOf="#id/view_grey_search_fragment"
app:layout_constraintStart_toEndOf="#+id/imageView_event_type_icon_search" android:layout_marginStart="16dp"/>
<ImageView
android:src="#drawable/ic_help"
android:layout_width="30dp"
android:layout_height="30dp"
android:id="#+id/imageView_event_type_icon_search" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="16dp" android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/textView_event_type_label_search"/>
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:ems="10"
android:id="#+id/editText_event_type_search"
app:layout_constraintTop_toTopOf="#+id/imageView_event_type_icon_search" app:layout_constraintBottom_toBottomOf="#+id/imageView_event_type_icon_search"
app:layout_constraintStart_toEndOf="#+id/imageView_event_type_icon_search" android:layout_marginStart="16dp"
app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="16dp" tools:text="Kajian Islam"
android:cursorVisible="false"
android:focusable="false"
android:focusableInTouchMode="false"/>
<ImageView
android:src="#drawable/ic_date_time"
android:layout_width="30dp"
android:layout_height="30dp"
android:id="#+id/imageView_event_time_icon_search"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="16dp" app:layout_constraintTop_toBottomOf="#+id/textView_event_time_label_search"
android:layout_marginTop="8dp"/>
<TextView
android:text="Waktu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView_event_time_label_search" android:layout_marginTop="16dp"
app:layout_constraintTop_toBottomOf="#+id/editText_event_type_search" app:layout_constraintStart_toEndOf="#+id/imageView_event_time_icon_search"
android:layout_marginStart="16dp"/>
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:ems="10"
android:id="#+id/editText_event_date_time_search"
app:layout_constraintTop_toTopOf="#+id/imageView_event_time_icon_search"
app:layout_constraintBottom_toBottomOf="#+id/imageView_event_time_icon_search"
app:layout_constraintStart_toEndOf="#+id/imageView_event_time_icon_search" android:layout_marginStart="16dp"
app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="16dp" tools:text="Besok"
android:cursorVisible="false"
android:focusable="false"
android:focusableInTouchMode="false"/>
<ImageView
android:src="#drawable/ic_place"
android:layout_width="30dp"
android:layout_height="30dp"
android:id="#+id/imageView_event_city_icon_search" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="16dp" android:layout_marginTop="16dp"
app:layout_constraintTop_toBottomOf="#+id/textView_event_city_label_search"/>
<TextView
android:text="Kota"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView_event_city_label_search" android:layout_marginTop="16dp"
app:layout_constraintTop_toBottomOf="#+id/editText_event_date_time_search" app:layout_constraintStart_toEndOf="#+id/imageView_event_city_icon_search"
android:layout_marginStart="16dp"/>
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:ems="10"
android:id="#+id/editText_event_city_search"
app:layout_constraintBottom_toBottomOf="#+id/imageView_event_city_icon_search"
app:layout_constraintTop_toTopOf="#+id/imageView_event_city_icon_search" app:layout_constraintStart_toEndOf="#+id/imageView_event_city_icon_search"
android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp" tools:text="Jakarta"
android:cursorVisible="false"
android:focusable="false"
android:focusableInTouchMode="false"/>
<View
android:layout_width="0dp"
android:layout_height="26dp"
android:id="#+id/view_grey_search_fragment" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:background="#E3E5E7"
app:layout_constraintTop_toBottomOf="#+id/view_outer_search_bar_search_fragment"/>
<TextView
android:text="Atau cari berdasarkan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView_find_based_on" android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="#+id/view_grey_search_fragment"
app:layout_constraintTop_toTopOf="#+id/view_grey_search_fragment"
app:layout_constraintStart_toStartOf="#+id/view_grey_search_fragment" android:layout_marginStart="16dp"
android:textColor="#959799"/>
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:id="#+id/view_shadow_search_fragment"
app:layout_constraintTop_toBottomOf="#+id/view_outer_search_bar_search_fragment"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.55"
app:layout_constraintBottom_toBottomOf="parent" android:background="#B3030000"
android:visibility="visible"/>
</androidx.constraintlayout.widget.ConstraintLayout>
so how to make my button overlaid by that shadow view ?
For overlapping views should use FrameLayout or RelativeLayout. I've linked great article for you . Article Link
In this Article RelativeLayout has been used but I highly recommend to you to use FrameLayout for your purpose
Buttons have a higher elevation than other views, even if you declare it earlier in the layout.
you can either
1) wrap your button inside a FrameLayout.
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
... or whatever constraints is required.
>
<Button ... the button of interest/>
</FrameLayout>
or
2) elevate the view that is covering over your button.
<View
android:elevation="2dp"
android:layout_width="match_parent"
android:layout_height="0dp"
android:id="#+id/view_shadow_search_fragment"
app:layout_constraintTop_toBottomOf="#+id/view_outer_search_bar_search_fragment"
app:layout_constraintHorizontal_bias="0.55"
app:layout_constraintBottom_toBottomOf="parent" android:background="#B3030000"
android:visibility="visible"/>
I have an app that displays long strings of text with the press of some buttons, the problem comes when I display a lot of text and the ScrollView just stops scrolling for some reason.
Here is the xml of my app:
<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">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="14dp"
android:layout_marginStart="16dp"
android:layout_marginTop="128dp"
android:text=""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintEnd_toStartOf="#+id/atbutt"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.089" />
</ScrollView>
<Button
android:id="#+id/namebutt"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="12dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:onClick="changename"
android:text="Name"
app:layout_constraintEnd_toStartOf="#+id/titlebutt"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/titlebutt"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginTop="16dp"
android:onClick="changetitle"
android:text="Title"
app:layout_constraintEnd_toStartOf="#+id/descbutt"
app:layout_constraintStart_toEndOf="#+id/namebutt"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/descbutt"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginTop="16dp"
android:onClick="changedesc"
android:text="Description"
android:textSize="13dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/titlebutt"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/urlbutt"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="11dp"
android:layout_marginStart="16dp"
android:layout_marginTop="20dp"
android:onClick="changeurl"
android:text="Url"
app:layout_constraintEnd_toStartOf="#+id/atbutt"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/namebutt" />
<Button
android:id="#+id/atbutt"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_marginEnd="14dp"
android:layout_marginTop="20dp"
android:onClick="changeat"
android:text="Publish Date"
android:textSize="12dp"
app:layout_constraintEnd_toStartOf="#+id/contbutt"
app:layout_constraintStart_toEndOf="#+id/urlbutt"
app:layout_constraintTop_toBottomOf="#+id/titlebutt" />
<Button
android:id="#+id/contbutt"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="17dp"
android:onClick="changecont"
android:text="Content"
app:layout_constraintBottom_toBottomOf="#+id/atbutt"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/atbutt"
app:layout_constraintTop_toTopOf="#+id/atbutt"
app:layout_constraintVertical_bias="0.0" />
</android.support.constraint.ConstraintLayout>
I have seen some people use this same method that I'm using here and it works for them just fine.
Your layout has a few things that look wrong and could explain
undefined behaviour.
change the ScrollView height and width to 0dp which means to respect the constraints set on the view
<ScrollView
android:layout_width="0dp"
android:layout_height="0dp"
...
Remove the constraints from the child of the ScrollView as ContraintLayout only applies rules to direct children.
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="14dp"
android:layout_marginStart="16dp"
android:layout_marginTop="128dp"
android:text=""
/>
I am not getting proper alignment even though I constrained the textviews.My text is running over the other text which looks messy.
Here is the screenshot of that.
I want it to align properly even if the text goes some large.Please suggest some ways to do that.
Here is the code for my layout-
<?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/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/magnitude"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="24dp"
android:layout_marginRight="8dp"
android:layout_marginStart="24dp"
android:layout_marginTop="24dp"
android:textSize="20sp"
android:textStyle="bold"
android:textColor="#color/colorPrimary"
app:layout_constraintBottom_toBottomOf="parent"
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.0"
tools:text="7.5" />
<TextView
android:id="#+id/place"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="8dp"
android:maxWidth="135dp"
android:layout_marginStart="32dp"
android:layout_marginTop="24dp"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/date"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/magnitude"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:text="Rio de Janerio" />
<TextView
android:id="#+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:layout_marginEnd="24dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="24dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.967"
app:layout_constraintStart_toEndOf="#+id/magnitude"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:text="May 20,2016" />
</android.support.constraint.ConstraintLayout>
The New layout that I want is in this image
You can use this library to fit text
build gradle file(app):
implementation 'me.grantland:autofittextview:0.2.+'
Usage in layout
<me.grantland.widget.AutofitTextView
android:id="#+id/question_title"
android:layout_width="match_parent"
android:layout_height="125dp"
android:layout_gravity="center"
android:gravity="center"
android:padding="8dp"
android:text="Post samething"
android:textAlignment="center"
android:textColor="#color/icons"
android:textStyle="bold"
android:maxLines="2"
android:textSize="30sp"
autofit:minTextSize="16sp"
/>
You can read more from this link
Hope this helps
I have re created your layout please use below
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum=".6"
android:padding="15dp"
android:orientation="horizontal">
<TextView
android:id="#+id/magnitude"
android:layout_width="0dp"
android:layout_weight=".1"
android:layout_height="wrap_content"
android:textSize="20sp"
android:padding="5dp"
android:textStyle="bold"
android:textColor="#color/colorPrimary"
tools:text="7.5" />
<TextView
android:id="#+id/place"
android:layout_width="0dp"
android:layout_weight=".3"
android:layout_height="wrap_content"
android:textSize="20sp"
android:padding="5dp"
tools:text="Rio de Janerio" />
<TextView
android:id="#+id/date"
android:layout_width="0dp"
android:layout_weight=".2"
android:padding="5dp"
android:layout_height="wrap_content"
android:textSize="20sp"
tools:text="May 20,2016" />
</LinearLayout>
if you are working with constraint layout you can use the baseline of the text view for this purpose
Baseline alignment
Align the text baseline of a view to the text baseline of another view.
See the related section in the documentation in order to learn how to use the baseline allinment
https://developer.android.com/training/constraint-layout/#baseline
I have a problem with the following xml file:
<?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="#drawable/search_list_leaf"
tools:context=".Flowers_List">
<TextView
android:id="#+id/A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_centerVertical="true"
android:text="A"
android:textSize="30sp"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="56dp" />
<TextView
android:id="#+id/B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
android:textSize="30sp"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="112dp" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SEARCH YOUR FLOWER"
android:textColor="#030303"
android:textSize="30sp"
tools:layout_editor_absoluteX="32dp"
tools:layout_editor_absoluteY="0dp" />
<TextView
android:id="#+id/C"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C"
android:textSize="30sp"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="179dp" />
<TextView
android:id="#+id/D"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="D"
android:textSize="30sp"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="241dp" />
<TextView
android:id="#+id/E"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="E"
android:textSize="30sp"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="310dp" />
The problem is that, even if I change color with the command android:textColor="#color/colorIwant" I get a default color which is green (don't know why) when I run the application, while I have the right color in the design. Another problem is that even if I place all the letters in order on the design and then I apply contraint, when I launch the application I get all the letters distributed in a messy way.
What do you think the problem is about?
I place all the letters in order on the design and then I apply contraint, when I launch the application I get all the letters distributed in a messy way.
That's because you have not put necessary constraint to child TextViews, but the absolute positions.
I tried to solve this issue, see below 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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="A"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<TextView
android:id="#+id/B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="B"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/A" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="SEARCH YOUR FLOWER"
android:textColor="#030303"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/C"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="C"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/B" />
<TextView
android:id="#+id/D"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="D"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/C" />
<TextView
android:id="#+id/E"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="E"
android:textSize="30sp"
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/D"
app:layout_constraintVertical_bias="0.0" />
As you can see, each child TextView is now constrained both sides--vertically and horizontally to the parent, that is the rootview-constraintlayout or other child view.
For example, the constraint constraintEnd_toEndOf will align the end of this view to end of another view. Same way, other constraints work and are applied.
You can also give horizontal and vertical bias to position them properly. Hope this helped a little to understand how constraint works.
for order https://stackoverflow.com/a/50855782/7616371 this is correct
and for change textColor you can use :-
android:textColor="#fff"
and for textview background color
android:background="#fff"