Android overlapping profile photos view











up vote
0
down vote

favorite












I am trying to implement this view.



enter image description here



I tried it this way.



<LinearLayout
android:id="@+id/images"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:layout_marginTop="10dp">

<com.mikhaellopez.circularimageview.CircularImageView
android:id="@+id/image1"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="@drawable/profile_default"
app:civ_border_width="1dp"
app:civ_border_color="@color/white_two"
app:civ_shadow="false"/>

<com.mikhaellopez.circularimageview.CircularImageView
android:id="@+id/image2"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="@drawable/profile_default"
android:layout_marginStart="-10dp"
app:civ_border_width="1dp"
app:civ_border_color="@color/white"
app:civ_shadow="false"/>

</LinearLayout>


But the second picture stays above the first and I want it the other way around. I would add the images programmatically so I don't think I could use RelativeLayout. Is this possible or is there an existing Android library for this already?










share|improve this question
























  • Have you tried with FrameLayout?
    – Salman Khan
    Nov 22 at 9:21










  • put your code to add ImageView .
    – Chetan Joshi
    Nov 22 at 9:27










  • user RelativeLayout and marginStart or end -2dp
    – Shahriyar Aghajani
    Nov 22 at 9:41






  • 1




    hopefully this helps you github.com/KartikPrajapati/StackImageView
    – Zahoor Saleem
    Nov 25 at 16:10










  • @ZahoorSaleem this is exactly what i was looking for
    – Rio Marie A. Callos
    Nov 26 at 4:39















up vote
0
down vote

favorite












I am trying to implement this view.



enter image description here



I tried it this way.



<LinearLayout
android:id="@+id/images"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:layout_marginTop="10dp">

<com.mikhaellopez.circularimageview.CircularImageView
android:id="@+id/image1"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="@drawable/profile_default"
app:civ_border_width="1dp"
app:civ_border_color="@color/white_two"
app:civ_shadow="false"/>

<com.mikhaellopez.circularimageview.CircularImageView
android:id="@+id/image2"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="@drawable/profile_default"
android:layout_marginStart="-10dp"
app:civ_border_width="1dp"
app:civ_border_color="@color/white"
app:civ_shadow="false"/>

</LinearLayout>


But the second picture stays above the first and I want it the other way around. I would add the images programmatically so I don't think I could use RelativeLayout. Is this possible or is there an existing Android library for this already?










share|improve this question
























  • Have you tried with FrameLayout?
    – Salman Khan
    Nov 22 at 9:21










  • put your code to add ImageView .
    – Chetan Joshi
    Nov 22 at 9:27










  • user RelativeLayout and marginStart or end -2dp
    – Shahriyar Aghajani
    Nov 22 at 9:41






  • 1




    hopefully this helps you github.com/KartikPrajapati/StackImageView
    – Zahoor Saleem
    Nov 25 at 16:10










  • @ZahoorSaleem this is exactly what i was looking for
    – Rio Marie A. Callos
    Nov 26 at 4:39













up vote
0
down vote

favorite









up vote
0
down vote

favorite











I am trying to implement this view.



enter image description here



I tried it this way.



<LinearLayout
android:id="@+id/images"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:layout_marginTop="10dp">

<com.mikhaellopez.circularimageview.CircularImageView
android:id="@+id/image1"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="@drawable/profile_default"
app:civ_border_width="1dp"
app:civ_border_color="@color/white_two"
app:civ_shadow="false"/>

<com.mikhaellopez.circularimageview.CircularImageView
android:id="@+id/image2"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="@drawable/profile_default"
android:layout_marginStart="-10dp"
app:civ_border_width="1dp"
app:civ_border_color="@color/white"
app:civ_shadow="false"/>

</LinearLayout>


But the second picture stays above the first and I want it the other way around. I would add the images programmatically so I don't think I could use RelativeLayout. Is this possible or is there an existing Android library for this already?










share|improve this question















I am trying to implement this view.



enter image description here



I tried it this way.



<LinearLayout
android:id="@+id/images"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:layout_marginTop="10dp">

<com.mikhaellopez.circularimageview.CircularImageView
android:id="@+id/image1"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="@drawable/profile_default"
app:civ_border_width="1dp"
app:civ_border_color="@color/white_two"
app:civ_shadow="false"/>

<com.mikhaellopez.circularimageview.CircularImageView
android:id="@+id/image2"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="@drawable/profile_default"
android:layout_marginStart="-10dp"
app:civ_border_width="1dp"
app:civ_border_color="@color/white"
app:civ_shadow="false"/>

</LinearLayout>


But the second picture stays above the first and I want it the other way around. I would add the images programmatically so I don't think I could use RelativeLayout. Is this possible or is there an existing Android library for this already?







