I have two layouts files (fragment_eo_video.xml and fragment_ir_video.xml) that share a large part of components for this reason I decided to create a new layout file (fragment_video.xml) with the common part which I include in the two original files. This's the final structure:
fragment_eo_video.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"
android:background="#android:color/black">
<it.robint.tux.components.ZoomPanTextureView
android:id="#+id/video_surface"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<include layout="#layout/fragment_video" />
</androidx.constraintlayout.widget.ConstraintLayout>
fragment_ir_video.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"
android:background="#android:color/black">
<ImageView
android:id="#+id/video_surface"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/todo"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<include layout="#layout/fragment_video" />
</androidx.constraintlayout.widget.ConstraintLayout>
And finally fragment_video.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"
android:background="#android:color/black">
<ImageView
android:id="#+id/silhouette_surface"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:alpha="0.5"
android:contentDescription="#string/silhouette"
android:rotation="0"
android:scaleType="fitXY"
android:visibility="invisible"
app:srcCompat="#drawable/silhouette"
tools:layout_editor_absoluteX="124dp"
tools:layout_editor_absoluteY="-4dp" />
<TextView
android:id="#+id/video_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:textColor="?android:attr/textColorPrimaryInverseNoDisable"
android:textSize="32sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:visibility="visible" />
<TextView
android:id="#+id/video_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="10dp"
android:textColor="?android:attr/textColorPrimaryInverseNoDisable"
android:textSize="24sp"
app:layout_constraintBottom_toTopOf="#id/compass"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/command_ratio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="5dp"
android:layout_marginBottom="5dp"
android:textColor="?android:attr/textColorPrimaryInverseNoDisable"
android:textSize="30sp"
app:layout_constraintBottom_toTopOf="#+id/speed"
app:layout_constraintEnd_toEndOf="parent" />
<Button
android:id="#+id/video_close"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="5dp"
android:layout_marginBottom="5dp"
android:background="#drawable/close_button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/video_snapshot"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginEnd="5dp"
android:layout_marginBottom="5dp"
android:background="#drawable/snapshot_button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<ToggleButton
android:id="#+id/mic_toggle"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="end|center_vertical"
android:layout_margin="5dp"
android:layout_marginTop="5dp"
android:layout_marginEnd="5dp"
android:background="#drawable/mic_selector"
android:textOff=""
android:textOn=""
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/compass" />
<ToggleButton
android:id="#+id/play_toggle"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="end|center_vertical"
android:layout_margin="5dp"
android:layout_marginStart="5dp"
android:layout_marginTop="5dp"
android:background="#drawable/play_selector"
android:textOff=""
android:textOn=""
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ToggleButton
android:id="#+id/light_toggle"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="5dp"
android:layout_marginTop="5dp"
android:background="#drawable/light_selector"
android:textOff=""
android:textOn=""
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/compass" />
<it.robint.tux.components.CompassView
android:id="#+id/compass"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginStart="5dp"
android:layout_marginEnd="5dp"
app:backgroundColor="#00000000"
app:degrees="0"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:lineColor="#FFFFFF"
app:markerColor="#FF0000"
app:rangeDegrees="180.0"
app:showMarker="true"
app:textColor="#FFFFFF"
app:textSize="15sp" />
<TextView
android:id="#+id/battery_id"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginTop="5dp"
android:layout_marginEnd="5dp"
android:gravity="center"
android:text="#string/def_battery_source"
android:textColor="#ffffff"
android:textSize="20sp"
app:layout_constraintEnd_toStartOf="#id/battery"
app:layout_constraintTop_toTopOf="parent" />
<eo.view.batterymeter.BatteryMeterView
android:id="#+id/battery"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginTop="5dp"
android:layout_marginEnd="5dp"
app:batteryMeterChargeLevel="80"
app:batteryMeterChargingColor="#4caf50"
app:batteryMeterColor="#0277bd"
app:batteryMeterCriticalChargeLevel="15"
app:batteryMeterCriticalColor="#d84315"
app:batteryMeterIndicatorColor="#android:color/transparent"
app:batteryMeterIsCharging="false"
app:batteryMeterTheme="rounded"
app:batteryMeterUnknownColor="#e0e0e0"
app:layout_constraintEnd_toStartOf="#id/rssi"
app:layout_constraintTop_toTopOf="parent" />
<it.robint.tux.components.SignalStrengthView
android:id="#+id/rssi"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginTop="5dp"
android:layout_marginEnd="5dp"
app:fillColor="#ffffffff"
app:frameColor="#ff333333"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:level="20"
app:levelTextColor="#android:color/primary_text_dark_nodisable"
app:safeFillColor="#FF8BC34A"
app:safeLevel="50"
app:showLevelText="true"
app:warnFillColor="#ffFFEB3B"
app:warnLevel="25" />
<TextView
android:id="#+id/target_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginBottom="5dp"
android:textColor="?android:attr/textColorPrimaryInverseNoDisable"
android:textSize="30sp"
app:layout_constraintBottom_toTopOf="#id/target_distance"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/target_distance"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginBottom="5dp"
android:textColor="?android:attr/textColorPrimaryInverseNoDisable"
android:textSize="30sp"
app:layout_constraintBottom_toTopOf="#+id/compass"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/speed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="5dp"
android:layout_marginBottom="5dp"
android:textColor="?android:attr/textColorPrimaryInverseNoDisable"
android:textSize="30sp"
app:layout_constraintBottom_toTopOf="#+id/compass"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Inside layout designer everything seems to work fine but if I start the application the streaming of video displayed on video_surface won't display. I think the main problem is the nesting of CostraintLayout objects (in the original code the silhouette_surface just follows video_surface but on the same xml level). I cannot undestand how to fix it: I tried using <merge /> tag as mentioned here but it doesn't work (layout designer report a number of errors since elements between <merge> cannot use layout_contraint... attributes).
There's a way to do what I need?
--- UPDATE ---
I tried also this following comments:
<it.robint.tux.components.ZoomPanTextureView
android:id="#+id/video_surface"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="#id/hud"
app:layout_constraintEnd_toEndOf="#id/hud"
app:layout_constraintStart_toStartOf="#id/hud"
app:layout_constraintTop_toTopOf="#id/hud" />
<include layout="#layout/fragment_video"
android:id="#+id/hud"
android:layout_width="match_parent"
android:layout_height="match_parent" />
Same result, i.e. video_source is not visibile.
You shouldn't use match parent on both views.
Secondly you should add android:layout_width and height to the include layout. Then you can add constraints to the included layout.
Related
how can a put a TextView befor a Button in xml file? My textview always behind the button. I am in a constraintlayout. I want to make a little number in the top right corner of the button. I made a drawable for that, hat it looks nice.
It would be nice if someone could help! Thanks!!!
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:id="#+id/MainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="at.kessapps.cookieclicker.MainActivity">
<TextView
android:id="#+id/clicker_discount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/sale_corner"
android:text="20%"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/shopbutton"
app:layout_constraintRight_toRightOf="#id/shopbutton"
app:layout_constraintTop_toTopOf="#id/shopbutton" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="350dp"
android:layout_height="80dp"
android:layout_marginTop="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.508"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/cooltext348859404219232" />
<Button
android:id="#+id/shopbutton"
style="#style/Widget.AppCompat.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:hapticFeedbackEnabled="false"
android:onClick="toShop"
android:text="Shop"
android:drawableLeft="#drawable/ic_store"
android:textColor="#color/colorWhite"
android:paddingLeft="5dp"
android:background="#drawable/button_neutral_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<ImageView
android:id="#+id/onOption"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="16dp"
android:layout_marginBottom="16dp"
android:onClick="toOption"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#drawable/optionen" />
</androidx.constraintlayout.widget.ConstraintLayout>
here a picture
Please use this layout to put the TextView on top of Button view:
You need to add android:translationZ="10dp" in TextView
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/MainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="at.kessapps.cookieclicker.MainActivity">
<TextView
android:id="#+id/clicker_discount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:translationZ="10dp"
android:background="#drawable/sale_corner"
android:text="20%"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/shopbutton"
app:layout_constraintRight_toRightOf="#id/shopbutton"
app:layout_constraintTop_toTopOf="#id/shopbutton" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="350dp"
android:layout_height="80dp"
android:layout_marginTop="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.508"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/cooltext348859404219232" />
<Button
android:id="#+id/shopbutton"
style="#style/Widget.AppCompat.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:hapticFeedbackEnabled="false"
android:onClick="toShop"
android:text="Shop"
android:drawableLeft="#drawable/ic_store"
android:textColor="#color/colorWhite"
android:paddingLeft="5dp"
android:background="#drawable/button_neutral_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<ImageView
android:id="#+id/onOption"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="16dp"
android:layout_marginBottom="16dp"
android:onClick="toOption"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#drawable/optionen" />
</androidx.constraintlayout.widget.ConstraintLayout>
Output png
So below is my xml for the activity:
I have migrated to androidx from support libraries.
Is there a way to achieve 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">
<AutoCompleteTextView
android:id="#+id/partyname"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#drawable/rounded_edittext"
android:layout_marginBottom="8dp"
android:layout_marginEnd="5dp"
android:layout_marginStart="5dp"
android:hint="#string/firm_name"
android:padding="5dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<LinearLayout
android:id="#+id/billform"
android:layout_marginTop="5dp"
android:layout_marginRight="5dp"
android:layout_marginEnd="5dp"
android:layout_marginStart="5dp"
android:layout_marginLeft="5dp"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:background="#drawable/rounded_buttons"
app:layout_constraintTop_toBottomOf="#id/partyname">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<AutoCompleteTextView
android:id="#+id/identifier"
android:layout_height="50dp"
android:layout_width="0dp"
android:padding="5dp"
android:layout_marginEnd="8dp"
android:textSize="16sp"
android:textAllCaps="true"
android:hint="#string/code_article"
android:background="#drawable/rounded_edittext"
android:layout_marginRight="8dp"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/add"
android:layout_toStartOf="#+id/add" />
<Button
android:id="#+id/add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rounded_buttons"
android:text="#string/add"
android:textAllCaps="true"
android:textSize="18sp"
android:layout_centerVertical="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true" />
</RelativeLayout>
</LinearLayout>
<ListView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#id/billform"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
For god knows why, the listView is not available in the preview.
It works when the root is linear layout. I tried creating a linear layout within the constraint layout, it didn't work
android:layout_height="0dp"
That might be your problem or if you are talking about not seeing items then it might be a bug in android studio because I tried adding another ConstraintLayout without getting any luck.
This answer might help
I wanted to add my answer as a comment but StackOverflow won't let me.
Try to remove the nested layouts.
Try the below 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">
<AutoCompleteTextView
android:id="#+id/partyname"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="24dp"
android:padding="5dp"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="0dp" />
<AutoCompleteTextView
android:id="#+id/identifier"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_toStartOf="#+id/add"
android:layout_toLeftOf="#+id/add"
android:padding="5dp"
android:textAllCaps="true"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/partyname" />
<Button
android:id="#+id/add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="ADD"
android:textAllCaps="true"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/identifier" />
<ListView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/add" />
change the width from match_parent to 0dp and you can create left and right constraint.The following will work for you.
<ListView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/billform"
app:layout_constraintBottom_toBottomOf="parent"/>
Update
<?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"
xmlns:tools="http://schemas.android.com/tools">
<AutoCompleteTextView
android:id="#+id/partyname"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#drawable/rounded_edittext"
android:layout_marginBottom="8dp"
android:layout_marginEnd="5dp"
android:layout_marginStart="5dp"
android:hint="#string/firm_name"
android:padding="5dp"
app:layout_constraintTop_toTopOf="parent"/>
<AutoCompleteTextView
android:id="#+id/identifier"
android:layout_height="50dp"
android:layout_width="0dp"
android:padding="5dp"
android:textSize="16sp"
android:textAllCaps="true"
android:hint="#string/code_article"
android:background="#drawable/rounded_edittext"
android:layout_toStartOf="#+id/add"
app:layout_constraintEnd_toStartOf="#+id/add"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/partyname"/>
<Button
android:id="#+id/add"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/rounded_buttons"
android:text="#string/add"
android:textAllCaps="true"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/partyname"/>
<ListView
android:layout_width="0dp"
android:layout_height="0dp"
tools:listitem="Add items here"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/add"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
I am struggling with how to use the GUI to make a constraint layout. I have watched and done tutorials, but applying them I am stuck. Any suggestions how to make my screen shot look as it is with constraints?
Here is what I have so far implemented via GUI:
<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/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.udacity.sandwichclub.DetailActivity">
<ImageView
android:id="#+id/image_iv"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_marginBottom="8dp"
android:adjustViewBounds="true"
android:contentDescription="#string/sandwich_picture_content_description"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="#+id/description_tv"
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.031" />
<TextView
android:id="#+id/origin_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/detail_error_message"
app:layout_constraintBaseline_toBaselineOf="#+id/origin_label_tv"
app:layout_constraintEnd_toStartOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/origin_label_tv"
android:layout_width="95dp"
android:layout_height="22dp"
android:labelFor="#id/origin_tv"
android:text="#string/detail_place_of_origin_label"
android:textStyle="bold"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="304dp" />
<TextView
android:id="#+id/also_known_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/detail_error_message"
app:layout_constraintBaseline_toBaselineOf="#+id/also_knwon_label_tv"
app:layout_constraintEnd_toStartOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/also_knwon_label_tv"
android:layout_width="91dp"
android:layout_height="16dp"
android:labelFor="#id/also_known_tv"
android:text="#string/detail_also_known_as_label"
android:textStyle="bold"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="414dp" />
<TextView
android:id="#+id/ingredients_tv"
android:layout_width="395dp"
android:layout_height="72dp"
android:text="#string/detail_error_message"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="545dp" />
<TextView
android:id="#+id/detail_ingredients_label_tv"
android:layout_width="84dp"
android:layout_height="18dp"
android:labelFor="#id/ingredients_tv"
android:text="#string/detail_ingredients_label"
android:textStyle="bold"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="519dp" />
<TextView
android:id="#+id/description_tv"
android:layout_width="395dp"
android:layout_height="72dp"
android:text="#string/detail_error_message"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="651dp" />
<TextView
android:id="#+id/detail_description_label_tv"
android:layout_width="85dp"
android:layout_height="18dp"
android:labelFor="#id/description_tv"
android:text="#string/detail_description_label"
android:textStyle="bold"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="625dp" />
Problem Short Version:
I want to make my CardView and RecyclerView background transparent, so
the fragment/activity background should become visible.
Explained:
I have an activity A with background image and fragment B is replaced on its Framelayout , in Fragment B i have recyclerView which with CardView now problem is i want to make every background transparent so only CardView will be visible with actual background of activity
RecyclerView look like this(These white background should be transparent) :
Code
Activity(A)
<?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:id="#+id/fl"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:backgroundTint="#android:color/transparent"/>
Fragment(B) RecyclerView
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:backgroundTint="#android:color/transparent"
android:background="#android:color/transparent">
<android.support.v7.widget.RecyclerView
android:id="#+id/rv"
tools:listitem="#layout/layout_video_item"
android:backgroundTint="#android:color/transparent"
android:background="#android:color/transparent"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<TextView
android:id="#+id/tv_not_found"
android:text="No Media Found Yet"
android:layout_gravity="center"
android:gravity="center"
android:visibility="gone"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.CoordinatorLayout>
CardView / Item layout
<?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="wrap_content"
android:layout_marginEnd="3dp"
android:layout_marginStart="3dp"
android:layout_marginTop="3dp"
android:background="#android:color/transparent">
<android.support.v7.widget.CardView
style="#style/CardView.Light"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardUseCompatPadding="true"
android:background="#android:color/transparent"
android:backgroundTint="#android:color/transparent"
app:cardCornerRadius="5dp"
android:padding="0dp"
app:cardElevation="0dp"
tools:ignore="ContentDescription">
<android.support.constraint.ConstraintLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:background="#color/colorAccent">
<ImageView
android:id="#+id/media_image"
android:layout_width="100dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#android:color/darker_gray" />
<ImageButton
android:id="#+id/ib_delete"
android:layout_width="30dp"
android:layout_height="40dp"
android:background="#00FFFFFF"
android:padding="12dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:srcCompat="#drawable/ic_delete_white_24dp" />
<ImageButton
android:id="#+id/share_button"
android:layout_width="30dp"
android:layout_height="40dp"
android:background="#00FFFFFF"
android:padding="12dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/ib_delete"
app:srcCompat="#drawable/ic_share_white_24dp" />
<TextView
android:id="#+id/tv_video_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:ellipsize="marquee"
android:singleLine="true"
android:text="Title Test"
android:textAppearance="#style/TextAppearance.AppCompat.Large.Inverse"
android:textColor="#color/colorPrimaryText"
app:layout_constraintEnd_toStartOf="#+id/tv_ribbon"
app:layout_constraintStart_toEndOf="#+id/media_image"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_ribbon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/holo_red_light"
android:ellipsize="marquee"
android:fontFamily="monospace"
android:padding="3dp"
android:singleLine="true"
android:text="New"
android:textColor="#color/colorIcons"
android:textSize="14sp"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_path"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="5dp"
android:ellipsize="marquee"
android:singleLine="true"
android:text="subtitle test"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/media_image"
app:layout_constraintTop_toBottomOf="#+id/tv_video_name" />
<ImageView
android:id="#+id/iv_is_audio"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginBottom="8dp"
android:layout_marginStart="5dp"
android:layout_marginTop="8dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/media_image"
app:layout_constraintTop_toBottomOf="#+id/tv_duration"
app:srcCompat="#drawable/ic_settings_voice_black_24dp" />
<ImageView
android:id="#+id/iv_is_video"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginStart="5dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="#+id/iv_is_audio"
app:layout_constraintStart_toEndOf="#+id/iv_is_audio"
app:layout_constraintTop_toTopOf="#+id/iv_is_audio"
app:srcCompat="#drawable/ic_theaters" />
<ImageView
android:id="#+id/iv_is_gif"
android:layout_width="35dp"
android:layout_height="30dp"
android:layout_marginStart="5dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="#+id/iv_is_video"
app:layout_constraintStart_toEndOf="#+id/iv_is_video"
app:layout_constraintTop_toTopOf="#+id/iv_is_video"
app:srcCompat="#drawable/ic_gif" />
<TextView
android:id="#+id/tv_duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginTop="8dp"
android:text="0:00"
app:layout_constraintStart_toEndOf="#+id/media_image"
app:layout_constraintTop_toBottomOf="#+id/tv_path" />
<TextView
android:id="#+id/tv_size"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="0 MB"
app:layout_constraintBottom_toBottomOf="#+id/tv_duration"
app:layout_constraintStart_toEndOf="#+id/tv_duration"
app:layout_constraintTop_toTopOf="#+id/tv_duration" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
Reason for asking question:
I know there are lots of SO question out there to get this same task done but my requirements are little different and reason for asking this question is nothing is working for me.
Expectation
Set CardView Background to app:cardBackgroundColor="#00ffffff"
I'm new to Android and I'm building small app in order to get the basics. I'm facing a dumb issue which, apparently, I can't seem to be able to fix.
I'm building a screen that looks like this on the designer
However, when starting the emulator, the design looks like this:
Can you please advice me what I'm doing wrong? My xml file is as follows:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.todorivanov.mytaskmanager.MainActivity">
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="16dp"
android:text="Buy"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteY="27dp" />
<Button
android:id="#+id/btnAdd"
android:layout_width="120dp"
android:layout_height="49dp"
android:text="Add task"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteY="27dp" />
<Button
android:id="#+id/btnOld"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Unfinished"
tools:layout_editor_absoluteY="27dp"
android:layout_marginLeft="16dp"
app:layout_constraintLeft_toLeftOf="parent" />
<CalendarView
android:id="#+id/calendarView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:layout_editor_absoluteY="107dp"
tools:layout_editor_absoluteX="18dp" />
<ImageView
android:id="#+id/imageAdd"
android:layout_width="314dp"
android:layout_height="358dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.421"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.497"
app:srcCompat="#android:color/background_light" />
<ImageButton
android:id="#+id/imgBtnClose"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
app:srcCompat="#android:drawable/btn_dialog"
tools:layout_editor_absoluteX="312dp"
tools:layout_editor_absoluteY="106dp" />
Thanks a lot!
you need to use relative or Linear Layout to achieve what you are looking for. Following is the code for RelativeLayout
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.todorivanov.mytaskmanager.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation = "horizontal"
android:id = "#+id/buttons">
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="16dp"
android:text="Buy"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteY="27dp" />
<Button
android:id="#+id/btnAdd"
android:layout_width="120dp"
android:layout_height="49dp"
android:text="Add task"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteY="27dp" />
<Button
android:id="#+id/btnOld"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Unfinished"
tools:layout_editor_absoluteY="27dp"
android:layout_marginLeft="16dp"
app:layout_constraintLeft_toLeftOf="parent" />
</LinearLayout>
<CalendarView
android:id="#+id/calendarView"
android:layout_below = "#+id/buttons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:layout_editor_absoluteY="107dp"
tools:layout_editor_absoluteX="18dp" />
<ImageView
android:id="#+id/imageAdd"
android:layout_width="314dp"
android:layout_height="358dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.421"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.497"
app:srcCompat="#android:color/background_light" />
<ImageButton
android:id="#+id/imgBtnClose"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
app:srcCompat="#android:drawable/btn_dialog"
tools:layout_editor_absoluteX="312dp"
tools:layout_editor_absoluteY="106dp" />
</RelativeLayout>
close any other tags ..
now you'll get the calenderView under the buttons just like the editor preview but you may need to adjust the padding/margin according to your requirements.
Hope this helps..
use Relative layout and code like this
Edited with suggestion of performance as said by Rotwang
<?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">
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Buy"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteY="27dp" />
<Button
android:id="#+id/btnAdd"
android:layout_width="wrap_content"
android:layout_height="49dp"
android:text="Add task"
android:layout_centerHorizontal="true"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteY="27dp" />
<Button
android:id="#+id/btnOld"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Unfinished"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
tools:layout_editor_absoluteY="27dp"
android:layout_marginLeft="16dp"
app:layout_constraintLeft_toLeftOf="parent" />
<CalendarView
android:id="#+id/calendarView"
android:layout_width="wrap_content"
android:layout_below="#+id/btnOld"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
tools:layout_editor_absoluteY="107dp"
tools:layout_editor_absoluteX="18dp" />
<ImageView
android:id="#+id/imageAdd"
android:layout_width="314dp"
android:layout_height="358dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.421"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.497"
app:srcCompat="#android:color/background_light" />
<ImageButton
android:id="#+id/imgBtnClose"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
app:srcCompat="#android:drawable/btn_dialog"
tools:layout_editor_absoluteX="312dp"
tools:layout_editor_absoluteY="106dp" />
</RelativeLayout>
output