Android, how to create a view like this in a circular form having image view and text

Question

I want to create the same representation that I posted in the screenshot, in the form of a layout circle with one image representation with some background color and one text representation just below the image with a white background, and the parent set should be in blue, as shown in the picture, I I tried, but could not get the result. I will send my code below, please guide me? my required view

and I get this output with the layout I created

my layout code

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/parent_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#202230" android:orientation="vertical" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <RelativeLayout android:id="@+id/circle_layout" android:layout_width="90dp" android:layout_height="90dp" android:layout_marginLeft="10dp" android:layout_marginTop="10dp" android:background="@drawable/whitecircle" > <RelativeLayout android:id="@+id/circle_layoutinner" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_above="@+id/rating_viewtv" android:layout_alignParentTop="true" android:background="@drawable/circletwo" android:layout_marginTop="1dp" android:layout_centerHorizontal="true" > <TextView android:id="@+id/ratingcup_viewtv_fonts" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:text="M" android:gravity="center" android:textAppearance="?android:attr/textAppearanceLarge" android:textColor="@android:color/holo_purple" /> </RelativeLayout> <View android:id="@+id/seprater_viewtv" android:layout_width="match_parent" android:layout_height="1dp" android:layout_marginLeft="5dp" android:layout_marginRight="5dp" android:layout_above="@+id/rating_viewtv" android:background="#2b2c3a" /> <TextView android:id="@+id/rating_viewtv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="3dp" android:text="4.5" android:textColor="@android:color/holo_purple" /> </RelativeLayout> </LinearLayout> </LinearLayout> </LinearLayout> and my whitecircle.xml is <shape xmlns:android="http://schemas.android.com/apk/res/android" android:innerRadius="0dp" android:shape="ring" android:thicknessRatio="2" android:useLevel="false"> <solid android:color="@color/white" /> </shape> and my circletwo.xml is <shape xmlns:android="http://schemas.android.com/apk/res/android" android:innerRadius="0dp" android:shape="ring" android:thicknessRatio="2" android:useLevel="false"> <solid android:color="#ff9546" /> </shape> 

Answer 1

Modify your circle_layoutinner RelativeLayout declaration to indicate the height in dp instead of wrap_content and get rid of marginTop:

 <RelativeLayout android:id="@+id/circle_layoutinner" android:layout_width="match_parent" android:layout_height="70dp" android:layout_above="@+id/rating_viewtv" android:layout_alignParentTop="true" android:background="@drawable/circle_inset_drawable" android:layout_centerHorizontal="true" > 

define circle_inset_drawable.xml to offset the orange circle by the correct amount:

 <inset xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/circletwo" android:insetTop="20dp" android:visible="true" /> 

insetTop should be circle_layout height minus circle_layoutinner height

You can set the color of the drawn code this way. You just need to start with your layout object, and then continue to wade through the objects until you get to the one that allows you to set the color:

 RelativeLayout rl = (RelativeLayout)findViewById(R.id.circle_layoutinner); InsetDrawable id = (InsetDrawable)rl.getBackground(); GradientDrawable gd = (GradientDrawable)id.getDrawable(); // API 19+ only! gd.setColor(0xffff0000); // set to red 

Or you can create an InsetDrawable in the code as follows:

 RelativeLayout rl = (RelativeLayout)findViewById(R.id.circle_layoutinner); GradientDrawable gd = (GradientDrawable)getResources().getDrawable( R.drawable.circletwo ); gd.setColor(0xffff0000); // set to red int dpInPixels = (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, getResources().getDisplayMetrics()); InsetDrawable id = new InsetDrawable(gd, 0, dpInPixels, 0, 0); rl.setBackground(id); 

Answer 2

Try creating an image with the expected orange n white.

set it as background for LL or RL

Just use ImageView and Textview with the appropriate size to display the information.