android android-linearlayout android-imageview






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 22 at 9:24

























asked Nov 22 at 9:16









Rio Marie A. Callos

74113




74113












  • Have you tried with FrameLayout?
    – Salman Khan
    Nov 22 at 9:21










  • put your code to add ImageView .
    – Chetan Joshi
    Nov 22 at 9:27










  • user RelativeLayout and marginStart or end -2dp
    – Shahriyar Aghajani
    Nov 22 at 9:41






  • 1




    hopefully this helps you github.com/KartikPrajapati/StackImageView
    – Zahoor Saleem
    Nov 25 at 16:10










  • @ZahoorSaleem this is exactly what i was looking for
    – Rio Marie A. Callos
    Nov 26 at 4:39


















  • Have you tried with FrameLayout?
    – Salman Khan
    Nov 22 at 9:21










  • put your code to add ImageView .
    – Chetan Joshi
    Nov 22 at 9:27










  • user RelativeLayout and marginStart or end -2dp
    – Shahriyar Aghajani
    Nov 22 at 9:41






  • 1




    hopefully this helps you github.com/KartikPrajapati/StackImageView
    – Zahoor Saleem
    Nov 25 at 16:10










  • @ZahoorSaleem this is exactly what i was looking for
    – Rio Marie A. Callos
    Nov 26 at 4:39
















Have you tried with FrameLayout?
– Salman Khan
Nov 22 at 9:21




Have you tried with FrameLayout?
– Salman Khan
Nov 22 at 9:21












put your code to add ImageView .
– Chetan Joshi
Nov 22 at 9:27




put your code to add ImageView .
– Chetan Joshi
Nov 22 at 9:27












user RelativeLayout and marginStart or end -2dp
– Shahriyar Aghajani
Nov 22 at 9:41




user RelativeLayout and marginStart or end -2dp
– Shahriyar Aghajani
Nov 22 at 9:41




1




1




hopefully this helps you github.com/KartikPrajapati/StackImageView
– Zahoor Saleem
Nov 25 at 16:10




hopefully this helps you github.com/KartikPrajapati/StackImageView
– Zahoor Saleem
Nov 25 at 16:10












@ZahoorSaleem this is exactly what i was looking for
– Rio Marie A. Callos
Nov 26 at 4:39




@ZahoorSaleem this is exactly what i was looking for
– Rio Marie A. Callos
Nov 26 at 4:39












2 Answers
2






active

oldest

votes

















up vote
0
down vote













you can try using android:elevation="8dp" in your first code to made your first over the second view






