Home » Android » Changing visibility in recyclerView children

Changing visibility in recyclerView children

Posted by: admin November 1, 2017 Leave a comment

Questions:

I have a little problem for android developers here. As it’s showed in the second image, i want to have a circular (perfect circular) button near the EditText. To achive this, i used a separate layout (first image), in which i define the button with the shape (look below). Since i want to have a perfect circle, i put this layout in a Constraint layout, in order to maintain proportion.
Now, since this way doesn’t work: how can i achieve a perfect circle?
Consider that, i cannot put in the shape layout, since the dimensions of this button can change for different activities.

That’s the shape file, set with android:shape=”oval” (ring doesn’t work fine):

<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">

<solid
    android:color="#666666"/>

This is the button layout:

<?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/ll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">

<Button
    android:id="@+id/circle_button"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:text="dadada"
    android:background="@drawable/ring_shape" />

</LinearLayout>

And this is the layout in which the button is used. Consider that this is a single row for a recyclerView:

<?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/category_row"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:orientation="horizontal"
android:weightSum="6">

<android.support.constraint.ConstraintLayout
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1">

    <include
        layout="@layout/circle_button_layout"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintDimensionRatio="h,1:1" />

</android.support.constraint.ConstraintLayout>

<EditText
    android:id="@+id/category_name_row"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:layout_marginLeft="10dp"
    android:layout_marginStart="10dp"
    android:inputType="textAutoCorrect"
    android:background="@android:color/transparent"
    android:layout_weight="3.4"
    android:textColor="@color/category_text"
    android:textSize="@dimen/payment_text"/>

<ImageButton
    android:id="@+id/category_btn_confirm_change"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_btn_done"
    android:tint="@color/hint_text"
    android:layout_gravity="center_vertical"
    android:background="@color/transparent"
    android:layout_marginRight="15dp"
    android:layout_marginEnd="15dp"
    android:layout_weight="0.8"/>

<ImageButton
    android:id="@+id/category_btn_delete"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_btn_delete"
    android:tint="@color/hint_text"
    android:layout_gravity="center_vertical"
    android:background="@color/transparent"
    android:layout_marginRight="15dp"
    android:layout_marginEnd="15dp"
    android:layout_weight="0.8"/>

 </LinearLayout>

Some images just to be clear:

Single button layout

Single button layout

Row layout

Row layout

Answers:

You need to change two little things in your layouts:

  1. Get rid of the LinearLayout wrapper around your Button:

    <?xml version="1.0" encoding="utf-8"?>
    <Button xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/circle_button"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="dadada"
        android:background="@drawable/ring_shape" />
    
  2. Add android:layout_width="0dp" and android:layout_height="0dp" to your <include/> element:

    <include
        android:layout_width="0dp"
        android:layout_height="0dp"
        layout="@layout/circle_button_layout"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintDimensionRatio="h,1:1" />
    

enter image description here

Questions:
Answers:

You could use square layout. Then inside that put that shape in row layout.
Use this square layout from github

Questions:
Answers:

Try this in the shape file.

<size
    android:width="36dp"
    android:height="36dp"/>

<solid android:color="#666666" />