share|improve this answer




























    up vote
    0
    down vote













    This is what I did to generate the images programmatically.



    enter image description here



     val circleImageView1 = CircleImageView(context)
    circleImageView1.layoutParams = LinearLayout.LayoutParams(Tools.dpToPx(40), Tools.dpToPx(40))
    circleImageView1.borderWidth = 1
    circleImageView1.borderColor = ContextCompat.getColor(context, R.color.white_two)
    circleImageView1.circleBackgroundColor = ContextCompat.getColor(context, R.color.blue)
    circleImageView1.setImageResource(R.drawable.profile_default)

    val layoutParams = LinearLayout.LayoutParams(Tools.dpToPx(40), Tools.dpToPx(40))
    layoutParams.setMargins(Tools.dpToPx(-10), 0, 0, 0)

    val circleImageView2 = CircleImageView(context)
    circleImageView2.layoutParams = layoutParams
    circleImageView2.borderWidth = 1
    circleImageView2.borderColor = ContextCompat.getColor(context, R.color.white_two)
    circleImageView2.circleBackgroundColor = ContextCompat.getColor(context, R.color.red)
    circleImageView2.setImageResource(R.drawable.profile_default)

    val circleImageView3 = CircleImageView(context)
    circleImageView3.layoutParams = layoutParams
    circleImageView3.borderWidth = 1
    circleImageView3.borderColor = ContextCompat.getColor(context, R.color.white_two)
    circleImageView3.circleBackgroundColor = ContextCompat.getColor(context, R.color.green)
    circleImageView3.setImageResource(R.drawable.profile_default)

    itemView.images.addView(circleImageView1)
    itemView.images.addView(circleImageView2)
    itemView.images.addView(circleImageView3)

    itemView.images.scaleX = -1.0f


    This works for now I just need to make sure to go through the list of images reversely since order is important.






    share|improve this answer





















      Your Answer






      StackExchange.ifUsing("editor", function () {
      StackExchange.using("externalEditor", function () {
      StackExchange.using("snippets", function () {
      StackExchange.snippets.init();
      });
      });
      }, "code-snippets");

      StackExchange.ready(function() {
      var channelOptions = {
      tags: "".split(" "),
      id: "1"
      };
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function() {
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled) {
      StackExchange.using("snippets", function() {
      createEditor();
      });
      }
      else {
      createEditor();
      }
      });

      function createEditor() {
      StackExchange.prepareEditor({
      heartbeatType: 'answer',
      convertImagesToLinks: true,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      imageUploader: {
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      },
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      });


      }
      });














      draft saved

      draft discarded


















      StackExchange.ready(
      function () {
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53427440%2fandroid-overlapping-profile-photos-view%23new-answer', 'question_page');
      }
      );

      Post as a guest















      Required, but never shown

























      2 Answers
      2






      active

      oldest

      votes








      2 Answers
      2






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes








      up vote
      0
      down vote













      you can try using android:elevation="8dp" in your first code to made your first over the second view






      share|improve this answer

























        up vote
        0
        down vote













        you can try using android:elevation="8dp" in your first code to made your first over the second view






        share|improve this answer























          up vote
          0
          down vote










          up vote
          0
          down vote









          you can try using android:elevation="8dp" in your first code to made your first over the second view






          share|improve this answer












          you can try using android:elevation="8dp" in your first code to made your first over the second view







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 22 at 9:51









          JEFF

          144




          144
























              up vote
              0
              down vote













              This is what I did to generate the images programmatically.



              enter image description here



               val circleImageView1 = CircleImageView(context)
              circleImageView1.layoutParams = LinearLayout.LayoutParams(Tools.dpToPx(40), Tools.dpToPx(40))
              circleImageView1.borderWidth = 1
              circleImageView1.borderColor = ContextCompat.getColor(context, R.color.white_two)
              circleImageView1.circleBackgroundColor = ContextCompat.getColor(context, R.color.blue)
              circleImageView1.setImageResource(R.drawable.profile_default)

              val layoutParams = LinearLayout.LayoutParams(Tools.dpToPx(40), Tools.dpToPx(40))
              layoutParams.setMargins(Tools.dpToPx(-10), 0, 0, 0)

              val circleImageView2 = CircleImageView(context)
              circleImageView2.layoutParams = layoutParams
              circleImageView2.borderWidth = 1
              circleImageView2.borderColor = ContextCompat.getColor(context, R.color.white_two)
              circleImageView2.circleBackgroundColor = ContextCompat.getColor(context, R.color.red)
              circleImageView2.setImageResource(R.drawable.profile_default)

              val circleImageView3 = CircleImageView(context)
              circleImageView3.layoutParams = layoutParams
              circleImageView3.borderWidth = 1
              circleImageView3.borderColor = ContextCompat.getColor(context, R.color.white_two)
              circleImageView3.circleBackgroundColor = ContextCompat.getColor(context, R.color.green)
              circleImageView3.setImageResource(R.drawable.profile_default)

              itemView.images.addView(circleImageView1)
              itemView.images.addView(circleImageView2)
              itemView.images.addView(circleImageView3)

              itemView.images.scaleX = -1.0f


              This works for now I just need to make sure to go through the list of images reversely since order is important.






              share|improve this answer

























                up vote
                0
                down vote













                This is what I did to generate the images programmatically.



                enter image description here



                 val circleImageView1 = CircleImageView(context)
                circleImageView1.layoutParams = LinearLayout.LayoutParams(Tools.dpToPx(40), Tools.dpToPx(40))
                circleImageView1.borderWidth = 1
                circleImageView1.borderColor = ContextCompat.getColor(context, R.color.white_two)
                circleImageView1.circleBackgroundColor = ContextCompat.getColor(context, R.color.blue)
                circleImageView1.setImageResource(R.drawable.profile_default)

                val layoutParams = LinearLayout.LayoutParams(Tools.dpToPx(40), Tools.dpToPx(40))
                layoutParams.setMargins(Tools.dpToPx(-10), 0, 0, 0)

                val circleImageView2 = CircleImageView(context)
                circleImageView2.layoutParams = layoutParams
                circleImageView2.borderWidth = 1
                circleImageView2.borderColor = ContextCompat.getColor(context, R.color.white_two)
                circleImageView2.circleBackgroundColor = ContextCompat.getColor(context, R.color.red)
                circleImageView2.setImageResource(R.drawable.profile_default)

                val circleImageView3 = CircleImageView(context)
                circleImageView3.layoutParams = layoutParams
                circleImageView3.borderWidth = 1
                circleImageView3.borderColor = ContextCompat.getColor(context, R.color.white_two)
                circleImageView3.circleBackgroundColor = ContextCompat.getColor(context, R.color.green)
                circleImageView3.setImageResource(R.drawable.profile_default)

                itemView.images.addView(circleImageView1)
                itemView.images.addView(circleImageView2)
                itemView.images.addView(circleImageView3)

                itemView.images.scaleX = -1.0f


                This works for now I just need to make sure to go through the list of images reversely since order is important.






                share|improve this answer























                  up vote
                  0
                  down vote










                  up vote
                  0
                  down vote









                  This is what I did to generate the images programmatically.



                  enter image description here



                   val circleImageView1 = CircleImageView(context)
                  circleImageView1.layoutParams = LinearLayout.LayoutParams(Tools.dpToPx(40), Tools.dpToPx(40))
                  circleImageView1.borderWidth = 1
                  circleImageView1.borderColor = ContextCompat.getColor(context, R.color.white_two)
                  circleImageView1.circleBackgroundColor = ContextCompat.getColor(context, R.color.blue)
                  circleImageView1.setImageResource(R.drawable.profile_default)

                  val layoutParams = LinearLayout.LayoutParams(Tools.dpToPx(40), Tools.dpToPx(40))
                  layoutParams.setMargins(Tools.dpToPx(-10), 0, 0, 0)

                  val circleImageView2 = CircleImageView(context)
                  circleImageView2.layoutParams = layoutParams
                  circleImageView2.borderWidth = 1
                  circleImageView2.borderColor = ContextCompat.getColor(context, R.color.white_two)
                  circleImageView2.circleBackgroundColor = ContextCompat.getColor(context, R.color.red)
                  circleImageView2.setImageResource(R.drawable.profile_default)

                  val circleImageView3 = CircleImageView(context)
                  circleImageView3.layoutParams = layoutParams
                  circleImageView3.borderWidth = 1
                  circleImageView3.borderColor = ContextCompat.getColor(context, R.color.white_two)
                  circleImageView3.circleBackgroundColor = ContextCompat.getColor(context, R.color.green)
                  circleImageView3.setImageResource(R.drawable.profile_default)

                  itemView.images.addView(circleImageView1)
                  itemView.images.addView(circleImageView2)
                  itemView.images.addView(circleImageView3)

                  itemView.images.scaleX = -1.0f


                  This works for now I just need to make sure to go through the list of images reversely since order is important.






                  share|improve this answer












                  This is what I did to generate the images programmatically.



                  enter image description here



                   val circleImageView1 = CircleImageView(context)
                  circleImageView1.layoutParams = LinearLayout.LayoutParams(Tools.dpToPx(40), Tools.dpToPx(40))
                  circleImageView1.borderWidth = 1
                  circleImageView1.borderColor = ContextCompat.getColor(context, R.color.white_two)
                  circleImageView1.circleBackgroundColor = ContextCompat.getColor(context, R.color.blue)
                  circleImageView1.setImageResource(R.drawable.profile_default)

                  val layoutParams = LinearLayout.LayoutParams(Tools.dpToPx(40), Tools.dpToPx(40))
                  layoutParams.setMargins(Tools.dpToPx(-10), 0, 0, 0)

                  val circleImageView2 = CircleImageView(context)
                  circleImageView2.layoutParams = layoutParams
                  circleImageView2.borderWidth = 1
                  circleImageView2.borderColor = ContextCompat.getColor(context, R.color.white_two)
                  circleImageView2.circleBackgroundColor = ContextCompat.getColor(context, R.color.red)
                  circleImageView2.setImageResource(R.drawable.profile_default)

                  val circleImageView3 = CircleImageView(context)
                  circleImageView3.layoutParams = layoutParams
                  circleImageView3.borderWidth = 1
                  circleImageView3.borderColor = ContextCompat.getColor(context, R.color.white_two)
                  circleImageView3.circleBackgroundColor = ContextCompat.getColor(context, R.color.green)
                  circleImageView3.setImageResource(R.drawable.profile_default)

                  itemView.images.addView(circleImageView1)
                  itemView.images.addView(circleImageView2)
                  itemView.images.addView(circleImageView3)

                  itemView.images.scaleX = -1.0f


                  This works for now I just need to make sure to go through the list of images reversely since order is important.







                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 22 at 10:13









                  Rio Marie A. Callos

                  74113




                  74113






























                      draft saved

                      draft discarded




















































                      Thanks for contributing an answer to Stack Overflow!


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.





                      Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


                      Please pay close attention to the following guidance:


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.




                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function () {
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53427440%2fandroid-overlapping-profile-photos-view%23new-answer', 'question_page');
                      }
                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      Popular posts from this blog

                      A CLEAN and SIMPLE way to add appendices to Table of Contents and bookmarks

                      Calculate evaluation metrics using cross_val_predict sklearn

                      Insert data from modal to MySQL (multiple modal on website)